/* ============================================================================
   sections/hero.css — The portal hero
   ----------------------------------------------------------------------------
   An asymmetric editorial spread, not a centred headline on a photo:

     left   oversized Cormorant display type, a gold hairline, lead, two CTAs
     right  a tall ARCHED PORTAL (Bengali cusped niche) onto the delta scene,
            traced by a hairline gold frame and captioned in micro-caps

   The delta panorama lives INSIDE the portal here rather than washing across
   the whole viewport — a framed view reads as composed; a full-bleed wash reads
   as wallpaper. The global background (background.css) is kept quiet behind it.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 86svh;   /* compacted from 100svh for a tighter page */
  display: flex;
  align-items: center;
  padding-top: clamp(6.5rem, 15vh, 9.5rem);
  padding-bottom: clamp(3rem, 7vh, 5rem);
  overflow: hidden;
}

/* Readability scrim pooling behind the type column only. */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 70% at 18% 55%, rgba(5,8,28,.72), rgba(5,8,28,.25) 55%, transparent 78%),
    linear-gradient(180deg, transparent 45%, rgba(5,8,28,.5) 100%);
}

/* ---- The spread ------------------------------------------------------
   Deliberately uneven: 1.15fr / .85fr. A 50/50 split reads as a template. */
.hero-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-copy { position: relative; z-index: 2; }

.hero .eyebrow { margin-bottom: clamp(.9rem, 2vw, 1.4rem); }

/* Cormorant carries huge internal air — set it tight and let the size do the
   talking. The em is the gold italic flourish and drops to its own line. */
.hero-title {
  margin: 0;
  line-height: .92;
  letter-spacing: -.015em;
  max-width: 15ch;
}
.hero-title em { display: block; }

/* A gold hairline that grows in under the headline. */
.hero-rule {
  height: 1px;
  width: clamp(120px, 22vw, 260px);
  margin: clamp(1.4rem, 3vw, 2.1rem) 0;
  background: linear-gradient(90deg, var(--gold-500), transparent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease) .3s;
}
.hero-rule.is-visible { transform: scaleX(1); }

.hero .lead { max-width: 46ch; margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem); line-height: 1.42; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---- Kinetic headline ------------------------------------------------
   kinetic.js splits the headline into words wrapped in .kw > .kw-i. Each inner
   span rises out from behind a mask, so the words are *revealed* rather than
   faded — the difference between "animated" and "considered". */
.kw { display: inline-block; overflow: hidden; vertical-align: bottom; }
.kw-i {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .95s var(--ease);
}
[data-kinetic].is-revealed .kw-i { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .kw-i { transform: none; transition: none; }
  .hero-rule { transform: scaleX(1); transition: none; }
}

/* ---- The arched portal ----------------------------------------------- */
.hero-portal {
  position: relative;
  justify-self: end;
  width: min(100%, 460px);
  aspect-ratio: 100 / 140;
  max-height: 74vh;
}
/* The niche: the arch mask is applied HERE, so the scene inside is cut to the
   cusped opening. The frame sits outside the mask (a masked frame would clip
   its own stroke). */
.portal-niche {
  position: absolute; inset: 0;
  -webkit-mask: url("../../img/ornaments/arch-mask.svg") center / 100% 100% no-repeat;
          mask: url("../../img/ornaments/arch-mask.svg") center / 100% 100% no-repeat;
  background: linear-gradient(180deg, var(--indigo-700), var(--indigo-950));
  overflow: hidden;
}
.portal-scene {
  position: absolute; inset: -6%;
  background:
    linear-gradient(180deg, var(--gold-300), var(--gold-500) 45%, var(--gold-700));
  -webkit-mask: url("../../img/bg/delta-scene.svg") center bottom / cover no-repeat;
          mask: url("../../img/bg/delta-scene.svg") center bottom / cover no-repeat;
  /* quieted to a faint horizon since the engraved nouka (below) leads the niche */
  opacity: .22;
  animation: portal-drift 40s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes portal-drift {
  from { transform: scale(1.03) translateX(0); }
  to   { transform: scale(1.1) translateX(-2%); }
}
/* Optional hero photo, filling the niche above the delta scene. Hidden until the
   admin sets one (an <img> with no src attribute is display:none), so the golden
   scene is the graceful default. A slow Ken-Burns keeps it alive like the scene. */
.portal-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* contain (not cover) so an admin-set photo — e.g. the product-family
     banner — is shown WHOLE inside the arch, never cropped. The niche-matching
     navy fills the letterbox so it reads as one framed plate. */
  object-fit: contain;
  background: linear-gradient(180deg, var(--indigo-800), var(--indigo-950));
  z-index: 1;
}
.portal-photo:not([src]), .portal-photo[src=""] { display: none; }
@media (prefers-reduced-motion: reduce) { .portal-photo { animation: none; } }
/* Indigo veil + a warm bloom at the horizon, so the niche has depth. Sits ABOVE
   the optional hero photo (z-index 2) so a real photo is graded into the indigo
   palette and the caption stays legible. */
