/* ==========================================================================
   motion.css — scroll choreography
   Each chapter declares a transition direction on the section
   (`data-transition="up|down|left|right|zoom|fade"`); the elements inside simply
   ask for a reveal (`data-reveal="rise|fade|clip|scale|left|right"`).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reveal primitives
   -------------------------------------------------------------------------- */

[data-reveal] {
  transition:
    opacity var(--dur-2) var(--ease-out),
    transform var(--dur-3) var(--ease-out),
    clip-path 1.1s var(--ease-out),
    filter var(--dur-2) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger) + var(--reveal-delay, 0ms));
  will-change: opacity, transform;
}

[data-reveal="rise"]:not(.is-in) {
  opacity: 0;
  transform: translate3d(0, clamp(22px, 3vw, 42px), 0);
}

[data-reveal="fade"]:not(.is-in) {
  opacity: 0;
}

[data-reveal="scale"]:not(.is-in) {
  opacity: 0;
  transform: scale(1.06);
}

[data-reveal="left"]:not(.is-in) {
  opacity: 0;
  transform: translate3d(clamp(-48px, -5vw, -24px), 0, 0);
}

[data-reveal="right"]:not(.is-in) {
  opacity: 0;
  transform: translate3d(clamp(24px, 5vw, 48px), 0, 0);
}

/* A "clip" reveal is a curtain wipe.
   The clipped layer is a pseudo-element, never the observed element itself:
   clipping the target to zero area also hides it from IntersectionObserver
   and from the browser's lazy-load heuristic. */
[data-reveal="clip"] {
  position: relative;
}

[data-reveal="clip"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--section-bg, var(--ink));
  border-radius: inherit;
  pointer-events: none;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

[data-reveal="clip"].is-in::before {
  clip-path: inset(var(--wipe-top, 0) var(--wipe-right, 0) var(--wipe-bottom, 100%) var(--wipe-left, 0));
}

/* image inside a clip frame gets a gentle settle */
[data-reveal="clip"] img {
  transform: scale(1.06);
  transition: transform 1.5s var(--ease-out);
}

[data-reveal="clip"].is-in img {
  transform: scale(1);
}

.section[data-transition="down"] {
  --wipe-top: 100%;
  --wipe-bottom: 0;
}

.section[data-transition="left"] {
  --wipe-right: 100%;
  --wipe-bottom: 0;
}

.section[data-transition="right"] {
  --wipe-left: 100%;
  --wipe-bottom: 0;
}

/* --------------------------------------------------------------------------
   Section-level arrivals
   -------------------------------------------------------------------------- */

.section__watermark {
  opacity: 0;
  transform: translate3d(0, 0.08em, 0);
  transition: opacity 1.6s var(--ease-out), transform 1.6s var(--ease-out);
}

.section.is-entered .section__watermark {
  opacity: 0.55;
  transform: none;
}

/* The zoom chapter adds a slow settle behind the same wipe. */
.section[data-transition="zoom"] [data-reveal="clip"] {
  transform: scale(1.03);
  transition: transform 1.7s var(--ease-out);
}

.section[data-transition="zoom"] [data-reveal="clip"].is-in {
  transform: none;
}

.section[data-transition="zoom"] [data-reveal="clip"] img {
  transform: scale(1.12);
}

/* --------------------------------------------------------------------------
   Hero intro
   -------------------------------------------------------------------------- */

.hero__title,
.hero__kicker,
.hero__sub,
.hero__foot {
  animation-duration: 1.3s;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: both;
}

.hero__title {
  animation-name: hero-lockup-in;
  animation-delay: 0.12s;
}

.hero__kicker {
  animation-name: fade-rise;
  animation-delay: 0.75s;
}

.hero__sub {
  animation-name: fade-rise;
  animation-delay: 0.9s;
}

.hero__foot {
  animation-name: fade-rise;
  animation-delay: 1.15s;
}

.hero__glow {
  animation-delay: 0s;
}

@keyframes hero-lockup-in {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Scroll progress
   -------------------------------------------------------------------------- */

.progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: calc(var(--z-topbar) + 1);
  height: 2px;
  background: rgb(255 255 255 / 0.08);
  pointer-events: none;
}

.progress__bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--amber), var(--orange));
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  will-change: transform;
}

html[data-tone="accent"] .progress__bar {
  background: var(--ink);
}

/* --------------------------------------------------------------------------
   A little pointer-reactive light on the section media
   -------------------------------------------------------------------------- */

.art-frame {
  --mx: 50%;
  --my: 50%;
}

.art-frame__trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgb(255 178 56 / 0.16), transparent 62%);
  opacity: 0;
  transition: opacity var(--dur-2);
  pointer-events: none;
  mix-blend-mode: screen;
}

.art-frame__trigger:hover::after {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Reduced motion: keep the site calm and fully legible
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal]:not(.is-in) {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }

  [data-reveal="clip"]::before {
    display: none;
  }

  .art-tile {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .hero__title,
  .hero__kicker,
  .hero__sub,
  .hero__foot {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .marquee__track {
    animation: none;
    transform: none;
  }

  .grain {
    animation: none;
  }
}