/* ============================================================
   hero-extra.css
   ------------------------------------------------------------
   Adds:
   - .hero-video  full-bleed brand-film clip on the home hero
   - .hero-scroll-text  scroll-cued "welcome / Home" overlay
   - .topbar-link-stack  small "welcome" + large "Home" nav item

   Layered on top of creative.css. Keep this file load-order
   AFTER creative.css so its tweaks win.
   ============================================================ */

/* ----- HERO VIDEO ----- */

/* Reuse the same full-bleed layer as .hero-bg, but for an actual
   <video> element. We can't just set background-image; we need
   the element to fill the stage with object-fit:cover. */
.hero-cinema .stage-1 .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Center crop on desktop; we'll tweak object-position on mobile. */
  object-position: 50% 50%;
  z-index: 1; /* sits over the .hero-bg-fallback (z-index:0) */
  /* Ken-burns–style ultra-slow zoom on top of the loop so the frame
     never feels static. Subtle: 1 → 1.04 over 18s, then back. */
  animation: heroKenBurns 22s ease-in-out infinite alternate;
  /* Promote to GPU layer — keeps the autoplay from juddering when
     scroll listeners are also firing. */
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  background: #1F1C18; /* warm near-black fallback while loading */
}

/* Poster-image fallback so the user never stares at a black box
   while sobhi-1.mp4 is still buffering. */
.hero-cinema .stage-1 .hero-bg-fallback {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 50%;
}

@keyframes heroKenBurns {
  from { transform: scale(1.00) translate3d(0, 0, 0); }
  to   { transform: scale(1.05) translate3d(0, 0, 0); }
}

/* Respect users who don't want motion. */
@media (prefers-reduced-motion: reduce) {
  .hero-cinema .stage-1 .hero-video { animation: none; }
}

/* ----- WELCOME / HOME (STAGE 2 of hero-cinema) -----
   We're reusing the original DISCOVER kinetic clip-text styling from
   creative.css — ivory background with a property image clipped INTO
   the uppercase letterforms. These overrides just tune the type for
   the longer "WELCOME" word and replace the line2 with a large script
   "Home". The base sizing for .clip-text in creative.css uses
   clamp(72px, 14vw, 220px) which is too wide for a 7-letter word
   on small viewports, so we tighten it. */
.hero-cinema .stage-2 .clip-text {
  /* Slightly smaller than the original DISCOVER so 'WELCOME' fits cleanly */
  font-size: clamp(64px, 13vw, 200px);
  letter-spacing: 0.06em;
  /* Swap to a property image with rich tonal variation so the letterforms
     read clearly. aerial-garden has good light/dark contrast through the
     trees and roof. */
  background-image: url('../images/aerial-garden.jpg');
  background-position: center 50%;
}
.hero-cinema .stage-2 .clip-text-line2 {
  /* Big italic script "Home" that contrasts the stencil uppercase above */
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 7.5vw, 110px);
  letter-spacing: 0.005em;
  line-height: 1;
  margin-top: 8px;
  color: var(--bronze, #B8956A);
  -webkit-text-fill-color: var(--bronze, #B8956A);
}

@media (max-width: 760px) {
  /* 'WELCOME' is 7 wide letters — needs to fit within ~92vw on a small phone.
     Use vw-based sizing tuned for letter count: at 390px, 12vw ≈ 47px per char
     × 7 ≈ 330px total — fits comfortably inside the viewport. */
  .hero-cinema .stage-2 .clip-text {
    font-size: clamp(40px, 12vw, 92px);
    letter-spacing: 0.03em;
    padding: 0 4vw;
  }
  .hero-cinema .stage-2 .clip-text-line2 {
    font-size: clamp(36px, 11vw, 64px);
  }
  .hero-cinema .stage-2 .clip-text-wrap { padding: 0 4vw; box-sizing: border-box; }
}

/* ----- SCRUB-BG WRITEUPS (scroll-revealed text overlays on the video) -----
   Each .scrub-bg section gets one or more .scrub-writeup elements positioned
   over the pinned video. Visibility is gated by scroll progress through the
   section, set by js/scrub-bg.js as data-active="true|false" attributes
   on each line. We deliberately stack lines centered, not strewn around,
   so the reading rhythm matches the video's slow cinematic pace. */
.scrub-bg .scrub-writeup {
  position: absolute;
  inset: 0;
  z-index: 3;            /* over .scrub-overlay (no z), under .scrub-content */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 8vw;
  pointer-events: none;
  text-align: center;
  color: var(--ivory, #FAF7F1);
}

.scrub-bg .scrub-writeup-line {
  display: block;
  max-width: 16ch;
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(36px, 5.6vw, 88px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--ivory, #FAF7F1);
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.6);
  /* hidden by default — JS toggles data-active="true" as scroll progresses */
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  /* Each .scrub-writeup-line sits in the exact same spot — they crossfade */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(28px);
}
.scrub-bg .scrub-writeup-line[data-active="true"] {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}
.scrub-bg .scrub-writeup-line .accent {
  font-family: 'Tenor Sans', 'Times New Roman', serif;
  font-style: normal;
  display: block;
  font-size: 11px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--bronze-soft, #DCC9AC);
  margin-bottom: 18px;
  padding-left: 0.5em;
}

@media (max-width: 760px) {
  .scrub-bg .scrub-writeup-line {
    font-size: clamp(28px, 8vw, 56px);
    max-width: 14ch;
  }
  .scrub-bg .scrub-writeup-line .accent {
    font-size: 10px;
    letter-spacing: 0.4em;
    margin-bottom: 12px;
  }
}

/* ----- NAV: small "welcome" + large "Home" stack ----- */
.topbar-link.topbar-link-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  padding: 0;        /* the small/large spans control their own padding */
  margin-top: -6px;  /* visually align stack baseline with siblings */
  gap: 2px;
}

.topbar-link-small {
  font-family: 'Tenor Sans', 'Times New Roman', serif;
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: lowercase;
  opacity: 0.65;
}

.topbar-link-large {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: none;
  /* color is inherited from .topbar-link (and its .is-on-dark variant) */
}

.topbar-link.topbar-link-stack:hover .topbar-link-large { color: var(--bronze); }

/* On mobile the topbar-nav is hidden entirely (see nav.css line 241).
   We don't need a mobile override for the stack. */