/* Motion layer. Everything here is off without JS and under reduced motion. */

/* ---------- page curtain: ink panel with the yellow slash behind it ---------- */
.cur { display: none; }
.js .cur { display: block; position: fixed; inset: -16vh 0; z-index: 90; pointer-events: none; }
.cur i { position: absolute; inset: 0; clip-path: polygon(0 9%, 100% 0, 100% 91%, 0 100%); transform: translateY(-106%); transition: transform .95s cubic-bezier(.7, 0, .2, 1); will-change: transform; }
.cur i:first-child { background: var(--yellow); transition-delay: .1s; }
.cur i:last-child { background: var(--ink); }
html.is-loading .cur i { transform: none; transition: none; }
html.pre-leave .cur i { transform: translateY(106%); transition: none; }
html.is-leaving .cur i { transform: none; }
html.is-leaving .cur i:first-child { transition-delay: 0s; }
html.is-leaving .cur i:last-child { transition-delay: .1s; }

html.cur-off .cur { display: none; }

/* ---------- scroll progress ---------- */
.prog { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: 0 50%; z-index: 60; pointer-events: none; }

/* ---------- letters rise ---------- */
.js [data-chars] { overflow: hidden; overflow-x: visible; overflow-y: clip; padding-top: .06em; margin-top: -.06em; padding-bottom: .1em; margin-bottom: -.1em; }
.js .ch { display: inline-block; transform: translateY(112%); will-change: transform; }
.js .ch.sp { width: .2em; }
.js .in .ch, .js .in.ch { transform: none; transition: transform 1.05s var(--ease); transition-delay: calc(var(--i) * 26ms + var(--d, 0ms)); }

/* ---------- image reveal + parallax ---------- */
.js .im > .px { clip-path: inset(100% 0 0 0); }
.js .im.in > .px { clip-path: inset(0); transition: clip-path 1.25s cubic-bezier(.7, 0, .2, 1); }
.im { overflow: hidden; }
.px { will-change: transform; }
.im > .px { height: 100%; }
.im > .px > img { transform: scale(1.16); width: 100%; height: 100%; object-fit: cover; }

/* ---------- rules draw in ---------- */
.js .row, .js .dec li { border-top-color: transparent; background: linear-gradient(var(--ink), var(--ink)) 0 0 / 0% 2px no-repeat; transition: background-size 1.2s var(--ease), padding-left .45s var(--ease), opacity .9s var(--ease), transform .9s var(--ease); position: relative; }
.js .row.in, .js .dec li.in { background-size: 100% 2px; }
.row::after, .dec li::after { content: ""; position: absolute; left: 0; top: 46px; width: 30px; height: 12px; background: var(--yellow); clip-path: polygon(0 55%, 100% 0, 100% 45%, 0 100%); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
@media (hover: hover) and (min-width: 1001px) {
  .row:hover, .dec li:hover { padding-left: 52px; }
  .row:hover::after, .dec li:hover::after { transform: scaleX(1); }
}

/* ---------- rolling link text ---------- */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.roll > span { display: block; transition: transform .5s var(--ease); }
.roll::after { content: attr(data-t); position: absolute; left: 0; top: 0; transform: translateY(110%); transition: transform .5s var(--ease); white-space: nowrap; }
@media (hover: hover) {
  a:hover > .roll > span, .roll:hover > span { transform: translateY(-110%); }
  a:hover > .roll::after, .roll:hover::after { transform: none; }
}

/* underline wipes out and back in */
.link { border-bottom: 0; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; padding-bottom: 5px; transition: background-size .45s var(--ease); }
@media (hover: hover) { .link:hover { background-position: 100% 100%; animation: wipe .7s var(--ease); } }
@keyframes wipe { 0% { background-size: 100% 2px; background-position: 100% 100%; } 49% { background-size: 0% 2px; background-position: 100% 100%; } 50% { background-size: 0% 2px; background-position: 0 100%; } 100% { background-size: 100% 2px; background-position: 0 100%; } }

/* ---------- cursor: the slash ---------- */
.cz { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; display: flex; align-items: center; gap: 10px; opacity: 0; transform: translate3d(-100px, -100px, 0); transition: opacity .25s; font-size: 12px; font-weight: 500; white-space: nowrap; }
.cz.on { opacity: 1; }
.cz i { width: 46px; height: 18px; background: var(--yellow); clip-path: polygon(0 55%, 100% 0, 100% 45%, 0 100%); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease); }
.cz.on i { transform: scaleX(1); }
.cz b { background: var(--ink); color: var(--paper); padding: 5px 9px; font-weight: 500; }

/* ---------- hero entrance ---------- */
.js .hero__pic::after { transform: translate(105%, 8%); }
.js .hero__pic.in::after { transform: translateY(8%); transition: transform 1s var(--ease) .7s; }
.js .hero__pic.in:hover::after { transform: translateY(70%); transition-delay: 0s; }
.js .hero__list li { opacity: 0; transform: translateX(-18px); }
.js .in .hero__list li, .js .hero__stage.in .hero__list li { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 90ms + .5s); }
.js .hero__stage { background-size: 100% 0%; }
.spaced.rv { letter-spacing: 2em; }
.spaced.rv.in { letter-spacing: 1.1em; transition: opacity .9s var(--ease), transform .9s var(--ease), letter-spacing 1.4s var(--ease); }

