/* Motion layer (draft): sections flow into each other and the background follows the cursor.
   Everything here only switches on when motion.js adds .motion to <html>, and is off for
   people who ask their device for reduced motion. */

/* 1. Content rises into place as each section scrolls into view */
.motion [data-reveal] {
  opacity: 0; transform: translate3d(0, 36px, 0);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Hero headline lines slide up from behind a mask on load */
.motion .hero__title span { overflow: hidden; }
.motion .hero__title span > i { display: inline-block; font-style: normal; transform: translateY(105%); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 120ms + 150ms); }
.motion.is-loaded .hero__title span > i { transform: none; }

/* Section heading underline draws across when the section arrives */
.motion .section__head { border-bottom-color: transparent; position: relative; }
.motion .section__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.2,.7,.2,1) .2s; }
.motion .section__head.is-in::after { transform: scaleX(1); }

/* 2. Flow between sections: a section that changes from light to dark (or back)
   opens up from a rounded, slightly inset shape as it scrolls in, so one section
   pours into the next instead of cutting hard. JS sets --open from 0 to 1. */
.motion [data-flow] {
  clip-path: inset(0 calc((1 - var(--open, 1)) * 4%) round calc((1 - var(--open, 1)) * 48px));
  will-change: clip-path;
}

/* Gentle depth: hero content drifts slower than the page, project images drift inside their frames */
.motion .hero > *:not(.hero__square) { transform: translate3d(0, calc(var(--drift, 0) * 1px), 0); }
.motion .hero__square { transform: translate3d(0, calc(var(--drift, 0) * -0.6px), 0) rotate(calc(var(--drift, 0) * 0.04deg)); }
.motion .project__img img, .motion .cs-row img { scale: 1.08; translate: 0 calc(var(--par, 0) * 1%); }
.motion .project:hover .project__img img { scale: 1.12; }

/* 3. Cursor spotlight on laptops: the faint square pattern lights up around the
   cursor and trails it smoothly, on white and on black. */
.cursorfx section, .cursorfx .footer, .touchfx section, .touchfx .footer { position: relative; isolation: isolate; }
.cursorfx section::before, .cursorfx .footer::before, .touchfx section::before, .touchfx .footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--glow, 0); transition: opacity .5s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Crect x='16' y='16' width='4' height='4' fill='none' stroke='%23000' stroke-opacity='0.55'/%3E%3C/svg%3E"),
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(0,0,0,0.05), transparent 60%);
  -webkit-mask-image: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.35) 45%, transparent 100%);
          mask-image: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.35) 45%, transparent 100%);
}
.cursorfx .dark::before, .cursorfx .footer::before, .touchfx .dark::before, .touchfx .footer::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Crect x='16' y='16' width='4' height='4' fill='none' stroke='%23fff' stroke-opacity='0.6'/%3E%3C/svg%3E"),
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.07), transparent 60%);
}
/* A small square follows the cursor, the same square as in the Nothing. mark */
.cursor-dot { position: fixed; left: 0; top: 0; width: 10px; height: 10px; border: 1.5px solid #fff; mix-blend-mode: difference; pointer-events: none; z-index: 100; opacity: 0; transition: opacity .3s, width .25s, height .25s, margin .25s; margin: -5px 0 0 -5px; }
.cursorfx .cursor-dot { opacity: 1; }
.cursor-dot.is-big { width: 36px; height: 36px; margin: -18px 0 0 -18px; }

/* Phones: the light follows your finger while you touch and scroll, then fades out.
   The flow shape is a little tighter so it suits a narrow screen. */
.touchfx section::before, .touchfx .footer::before {
  -webkit-mask-image: radial-gradient(circle 170px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.35) 45%, transparent 100%);
          mask-image: radial-gradient(circle 170px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.35) 45%, transparent 100%);
  transition: opacity .8s ease;
}
@media (max-width: 680px) {
  .motion [data-flow] { clip-path: inset(0 calc((1 - var(--open, 1)) * 3%) round calc((1 - var(--open, 1)) * 28px)); }
  .motion [data-reveal] { transform: translate3d(0, 24px, 0); }
  .motion [data-reveal].is-in { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal], .motion .hero__title span > i { opacity: 1; transform: none; transition: none; }
  .motion [data-flow] { clip-path: none; }
}