/* ============================================================
   cinema.css — cinematic scroll experience overlay
   Loaded alongside styles.css (reuses tokens, buttons,
   eyebrow, counter, chips, footer, logo).
   ============================================================ */

/* fixed particle stage */
#cinema {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
}
#cinema-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(130% 90% at 50% 50%, transparent 40%, rgba(10,13,16,0.55) 100%),
    linear-gradient(180deg, rgba(10,13,16,0.5) 0%, transparent 22%, transparent 78%, rgba(10,13,16,0.6) 100%);
}

/* progress + chapter chrome */
.cine-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hot));
  box-shadow: 0 0 14px rgba(224,112,63,0.7);
  z-index: 60;
}
.cine-chapter {
  position: fixed;
  top: 26px;
  right: var(--gutter);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.cine-chapter .idx { color: var(--accent-hot); font-family: var(--font-display); font-size: 13px; }
.cine-chapter .nm { color: var(--muted-dim); transition: color 0.4s; min-width: 168px; text-align: right; }

/* stage container of acts */
.stage { position: relative; z-index: 2; }

.act {
  position: relative;
  min-height: 124vh;
  display: flex;
  align-items: center;
}
.act-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  will-change: opacity, transform;
}
.act.left  .act-copy { max-width: 600px; margin-right: auto; }
.act.right .act-copy { max-width: 600px; margin-left: auto; text-align: right; }
.act.center .act-copy { max-width: 760px; margin-inline: auto; text-align: center; }

/* per-child cinematic entrance (transforms driven by exp.js) */
.act-copy > * { will-change: transform, opacity; transform-origin: center; backface-visibility: hidden; }
.act.left .act-copy > * { transform-origin: left center; }
.act.right .act-copy > * { transform-origin: right center; }

/* readability scrim behind copy — softly dims/blurs the particle
   field only under the text, feathered so there is no hard edge.
   Keeps the animation fully intact everywhere else. */
.act-copy { position: relative; isolation: isolate; }
.act-copy::before {
  content: "";
  position: absolute;
  inset: -15% -7%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 76% 76% at center, rgba(20,24,28,0.74) 0%, rgba(20,24,28,0.42) 52%, transparent 78%);
  -webkit-backdrop-filter: blur(2.5px);
  backdrop-filter: blur(2.5px);
  -webkit-mask: radial-gradient(ellipse 82% 80% at center, #000 46%, transparent 85%);
  mask: radial-gradient(ellipse 82% 80% at center, #000 46%, transparent 85%);
}
.act.center .eyebrow::before { display: none; }
.act.right .eyebrow { flex-direction: row-reverse; }
.act.right .eyebrow::before { background: linear-gradient(270deg, var(--accent), transparent); }

.act h1, .act h2 {
  font-weight: 600;
  margin-top: 22px;
}
.act h1 { font-size: clamp(2.7rem, 6.4vw, 5rem); }
.act h2 { font-size: clamp(2.1rem, 5vw, 3.8rem); }
.act .accent { color: var(--accent-hot); }
.act .muted { color: var(--muted-dim); }
.act-sub {
  margin-top: 24px;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--muted);
  line-height: 1.62;
}
.act.center .act-sub, .act.right .act-sub { margin-left: auto; }
.act.left .act-sub, .act.center .act-sub { max-width: 540px; }
.act.center .act-sub { margin-inline: auto; }
.act-lead {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.28;
}
.act-lead .muted { color: var(--muted); }
.act-cta {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.act.left .act-cta { align-items: flex-start; }
.act.right .act-cta { align-items: flex-end; }
.act.center .act-cta { align-items: center; }

/* service "pieces" list for the foundation act */
.pieces { margin-top: 34px; display: flex; flex-direction: column; gap: 2px; max-width: 560px; }
.piece {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.piece:last-child { border-bottom: 1px solid var(--line); }
.piece .pn { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--accent-hot); }
.piece h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; }
.piece p { margin-top: 6px; color: var(--muted); font-size: 1rem; }

/* big stat for visibility act */
.act .counter-block { margin-top: 36px; }
.act.center .counter-block { justify-content: center; }

/* expertise chips reused (.expertise/.chip from styles.css) sit fine */
.act.right .expertise { justify-content: flex-end; }

