/* Additive motion layer. Does not retoken type, color, space, or copy. */

html.has-motion { scroll-behavior: auto; }
html.has-motion .reveal,
html.has-motion .reveal.in {
  opacity: 1;
  transform: none;
  transition: none;
}
html.has-motion .hero img { animation: none; }

/* Lenis + Spotify: kit lenis.css kills iframe pointer events while smooth. */
html.lenis iframe { pointer-events: auto; }

.hero-rays {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .52;
}
.hero-rays canvas { display: block; width: 100%; height: 100%; }
html.has-motion .hero { overflow: hidden; }
html.has-motion .hero img { will-change: transform; }
html.has-motion .hero::before { z-index: 1; }
html.has-motion .lower,
html.has-motion .hero-chrome { z-index: 2; }

html.has-motion .hero h1 .line,
html.has-motion .hero h1 .line > span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  transform: none;
  animation: none;
}
html.has-motion .hero h1 .line span.char {
  display: inline-block;
  animation: none;
  letter-spacing: -0.05em;
  will-change: transform;
}

.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  pointer-events: none;
  z-index: 80;
  mix-blend-mode: difference;
  opacity: 0;
  will-change: transform;
}
.cursor.is-on { opacity: 1; }
.cursor i {
  display: block;
  width: 100%; height: 100%;
  border: 1.5px solid #f4f1ec;
  border-radius: 999px;
  transform: scale(1);
  transition: transform .45s cubic-bezier(.16,1,.3,1), background .45s cubic-bezier(.16,1,.3,1);
}
.cursor.is-hot i {
  transform: scale(2.15);
  background: rgba(244,241,236,.18);
}
@media (hover: none) { .cursor { display: none !important; } }


html.has-motion .overlay {
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path .95s cubic-bezier(.16,1,.3,1), visibility 0s .95s;
}
html.has-motion body.menu-open .overlay {
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0);
  transition: clip-path .95s cubic-bezier(.16,1,.3,1), visibility 0s 0s;
}
html.has-motion .overlay a {
  opacity: 1;
  transform: none;
  overflow: visible;
  clip-path: inset(100% -0.12em 0 -0.12em);
}
html.has-motion body.menu-open .overlay a {
  clip-path: inset(0 -0.12em);
  transition: clip-path .8s cubic-bezier(.16,1,.3,1);
}
html.has-motion body.menu-open .overlay a:nth-child(1) { transition-delay: .08s; }
html.has-motion body.menu-open .overlay a:nth-child(2) { transition-delay: .14s; }
html.has-motion body.menu-open .overlay a:nth-child(3) { transition-delay: .2s; }
html.has-motion body.menu-open .overlay a:nth-child(4) { transition-delay: .26s; }
html.has-motion body.menu-open .overlay a:nth-child(5) { transition-delay: .32s; }
html.has-motion body.menu-open .overlay a:nth-child(6) { transition-delay: .38s; }
html.has-motion body.menu-open .overlay a:nth-child(7) { transition-delay: .44s; }

.glare-card { position: relative; overflow: hidden; }
.glare-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(-40deg, transparent 58%, rgba(255,255,255,.42) 70%, transparent 82%);
  background-size: 250% 250%;
  background-position: -100% -100%;
  transition: background-position .7s cubic-bezier(.16,1,.3,1);
}
.glare-card:hover::before { background-position: 100% 100%; }
.credit.glare-card > * { position: relative; z-index: 2; }

.strip-progress {
  width: min(8rem, 28vw);
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
  align-self: end;
  margin-bottom: .45rem;
}
.strip-progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@media (min-width: 768px) {
  html.has-motion #film { overflow: hidden; }
  html.has-motion #film .strip {
    overflow: visible;
    padding-bottom: 0;
  }
  html.has-motion #film .strip figure { will-change: transform; }
}

.lane-media img { will-change: transform, clip-path; }

.scroll-hair {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 54;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .hero-rays, .cursor, .scroll-hair, .strip-progress { display: none !important; }
  .glare-card::before { transition: none; }
  html.has-motion .overlay,
  html.has-motion body.menu-open .overlay,
  html.has-motion .overlay a,
  html.has-motion body.menu-open .overlay a {
    clip-path: none;
    transition: none;
  }
}