/* Yanga v10 · movement that never stops. Logo colours only. */

/* ---------------------------------------------- the cover: stage lift -- */
.stage__lift { position: absolute; inset: 0; clip-path: inset(-60% -60% 0 -60%); }
.stage__lift .stage__img { transition: transform 460ms cubic-bezier(.55, 0, .8, .2); }
.stage__lift.is-down .stage__img { transform: translateY(104%); }
.stage__lift.is-up .stage__img { transition: transform 700ms cubic-bezier(.2, 1.15, .35, 1); }
/* the disc breathes as the lift moves */
.stage__fig:has(.stage__lift.is-down) .stage__disc { scale: .94; }
.stage .stage__disc { transition: background-color 700ms var(--sc-ease-out), scale 500ms var(--sc-ease-out); }

/* ---------------------------------------------- the cover: the name rises -- */
.cv-mast { overflow: hidden; padding-top: .06em; }
.cv-mast .rl { display: inline-block; transform: translateY(105%); }
.cv-mast.is-in .rl { animation: rlUp 620ms cubic-bezier(.2, 1.25, .35, 1) both; animation-delay: calc(var(--d) * 90ms); }
.cv-mast.is-out .rl { animation: rlDown 420ms cubic-bezier(.6, 0, .85, .3) both; animation-delay: calc(var(--d) * 45ms); }
@keyframes rlUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes rlDown { from { transform: none; } to { transform: translateY(105%); } }
/* a stage light passes over the name while it stands */
.cv-mast #mast { position: relative; display: inline-block; }
.cv-mast #mast::after { content: ""; position: absolute; inset: -10% auto -10% 0; width: 22%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(255 248 236 / .75), transparent); mix-blend-mode: soft-light; opacity: 0; }
.cv-mast.is-lit #mast::after { animation: none; }   /* the light pass read as a pale box; the rising letters carry it */
@keyframes lightPass { 0% { opacity: 0; left: -25%; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; left: 105%; } }

/* ---------------------------------------------- the cover: lines take turns -- */
.cv-say.is-turns > * { transition: opacity 500ms, translate 500ms var(--sc-ease-out); opacity: .32; position: relative; width: fit-content; }
.cv-say.is-turns > .is-lit { opacity: 1; translate: .35em 0; }
.cv-say.is-turns > *::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: 3px; background: var(--orange); transform-origin: 0 50%; scale: 0 1; transition: scale 600ms var(--sc-ease-out); }
.cv-say.is-turns > .is-lit::after { scale: 1 1; }
.cv-say__tr.is-turns { position: relative; min-height: 1.4em; }
.cv-say__tr.is-turns span { position: absolute; left: 0; top: 0; opacity: 0; translate: 0 .5em; transition: opacity 400ms, translate 400ms var(--sc-ease-out); white-space: nowrap; }
.cv-say__tr.is-turns span.is-lit { opacity: 1; translate: 0 0; }

/* ---------------------------------------------- the cover: odometer numbers -- */
.odo { display: inline-flex; align-items: baseline; }
.odo__d { display: inline-block; height: 1em; line-height: 1; overflow: hidden; }
.odo__col { display: flex; flex-direction: column; }
.odo__col i { font-style: normal; height: 1em; line-height: 1; }
.odo.is-set .odo__col { transform: translateY(calc(var(--n) * -1em)); transition: transform 1.6s cubic-bezier(.2, .8, .2, 1) calc(var(--k) * 70ms); }
.odo__s { line-height: 1; }

