/* =============================================================================
   04-hero.css  ·  hero composition, medallion, scroll cue, countdown
   ========================================================================== */

/* Shared dark-section legibility scrim (over the living scene) */
.on-dark{ position:relative; color:var(--on-navy); }
.on-dark > .container{ position:relative; z-index:2; }

/* ---------- HERO ---------- */
.hero{
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding-block:calc(var(--header-h) + 2rem) clamp(3.5rem, 2.5rem + 5vh, 6rem);
  overflow:hidden;
}
.hero::before{
  /* Cinematic legibility grade over the REAL resort photo. Verified to clear
     WCAG AA for every hero text row (measured against the rendered photo +
     these layers): a soft global mood, a centre radial behind the title, and a
     bottom-weighted scrim where the supporting text + CTA sit — while the sun,
     sea and palms stay vivid at the edges. (See _handoff/06-REVISION-SCORECARD.) */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(64% 46% at 50% 47%, rgba(7,18,36,.34) 0%, rgba(7,18,36,0) 72%),
    linear-gradient(180deg,
      rgba(7,18,36,.20) 0%, rgba(7,18,36,.16) 16%, rgba(7,18,36,.10) 38%,
      rgba(7,18,36,.26) 52%, rgba(7,18,36,.46) 66%, rgba(7,18,36,.52) 80%, rgba(7,18,36,.66) 100%),
    linear-gradient(0deg, rgba(7,18,36,.24), rgba(7,18,36,.24));
}
.hero-inner{ position:relative; z-index:3; max-width:min(94vw,900px); display:flex; flex-direction:column; align-items:center; gap:0; }
.hero-eyebrow{ margin-bottom:.85rem; }
.hero .hero-eyebrow{ color:var(--on-navy); text-shadow:0 1px 16px rgba(8,20,38,.6); }
.hero-eyebrow::before,.hero-eyebrow::after{ /* gold tick rules flank the eyebrow — keeps the brand gold without risking AA on the text */
  content:""; display:inline-block; width:clamp(1.4rem,4vw,2.4rem); height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-200)); vertical-align:middle; margin-inline:.7rem; }
.hero-eyebrow::before{ transform:scaleX(-1); }

/* Medallion crest above the title (in flow — never collides) */
.hero-medallion{
  position:relative; width:clamp(120px, 18vmin, 208px); aspect-ratio:1; margin-bottom:clamp(.5rem, 1.6vh, 1.1rem);
}
.hero-medallion::before{ content:""; position:absolute; inset:-26%; z-index:-1;
  background:radial-gradient(circle, rgba(201,162,78,.42), rgba(201,162,78,0) 64%); filter:blur(6px); }
.hero-medallion #medallion-canvas{ width:100%; height:100%; }
.hero-title{ display:flex; flex-direction:column; align-items:center; line-height:.9; margin:0; }
.hero-title__script{
  font-family:var(--font-display); font-weight:500; font-size:var(--fs-display);
  color:var(--white); letter-spacing:var(--ls-tight); font-optical-sizing:auto;
  text-shadow:0 8px 40px rgba(8,20,38,.45);
}
.hero-title__mega{
  font-family:var(--font-head); font-weight:900; font-size:var(--fs-mega);
  color:var(--white); letter-spacing:var(--ls-mega); line-height:.9;
  /* inline-block + generous padding so the -webkit-background-clip:text paint box
     fully contains the heavy glyph ink (ascender/descender overshoot) AND the
     trailing negative letter-spacing — otherwise the last digit ("6") clips at its
     bottom-right. Negative margins cancel the padding so the layout box, vertical
     rhythm, and centering stay exactly as before. */
  display:inline-block; padding:.18em .2em .26em; margin:-.12em -.2em -.24em;
  background:linear-gradient(180deg,#ffffff 0%,#eef5fd 52%,#cfe0f2 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 10px 30px rgba(8,20,38,.4));
}
.hero-sub{
  margin-top:1.2rem; font-size:clamp(1.16rem, 1.02rem + .58vw, 1.46rem); color:var(--on-navy); font-weight:400;
  max-width:42ch; line-height:1.5; text-wrap:balance; text-shadow:0 1px 18px rgba(8,20,38,.55);
}
.hero-dates{
  margin-top:.7rem; font-family:var(--font-head); font-weight:600; letter-spacing:.02em;
  color:var(--gold-200); display:inline-flex; align-items:center; gap:.55rem; font-size:1.2rem;
  text-shadow:0 1px 14px rgba(8,20,38,.55);
}
.hero-dates__pin{ width:.5rem; height:.5rem; border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold); }
.hero-cta{ margin-top:1.6rem; display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.hero-cta__note{ font-size:1rem; color:var(--on-navy); letter-spacing:.02em; text-shadow:0 1px 12px rgba(8,20,38,.6); }

#medallion-fallback{
  position:absolute; inset:0; margin:auto; width:88%; height:88%; object-fit:contain;
  opacity:0; /* shown only if WebGL is unavailable (toggled by JS) */
  filter:drop-shadow(0 8px 30px rgba(201,162,78,.5));
}
.no-webgl #medallion-canvas{ display:none; }
.no-webgl #medallion-fallback{ opacity:.95; }

