/* Motion Prompt #077 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#077 */
/* Motion Prompt #073 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#073 */
/* Motion Prompt #083 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#083 */
/* Motion Prompt #086 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#086 */
/* Motion Prompt #094 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#094 */
/* Motion Prompt #075 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#075 */
/* Desktop motion layer styles (assets/js/site/motion/). Requires tokens.css, base.css, site.css.
   Almost everything here only applies while the layer is armed: html.motion-ready (fine pointer,
   ≥ 1024 px, motion on) or html.lenis (smooth scroll running). Without it, or without JavaScript, the
   page is the plain layout. The underline wipes at the top apply to any hover-capable screen.
   (numbers only: #086 underline 0.45 s in from the left, out to the right; #077 strip layout;
   #083 viewfinder sizes; #094 band; #075 the header's 0.45 s slide.) */

/* --- #086 underline wipes: draw from the left, leave to the right ---------------------------------- */
@media (hover: hover) {
  .study-block__open, .approach__link, .film__slate a, .colophon__credits a, .film__pager-all, .contact__links a {
    text-decoration: none;
    background: linear-gradient(var(--tungsten), var(--tungsten)) 100% 100% / 0 1px no-repeat;
    transition: background-size 450ms var(--ease-io-expo), color var(--dur-2) var(--ease-ui), border-color var(--dur-2) var(--ease-ui);
  }
  .study-block__open:hover, .approach__link:hover, .film__slate a:hover, .colophon__credits a:hover,
  .film__pager-all:hover, .contact__links a:hover { background-size: 100% 1px; background-position-x: 0; }
  .colophon__credits a { text-decoration: underline; text-decoration-color: var(--line-strong); }
  .colophon__credits a:hover { text-decoration-color: transparent; }
  .film__pager-title {
    background: linear-gradient(var(--tungsten), var(--tungsten)) 100% 100% / 0 1px no-repeat;
    transition: background-size 450ms var(--ease-io-expo), color var(--dur-2) var(--ease-ui);
  }
  .film__pager-link:hover .film__pager-title { background-size: 100% 1px; background-position-x: 0; }
}

/* --- Smooth scroll (Lenis 1.3.27's own rules, plus: it drives the scroll, so no CSS smoothing) --- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* --- Header: slides away on the way down past the hero, back on the way up (nav.js) ----------------- */
.motion-ready .site-header {
  transition: background-color 300ms var(--ease-ui), border-color 300ms var(--ease-ui), transform 450ms var(--ease-ui);
}
.motion-ready.header-away .site-header:not(:focus-within) { transform: translateY(-100%); }

/* --- Split text: line and letter masks (room for Cormorant's descenders and accents) ------------- */
.kc-line-mask { padding-block: 0.12em; margin-block: -0.12em; }
.kc-char-mask { padding-block: 0.1em; margin-block: -0.1em; }
.kc-line, .kc-char { will-change: transform; }

/* --- Nav letter roll -------------------------------------------------------------------------------- */
.kc-roll { display: inline-flex; overflow: clip; line-height: 1.3; padding-block: 0.05em; }
.kc-roll__c {
  position: relative; display: inline-block;
  transition: transform 500ms cubic-bezier(0.785, 0.135, 0.15, 0.86) calc(var(--i) * 14ms);
}
.kc-roll__c::after { content: attr(data-c); position: absolute; left: 0; top: 130%; color: var(--paper); }
.site-nav a:hover .kc-roll__c { transform: translateY(-130%); }

/* --- Hero exit: the black that closes over the picture --------------------------------------------- */
.hero__shade { position: absolute; inset: 0; z-index: 1; background: var(--ink-0); opacity: 0; pointer-events: none; }
.motion-ready .hero__stage, .motion-ready .hero__fallback { will-change: transform, clip-path; }
/* The exit fades the call to action with the scroll (hero.js); keyboard focus coming back up from below can
   land on it part-way out, so while it holds focus it is shown whole. */
.motion-ready .hero__foot:has(:focus-visible) { opacity: 1 !important; transform: none !important; }

/* --- Frames: the picture settles to its full frame as the gate opens (frames.js); at rest it is never
   cropped (scale 1), so the composition shown is the one delivered. -------------------------------- */
.motion-ready .kc-settle > img { transform: scale(var(--ps, 1)); transform-origin: 50% 50%; }