/* ---------------------------------------------- No. 01: the logo is alive -- */
.n-plate--live { display: block; overflow: visible; }
.n-plate--live .np-shine { animation: npShine 5.5s cubic-bezier(.45, 0, .2, 1) infinite; }
.n-plate--live .np-shine--bar { animation-delay: .45s; }
@keyframes npShine { 0%, 30% { transform: translateX(0); } 75%, 100% { transform: translateX(1700px); } }
.n-plate--live .np-tri { transform-box: fill-box; transform-origin: 50% 100%; animation: npTri 5.5s ease-in-out infinite; }
.n-plate--live .np-tri--c { animation-delay: .35s; }
@keyframes npTri { 0%, 62%, 100% { transform: none; } 70% { transform: translateY(-22px) scale(1.12); } 78% { transform: translateY(3px) scale(.97); } 84% { transform: none; } }
.n-plate--live .np-the { transform-box: fill-box; transform-origin: 50% 50%; animation: npThe 5.5s ease-in-out infinite; }
@keyframes npThe { 0%, 40%, 100% { letter-spacing: 0; transform: none; } 50% { transform: scaleX(1.04); } 58% { transform: none; } }
.n-plate--live .np-office-wipe { animation: npWrite 5.5s cubic-bezier(.6, 0, .3, 1) infinite; transform-box: fill-box; transform-origin: 0 50%; }
@keyframes npWrite { 0% { transform: scaleX(0); } 22%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); transform-origin: 100% 50%; } }
.n-plate--live .np-bar { transform-box: fill-box; transform-origin: 0 50%; animation: npBar 5.5s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes npBar { 0% { transform: scaleX(.96); } 12% { transform: scaleX(1); } 100% { transform: scaleX(1); } }

/* ---------------------------------------------- No. 05: the drifting row -- */
.flips.is-drifting { scroll-snap-type: none; scroll-behavior: auto; }

/* ---------------------------------------------- standing orders: playing -- */
.ocard__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms; }
.ocard.is-live .ocard__vid { opacity: 1; }
.ocard.is-live .gal__play { opacity: .85; scale: .8; }
.ocard__media .ocard__no, .ocard__media .gal__play { z-index: 2; }
.ocard.is-live .ocard__media::after { content: "Playing · tap for sound"; position: absolute; z-index: 2; left: 10px; bottom: 10px; padding: .3rem .55rem; border-radius: 99px;
  background: rgb(21 18 15 / .7); color: var(--bone); font: 700 .66rem/1 var(--sc-font-text); letter-spacing: .06em; }

/* ---------------------------------------------- No. 06: each film arrives its own way --
   (still driven by the scroll, so it reverses when you scroll back up) */
.oath .panel:nth-child(1) .panel__film { clip-path: circle(calc(var(--t) * 78%) at 50% 58%); }
.oath .panel:nth-child(2) .panel__film { clip-path: none;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(var(--t) * 12.5%), transparent calc(var(--t) * 12.5%) 12.5%);
          mask: repeating-linear-gradient(90deg, #000 0 calc(var(--t) * 12.5%), transparent calc(var(--t) * 12.5%) 12.5%); }
.oath .panel:nth-child(3) .panel__film { clip-path: inset(0 calc(50% * (1 - var(--t))) 0 calc(50% * (1 - var(--t)))); }
.oath .panel__film video, .oath .panel__film img { transform: scale(calc(1.32 - .32 * var(--t))) rotate(calc((1 - var(--t)) * var(--tw, 0deg))); }
.oath .panel:nth-child(1) { --tw: -4deg; } .oath .panel:nth-child(3) { --tw: 4deg; }
.oath .panel__film::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--orange); mix-blend-mode: multiply;
  opacity: calc((1 - var(--t)) * .9); }
.oath .panel__no { transform: translateY(calc((1 - var(--t)) * -140%)); opacity: var(--t); }
.oath .panel__line .d-md { display: inline-block; transform: translateX(calc((1 - var(--t)) * -1.2em)); }
.oath .panel__line .tr { display: block; opacity: calc(var(--t) * 1.4 - .4); }

