/* =============================================================================
   UCVRC — Progressive Enhancement Layer (enhance.css)
   Adds refined display typography, premium micro-interactions, a condensing
   translucent header, scroll-driven reveals, and cross-document view
   transitions. Everything here LAYERS ON TOP of styles.css and degrades
   gracefully: the site is fully usable with this file absent or ignored.

   Motion rules:
   - All non-essential motion is gated behind `@media (prefers-reduced-motion: no-preference)`.
   - Hover/focus states are kept (they aid usability) but kept very subtle.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Self-hosted display typeface — Source Serif 4 (SIL OFL 1.1)
   font-src 'self' is permitted by the CSP; no external requests at runtime.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/SourceSerif4-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/SourceSerif4-SemiBold.woff2") format("woff2");
}

:root {
  --display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* gentle ease-out */
  --t-fast: 150ms;
  --t-med: 220ms;
  --shadow-lift: 0 2px 6px rgba(10, 35, 66, .10), 0 12px 28px rgba(10, 35, 66, .12);
  --gold-ring: 0 0 0 3px rgba(176, 141, 87, .45);
}

/* ---------------------------------------------------------------------------
   2. Refined typography — dignified serif for display headings, sans for body
   --------------------------------------------------------------------------- */
.hero h1,
.vet-title h1,
.kiosk-header h1,
main h1,
.card h3,
.vet-bio h2,
.vet-medals h2,
.stat-num {
  font-family: var(--display);
  font-feature-settings: "liga" 1, "kern" 1;
  letter-spacing: .1px;
}

.hero h1 {
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.12;
  text-wrap: balance;
}
.vet-title h1,
main > h1,
.search-panel + * h1 {
  font-weight: 600;
  letter-spacing: -0.2px;
}
main h1 { text-wrap: balance; }
.lead { text-wrap: pretty; }

/* Slightly more generous, readable body rhythm */
.vet-bio p,
.hc-bio,
.mem-intro,
.lead { line-height: 1.6; }

/* ---------------------------------------------------------------------------
   3. Sticky, translucent (backdrop-blur) header that condenses on scroll
   --------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Slightly translucent navy with blur where supported; opaque fallback first */
  background: var(--navy);
  transition: box-shadow var(--t-med) var(--ease),
              background-color var(--t-med) var(--ease);
  view-transition-name: site-header;
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .site-header {
    background: rgba(10, 35, 66, .82);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
  }
}
/* Scrolled state: a subtle shadow only. We intentionally do NOT change the
   header height here — resizing a sticky header at the scroll threshold causes
   a layout-shift feedback loop ("bounce") on pages near that height. */
.site-header.is-scrolled {
  box-shadow: 0 6px 22px rgba(6, 18, 42, .35);
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .header-inner { transition: none; }
}

/* The brand star gets a subtle hover pulse */
.brand-star { transition: transform var(--t-med) var(--ease); }
.brand:hover .brand-star { transform: rotate(-8deg) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .brand-star { transition: none; }
  .brand:hover .brand-star { transform: none; }
}

/* ---------------------------------------------------------------------------
   4. Premium micro-interactions
   --------------------------------------------------------------------------- */

/* Cards: smooth lift + shadow + gold border (extends the base :hover) */
.card,
.stat,
.honoree-card {
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
  will-change: transform;
}
.card:hover,
.stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--gold);
}
.honoree-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
@media (prefers-reduced-motion: reduce) {
  .card, .stat, .honoree-card { transition: border-color var(--t-fast) linear; }
  .card:hover, .stat:hover, .honoree-card:hover { transform: none; }
}

/* Buttons: subtle depth + active press */
button, .btn-primary, .btn-secondary, .btn-tiny, .btn-danger {
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
button:hover, .btn-primary:hover {
  box-shadow: 0 3px 10px rgba(10, 35, 66, .22);
}
.btn-secondary:hover, .btn-tiny:hover {
  box-shadow: 0 2px 8px rgba(10, 35, 66, .10);
}
button:active, .btn-primary:active, .btn-secondary:active,
.btn-tiny:active, .btn-danger:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  button, .btn-primary, .btn-secondary, .btn-tiny, .btn-danger { transition: background-color var(--t-fast) linear; }
  button:active, .btn-primary:active, .btn-secondary:active,
  .btn-tiny:active, .btn-danger:active { transform: none; }
}

/* Animated gold underline for in-content / nav links */
.site-nav a {
  position: relative;
  padding-bottom: 2px;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-med) var(--ease);
}
.site-nav a:hover::after,
.site-nav a.active::after { transform: scaleX(1); }
.site-nav a:hover { text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .site-nav a::after { transition: none; }
}

