/* Load-in, scroll reveals, ambient loops. */

@keyframes navDrop{from{transform:translateY(-100%)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes unfade{from{opacity:1}to{opacity:0}}
@keyframes wipe{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes blink{50%{opacity:0}}

nav{animation:navDrop var(--spring-smooth) .05s both}
@keyframes segDrop{from{transform:translateY(calc(var(--nav-h) * -1))}to{transform:none}}
@keyframes segRise{from{transform:translateY(calc(100% + 24px + env(safe-area-inset-bottom)))}to{transform:none}}
.seg{animation:segDrop var(--spring-smooth) .05s both}
@media (max-width:768px){.seg{animation:segRise var(--spring-smooth) .9s both}}

.h-eyebrow{animation:rise var(--spring-smooth) .2s both}
.hero-sql{animation:rise var(--spring-smooth) .28s both}
h1{animation:rise var(--spring-smooth) .38s both}
.h-desc{animation:rise var(--spring-smooth) .5s both}
.h-actions{animation:rise var(--spring-smooth) .62s both}
.hero-panel{animation:rise var(--spring-smooth) .72s both}

/* Left-to-right reveal of the outlined "16": a paper-coloured cover shrinks to the right */
.bg-num::after{
  content:'';position:absolute;inset:-4% -4% -4% -4%;
  background:var(--paper);transform-origin:100% 50%;
  animation:wipe var(--spring-gentle) .55s both;
}

.avail-dot{animation:blink 2s step-end infinite}

/* Glitch: slice regions are fixed per burst (set by glitch.js); only transform/opacity step */
h1.glitch::before,h1.glitch::after{will-change:transform}
h1.glitch::before{clip-path:var(--gb0);animation:glB var(--gd,.14s) steps(1) forwards}
h1.glitch::after{clip-path:var(--ga0);animation:glA var(--gd,.14s) steps(1) forwards}
@keyframes glA{
  0%  {transform:translateX(3px);opacity:1}
  33% {transform:translateX(-2px)}
  66% {transform:translateX(4px)}
  100%{transform:none;opacity:0}
}
@keyframes glB{
  0%  {transform:translateX(-3px);opacity:1}
  33% {transform:translateX(2px)}
  66% {transform:translateX(-4px)}
  100%{transform:none;opacity:0}
}

/* Scroll reveals — hidden state only when JS can reveal them */
.js .reveal,.js .proj{opacity:0;transform:translateY(var(--reveal-shift))}
.js .reveal.on,.js .proj.in{
  opacity:1;transform:none;
  transition:opacity var(--spring-smooth),transform var(--spring-smooth);
}
.js a.proj.in:active{
  transform:scale(var(--press-scale-row));
  transition:opacity var(--spring-smooth),transform var(--spring-interactive);
}