/* --- Selected work as a film strip (work.js) ----------------------------------------------------------- */
.work-rail #work { padding-top: 0; padding-bottom: clamp(64px, 5vw, 128px); }
.work-rail, .work-rail body { overscroll-behavior-x: none; }   /* a sideways swipe moves the strip, never history */
/* The pinned box (GSAP wraps it in a .pin-spacer, so it is styled by its own class, not as #work's child). */
.work-rail .work-rail__box {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(76px, 9vh, 112px) clamp(20px, 3vh, 40px);
}
/* The work's head is set as the strip's (the lede beside the title, in mono; a short step to the strip or
   the table) from the first paint, in both views, wherever the layer arms (as the band below): neither
   the arm nor a switch to the Index moves it, and the table starts where the strip did. */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  html[data-motion="on"] #work .section-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 38ch); align-items: end; column-gap: var(--s7);
    margin-bottom: clamp(28px, 4.5vh, 64px);
  }
  html[data-motion="on"] #work .section-head__slate { grid-column: 1 / -1; }
  html[data-motion="on"] #work .section-head__lede { justify-self: end; font-size: var(--step--1); color: var(--paper-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-mono); line-height: 1.7; }
}
.work-rail__view {
  position: relative;
  width: var(--rail-vw, 100%);
  margin-left: calc((100% - var(--rail-vw, 100%)) / 2);
  overflow: clip; overflow-y: visible;   /* clipped sideways only: a focused card's ring above its gate stays whole */
}
.work-rail .work-grid {
  position: relative;
  display: flex; width: max-content; gap: clamp(32px, 2.6vw, 72px);
  padding-inline: var(--rail-pad, 0px);
  will-change: transform;
}
.work-rail .work-card { flex: 0 0 auto; width: var(--rail-card, min(40vw, calc((100svh - 480px) * 2))); }
/* Full frame while the card is on screen; pushed in a little only as it crosses an edge (work.js). */
.work-rail .work-card__frame > :is(.still-move, img, video) { transform: translate3d(var(--px, 0%), 0, 0) scale(var(--ps, 1)); }
.work-rail .work-card__title { font-size: var(--step-3); }
.work-rail .work-note { margin-top: var(--s5); }
.work-rail__hud {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s5);
  margin-top: clamp(24px, 4vh, 48px);
  font-variant-numeric: tabular-nums;
}
.work-rail__count { display: inline-flex; gap: var(--s2); align-items: baseline; color: var(--paper-3); }
.work-rail__mask { display: inline-block; overflow: clip; line-height: 1.2; }
.work-rail__num { display: inline-block; color: var(--tungsten); }
.work-rail__bar { position: relative; height: 1px; background: var(--line-strong); }
.work-rail__fill { position: absolute; inset: 0; background: var(--tungsten); transform-origin: 0 50%; transform: scaleX(0); }
.work-rail__meta { color: var(--paper-2); min-width: 22ch; text-align: right; }

/* --- Viewfinder cursor (cursor.js) --------------------------------------------------------------- */
.kc-cursor {
  position: fixed; left: 0; top: 0; z-index: calc(var(--z-overlay) - 1);
  width: 0; height: 0; pointer-events: none;
}
.kc-cursor__frame {
  position: absolute; left: -56px; top: -31px; width: 112px; height: 62px;
}
.kc-cursor__frame i { position: absolute; width: 14px; height: 10px; border: 0 solid var(--tungsten); }
.kc-cursor__frame i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.kc-cursor__frame i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.kc-cursor__frame i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.kc-cursor__frame i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.kc-cursor__frame b {   /* centre cross */
  position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; translate: -50% -50%;
  background:
    linear-gradient(var(--tungsten), var(--tungsten)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--tungsten), var(--tungsten)) 0 50% / 100% 1px no-repeat;
  opacity: 0.85;
}
.kc-cursor__label {
  position: absolute; left: 0; top: 44px; translate: -50% 0;
  padding: 4px 9px; white-space: nowrap;
  background: rgb(7 8 10 / 0.88); border: 1px solid rgb(244 178 106 / 0.35); border-radius: var(--radius-1);
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--paper);
}
.kc-cursor__label:empty { display: none; }
@media (forced-colors: active) { .kc-cursor { display: none; } }

/* --- Availability band above Contact (credits.js) ----------------------------------------------- */
/* It holds its place from the first paint wherever the layer arms (the desktop query, motion on: the
   head script sets data-motion before then), and the layer only sets it moving. Shown at the arm, it
   would push Contact a quarter screen down under a visitor who arrived on #contact or #credits. */
.marquee { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  html[data-motion="on"] .marquee {
    display: block; overflow: clip;
    margin-inline: calc(50% - 50vw);
    padding-block: clamp(28px, 3vw, 56px);
    border-bottom: 1px solid var(--line);
  }
}
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__unit {
  flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 0.6em; padding-right: 0.6em;
  font-family: var(--font-display); font-style: italic; font-size: clamp(2.4rem, 1rem + 4vw, 7rem); line-height: 1.1;
  color: var(--paper-2); white-space: nowrap;
}
.marquee__unit i { font-style: normal; color: var(--tungsten); }
.marquee__unit span:nth-of-type(2n) { color: var(--paper-3); font-style: normal; font-family: var(--font-mono); font-size: 0.24em; letter-spacing: var(--tracking-mono); text-transform: uppercase; align-self: center; }