/* Content links (in bios, leads, sources) get a refined underline */
.vet-bio a, .lead a, .mem-intro a, .vet-source a, .crumbs a {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--t-med) var(--ease);
  text-decoration: none;
}
.vet-bio a:hover, .lead a:hover, .mem-intro a:hover,
.vet-source a:hover, .crumbs a:hover { background-size: 100% 1.5px; }
@media (prefers-reduced-motion: reduce) {
  .vet-bio a, .lead a, .mem-intro a, .vet-source a, .crumbs a { transition: none; }
}

/* Table rows: gentle tint sweep on hover */
table.results tbody tr { transition: background-color var(--t-fast) var(--ease); }
table.results tbody tr:hover td { background: #f4f7fc; }

/* Filter chips lift slightly */
.chip { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.chip:hover { box-shadow: 0 2px 8px rgba(10, 35, 66, .12); }
@media (prefers-reduced-motion: reduce) { .chip { transition: none; } }

/* ---------------------------------------------------------------------------
   5. Focus-visible — consistent gold ring for keyboard users
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-tiny:focus-visible,
.btn-danger:focus-visible,
.chip:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--gold-ring);
  border-radius: 6px;
}
/* Header sits on navy — make the ring readable there too */
.site-header a:focus-visible,
.site-header button:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 0 0 0 6px rgba(176, 141, 87, .55);
}

/* ---------------------------------------------------------------------------
   6. Scroll-driven reveals (native CSS, no JS, no IntersectionObserver)
   Cards / rows / honoree tiles gently fade + rise as they enter the viewport.
   Only applied where the feature AND motion preference allow it.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .cards > .card,
    .honoree-grid > .honoree-card,
    .stat-row > .stat,
    .vet-detail,
    .vet-insignia,
    .vet-medals,
    table.results tbody tr {
      animation: ucvrc-rise both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    /* Table rows are subtle and quick to avoid a janky long list */
    table.results tbody tr { animation-range: entry 0% entry 30%; }

    @keyframes ucvrc-rise {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}

/* ---------------------------------------------------------------------------
   7. Animated count-up stat (home hero) — driven by enhance.js.
   The real number is always in the DOM (server-rendered) so it works with
   JS off and under reduced-motion; JS only animates toward it.
   --------------------------------------------------------------------------- */
.countup { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   8. Image lightbox (veteran / honoree photos)
   --------------------------------------------------------------------------- */
.vet-photo img,
.hc-photo,
.honoree-card .hc-photo {
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.lightbox-enabled .vet-photo img,
.lightbox-enabled .hc-photo {
  cursor: zoom-in;
}
.lightbox-enabled .vet-photo img:hover,
.lightbox-enabled .hc-photo:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lift);
}
@media (prefers-reduced-motion: reduce) {
  .vet-photo img, .hc-photo { transition: none; }
  .lightbox-enabled .vet-photo img:hover, .lightbox-enabled .hc-photo:hover { transform: none; }
}

.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 18, 42, .86);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.lb-overlay.is-open { opacity: 1; }
.lb-overlay img {
  max-width: min(92vw, 1100px);
  max-height: 86vh;
  width: auto; height: auto;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
  border: 1px solid rgba(176, 141, 87, .5);
  transform: scale(.96);
  transition: transform var(--t-med) var(--ease);
}
.lb-overlay.is-open img { transform: scale(1); }
.lb-caption {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  text-align: center;
  color: #e7d3a8;
  font-size: 14px;
  padding: 0 24px;
}
.lb-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  cursor: pointer;
}
.lb-close:hover { background: rgba(255, 255, 255, .2); }
@media (prefers-reduced-motion: reduce) {
  .lb-overlay, .lb-overlay img { transition: none; }
  .lb-overlay img { transform: none; }
}

/* ---------------------------------------------------------------------------
   9. Back-to-top affordance — injected by enhance.js
   --------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy);
  color: #fff;
  border: 1px solid rgba(176, 141, 87, .6);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(6, 18, 42, .35);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(.9);
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.to-top:hover { background: var(--navy-2); }
.to-top svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity var(--t-fast) linear; transform: none; }
  .to-top.is-visible { transform: none; }
}
@media print { .to-top, .lb-overlay { display: none !important; } }

/* ---------------------------------------------------------------------------
   10. Cross-document View Transitions (MPA) — smooth, app-like navigation
   Opt-in via @view-transition; browsers without support just navigate normally.
   --------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 260ms;
    animation-timing-function: var(--ease);
  }
  /* Crossfade the page body; keep the header steady (named above) so it feels
     like a persistent chrome rather than a full reload. */
  ::view-transition-group(site-header) { animation-duration: 200ms; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}