/* 3D robot hero (replaces the old .hero). Pinned scroll scene: robot in a meadow -> zoom into the face -> green light -> next section */
.rhero{position:relative;height:380vh;background:var(--bg)}
.rh-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg)}
#rh-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.rh-grad{position:absolute;left:0;right:0;bottom:0;height:52%;z-index:4;pointer-events:none;
  background:linear-gradient(to top,rgba(6,6,7,.94) 0%,rgba(6,6,7,.7) 45%,rgba(6,6,7,0) 100%)}
.rh-copy{position:absolute;left:0;right:0;margin:0 auto;bottom:clamp(22px,5vh,56px);z-index:5;text-align:center;will-change:transform,opacity}
.rh-copy .hero-title{font-size:clamp(40px,7.6vw,128px);margin-bottom:clamp(12px,2vh,22px)}
.rh-copy .hero-sub{margin-bottom:0;font-size:clamp(14px,1.2vw,19px)}
.rh-flash{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;display:none;
  filter:drop-shadow(0 0 40px rgba(158,230,0,.9)) drop-shadow(0 0 120px rgba(158,230,0,.55))}
@media (max-width:820px) and (orientation:portrait){
  .rh-grad{display:none}
  .rh-copy{bottom:auto;top:calc(var(--nav-h) + 10px)}
  .rh-copy .hero-title{font-size:clamp(34px,11.5vw,60px)}
  .rh-copy .hero-sub{font-size:13px;line-height:1.5;max-width:34ch}
}
/* no WebGL / model failed: plain static hero, nothing breaks */
.rh-fail .rhero{height:auto}
.rh-fail .rh-stick{position:relative;height:auto;min-height:100svh;display:flex;align-items:center}
.rh-fail #rh-gl,.rh-fail .rh-flash,.rh-fail .rh-grad{display:none}
.rh-fail .rh-copy{position:relative;bottom:auto;top:auto}
@media (prefers-reduced-motion:reduce){.rhero{height:auto}.rh-stick{position:relative}}

/* phone version: two pre-rendered clips */
.rh-vid{position:absolute;inset:0;z-index:1;background:#050505;transition:background .5s ease}
.rh-vid.green{background:#b1e541}
.rh-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#050505;transform:translateY(16%);-webkit-mask-image:linear-gradient(to bottom,transparent 14%,#000 34%);mask-image:linear-gradient(to bottom,transparent 14%,#000 34%)}
.rh-vid .rv-zoom{opacity:0;transition:opacity .25s ease}
.rh-vid .rv-zoom.on{opacity:1}

/* headline: one-time entrance (on open and whenever the hero comes back). No looping text animations: they repainted
   every frame on top of the WebGL canvas and made the scene flash black on big screens. */
.rh-copy .ht-word.lime{text-shadow:0 0 28px rgba(200,255,0,.35)}
.rh-copy.rh-replay .ht-word{animation:rhWord 1.1s cubic-bezier(.2,.8,.2,1) both}
.rh-copy.rh-replay .ht-word.lime{animation-delay:.18s}
.rh-copy.rh-replay .ht-line:nth-child(2) .ht-word:last-child{animation-delay:.3s}
.rh-copy.rh-replay .hero-sub{animation:rhSub 1s cubic-bezier(.2,.8,.2,1) .75s both}
@keyframes rhWord{from{transform:translateY(118%) skewY(9deg) scale(.96);opacity:0}to{transform:none;opacity:1}}
@keyframes rhSub{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.rh-copy .ht-word{animation:none!important}}

/* rotating last word: letter-by-letter blur out / blur in */
.rh-rot{display:inline-flex;white-space:nowrap;transition:width .55s cubic-bezier(.2,.8,.2,1);font-style:italic;font-weight:500;text-align:left;justify-content:flex-start}
.rh-rot .rl{display:inline-block;font-style:inherit;transition:opacity .45s ease,filter .45s ease,transform .45s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.rh-rot.out .rl{opacity:0;filter:blur(7px);transform:translateY(-.22em) scale(1.08)}
.rh-rot.in .rl{animation:rlIn .75s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
@keyframes rlIn{from{opacity:0;filter:blur(7px);transform:translateY(.28em) scale(.92)}to{opacity:1;filter:blur(0);transform:none}}
.rh-copy .ht-word.lime.rh-rot{animation:none}                      /* the word itself must not carry the generic BOLD glow/rise */
.rh-copy .ht-word.lime.rh-rot .rl{text-shadow:0 0 22px rgba(200,255,0,.35)}
@media (max-width:820px) and (orientation:portrait){
  .rh-copy .hero-title{font-size:clamp(28px,9.2vw,48px)}
  .rh-copy .ht-line:nth-child(2){display:flex;flex-direction:column;align-items:center}   /* MEAN above the rotating word */
  .rh-copy .hero-sub{font-size:12.5px;max-width:32ch}
}