/*
  design-craft cinema kit: shared CSS for the kit modules.
  Recolour through your own tokens; nothing here sets a palette or a typeface.
*/

/* Film grain: a static noise tile rasterised once, nudged with steps() so it reads
   as photographic grain instead of a flat digital surface. 4-8% is felt, not seen. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: var(--grain-opacity, 0.07);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: var(--grain-blend, overlay);
  animation: grain-shift 0.9s steps(5) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* Full-bleed canvases from shader-field.js / particle-field.js */
.stage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.stage-canvas.sf-fallback {
  background: var(--fallback-bg, linear-gradient(180deg, #0b1020, #3a2a2a));
}

/* Intro curtain: covers the first paint, opened by scroll-stage.js */
[data-intro] {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--curtain, #000);
  clip-path: inset(0 0 0 0);
}

/* Line masks produced by SplitText keep descenders */
.ss-line { padding-bottom: 0.06em; }

/* Fallback reveals when GSAP is absent (IntersectionObserver path) */
.js [data-reveal].ss-pending {
  opacity: 0;
  transform: translateY(24px);
}
.js [data-reveal].ss-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Layered planes: children stack in one cell so they can overlap */
[data-planes] {
  position: relative;
  display: grid;
  overflow: hidden;
}
[data-planes] > [data-depth] {
  grid-area: 1 / 1;
  will-change: transform;
}

/* Pinned chapter stage: steps stack in the same cell */
[data-pin] .pin-frame {
  display: grid;
  min-height: 100svh;
  align-items: center;
}
[data-pin] [data-step] { grid-area: 1 / 1; }

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  [data-intro] { display: none; }
  [data-pin] .pin-frame { display: block; min-height: 0; }
  [data-pin] [data-step] { grid-area: auto; opacity: 1 !important; visibility: visible !important; transform: none !important; margin-block: 4rem; }
  [data-planes] > [data-depth] { will-change: auto; }
}