/* signature #1 pin (act 1), fixed center */
.cine-pin {
  position: fixed;
  left: 72%; top: 45%;
  z-index: 2;
  transform: translate(-50%, -100%);
  color: var(--accent);
  pointer-events: none;
  will-change: opacity, transform;
}
.cine-pin .halo {
  position: absolute; left: 50%; top: 44%;
  width: 120px; height: 120px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,112,63,0.5), transparent 65%);
  animation: cineHalo 3.6s ease-in-out infinite;
}
@keyframes cineHalo {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.85; }
  50% { transform: translate(-50%,-50%) scale(1.2); opacity: 0.5; }
}
.cine-pin .badge {
  position: absolute; top: -16px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  padding: 4px 11px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 8px 22px -6px rgba(194,86,47,0.9);
}
.cine-pin .pin-shadow {
  position: absolute; left: 50%; bottom: -8px;
  width: 30px; height: 9px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0,0,0,0.55), transparent 70%);
  border-radius: 50%; filter: blur(2px);
}

/* scroll cue */
.cine-scroll {
  position: fixed;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted-dim);
  transition: opacity 0.5s;
}
.cine-scroll .line {
  width: 1px; height: 36px;
  background: linear-gradient(180deg, var(--accent-hot), transparent);
  animation: scrollLine 2.4s var(--ease-soft) infinite;
  transform-origin: top;
}

/* final act: ensure CTA above canvas + clickable */
.act.final-act { min-height: 130vh; }
.act.final-act .act-copy { text-align: center; max-width: 720px; margin-inline: auto; }
.act.final-act h2 { font-size: clamp(2.4rem, 6vw, 4.4rem); }

/* footer sits on solid bg above the fixed canvas */
.footer { position: relative; z-index: 5; }
.site-mark { z-index: 60; }

/* ---- desktop hero fit: keep the whole hero (headline, sub, lead, button, microcopy)
   inside one screen so the CTA is never cut off. Hero only, desktop only. ---- */
@media (min-width: 761px) {
  /* NOTE: do NOT change the hero's min-height. exp.js assumes every .act is the
     same height as the first panel; a different hero height breaks the scroll-to-
     keyframe math (animation loops, lower sections never reveal). Only tighten the
     content so the CTA still fits inside the centered viewport. */
  .act[data-screen-label="Hero"] h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); margin-top: 14px; }
  .act[data-screen-label="Hero"] .act-sub { margin-top: 18px; }
  .act[data-screen-label="Hero"] .act-lead { margin-top: 16px; }
  .act[data-screen-label="Hero"] .act-cta { margin-top: 26px; }
}

@media (max-width: 900px) {
  .act { min-height: 110vh; }
  .act.right .act-copy { text-align: left; margin-left: 0; }
  .act.right .act-cta { align-items: flex-start; }
  .act.right .eyebrow { flex-direction: row; }
  .act.right .eyebrow::before { background: linear-gradient(90deg, var(--accent), transparent); }
  .act.right .expertise { justify-content: flex-start; }
  .cine-chapter { display: none; }
}

/* ---- mobile hardening (mobile-only; desktop rules above are untouched) ---- */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }      /* kill any sideways scroll */
  .cine-pin { display: none; }            /* decorative pin overlaps copy on narrow screens */

  /* The entrance engine sets opacity/transform per-element from scroll position,
     which leaves the hero (and other) copy stuck invisible on mobile. Force every
     piece of content visible and un-shifted here. Particle canvas still animates.
     Desktop choreography (rules above) is untouched. */
  .act-copy, .act-copy * { opacity: 1 !important; }
  .act-copy > *, .act-copy .logo-cell, .act-copy .star { transform: none !important; }

  /* tighten the tall sections so there isn't a screen of empty space between them */
  .act { min-height: 86vh; }
  .act.final-act { min-height: 92vh; }
}
@media (max-width: 560px) {
  .act h1 { font-size: clamp(2.05rem, 8.4vw, 2.7rem); }
  .act h2 { font-size: clamp(1.7rem, 6.6vw, 2.4rem); }
  .act.final-act h2 { font-size: clamp(2rem, 7.6vw, 2.7rem); }
  .act-inner { padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .cine-pin .halo, .cine-scroll .line { animation: none; }
}