/* ============================================================
   cinema.css — pinned cinematic scroll section
   Brand: #0A0A0A bg · #C4FF3D lime · Archivo/Inter
   ============================================================ */

.cinema {
  position: relative; height: 100vh; width: 100%;
  background: var(--bg); overflow: hidden;
}

/* dotted grid + grain backdrop */
.cinema__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cinema__grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(196,255,61,0.10) 1px, transparent 1.4px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
  opacity: 0.6;
}
.cinema__grain {
  position: absolute; inset: -50%; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMycgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScgb3BhY2l0eT0nMC40Jy8+PC9zdmc+");
  animation: clGrain 0.8s steps(4) infinite;
}
@keyframes clGrain {
  0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); }
  50% { transform: translate(2%,-2%); } 75% { transform: translate(-2%,3%); } 100% { transform: translate(2%,1%); }
}

.cinema__stage { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; }

/* ---- Stage 1: headline ---- */
.cl-headline {
  position: absolute; z-index: 6; text-align: center; padding: 0 var(--shell);
  display: flex; flex-direction: column; gap: 0.04em; will-change: transform, opacity;
}
.cl-line { font-size: clamp(34px, 6.4vw, 104px); line-height: 0.96; }
.cl-line1 { will-change: transform, opacity, filter; }
.cl-line2 { will-change: clip-path; }

/* ---- Stage 2: premium card ---- */
.cl-card {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  background: linear-gradient(145deg, #16210A 0%, #0A0A0A 72%);
  border: 1px solid rgba(196,255,61,0.14);
  box-shadow: inset 0 1px 0 rgba(196,255,61,0.12), inset 0 0 120px rgba(0,0,0,0.6);
  transform-origin: center bottom; will-change: transform, border-radius;
  perspective: 1100px;
}
.cl-sheen {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 60%) var(--my, 35%), rgba(196,255,61,0.14), transparent 55%);
  transition: opacity 0.4s var(--ease);
}

/* portrait backdrop — darkened, brand-tinted, behind everything in the card */
.cl-photo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.34), rgba(10,10,10,0.90)),
    linear-gradient(105deg, rgba(10,10,10,0.92), rgba(10,10,10,0.22) 56%, rgba(22,33,10,0.6)),
    url("../assets/cinema-portrait.jpg") center/cover no-repeat;
  filter: grayscale(1) contrast(1.05) brightness(0.9);
  will-change: opacity;
}

/* gsap reveal helper — hidden until its timeline step runs */
.gsap-reveal { visibility: hidden; }

/* side texts */
.cl-side { position: absolute; z-index: 2; will-change: transform, opacity; }
.cl-side--left { left: clamp(24px, 5vw, 80px); top: 50%; transform: translateY(-50%); max-width: 340px; }
.cl-side-title { font-size: clamp(22px, 2.4vw, 40px); line-height: 1.02; }
.cl-side-sub { margin-top: 16px; font-size: clamp(13px, 1.05vw, 16px); color: var(--muted); line-height: 1.55; max-width: 34ch; }
.cl-side--right { right: clamp(10px, 3vw, 56px); top: 50%; transform: translateY(-50%); }
.cl-mag {
  font-size: clamp(60px, 13vw, 220px); line-height: 0.8; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(245,245,242,0.10);
}