/* ---------------------------------------------- No. 11: six cards, six brand colourways -- */
.pile .slip:nth-child(1) { --sb: #FBF7EF; --sq: var(--green); --sl: var(--ink-3); --sf: var(--ink-2); --sn: var(--ink); --sc2: var(--green); }
.pile .slip:nth-child(2) { --sb: var(--green); --sq: var(--bone); --sl: var(--on-green-2); --sf: var(--on-green-2); --sn: var(--bone); --sc2: var(--cognac-lit); }
.pile .slip:nth-child(3) { --sb: #FBF7EF; --sq: var(--cognac); --sl: var(--ink-3); --sf: var(--ink-2); --sn: var(--ink); --sc2: var(--cognac); }
.pile .slip:nth-child(4) { --sb: var(--ink); --sq: var(--cognac-lit); --sl: #CDBFAE; --sf: #CDBFAE; --sn: var(--bone); --sc2: var(--cognac-lit); }
.pile .slip:nth-child(5) { --sb: var(--orange); --sq: var(--ink); --sl: #3a2412; --sf: #2a1a0d; --sn: var(--ink); --sc2: var(--ink); }
.pile .slip:nth-child(6) { --sb: var(--cognac); --sq: var(--bone); --sl: #F0DCC6; --sf: #F0DCC6; --sn: var(--bone); --sc2: var(--bone); }
.pile .slip { background: var(--sb); border-color: color-mix(in oklab, var(--sq) 18%, transparent); }
.pile .slip blockquote { color: var(--sq); }
.pile .slip .label, .pile .slip .tr { color: var(--sl); }
.pile .slip footer { color: var(--sf); border-top-color: color-mix(in oklab, var(--sq) 35%, transparent); }
.pile .slip footer b { color: var(--sn); }
.pile .slip .second { border-color: var(--sc2); color: var(--sc2); }
.pile .slip .second[aria-pressed="true"] { background: var(--sc2); color: var(--sb); }
.pile .slip:nth-child(2) .slip-stamp, .pile .slip:nth-child(4) .slip-stamp, .pile .slip:nth-child(6) .slip-stamp { mix-blend-mode: normal; background: transparent; box-shadow: inset 0 0 0 2px var(--sb), inset 0 0 0 3.5px var(--orange); }
.pile .slip:nth-child(6) .slip-stamp { border-color: var(--bone); color: var(--bone); box-shadow: inset 0 0 0 2px var(--sb), inset 0 0 0 3.5px var(--bone); }
.pile .slip:nth-child(5) .slip-stamp { border-color: var(--green); color: var(--green); background: transparent; mix-blend-mode: normal; box-shadow: inset 0 0 0 2px var(--sb), inset 0 0 0 3.5px var(--green); }

/* ---------------------------------------------- now showing: a little more life -- */
.reel__card.is-centre .reel__vid { animation: reelPush 4s linear both; }
@keyframes reelPush { from { transform: scale(1); } to { transform: scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .n-plate--live *, .cv-mast .rl, .cv-mast #mast::after, .reel__card.is-centre .reel__vid { animation: none !important; }
  .cv-mast .rl { transform: none; }
  .oath .panel__film { clip-path: none !important; -webkit-mask: none !important; mask: none !important; }
}

/* the cover numbers: each group its own logo colour, the separator orange, and each digit pops as it lands */
.odo .odo__s { color: var(--orange); }
.odo.is-set .odo__d { animation: odoPop 420ms cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(1400ms + var(--k) * 70ms); }
@keyframes odoPop { 0% { transform: none; } 45% { transform: translateY(-.12em) scale(1.16); } 100% { transform: none; } }
.cv-stat b { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: .22em; }
.cv-stat b.odo, .cv-stat b .odo { gap: 0; }

/* the cover name's third phrase: two lines, half size, same height */
.cv-mast .rl { animation-delay: calc(var(--d) * var(--st, 90ms)) !important; }
.cv-mast.is-out .rl { animation-delay: calc(var(--d) * 22ms) !important; }
.cv-mast.is-two #mast { font-size: .5em; line-height: .8; }
.cv-mast.is-two { line-height: .8; }

/* No. 02: comments type themselves, each card its own colour (on green) */
.ex-title--typed { position: relative; }
.ex-title__ghost { visibility: hidden; display: block; }
.ex-title__live { position: absolute; inset: 0; }
.ex-title--typed.is-typing .ex-title__live::after { content: ""; display: inline-block; width: 2px; height: .95em; margin-left: 2px; vertical-align: -.12em; background: currentColor; animation: caret .8s steps(1) infinite; }


/* No. 06: the first film gets its own entrance: a turning shutter (iris) that also rotates in */
.oath .panel:nth-child(1) .panel__film { clip-path: polygon(50% calc(50% - 110% * var(--t)), calc(50% + 110% * var(--t)) 50%, 50% calc(50% + 110% * var(--t)), calc(50% - 110% * var(--t)) 50%);   /* opens past the corners: ends as the full picture */ }
.oath .panel:nth-child(1) .panel__film video, .oath .panel:nth-child(1) .panel__film img { transform: scale(calc(1.5 - .5 * var(--t))) rotate(calc((1 - var(--t)) * -18deg)); }
.cv-mast .ln { display: block; overflow: hidden; }
@media (max-width: 900px) { .cv-ribbon .stage__pips { gap: 0; } .cv-ribbon .pip { width: 28px; height: 30px; } .cv-ribbon .pip::before { width: 8px; height: 8px; } }