/* ---------------------------------------------------------------------------
 * Atelier Hero — scroll-driven canvas sequence styles.
 *
 * Desktop (>= 768px): 400vh wrapper, sticky stage, full-bleed canvas,
 *                     typographic content overlaid in the first viewport.
 * Mobile  (<  768px): single viewport-height hero, static poster image,
 *                     stacked typo content. No scroll-jacking.
 *
 * .atelier-hero--still is also applied at runtime when the visitor has
 * prefers-reduced-motion enabled — it collapses the scroll runway and
 * keeps the static poster in view.
 * --------------------------------------------------------------------------- */

.atelier-hero.atelier-hero--cinema {
  position: relative;
  width: 100%;
  height: 100vh;             /* v2.9.26: GSAP ScrollTrigger now pins this
                                section via JS (`pin: true`) and the pin
                                duration controls the scroll runway. Section
                                itself is just one viewport in normal flow. */
  background-color: #0e3b37; /* forest — fills the runway behind the canvas */
  overflow: hidden;
  /* override any inherited atelier-hero grid layout */
  display: block;
  padding: 0;
  margin: 0;
}

.atelier-hero--cinema .hero-stage {
  position: relative;        /* v2.9.26: GSAP pins the section, no sticky */
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;            /* mobile-safe viewport unit where supported */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.atelier-hero--cinema .hero-canvas,
.atelier-hero--cinema .hero-poster,
.atelier-hero--cinema .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

/* v2.9.20: hide the mobile hero video by default. Mobile rules below
   activate it. On desktop the canvas does the talking. */
.atelier-hero--cinema .hero-video {
  display: none;
  opacity: 0;
  transition: opacity 700ms ease;
  z-index: 1;
}
.atelier-hero--cinema .hero-video.is-ready { opacity: 1; }

.atelier-hero--cinema .hero-canvas {
  opacity: 0;                /* GSAP fades it in; stays 0 if JS never runs */
  transition: opacity 600ms ease;
}
.atelier-hero--cinema .hero-canvas.is-ready { opacity: 1; }

.atelier-hero--cinema .hero-poster {
  z-index: 1;
  transition: opacity 600ms ease;
}
.atelier-hero--cinema .hero-poster.is-hidden { opacity: 0; }

.atelier-hero--cinema .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(14, 59, 55, 0.92) 0%,
    rgba(10, 31, 24, 0.45) 45%,
    rgba(14, 59, 55, 0.35) 100%
  );
}

/* Typographic content (overlaid on the canvas) ----------------------------- */
.atelier-hero--cinema .hero-typo--overlay {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 72rem;
  padding: 0 1.5rem;
  margin: 0 auto;
  color: #f7f5f2; /* ivory */
  pointer-events: none; /* let CTAs opt back in */
}
.atelier-hero--cinema .hero-typo--overlay .hero-actions,
.atelier-hero--cinema .hero-typo--overlay .hero-meta a {
  pointer-events: auto;
}

.atelier-hero--cinema .hero-eyebrow {
  color: rgba(247, 245, 242, 0.78);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin-bottom: 1.5rem;
}

.atelier-hero--cinema .hero-wordmark-img {
  display: block;
  /* v2.9.36: desktop back near original — v2.9.34 still pushed the
     CTA out of the pinned 100vh viewport. Slightly larger than the
     pre-CEO 520px cap, but not dominating. Mobile keeps its 140vw
     bleed via the @media (max-width: 1023px) block below. */
  width: clamp(280px, 38vw, 600px);
  max-width: 80vw;
  height: auto;
  margin: 0 auto;
  /* v2.9.19: the supplied stacked wordmark is dark-on-transparent.
     brightness(0) collapses every pixel to pure black, then invert(1)
     flips that to pure white — yields a clean ivory wordmark on the
     dark canvas without needing a separate light-color asset. */
  filter: brightness(0) invert(1) drop-shadow(0 6px 24px rgba(0, 0, 0, 0.45));
  mix-blend-mode: normal;
}

.atelier-hero--cinema .hero-tagline {
  max-width: 38rem;
  margin: 1.75rem auto 0;
  color: rgba(247, 245, 242, 0.85);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.6;
}

.atelier-hero--cinema .hero-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.atelier-hero--cinema .hero-reserve {
  display: inline-block;
  padding: 0.95rem 2.25rem;
  background: #f7f5f2;
  color: #0e3b37;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  border: 1px solid #f7f5f2;
  transition: background 200ms ease, color 200ms ease;
}
.atelier-hero--cinema .hero-reserve:hover,
.atelier-hero--cinema .hero-reserve:focus {
  background: transparent;
  color: #f7f5f2;
}

.atelier-hero--cinema .hero-secondary {
  display: inline-block;
  padding: 0.95rem 1.5rem;
  color: #f7f5f2;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(247, 245, 242, 0.55);
}

.atelier-hero--cinema .hero-meta {
  display: flex;
  gap: 2rem;
  margin-top: 2.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(247, 245, 242, 0.7);
}
.atelier-hero--cinema .hero-meta a {
  color: inherit;
  border-bottom: 1px solid rgba(247, 245, 242, 0.3);
}

