/* scene.css: layout rules the engine needs. Theme the page in your own stylesheet;
   do not edit this file per project. Override the --k-* tokens instead. */

:root {
  --k-scrim: rgba(12, 10, 8, 0.42);   /* behind captions over media */
  --k-ring-color: currentColor;
  --k-ease: cubic-bezier(.2, .7, .1, 1);
}

/* ---------- hero ---------- */
[data-k-hero] { position: relative; }
.k-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden; isolation: isolate;
  background: var(--k-poster, none) center / cover no-repeat;
}
.k-stage > video[data-k-scrub],
.k-stage > canvas[data-k-depth],
.k-stage > .k-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 0;
  opacity: 0; transition: opacity .5s ease;
}
.k-media-ready .k-stage > video[data-k-scrub],
.k-media-ready .k-stage > canvas[data-k-depth] { opacity: 1; }
.k-media-failed .k-stage > video[data-k-scrub],
.k-media-failed .k-stage > canvas[data-k-depth],
.k-static .k-stage > video[data-k-scrub],
.k-static .k-stage > canvas[data-k-depth] { display: none; }

/* independent planes: cut-outs, mist, a headline between planes */
.k-stage [data-k-layer], .k-stage [data-k-drift] { will-change: transform; }
.k-plane { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.k-plane img { width: 100%; height: 100%; object-fit: cover; }

/* captions */
.k-band {
  position: absolute; z-index: 3; opacity: 0; visibility: hidden;
  left: clamp(20px, 6vw, 96px); right: clamp(20px, 6vw, 96px);
  bottom: clamp(56px, 12vh, 140px); max-width: 42rem;
}
.k-band.k-scrim { padding: 1.25rem 1.5rem; background: var(--k-scrim); backdrop-filter: blur(6px); border-radius: 4px; }
/* line-by-line assembly: give each line style="--i:0..n" */
.k-band .k-line {
  display: block;
  transform: translateY(calc((1 - var(--k, 1)) * (0.6em + var(--i, 0) * 0.35em)));
  opacity: calc(var(--k, 1) * 1.4 - var(--i, 0) * 0.2);
}

/* load indicator for the video hero */
.k-ring {
  position: absolute; z-index: 4; right: 20px; bottom: 20px; width: 28px; height: 28px;
  border-radius: 50%; color: var(--k-ring-color);
  background: conic-gradient(currentColor calc(var(--k-load, 0) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 57%);
          mask: radial-gradient(circle, transparent 55%, #000 57%);
  opacity: .7;
}
.k-ring[hidden] { display: none; }

/* static hero: phones without a mobile clip, reduced motion, failed media */
.k-static .k-band { opacity: 1 !important; visibility: visible !important; }
/* a static hero stacks every caption over the poster instead of swapping them */
.k-static .k-stage {
  position: relative; height: auto; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem;
  padding: 18vh clamp(20px, 6vw, 96px) clamp(40px, 8vh, 96px);
}
.k-static .k-band { position: relative; left: auto; right: auto; bottom: auto; }
.k-static .k-ring { display: none; }

/* ---------- flow reveals ---------- */
.k-on [data-k-in] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--k-ease), transform .8s var(--k-ease); }
.k-on [data-k-in].is-in { opacity: 1; transform: none; }
.k-on [data-k-in][style*="--d"] { transition-delay: calc(var(--d) * 90ms); }

/* ---------- housekeeping ---------- */
.k-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .k-on [data-k-in] { opacity: 1; transform: none; transition: none; }
  .k-band .k-line { transform: none; opacity: 1; }
}