/* Taller Web Pro — reveal states and reduced-motion overrides. */
/* ---------- reveal system (varied by context) ---------- */
.js [data-reveal]{opacity:0;transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out),clip-path 1.3s var(--ease-out);transition-delay:calc(var(--d,0) * 90ms)}
.js [data-reveal="rise"]{transform:translateY(22px)}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal="card"]{transform:translateY(28px) scale(.985)}
.js [data-reveal="frame"]{transform:translateY(40px);clip-path:inset(6% 4% 0 4% round 24px)}
/* project visuals: wipe up from the bottom edge while settling from a slight zoom */
.js [data-reveal="clip"]{opacity:1;transform:scale(1.04);clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--ease-io),transform 1s var(--ease-out)}
.js [data-reveal].is-in{opacity:1;transform:none}
/* only the wipe reveals end on a full-box clip; on text it would cut off descenders */
.js [data-reveal="frame"].is-in,.js [data-reveal="clip"].is-in{clip-path:inset(0 0 0 0 round 0)}
.js [data-reveal="card"].is-in:hover{transform:translateY(-4px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js [data-reveal]{opacity:1;transform:none;clip-path:none}
  .js section::before{transform:none!important}
}


/* ---------- theme transition ---------- */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theme-anim,html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),fill var(--dur-fast) var(--ease)!important}

/* ---------- hero entrance ----------
   With JS the scene starts collapsed (flat, hidden) until hero3d.js sets data-stage-state.
   If the module never runs, a delayed one-shot animation completes the scene anyway. */
.js [data-hero]:not([data-stage-state]) [data-layer],.js [data-hero][data-stage-state="idle"] [data-layer]{transform:translate3d(0,0,0);opacity:0;animation:heroFallback .01s linear 4s forwards}
.js [data-hero]:not([data-stage-state]) [data-layer="grid"]{opacity:1}
@keyframes heroFallback{to{opacity:1;transform:var(--t-final)}}
@media (prefers-reduced-motion:reduce){
  .js [data-hero] [data-layer]{transform:var(--t-final)!important;opacity:1!important;transition:none!important;animation:none!important}
}