/* ─── Hero Section ──────────────────────────────────────────────────────────── */

.hero-section {
  position: relative;
  height: 500vh;
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #0b1a2e;
}

/* ─── Cinematic scene image layers ──────────────────────────────────────────── */

.hero-scene-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  will-change: opacity, transform;
  overflow: hidden;
}

.hero-scene-img:first-child {
  opacity: 1;
}

.hero-scene-img img,
.hero-scene-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* ─── Dark overlay for text legibility ──────────────────────────────────────── */

.hero-text-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.7)  0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(0, 0, 0, 0.1) 80%
  );
  pointer-events: none;
}

/* ─── Text Layer ─────────────────────────────────────────────────────────────── */

.hero-text-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.hero-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: max(64px, 8vw);
  /* One measure for all four scenes. Was 52vw, which left a 560px column —
     fine for the three short slides, but the finale carries the company
     paragraph and stacked it into a narrow ragged block. Client 2026-08-12
     asked for the four to read as one set, so the width is shared. */
  padding-right: max(40px, 26vw);
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

/* First scene is visible before GSAP fires; .is-active is a JS-controllable
   override (defensive: makes the no-JS / partial-load state correct on its own). */
.hero-scene.is-active,
.hero-scene:first-of-type {
  opacity: 1;
  transform: translateY(0);
}

.hero-scene.scene-cta {
  pointer-events: auto;
}

/* ─── Scene typography ───────────────────────────────────────────────────────── */

.hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: var(--space-sm);
}

.hero-headline {
  /* Original size, restored 2026-08-12: "chaaro page wale ke heading wali line
     sahi thi pehle wali". It was briefly stepped down while the finale was
     being fitted — that was the wrong lever. Do not resize this. */
  font-size: clamp(36px, 5.5vw, 76px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.08;
  max-width: 600px;
  letter-spacing: -0.02em;
}

.hero-subhead {
  /* Original 22px size, shared by all four scenes. The finale briefly carried
     its own 17px, which is what the client saw as "koi bada koi chhota" —
     every scene reads from this one rule now, so they cannot diverge.
     Only the MEASURE is wider than the original 560px: the finale's company
     paragraph stacked into a narrow ragged column at that width. */
  font-size: clamp(14px, 1.8vw, 22px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  margin-top: var(--space-sm);
  letter-spacing: 0.01em;
  max-width: 800px;
  line-height: 1.55;
}

.hero-cta-btn {
  display: inline-block;
  margin-top: var(--space-md);
  padding: 14px 40px;
  background: var(--yellow);
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: opacity 120ms ease, transform 120ms ease;
  cursor: pointer;
}

.hero-cta-btn:hover {
  opacity: 0.88;
  transform: translateY(-2px);
}

/* ─── Scroll hint ─────────────────────────────────────────────────────────────── */

.scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}

.scroll-hint-chevron {
  width: 18px;
  height: 18px;
  border-right: 2px solid rgba(255, 255, 255, 0.35);
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
  transform: rotate(45deg);
  animation: chevronBounce 1.8s ease-in-out infinite;
}

@keyframes chevronBounce {
  0%, 100% { transform: rotate(45deg) translateY(0);   opacity: 0.6; }
  50%       { transform: rotate(45deg) translateY(5px); opacity: 1;   }
}

/* ─── Mobile (< 768px) ────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .hero-scene {
    align-items: flex-start;
    justify-content: flex-end;
    padding-bottom: 15vh;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }

  /* Flip overlay gradient to come from the bottom on mobile */
  .hero-text-overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.75)  0%,
      rgba(0, 0, 0, 0.3)  60%,
      rgba(0, 0, 0, 0.05) 100%
    );
  }

  .hero-headline {
    font-size: clamp(28px, 8vw, 48px);
  }

  .hero-subhead {
    font-size: clamp(14px, 3.5vw, 18px);
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   ALL FOUR SCENES SHARE ONE TREATMENT
   Client 2026-08-12: "unke jo paras ke text hain wo saare page ke uniform
   nahi lag rahe — koi bada koi chhota". The finale used to carry its own
   smaller type and its own scrim, which is exactly what made the set look
   mismatched. Size and measure now live on the base .hero-headline /
   .hero-subhead rules above, and the scrim below is applied to EVERY scene.
   Do not give one scene its own font-size again.
   ─────────────────────────────────────────────────────────────────────────── */

/* The shared .hero-text-overlay has faded to 0.1 black by 80% of the width,
   which is short of where these lines now end — white copy washed out over
   the brighter frames (the factory video especially). Each scene carries its
   own scrim so the backing is identical on all four. z-index:-1 keeps it
   behind that scene's text; .hero-scene animates opacity, so it is already a
   stacking context and the scrim cannot leak onto its neighbours. */
.hero-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.70)  0%,
    rgba(0, 0, 0, 0.56) 45%,
    rgba(0, 0, 0, 0.30) 72%,
    rgba(0, 0, 0, 0.05) 100%
  );
}

@media (max-width: 860px) {
  .hero-scene {
    padding-right: max(24px, 8vw);
  }
}