/* css/cinematic.css — scroll as cinema */

:root {
  --cine-grain-opacity: 0.05;
}

/* ═════════ Vignette ═════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8000;
  background:
    radial-gradient(ellipse at center, transparent 30%,
      rgba(0,0,0, var(--vignette-opacity, 0)) 100%);
}

/* ═════════ Film grain ═════════ */
.cine-film-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8500;
  opacity: var(--cine-grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
}

/* ═════════ Letterbox bars ═════════ */
.cine-letterbox {
  position: fixed;
  left: 0;
  right: 0;
  height: 0;
  background: #000;
  z-index: 9100;
  pointer-events: none;
  transition: height 0.7s cubic-bezier(0.65,0,0.35,1);
}
.cine-letterbox.top { top: 0; }
.cine-letterbox.bottom { bottom: 0; }
body.cine-cinema .cine-letterbox { height: clamp(22px, 3.4vh, 48px); }

/* ═════════ Chapter HUD ═════════ */
.cine-chapter {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 9000;
  pointer-events: none;
  display: flex;
  gap: 14px;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--silver);
  mix-blend-mode: difference;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.cine-chapter.in { opacity: 0.72; transform: translateY(0); }
.cine-chapter .cine-chapter-num { font-weight: 700; }
.cine-chapter .cine-chapter-bar {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

/* ═════════ Section titles ═════════ */
.cine-title {
  --title-scale: 1.08;
  --title-blur: 8px;
  --title-opacity: 0;
  opacity: var(--title-opacity);
  filter: blur(var(--title-blur));
  transform: scale(var(--title-scale));
  transition:
    opacity 1.1s cubic-bezier(0.16,1,0.3,1),
    filter 1.1s cubic-bezier(0.16,1,0.3,1),
    transform 1.1s cubic-bezier(0.16,1,0.3,1);
}
.cine-title.visible {
  --title-scale: 1;
  --title-blur: 0;
  --title-opacity: 1;
}

/* ═════════ Image clip reveal ═════════ */
.cine-image-wrap { position: relative; overflow: hidden; isolation: isolate; }
.cine-image-reveal {
  --reveal-scale: 1.12;
  --reveal-blur: 6px;
  --reveal-clip: inset(0 0 24% 0);
  --reveal-opacity: 0;
  opacity: var(--reveal-opacity);
  filter: blur(var(--reveal-blur));
  clip-path: var(--reveal-clip);
  transform: scale(var(--reveal-scale));
  transition:
    opacity 1s cubic-bezier(0.16,1,0.3,1),
    filter 1s cubic-bezier(0.16,1,0.3,1),
    clip-path 1s cubic-bezier(0.16,1,0.3,1),
    transform 1s cubic-bezier(0.16,1,0.3,1);
}
.cine-image-reveal.visible {
  --reveal-scale: 1;
  --reveal-blur: 0;
  --reveal-clip: inset(0 0 0 0);
  --reveal-opacity: 1;
}

/* ═════════ Section title scroll-depth ═════════ */
.cine-scroll-depth {
  transform: translate3d(0, calc(var(--cine-scroll-progress, 0) * var(--cine-depth-y, -28px)), 0);
}

/* ═════════ Section fade backdrop ═════════ */
.cine-section-fade { position: relative; z-index: 1; }
.cine-section-fade::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: var(--fade-opacity, 0);
  background: linear-gradient(to bottom, transparent,
    rgba(20,20,18, var(--fade-intensity, 0)));
  transition: opacity 0.8s cubic-bezier(0.65,0,0.35,1);
}

