/* ==========================================================================
   VLGE site · transitions and interactions (shared, few, technical)
     page change   the new page wipes in top to bottom; a 1.5px lilac line runs across the top
     section       a hairline draws across its top edge once, as it arrives
     nav           one indicator slides between links
     frames        hovering a card or a media frame shows viewfinder corners
     buttons       a single sheen passes across on hover
   ========================================================================== */
@keyframes vt-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes vt-out{to{opacity:.0}}
::view-transition-new(root){animation:vt-in .55s cubic-bezier(.65,0,.35,1) both}
::view-transition-old(root){animation:vt-out .35s ease both}

#xfer{position:fixed;left:0;right:0;top:0;height:1.5px;z-index:2147482000;pointer-events:none;background:var(--lilac);transform:scaleX(0);transform-origin:left center;opacity:1}
#xfer.run{transition:transform .7s cubic-bezier(.65,0,.35,1),opacity .4s ease .7s;transform:scaleX(1);opacity:0}
#xfer.go{transition:transform 1.4s cubic-bezier(.2,.7,.1,1);transform:scaleX(.7);opacity:1}

main>section:not(:first-child)::before,body>section:not(:first-of-type)::before{content:"";position:absolute;left:var(--m);right:var(--m);top:0;height:1px;background:var(--line-2);
  transform:scaleX(0);transform-origin:left center;transition:transform 1.3s cubic-bezier(.65,0,.35,1);pointer-events:none}
section.is-seen::before{transform:scaleX(1)!important}

.nav__links{position:relative}
.nav__links a.on::after{display:none}
.nav__ind{position:absolute;bottom:0;left:0;height:1.5px;width:0;background:var(--lilac);border-radius:2px;transition:transform .45s cubic-bezier(.2,.7,.1,1),width .45s cubic-bezier(.2,.7,.1,1);pointer-events:none}

.ticks{position:absolute;inset:14px;pointer-events:none;z-index:6;opacity:0;transition:inset .35s cubic-bezier(.2,.7,.1,1),opacity .25s ease;
  --t:var(--lilac);
  background:
    linear-gradient(var(--t),var(--t)) top left/12px 1.5px no-repeat,linear-gradient(var(--t),var(--t)) top left/1.5px 12px no-repeat,
    linear-gradient(var(--t),var(--t)) top right/12px 1.5px no-repeat,linear-gradient(var(--t),var(--t)) top right/1.5px 12px no-repeat,
    linear-gradient(var(--t),var(--t)) bottom left/12px 1.5px no-repeat,linear-gradient(var(--t),var(--t)) bottom left/1.5px 12px no-repeat,
    linear-gradient(var(--t),var(--t)) bottom right/12px 1.5px no-repeat,linear-gradient(var(--t),var(--t)) bottom right/1.5px 12px no-repeat}
.has-ticks:hover>.ticks{opacity:1;inset:8px}

.cta,.nav__cta{position:relative;overflow:hidden}
.cta::after,.nav__cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:none}
.cta:hover::after,.nav__cta:hover::after{left:130%;transition:left .7s cubic-bezier(.2,.7,.1,1)}

@media (prefers-reduced-motion:reduce){
  ::view-transition-new(root),::view-transition-old(root){animation:none}
  section::before{transition:none!important;transform:scaleX(1)!important}
  #xfer{display:none}
}

/* ---------- the figures as unit squares (waffle.js) ---------- */
.stats{grid-template-columns:1fr!important;gap:0!important;padding-top:0!important}
.stats .stat.has-waffle{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.5fr);column-gap:clamp(24px,4vw,72px);align-items:center;
  padding:26px 0!important;border-top:1px solid var(--line-2)!important;border-left:0!important}
.stats .stat.has-waffle .n{grid-column:1;grid-row:1;font-size:clamp(48px,5.6vw,96px)}
.stats .stat.has-waffle .l{grid-column:1;grid-row:2}
.stats .stat.has-waffle .waffle{grid-column:2;grid-row:1/span 2}
.waffle{display:grid;grid-template-columns:repeat(20,14px);gap:4px;align-content:center}
.waffle i{display:block;width:14px;height:14px;border-radius:2px;background:var(--line);transition:background-color .25s ease,transform .35s cubic-bezier(.3,1.5,.5,1);transform:scale(.6)}
.waffle i.on{transform:none}
.waffle--build i.on{background:var(--lilac)}
.waffle--play i.on{background:var(--lilac-lo)}
.waffle--points i.on{background:var(--ink);opacity:.75}
.waffle i.more{background:none;outline:1.5px dashed var(--lilac-lo);outline-offset:-2px}
.waffle i.more.on{background:none}
.glance__stats .gstat .waffle{grid-template-columns:repeat(10,7px);gap:2px;margin-top:12px}
.glance__stats .gstat .waffle i{width:7px;height:7px;border-radius:1px}
@media (max-width:860px){
  .stats .stat.has-waffle{grid-template-columns:1fr}
  .stats .stat.has-waffle .waffle{grid-column:1;grid-row:3;margin-top:16px;grid-template-columns:repeat(20,minmax(0,1fr))}
  .stats .stat.has-waffle .waffle i{width:auto;aspect-ratio:1;height:auto}
}