/* ==========================================================
   MOTION — the extra layer of life. Loaded after styles.css
   (and case.css). Everything here is switched off under
   prefers-reduced-motion, and the page reads fine without it.
   ========================================================== */

/* ---------- Page in / out ---------- */
body.is-leaving { opacity: 0; transition: opacity .28s ease; }

/* ---------- Scroll progress ---------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------- Nav: slide in, hide on the way down, return on the way up ---------- */
.nav-bar { animation: navIn 1s var(--ease) .2s both; transition: translate .5s var(--ease); }
.nav-bar.is-hidden { translate: 0 -140%; }
@keyframes navIn { from { opacity: 0; translate: 0 -24px; } }
.nav__links a { position: relative; }
.nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .45s var(--ease);
}
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav__links a.is-active { color: var(--ink); }
.nav__mark .dot { display: inline-block; animation: dotBob 4s var(--ease) 2s infinite; }
@keyframes dotBob {
  0%, 82%, 100% { transform: none; }
  88% { transform: translateY(-6px); }
  94% { transform: translateY(1px); }
}

/* ---------- Word-by-word text ---------- */
.words { animation: none !important; }
.words .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.45em) rotate(4deg);
  transform-origin: 0 100%;
  filter: blur(8px);
  transition:
    opacity .9s var(--ease),
    transform 1.1s var(--ease),
    filter .9s var(--ease);
  transition-delay: calc(var(--i) * 45ms + var(--d0, 0ms));
}
.words.is-in .w { opacity: 1; transform: none; filter: none; }
.hero__title.words { --d0: 150ms; }
/* split elements carry their own motion, so their container stays put */
.words.reveal { opacity: 1; transform: none; }

/* a mint underline that draws itself under the key phrase */
.about__quote.words em,
.work__thread.words em {
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 0 1px;
  transition: background-size 1.2s var(--ease) 1s;
}
.about__quote.words.is-in em,
.work__thread.words.is-in em { background-size: 100% 1px; }

/* ---------- Hero stage ---------- */
.stage__img { animation: stageIn 2s var(--ease) .1s both; }
@keyframes stageIn {
  from {
    opacity: 0;
    transform: translateY(28px) scale(1.03);
    filter: grayscale(1) contrast(1.06) brightness(.95) blur(14px);
  }
}
.stage__subject { translate: calc(var(--mx, 0) * 14px) var(--sy, 0px); }
.stage__light { translate: calc(var(--mx, 0) * -30px) calc(var(--my, 0) * -20px); }
.guide { translate: 0 var(--sy, 0px); }
.stage__caption { opacity: calc(1 - var(--sp, 0)); }

/* the selection frame "lands" like you just clicked the layer */
.select, .select-meta { animation: selIn .9s var(--ease) 1.1s both; }
@keyframes selIn { from { opacity: 0; transform: scale(1.14); } }
.select__h { animation: pop .55s cubic-bezier(.3, 1.7, .5, 1) both; }
.select__h--tl { animation-delay: 1.55s; }
.select__h--tr { animation-delay: 1.62s; }
.select__h--br { animation-delay: 1.69s; }
.select__h--bl { animation-delay: 1.76s; }
@keyframes pop { from { transform: scale(0); } }
.select__tag { animation: typeIn .7s steps(16, end) 1.8s both; }
@keyframes typeIn { from { clip-path: inset(-6px 100% -6px 0); } to { clip-path: inset(-6px -4px -6px 0); } }
.select__size { animation: pop .55s cubic-bezier(.3, 1.7, .5, 1) 2s both; transform-origin: 0 50%; }
.guide { animation: guideIn 1.3s var(--ease) 1.25s both; transform-origin: 100% 50%; }
@keyframes guideIn { from { transform: scaleX(0); opacity: 0; } }
.guide__label { animation: draw .6s var(--ease) 2.3s both; }

/* "since 2011" rolls back through the years on load */
[data-year] { font-variant-numeric: tabular-nums; }

.link-arrow span { display: inline-block; animation: nudge 2.2s var(--ease) 2.4s infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(5px); } }

/* ---------- Numbers ---------- */
.stat .arrow { display: inline-block; transition: transform 1s var(--ease) .35s, opacity 1s var(--ease) .35s; }
.stat.reveal:not(.is-in) .arrow { transform: translateX(-24px); opacity: 0; }
.stat__value { transition: transform .5s var(--ease); }
.stat:hover .stat__value { transform: translateY(-4px); }

/* ---------- Logos ---------- */
.logos__row li { transition: transform .4s var(--ease); }
.logos__row li:hover { transform: translateY(-4px); }

/* ---------- Cases ---------- */
.case__link::after {
  content: "";
  position: absolute; inset: 0 -16px;
  z-index: -1;
  background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), rgba(124, 242, 195, .09), transparent 65%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.case__link:hover::after { opacity: 1; }
.case__title { transition: transform .6s var(--ease); }
.case__link:hover .case__title { transform: translateX(10px); }
.case__logo { transition: opacity .4s var(--ease); }
.case__link:hover .case__logo { opacity: .95; }
.case__cta { transition: color .3s var(--ease), transform .5s var(--ease); }
.case__link:hover .case__cta { transform: translate(4px, -4px); }
.case__index { transition: color .3s var(--ease); }
.case__link:hover .case__index { color: var(--accent); }

/* ---------- About ---------- */
.about__portrait.reveal { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--ease); }
.about__portrait.reveal.is-in { clip-path: inset(0 0 0 0); }
.about__portrait.reveal img { transform: scale(1.18); transition: transform 2s var(--ease), filter .8s var(--ease); }
.about__portrait.reveal.is-in img { transform: none; }

/* ---------- Contact ---------- */
.contact__mail > span { display: inline-block; transition: transform .45s var(--ease); }
.contact__mail:hover > span { transform: translate(4px, -4px) rotate(8deg); }
.magnetic {
  transition:
    opacity .9s var(--ease), transform .9s var(--ease),
    translate .35s var(--ease),
    color .3s var(--ease), border-color .3s var(--ease);
}

/* ---------- Case pages ---------- */
.plate.reveal:not(.is-in) .plate__paper { transform: translateY(32px) scale(.98); }
.plate__paper { transition: transform 1.2s var(--ease); }

/* ---------- Cursor (mouse + trackpad only) ---------- */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 0; height: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.cursor.is-on { opacity: 1; }
.cursor::before {
  content: "";
  position: absolute;
  left: -15px; top: -15px;
  width: 30px; height: 30px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.cursor.is-link::before { transform: scale(1.6); background: rgba(124, 242, 195, .12); }
.cursor.is-label::before { transform: scale(2.5); background: var(--accent); }
.cursor.is-down::before { transform: scale(.8); }
.cursor__label {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%) scale(.6);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.cursor.is-label .cursor__label { opacity: 1; transform: translate(-50%, -50%); }

@media (prefers-reduced-motion: reduce) {
  .words .w { opacity: 1; transform: none; filter: none; }
  .about__portrait.reveal { clip-path: none; }
  .about__portrait.reveal img { transform: none; }
  .nav-bar.is-hidden { translate: none; }
  .cursor, .progress { display: none; }
}