/* PROTOTYPE: physics hero ("the stack builds itself"). Loaded only by proto-hero.html pages.
   Static CSS in site.css stays the source of truth for the final composition; everything here is progressive. */

/* the CSS build-up animation is replaced by physics */
.js .slab{animation:none}
/* hidden only while the physics entrance is pending; the failsafe reveals them after 3s even if the script never runs */
.phys-pending .hero .slab{opacity:0;animation:phys-failsafe 0s linear 3s forwards}
@keyframes phys-failsafe{to{opacity:1}}

/* slabs drop in from above the hero and are knocked over on scroll: clip at the hero edge (bottom keeps room for shadows) */
.js .hero{clip-path:inset(0 0 -48px 0);overflow-x:clip}
/* the card always sits above any slab (slabs pass behind it); slabs cover the sub text and buttons while falling that slides or falls past them */
.js .hero-card{position:relative;z-index:4}

.phys-measure .slab{transform:none!important;transition:none!important}

/* pointer devices: grab affordance */
.hero__title.phys-live .slab{cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.phys-grabbing,.phys-grabbing *{cursor:grabbing!important}
.hero__title .slab.is-held{z-index:2;box-shadow:0 22px 34px -18px rgb(26 22 8/.55)}
/* first-hover hint: the slab lifts 4px */
.hero__title.phys-hint .slab{transition:transform .24s cubic-bezier(.23,1,.32,1),box-shadow .24s cubic-bezier(.23,1,.32,1)}
.hero__title.phys-hint .slab:hover{transform:translateY(-4px);box-shadow:0 14px 22px -14px rgb(26 22 8/.45)}
@media (prefers-reduced-motion:reduce){.hero__title.phys-hint .slab{transition:none}}