/* Hero: the logo is cut out of its black box and floats over a lit stage.
   Video is a stacked-alpha MP4 (colour on top, matte below) composited in WebGL;
   the still WebP shows first, and stays for reduced motion or if WebGL is missing. */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-10% -10% 0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 34% at 34% 40%,rgba(70,183,198,.20),transparent 70%),
    radial-gradient(40% 36% at 66% 44%,rgba(232,112,84,.16),transparent 70%),
    radial-gradient(46% 40% at 50% 34%,rgba(120,72,140,.22),transparent 72%);
  filter:blur(18px)}
.hero__stage{--rx:0deg;--ry:0deg;position:relative;width:min(92vw,1040px);margin:0 auto;padding:clamp(28px,6vw,72px) 0 clamp(36px,5vw,64px);perspective:1200px}
.hero__float{position:relative;aspect-ratio:920/416;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform}
.hero__still,.hero__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* shadow cast by the logo shape only (pre-rendered), so sparkles stay clean */
.hero__shadow{position:absolute;left:-6.52%;top:-14.42%;width:113.04%;height:128.85%;transform:translateY(7%);opacity:.9;pointer-events:none;user-select:none}
.hero__canvas{opacity:0;transition:opacity .4s ease}
.hero__stage.is-live .hero__canvas{opacity:1}
.hero__stage.is-live .hero__still{opacity:0;transition:opacity .4s ease .1s}
.hero__floor{position:absolute;left:18%;right:18%;bottom:clamp(14px,2.4vw,30px);height:clamp(14px,2.4vw,30px);border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,0));filter:blur(6px);opacity:.8;pointer-events:none}
.hero__src{position:absolute;width:2px;height:2px;opacity:0;pointer-events:none;left:0;top:0}
/* first view: the sticker drops onto the stage once */
.hero__stage{animation:hero-in .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes hero-in{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero__stage,.hero__float,.hero__floor{animation:none}
  .hero__float{transition:none;transform:none}
}