/* The golden nouka riding the niche's waterline. Screen blend = only the gold
   light lands on the navy; the drop-glow is the boat's own lamp on the water. */
.portal-sampan {
  position: absolute; z-index: 1;
  left: 50%; bottom: 11%;
  width: 86%; height: auto;
  transform: translateX(-50%);
  mix-blend-mode: screen;
  opacity: .96;
  /* the engraving's pale strokes are gilded warm so it reads as gold, not moonlight */
  filter: sepia(.55) saturate(1.7) hue-rotate(-12deg) brightness(1.06)
          drop-shadow(0 10px 26px rgba(200,162,74,.3));
  animation: sampan-glide 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes sampan-glide {
  from { transform: translateX(-53%) translateY(0); }
  to   { transform: translateX(-47%) translateY(-1.2%); }
}
@media (prefers-reduced-motion: reduce) {
  .portal-sampan { animation: none; transform: translateX(-50%); }
}
/* The phone-only nouka — the engraving beneath the CTAs (portal is a faint
   backdrop there). Gilded the same way as its portal sibling. */
.hero-nouka-m {
  display: none;
  width: min(72%, 300px); height: auto;
  margin: 1.6rem auto 0;
  mix-blend-mode: screen; opacity: .85;
  filter: sepia(.55) saturate(1.7) hue-rotate(-12deg) brightness(1.06);
}
@media (max-width: 640px) {
  .hero-nouka-m { display: block; }
}

.portal-veil {
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(70% 40% at 50% 78%, rgba(201,162,75,.22), transparent 70%),
    linear-gradient(180deg, rgba(10,19,56,.55) 0%, rgba(5,8,28,.15) 45%, rgba(5,8,28,.72) 100%);
}
.portal-caption {
  position: absolute;
  left: 50%; bottom: -1.9rem;
  transform: translateX(-50%);
  font-size: .66rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-500);
  white-space: nowrap;
  opacity: .8;
}
@media (prefers-reduced-motion: reduce) { .portal-scene { animation: none; } }

/* ---- Scroll cue ------------------------------------------------------ */
.scroll-cue {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  color: var(--gold-300); font-size: .64rem; letter-spacing: .3em; text-transform: uppercase;
  z-index: 2;
}
.scroll-cue svg { width: 20px; height: 20px; animation: cue-bob 1.8s ease-in-out infinite; }
@keyframes cue-bob { 0%,100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }

/* ---- Responsive ------------------------------------------------------
   Below 900px the portal moves BEHIND the type as a tall watermark rather than
   stacking under it — a stacked portal would push the CTAs off the fold. */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-portal {
    position: absolute;
    right: -18%; top: 50%;
    transform: translateY(-50%);
    width: 74vw; max-height: none;
    opacity: .28;
    z-index: 0;
  }
  .portal-caption, .hero-portal .arch-frame { display: none; }
  .hero-title { max-width: 13ch; }
}
@media (max-width: 640px) {
  .hero { min-height: 88svh; }
  .hero-cta .btn { flex: 1 1 100%; }
  .hero .lead { max-width: 100%; }
}


/* ===== Season note — the living line under the ticker ================== */
.season-note {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .65rem var(--gutter);
  background: rgba(6,15,38,.6);
  border-top: 1px solid rgba(200,162,74,.16);
  border-bottom: 1px solid rgba(200,162,74,.16);
  font-family: var(--font-serif); font-style: italic;
  font-size: .98rem; color: var(--gold-300); text-align: center;
}
.season-note svg { width: 17px; height: 17px; color: var(--gold-500); flex: none; }