/* Foreground fronds (parallax depth layer, injected by motion.js) */
.hero-fronds{
  position:absolute; left:-4%; right:-4%; bottom:-1px; height:clamp(150px,26vw,330px);
  z-index:3; pointer-events:none; opacity:.62;
  background:url("../assets/img/frond-fg.png") bottom center / cover no-repeat;
  transform:translate3d(var(--fpx,0),var(--fpy,0),0) scale(1.06); will-change:transform;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 52%); mask-image:linear-gradient(180deg,transparent,#000 52%);
}

/* Scroll cue */
.scroll-cue{
  position:absolute; inset-block-end:1.6rem; inset-inline:50%; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--on-navy-muted); font-family:var(--font-head); font-size:.7rem;
  letter-spacing:.22em; text-transform:uppercase;
}
.scroll-cue__dot{ width:1.5rem; height:2.4rem; border:1.5px solid var(--line-on-dark-strong);
  border-radius:var(--r-pill); position:relative; }
.scroll-cue__dot::after{ content:""; position:absolute; top:.4rem; left:50%; transform:translateX(-50%);
  width:.32rem; height:.32rem; border-radius:50%; background:var(--gold-200);
  animation:scrollDot 1.8s var(--ease) infinite; }
@keyframes scrollDot{ 0%{ opacity:0; top:.4rem;} 30%{ opacity:1;} 80%{ opacity:0; top:1.4rem;} 100%{ opacity:0;} }

/* ---------- COUNTDOWN ---------- */
.countdown{ text-align:center; }
.countdown::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Deeper than the hero scrim: the real photo is only ambient atmosphere here
     (behind glass), so this keeps the gold eyebrow + sub AA over the bright image. */
  background:linear-gradient(180deg, rgba(10,28,50,.72), rgba(10,28,50,.68)); }
.countdown-inner{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.cd-clock{ display:flex; align-items:flex-start; justify-content:center; gap:clamp(.4rem,1.5vw,1rem); }
.cd-unit{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--r-md);
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
  padding:clamp(.7rem,2vw,1.3rem) clamp(.6rem,2.4vw,1.6rem); min-width:clamp(4rem,16vw,6.4rem);
  box-shadow:var(--shadow-soft);
}
.cd-num{ font-family:var(--font-head); font-weight:800; font-size:var(--fs-count);
  color:var(--white); line-height:1; font-variant-numeric:tabular-nums; }
.cd-lab{ font-family:var(--font-ui); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--on-navy-muted); }
.cd-colon{ font-family:var(--font-head); font-weight:800; font-size:var(--fs-count); color:var(--gold);
  line-height:1; align-self:center; margin-top:-.4rem; opacity:.8; animation:colon 2s steps(1) infinite; }
@keyframes colon{ 50%{ opacity:.25; } }
.cd-sub{ color:var(--on-navy-2); font-size:1.02rem; }
.cd-num.tick{ animation:tick .5s var(--ease-out); }
@keyframes tick{ 0%{ transform:translateY(-36%); opacity:.2; } 100%{ transform:translateY(0); opacity:1; } }