/* phone */
.cl-phone {
  position: absolute; z-index: 3; left: 50%; top: 50%;
  width: clamp(220px, 22vw, 280px); aspect-ratio: 280 / 580;
  transform: translate(-50%, -50%); transform-style: preserve-3d;
  will-change: transform, opacity;
}
.cl-phone__tilt { width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.cl-phone__frame {
  position: relative; width: 100%; height: 100%; border-radius: 38px;
  background: linear-gradient(160deg, #1c1c20, #050505);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 50px 90px rgba(0,0,0,0.7), inset 0 0 0 6px #0a0a0a, 0 0 60px rgba(196,255,61,0.12);
  padding: 12px;
}
.cl-phone__notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 36%; height: 22px; background: #050505; border-radius: 0 0 14px 14px; z-index: 3;
}
.cl-phone__screen {
  position: relative; width: 100%; height: 100%; border-radius: 28px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, #14180c, #0a0a0a 70%);
}

/* dashboard */
.dash { position: absolute; inset: 0; padding: 34px 20px 22px; display: flex; flex-direction: column; }
.dash__top { display: flex; align-items: center; justify-content: space-between; }
.dash__brand { font-family: "Archivo", sans-serif; font-weight: 900; letter-spacing: -0.02em; font-size: 16px; text-transform: uppercase; }
.dash__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.dash__ring { position: relative; margin: auto; width: 64%; aspect-ratio: 1; }
.dash__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dash__ring .ring-bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 8; }
.dash__ring .ring-fg { fill: none; stroke: var(--lime); stroke-width: 8; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(196,255,61,0.5)); }
.dash__ringtext { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.dash__ringtext b { font-family: "Archivo", sans-serif; font-weight: 900; font-size: clamp(30px, 3vw, 42px); letter-spacing: -0.03em; color: var(--text); line-height: 1; }
.dash__ringtext span { font-size: 9px; letter-spacing: 0.18em; color: var(--muted); }
.dash__rows { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.dash__row { display: flex; flex-direction: column; gap: 7px; }
.dash__row span { font-size: 11px; color: #cfcfcd; letter-spacing: 0.02em; }
.dash__row i { display: block; height: 6px; border-radius: 100px; background: rgba(255,255,255,0.08); overflow: hidden; }
.dash__row u { display: block; height: 100%; background: var(--lime); border-radius: 100px; }

/* glass badges */
.cl-badge {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px; border-radius: 100px; font-size: 13px; font-weight: 600; color: var(--text);
  background: rgba(20,24,12,0.55); border: 1px solid rgba(196,255,61,0.22);
  backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  white-space: nowrap; will-change: transform, opacity;
}
.cl-badge__ico { display: inline-flex; color: var(--lime); }
.cl-badge--a { left: calc(50% - clamp(230px, 24vw, 320px)); top: 30%; }
.cl-badge--b { left: calc(50% + clamp(110px, 13vw, 180px)); top: 62%; }

/* final CTA */
.cl-cta {
  position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 30px; text-align: center; padding: 0 var(--shell);
  will-change: transform, opacity;
}
.cl-cta__title { font-size: clamp(34px, 5.4vw, 88px); line-height: 0.98; max-width: 16ch; }
.cl-cta__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .cl-side--left { left: 50%; top: 14%; transform: translateX(-50%); text-align: center; max-width: 86%; }
  .cl-side-sub { margin-left: auto; margin-right: auto; }
  .cl-side--right { right: 50%; top: auto; bottom: 9%; transform: translateX(50%); }
  .cl-mag { -webkit-text-stroke: 1px rgba(245,245,242,0.08); }
  .cl-phone { width: clamp(180px, 52vw, 230px); }
  .cl-badge { font-size: 12px; padding: 10px 14px; }
  .cl-badge--a { left: 6%; top: 30%; }
  .cl-badge--b { left: auto; right: 6%; top: 60%; }
}

/* ============================================================
   REDUCED MOTION / STATIC FALLBACK
   ============================================================ */
.cinema--static { height: auto; }
.cinema--static .cinema__grain { animation: none; }
.cinema--static .cinema__stage { position: static; flex-direction: column; padding: clamp(80px,12vh,140px) var(--shell); gap: 56px; }
.cinema--static .cl-headline { position: static; transform: none !important; opacity: 1 !important; }
.cinema--static .cl-card {
  position: relative; inset: auto; width: 100%; max-width: var(--maxw); margin: 0 auto;
  min-height: 70vh; border-radius: 24px; transform: none !important; opacity: 1 !important;
  display: flex; align-items: center; justify-content: center; padding: 60px 20px;
}
.cinema--static .cl-side, .cinema--static .cl-mag { position: static; transform: none !important; opacity: 1 !important; }
.cinema--static .cl-side--right { display: none; }
.cinema--static .cl-phone { position: relative; left: auto; top: auto; transform: none !important; opacity: 1 !important; margin: 0 auto; }
.cinema--static .cl-badge { display: none; }
.cinema--static .cl-cta { position: static; transform: none !important; opacity: 1 !important; inset: auto; }

@media (prefers-reduced-motion: reduce) {
  .cinema__grain { animation: none; }
}