.atelier-hero--cinema .hero-image-credit {
  position: absolute;
  z-index: 3;
  right: 1.5rem;
  bottom: 1.5rem;
  color: rgba(247, 245, 242, 0.55);
  font-size: 0.65rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

/* Hide noscript image when JS is available --------------------------------- */
.atelier-hero--cinema .hero-noscript { display: none; }

/* -------------------------------------------------------------------------
 * MOBILE LAYOUT (cinema mode still runs — only the typo content is
 * re-sized + restyled for small screens). The canvas + 400vh scroll
 * runway is intentionally kept on every viewport.
 * ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .atelier-hero--cinema .hero-typo--overlay {
    padding: 0 1.25rem;
    transform: translateY(-3vh);
  }
  /* v2.9.27: CEO directive — wordmark is FIRST and TRIPLED on mobile.
     Use flex order to put the H1 logo above the eyebrow line. */
  .atelier-hero--cinema .hero-typo .hero-eyebrow,
  .atelier-hero--cinema .hero-eyebrow { order: 2 !important; margin-top: 1.25rem !important; margin-bottom: 0 !important; }
  .atelier-hero--cinema .hero-typo .hero-title-logo,
  .atelier-hero--cinema .hero-title-logo { order: 1 !important; margin: 0 0 0.25rem !important; width: 100% !important; }
  .atelier-hero--cinema .hero-tagline   { order: 3 !important; }
  .atelier-hero--cinema .hero-actions   { order: 4 !important; }
  .atelier-hero--cinema .hero-meta      { order: 5 !important; }
  .atelier-hero--cinema .hero-eyebrow { font-size: 0.62rem; letter-spacing: 0.26em; }
  /* v2.9.30: the wordmark PNG (1536x1024) has built-in transparent
     padding around the text. Filling 100vw still felt small because
     only the center ~60% of the PNG is glyphs. Push the image to
     140vw and bleed it off both sides — visible text region ends up
     filling the screen. Parent .atelier-hero--cinema has overflow:
     hidden so the bleed doesn't break horizontal scroll. */
  /* v2.9.35: the H1 .hero-title-logo carries the GSAP .fade-up class
     which sets transform: translateY(...) inline — that clobbers any
     transform on the H1, which is why v2.9.33 left the wordmark
     biased LEFT instead of centered. Solution: keep the H1 at its
     natural width (100% of typo container, centered by parent flex)
     and do the 140vw bleed + centering on the IMG itself. The IMG
     has no fade-up class so its transform is untouched. */
  .atelier-hero--cinema .hero-typo .hero-title-logo,
  .atelier-hero--cinema .hero-title-logo {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 0.25rem !important;
    overflow: visible !important;
    text-align: center !important;
  }
  .atelier-hero--cinema .hero-wordmark-img {
    display: block !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 140vw !important;
    max-width: 140vw !important;
    margin: 0 !important;
  }
  /* Ensure the typo container doesn't clip the bleed */
  .atelier-hero--cinema .hero-typo,
  .atelier-hero--cinema .hero-typo--overlay {
    overflow: visible !important;
  }
  .atelier-hero--cinema .hero-tagline { margin-top: 1.25rem; font-size: 0.95rem; max-width: 28rem; }
  .atelier-hero--cinema .hero-actions { margin-top: 1.5rem; gap: 0.75rem; width: 100%; flex-direction: column; }
  .atelier-hero--cinema .hero-reserve,
  .atelier-hero--cinema .hero-secondary { width: 100%; text-align: center; }
  .atelier-hero--cinema .hero-meta { margin-top: 1.5rem; gap: 1.25rem; font-size: 0.62rem; letter-spacing: 0.22em; flex-wrap: wrap; justify-content: center; }
  .atelier-hero--cinema .hero-image-credit { right: 1rem; bottom: 1rem; font-size: 0.55rem; }
}

/* atelier-hero--still is applied at runtime by hero-frames.js only when
   GSAP failed to load (CDN blocked). Collapses to a single viewport
   with the static poster so the page still looks intentional. */
.atelier-hero.atelier-hero--cinema.atelier-hero--still { height: 100vh; height: 100svh; }
.atelier-hero--cinema.atelier-hero--still .hero-stage  { position: relative; }
.atelier-hero--cinema.atelier-hero--still .hero-canvas { display: none; }
.atelier-hero--cinema.atelier-hero--still .hero-poster { opacity: 1 !important; }

/* v2.9.23: tablet refinements removed — everything <=1023px now uses
   the simple video hero path. Cinema is desktop-only (>=1024px). */

/* ═══════════════════════════════════════════════════════════════
   v2.9.18 — Cinema hero overrides (defeat mint-v2.css collisions)
   The container DIV carries BOTH .hero-typo (old legacy) AND
   .hero-typo--overlay (new cinema). The old .hero-typo rules in
   mint-v2.css paint a parchment background on top of our canvas,
   set min-height:100vh, force the eyebrow to brass, and invert the
   wordmark to dark forest. Undo all of that inside cinema only.
   ═══════════════════════════════════════════════════════════════ */

