/* Motion direction: one visual language built from thread, wind and fabric. */
html { scrollbar-gutter: stable; }
body.motion-lock { overflow: hidden; }
html:not(.has-js) .reveal { opacity: 1; transform: none; }

.intro-curtain {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  overflow: hidden;
  background: var(--blue);
  color: #fff;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
}
.has-js .intro-curtain { display: grid; }

.intro-curtain::before,
.intro-curtain::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
}
.intro-curtain::before { width: 62vmax; height: 62vmax; }
.intro-curtain::after { width: 38vmax; height: 38vmax; }
.intro-mark { position: relative; z-index: 1; display: grid; justify-items: center; gap: 15px; }
.intro-mark img { width: clamp(125px,17vw,210px); transform: scale(.55) rotate(-12deg); opacity: 0; }
.intro-mark p { margin: 0; font: 500 .62rem var(--mono); letter-spacing: .15em; text-transform: uppercase; color: #d1d9ff; opacity: 0; }
.intro-stitch { width: min(320px,58vw); height: 5px; overflow: hidden; }
.intro-stitch i { display: block; width: 100%; height: 1px; margin-top: 2px; background: repeating-linear-gradient(90deg,var(--yellow) 0 10px,transparent 10px 18px); transform: translateX(-105%); }
.has-js .intro-mark img { animation: intro-logo .85s .08s cubic-bezier(.17,.9,.25,1.2) forwards; }
.has-js .intro-stitch i { animation: intro-thread .72s .36s ease forwards; }
.has-js .intro-mark p { animation: intro-copy .5s .55s ease forwards; }
.has-js .intro-curtain { animation: curtain-fold .82s 1.28s cubic-bezier(.72,0,.22,1) forwards; }

.title-line { display: block; }
.has-js .title-line { opacity: 0; transform: translateY(112%) rotate(2deg); transform-origin: left bottom; animation: title-stitch .72s cubic-bezier(.17,.84,.28,1) forwards; }
.has-js .title-line:nth-child(1) { animation-delay: 1.57s; }
.has-js .title-line:nth-child(2) { animation-delay: 1.69s; }
.has-js .title-line:nth-child(3) { animation-delay: 1.81s; }
.has-js .hero-intro { animation: soft-enter .62s 1.97s ease both; }
.has-js .round-link { animation: soft-enter .62s 2.08s ease both; }

.scene-meter { position: fixed; left: 20px; top: 50%; z-index: 75; display: grid; justify-items: center; gap: 8px; color: var(--red); transform: translateY(-50%); font: 500 .56rem var(--mono); mix-blend-mode: difference; pointer-events: none; }
.scene-meter i { position: relative; width: 1px; height: 67px; background: rgba(230,87,66,.32); }
.scene-meter i b { position: absolute; inset: 0; display: block; background: var(--red); transform: scaleY(var(--scene-progress,0)); transform-origin: top; }
.scene-meter em { font-style: normal; opacity: .5; }
.scene-meter.changed span { animation: meter-knot .42s ease; }

.motion-scene h2 { position: relative; }
.motion-scene h2::after { content: ''; display: block; width: min(240px,45%); height: 2px; margin-top: 20px; background: repeating-linear-gradient(90deg,var(--red) 0 9px,transparent 9px 16px); transform: scaleX(0); transform-origin: left; }
.motion-scene.motion-visible h2::after { animation: stitch-heading .9s .2s ease forwards; }
.schools h2::after { background: repeating-linear-gradient(90deg,var(--yellow) 0 9px,transparent 9px 16px); }

.manifesto-logo { transform: translateY(var(--logo-y,0)) rotate(var(--logo-rotate,0)); transition: filter .25s ease; }
.manifesto-logo:hover { filter: drop-shadow(10px 12px 0 rgba(230,87,66,.25)); }
.school-card { --card-shift:0px; }
.school-card.visible:nth-child(odd) { animation: card-float-a 5.2s ease-in-out infinite alternate; }
.school-card.visible:nth-child(even) { animation: card-float-b 5.6s -1.4s ease-in-out infinite alternate; }
.school-card.tilting { animation: none !important; }

@keyframes intro-logo { 70% { opacity:1;transform:scale(1.07) rotate(2deg); } 100% { opacity:1;transform:none; } }
@keyframes intro-thread { to { transform:none; } }
@keyframes intro-copy { to { opacity:1;transform:none; } }
@keyframes curtain-fold { to { clip-path:polygon(0 0,100% 0,100% 0,0 0);visibility:hidden; } }
@keyframes title-stitch { to { opacity:1;transform:none; } }
@keyframes soft-enter { from { opacity:0;transform:translateY(16px); } }
@keyframes meter-knot { 50% { transform:scale(1.7) rotate(10deg); } }
@keyframes stitch-heading { to { transform:scaleX(1); } }
@keyframes card-float-a { to { transform:translateY(-6px) rotate(-.35deg); } }
@keyframes card-float-b { to { transform:translateY(5px) rotate(.35deg); } }
@media(max-width:850px),(pointer:coarse){.scene-meter{display:none}.school-card.visible{animation:none!important}}
@media(prefers-reduced-motion:reduce){body.motion-lock{overflow:auto}.has-js .intro-curtain,.scene-meter{display:none!important}.title-line,.hero-intro,.round-link{opacity:1!important;transform:none!important;animation:none!important}.school-card.visible{animation:none!important}.motion-scene h2::after{transform:none!important;animation:none!important}}