/* ---------- pinned statement ---------- */
.js .pin { height: 240vh; }
.js .pin > .say { position: sticky; top: 0; height: 100vh; min-height: 0; }

/* ---------- work columns ---------- */
.col__shut .t { transition: transform .5s var(--ease); }
@media (hover: hover) { .col:not(.on):hover .col__shut .t { transform: translateX(8px); } }
.col.on .col__open .scope li { animation: slidein .6s var(--ease) both; animation-delay: calc(var(--i) * 70ms + .3s); }
.col.on .col__open figure { animation: clipin .9s cubic-bezier(.7, 0, .2, 1) .2s both; }
@keyframes slidein { from { opacity: 0; transform: translateX(-16px); } }
@keyframes clipin { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

/* ---------- next-case preview follows cursor ---------- */
.peek { position: fixed; left: 0; top: 0; width: 320px; aspect-ratio: 16 / 9; z-index: 40; pointer-events: none; overflow: hidden; opacity: 0; clip-path: inset(50% 0 50% 0); transition: clip-path .5s var(--ease), opacity .3s; }
.peek.on { opacity: 1; clip-path: inset(0); }
.peek img { width: 100%; height: 100%; object-fit: cover; }

/* stat superscripts pop */
.js .nums b sup { display: inline-block; transform: scale(0); transition: transform .5s var(--ease) .9s; }
.js .nums .in b sup, .js .nums.in b sup { transform: none; }

/* footer name: each letter lifts and turns yellow under the cursor */
@media (hover: hover) {
  .js .ft__name .in .ch { transition: transform .9s var(--ease), color .9s; }
  .js .ft__name .in .ch:hover { transform: translateY(-5%); color: var(--yellow); transition: transform .25s var(--ease), color .15s; transition-delay: 0s; }
}

/* stagger helper */
.rv[style*="--i"] { transition-delay: calc(var(--i) * 90ms); }

@media (max-width: 1000px) {
  .js .pin { height: 200vh; }
  .cz, .peek { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .cur { display: none; }
  .js .ch, .js .hero__list li { transform: none; opacity: 1; transition: none; }
  .js .im > .px { clip-path: none; }
  .im > .px > img { transform: none; }
  .js .row, .js .dec li { background-size: 100% 2px; transition: none; }
  .js .pin { height: auto; }
  .js .pin > .say { position: static; height: auto; min-height: 100svh; }
  .js .hero__pic::after { transform: translateY(8%); }
  .js .nums b sup { transform: none; }
  .spaced.rv { letter-spacing: 1.1em; }
  .col.on .col__open .scope li, .col.on .col__open figure, .link:hover { animation: none; }
  .cz, .peek { display: none; }
}

/* ---------- first-visit loader ---------- */
.ld { display: none; }
html.ld-on .ld { display: grid; place-items: center; position: fixed; inset: 0; z-index: 95; background: var(--ink); color: var(--paper); overflow: hidden; cursor: progress; }
.ld__name { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .22em; font-size: 10.4vw; line-height: .9; letter-spacing: -.012em; padding: 0 var(--pad); }
.ld__w { display: inline-flex; white-space: nowrap; }
.ld__c { display: inline-block; overflow: hidden; padding-top: .05em; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s)); opacity: 0; color: #8e8e8a; will-change: transform; }
.ld.is-in .ld__c { opacity: 1; transition: opacity .35s linear calc(var(--i) * 18ms); }
.ld.is-sorted .ld__c { transform: none; color: var(--paper); transition: transform 1.25s cubic-bezier(.76, 0, .18, 1) calc(var(--i) * 34ms), color .9s linear calc(var(--i) * 34ms + .5s), opacity .35s linear; }
.ld__c > span { display: block; }
.ld.is-out .ld__c > span { transform: translateY(-112%); transition: transform .55s cubic-bezier(.7, 0, .2, 1) calc(var(--i) * 16ms); }
.ld__slash { align-self: center; width: .62em; height: .34em; margin-left: .06em; background: var(--yellow); clip-path: polygon(0 55%, 100% 0, 100% 45%, 0 100%); transform: scaleX(0); transform-origin: 0 50%; }
.ld.is-sorted .ld__slash { transform: scaleX(1); transition: transform .5s var(--ease) 1.35s; }
.ld.is-out .ld__slash { transform: scaleX(0); transform-origin: 100% 50%; transition: transform .3s var(--ease); }
.ld__base { position: absolute; left: var(--pad); right: var(--pad); bottom: 30px; display: flex; justify-content: space-between; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--mute-d); font-variant-numeric: tabular-nums; opacity: 0; }
.ld.is-in .ld__base { opacity: 1; transition: opacity .4s linear .2s; }
.ld.is-out .ld__base { opacity: 0; transition: opacity .25s linear; }
@media (max-width: 1000px) { .ld__name { font-size: 21vw; } .ld__slash { display: none; } }