/* 1. The cinema section itself: defeat mint-v2.css `.atelier-hero {
   display: grid; grid-template-columns: 1fr; min-height: 100vh; }`.
   Without overriding `display`, the stage was auto-sized to a single
   grid cell column — that's why the poster was rendering at ~25%
   viewport width instead of full-bleed. Force block + 100% width. */
.atelier-hero.atelier-hero--cinema {
  display: block !important;
  width: 100% !important;
  background-color: #0e3b37 !important;
  min-height: 0 !important;
  grid-template-columns: none !important;
}
.atelier-hero--cinema .hero-stage {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
}

/* 2. Typo container: kill the parchment "white overlay" + layout reset */
.atelier-hero--cinema .hero-typo,
.atelier-hero--cinema .hero-typo.hero-typo--overlay {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 1.5rem !important;
  min-height: 0 !important;
  order: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  z-index: 3;
}

/* 3. Eyebrow: ivory, not brass */
.atelier-hero--cinema .hero-typo .hero-eyebrow,
.atelier-hero--cinema .hero-eyebrow {
  color: rgba(247, 245, 242, 0.78) !important;
  margin-bottom: 1.5rem !important;
  text-align: center !important;
}

/* 4. Wordmark: undo the dark-color filter from mint-v2.css line 393.
   Keep only a soft drop-shadow so the supplied wordmark JPG shows in
   its native ivory color against the dark canvas. */
.atelier-hero--cinema .hero-wordmark-img {
  /* v2.9.19: force ivory wordmark on dark canvas — see note above */
  /* v2.9.31: tripled desktop size already applied above */
  filter: brightness(0) invert(1) drop-shadow(0 6px 24px rgba(0, 0, 0, 0.45)) !important;
  mix-blend-mode: normal !important;
  /* v2.9.32: REMOVED the legacy width/max-width/margin-inline overrides
     that were silently capping the wordmark at 620px and centering it,
     defeating every "make the logo bigger" CSS edit since v2.9.27.
     Width and margins are now owned by the desktop base rule (line ~121)
     and the mobile @media block (line ~228). DO NOT re-add width here. */
}

/* 5. Tagline + secondary CTA + meta: ivory tones, recover legibility */
.atelier-hero--cinema .hero-tagline {
  color: rgba(247, 245, 242, 0.85) !important;
  max-width: 38rem !important;
  margin: 1.75rem auto 0 !important;
}
.atelier-hero--cinema .hero-actions {
  margin-top: 2rem !important;
  margin-bottom: 0 !important;
  justify-content: center !important;
}
.atelier-hero--cinema .hero-secondary {
  color: #f7f5f2 !important;
  border-bottom: 1px solid rgba(247, 245, 242, 0.55) !important;
}
.atelier-hero--cinema .hero-meta {
  color: rgba(247, 245, 242, 0.7) !important;
  border-top: 0 !important;
  padding-top: 0 !important;
  justify-content: center !important;
  margin-top: 2.25rem !important;
}
.atelier-hero--cinema .hero-meta a { color: inherit !important; }

/* 6. Hide any legacy .hero-image right column that might still emit */
.atelier-hero--cinema .hero-image { display: none !important; }

/* 7. Mobile: v2.9.20 — single 100vh hero, poster JPG shows instantly,
   mp4 lazy-loads behind it and crossfades in when ready. No 400vh
   scroll runway on phones — the video loops on its own. */
@media (max-width: 1023px) {
  .atelier-hero.atelier-hero--cinema {
    height: 100vh !important;
    height: 100svh !important;
    min-height: 0 !important;
  }
  .atelier-hero--cinema .hero-stage {
    position: relative !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100svh !important;
  }
  /* Canvas runway is desktop only; phones get the mp4 */
  .atelier-hero--cinema .hero-canvas { display: none !important; }
  /* Poster + video both full-bleed via inset:0 from base rules */
  .atelier-hero--cinema .hero-poster {
    opacity: 1 !important;
    z-index: 0 !important;
  }
  .atelier-hero--cinema .hero-video {
    display: block !important;
    z-index: 1 !important;
  }
  /* v2.9.22: weaken the dark gradient on mobile so the video shows
     through. The previous 0.92 alpha forest at the top was eating the
     video — it looked like a flat dark layer with no motion behind it. */
  .atelier-hero--cinema .hero-overlay {
    background: linear-gradient(
      to top,
      rgba(14, 59, 55, 0.82) 0%,
      rgba(14, 59, 55, 0.35) 55%,
      rgba(14, 59, 55, 0.10) 100%
    ) !important;
  }
  .atelier-hero--cinema .hero-typo,
  .atelier-hero--cinema .hero-typo--overlay {
    padding-bottom: 110px !important; /* clearance for sticky CTA */
    transform: none !important;       /* defeat translateY(-3vh) from base */
  }
  .atelier-hero--cinema .hero-meta { margin-top: 1.25rem !important; }
}