/* ═════════ Hero dissolve ═════════ */
.cine-hero-stage {
  --hero-progress: 0;
  isolation: isolate;
}
.cine-hero-stage .hero-title {
  transform: translate3d(0, calc(var(--hero-progress) * -180px), 0)
             scale(calc(1 - var(--hero-progress) * 0.06));
  opacity: calc(1 - var(--hero-progress) * 1.6);
  will-change: transform, opacity;
}
.cine-hero-stage .hero-marquee-wrap {
  opacity: calc(1 - var(--hero-progress) * 1.4);
  transform: translate3d(calc(var(--hero-progress) * -30px), 0, 0);
}
.cine-hero-stage .hero-bottom {
  opacity: calc(1 - var(--hero-progress) * 1.4);
  transform: translate3d(0, calc(var(--hero-progress) * 50px), 0);
}
.cine-hero-stage .hero-circle {
  transform: translate3d(0, calc(var(--hero-progress) * -80px), 0)
             scale(calc(1 + var(--hero-progress) * 0.35));
  opacity: calc(0.04 + var(--hero-progress) * 0.04);
}
.cine-hero-stage .scroll-hint {
  opacity: calc(1 - var(--hero-progress) * 2);
}

/* ═════════ Section bridge ═════════ */
.cine-bridge {
  --bridge-progress: 0;
  position: relative;
  height: clamp(96px, 13vw, 180px);
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  z-index: 6;
}
.cine-bridge::before {
  content: '';
  position: absolute;
  inset: -1px 0;
  background: linear-gradient(to bottom,
    var(--bridge-from, #000),
    var(--bridge-to, #fff));
}
.cine-bridge::after {
  content: '';
  position: absolute;
  inset: -2px 0;
  background: var(--bridge-from, #000);
  transform-origin: top;
  transform: scaleY(calc(1 - var(--bridge-progress, 0)));
  will-change: transform;
}
.cine-bridge[data-from="black"] { --bridge-from: var(--black); }
.cine-bridge[data-from="ink"]   { --bridge-from: var(--ink); }
.cine-bridge[data-from="milk"]  { --bridge-from: var(--milk); }
.cine-bridge[data-from="cream"] { --bridge-from: var(--cream); }
.cine-bridge[data-to="black"]   { --bridge-to: var(--black); }
.cine-bridge[data-to="ink"]     { --bridge-to: var(--ink); }
.cine-bridge[data-to="milk"]    { --bridge-to: var(--milk); }
.cine-bridge[data-to="cream"]   { --bridge-to: var(--cream); }

/* ═════════ Parallax depth ═════════ */
[data-cine-depth] {
  transform: translate3d(0, calc(var(--d-y, 0) * 1px), 0);
  will-change: transform;
}

/* ═════════ Word mask reveal ═════════ */
.cine-words .cine-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.05;
}
.cine-words .cine-word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s cubic-bezier(0.16,1,0.3,1);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: transform;
}
.cine-words.visible .cine-word > span { transform: translateY(0); }

/* ═════════ Ken Burns ═════════ */
.cine-ken-burns { animation: ken-burns 24s cubic-bezier(0.25,0.46,0.45,0.94) infinite; }
@keyframes ken-burns {
  0%   { transform: scale(1) translateY(0); }
  50%  { transform: scale(1.08) translateY(-8px); }
  100% { transform: scale(1) translateY(0); }
}

/* ═════════ Reduced motion ═════════ */
@media (prefers-reduced-motion: reduce) {
  .cine-title,
  .cine-image-reveal,
  .cine-scroll-depth,
  .cine-section-fade::before,
  .cine-ken-burns,
  .cine-hero-stage .hero-title,
  .cine-hero-stage .hero-marquee-wrap,
  .cine-hero-stage .hero-bottom,
  .cine-hero-stage .hero-circle,
  .cine-hero-stage .scroll-hint,
  .cine-bridge::after,
  [data-cine-depth],
  .cine-words .cine-word > span {
    animation: none;
    transition: none;
    opacity: 1;
    filter: none;
    clip-path: none;
    transform: none;
  }
  body::before,
  .cine-film-grain,
  .cine-letterbox,
  .cine-chapter { display: none; }
}

/* ═════════ Touch ═════════ */
@media (hover: none) {
  .cine-film-grain { display: none; }
  .cine-letterbox  { display: none; }
  body::before     { background: none; }
  .cine-ken-burns  { animation: none; transform: scale(1) translateY(0); }
  .cine-hero-stage .hero-circle { transform: none; }
  [data-cine-depth] { transform: none; }
}