/* ============================================================
   HOME PAGE STYLES
   ============================================================ */

/* === Hero ===
   Text sits on the mural (client preference — a separate caption band below the image
   read as broken/awkward on mobile and Android). Legibility comes from three things
   working together instead of any one overlay trick carrying the whole job:
     1. The image itself is graded a little darker and a touch richer (still clearly
        bright, nowhere near the old nocturnal treatment).
     2. A soft, bottom-weighted dark gradient (never a lightening haze) — heaviest low,
        almost nothing across the birds' heads at the top.
     3. Denser, heavier type: the title moves from a thin 300-weight italic to a bold
        600-weight, and the subtitle moves from decorative serif to the site's own
        functional sans (Hanken Grotesk) — both have far more "ink" per glyph, so they
        hold up on a busy photo without needing a heavy outline or a solid backing.
   See DESIGN_SYSTEM.md "Homepage Hero" for the full rationale and what was tried first. */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('/src/assets/images/bg-brand.png');
  background-size: cover;
  /* Top-weighted: a plain center crop clips the crane's crown on wide viewports — both
     birds' heads sit in the top third of the square (1024×1024) source. */
  background-position: center 12%;
  /* No brightness/saturation boost — the new (Jul 2026) source image is left as close to
     its native grade as possible per client request. Prior rounds (0.88 → 1.05/1.15 → 1.3
     → 1.4) were tuned against the older, different source image and don't carry over. */
  filter: none;
  transform: scale(1.04);
  transition: transform 12s ease-out;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  /* Darkens, never lightens — a graduated grade (like burning in a photographic print),
     not a flat overlay. Nearly invisible across the top where the birds' heads are;
     builds toward the bottom where the subtitle and buttons sit. Eased back (client felt
     it was too dark) rather than fully compensating for the brighter image above — worst
     case contrast is now ~3.1:1 on the (large, AA-Large-exempt) title and ~4.7:1 on the
     subtitle; re-verified against sampled mural pixels, see DESIGN_SYSTEM.md. This is a
     deliberately thinner margin than earlier rounds, traded for the brighter/lighter look
     the client asked for. */
  background:
    /* Top band: lets the header sit directly on the mural (it's transparent until
       scrolled — see globals.css #site-header). Sized in px against the fixed
       112/120px header and gone by 260px, which is above the crane's crown, so the
       birds stay at full brightness. Strength chosen from sampled mural pixels: the
       olive wallpaper behind the nav links needs ~0.53 here to clear 4.5:1 for the
       13px links; the near-white magnolia petal at the right edge is hopeless for
       text at any tasteful strength, so the Reserve pill (which sits over it) gets
       its own solid backing below instead of this gradient carrying that case. */
    linear-gradient(to bottom, rgba(10, 8, 7, 0.66) 0, rgba(10, 8, 7, 0.5) 112px, rgba(10, 8, 7, 0.12) 190px, transparent 260px),
    radial-gradient(ellipse 62% 50% at 50% 46%, rgba(10, 8, 7, 0.14) 0%, transparent 70%),
    linear-gradient(to bottom, rgba(10, 8, 7, 0.03) 0%, rgba(10, 8, 7, 0.13) 42%, rgba(10, 8, 7, 0.2) 78%, rgba(10, 8, 7, 0.24) 100%);
  pointer-events: none;
}

/* Homepage, pre-scroll: the header is transparent over the mural (globals.css). The
   scrim gradient above carries most of the legibility; these are the per-element
   insurance pieces for the spots it can't cover at a tasteful strength. All of it
   stops applying the moment .is-scrolled adds the solid bar. */
#site-header:not(.is-scrolled) #nav-links a {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55), 0 1px 14px rgba(0, 0, 0, 0.35);
}
#site-header:not(.is-scrolled) .nav-reserve {
  /* Sits over the brightest part of the mural (a near-white magnolia petal at the
     right edge of the links row) — gold text there needs ~0.83 combined darkness to
     pass contrast, far beyond what the scrim can do without reading as a dark bar.
     A filled pill is already part of the design language, so it carries its own. */
  background: rgba(10, 8, 7, 0.7);
}
#site-header:not(.is-scrolled) .hamburger-line {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.5rem;
  padding-top: calc(var(--nav-height) + 40px);
}

.hero-label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass-light);
  /* Gold-on-gold is the one real risk here (the mural has warm mid-tones too) — sits in
     the least-darkened part of the scrim (near the top, to keep the birds' heads bright),
     so it gets a stronger shadow than the rest of the hero copy to compensate. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 16px rgba(0, 0, 0, 0.7);
  margin-bottom: 1.5rem;
  display: block;
  opacity: 0;
  animation: heroFadeUp 900ms 200ms var(--ease) forwards;
}

.hero-title {
  font-family: var(--font-display);
  /* Mobile floor untouched (still hits the 2.9rem min below ~600px); raised the
     desktop ceiling and slope so it reads bigger on wide viewports specifically
     (bumped twice on request: 7.5vw/6.6rem → 7.8vw/7.2rem → 8.1vw/7.7rem). */
  font-size: clamp(2.9rem, 8.1vw, 7.7rem);
  font-weight: 600;
  font-style: italic;
  color: var(--ivory);
  line-height: 1.05;
  margin-bottom: 1.85rem;
  text-shadow: 0 6px 28px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: heroFadeUp 900ms 400ms var(--ease) forwards;
}

.hero-sub {
  font-family: var(--font-ui);
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.7;
  color: var(--ivory);
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.6);
  /* Generous gap before the CTAs — with the title at full desktop size the
     buttons sitting close underneath read claustrophobic (client feedback). */
  margin-bottom: 3.25rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  animation: heroFadeUp 900ms 600ms var(--ease) forwards;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: heroFadeUp 900ms 800ms var(--ease) forwards;
}
/* Slimmer hero buttons — reduced vertical padding */
.hero-ctas .btn {
  padding-top: 8px;
  padding-bottom: 8px;
}
/* The scrim guarantees a dark-enough backdrop for the ghost button's normal (light
   border/text) styling to hold up here — no bespoke override needed. */
.hero-ctas .btn--ghost {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === Responsive === */
@media (max-width: 600px) {
  .hero-ctas { flex-direction: column; align-items: center; gap: 0.8rem; }
  /* Compact pills, not full-width bars (client felt the 280px versions read as
     oversized blocks over the mural). Equal fixed width keeps the stacked pair
     tidy; ~32px tall stays comfortably tappable. */
  .hero-ctas .btn {
    width: 100%;
    max-width: 220px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.12em;
    padding: 8px 20px;
  }
}