/* Hero with the animated STOCKTRACE360 cube on the dark nebula ground, in both appearances.
   The cube assembles, the route draws itself, then a light travels the route like an asset through its stations. */
:root{--hh:72px}
@media(max-width:520px){:root{--hh:60px}}

.hero{padding:0}
[data-theme=dark] .hero{color-scheme:dark;--navy:#ece8f7;--blue:#7552d6;--blue-hover:#8463e0;--accent:#e2459b;--accent-text:#ff8fc8;--tint-accent:rgb(255 143 200 / .14);--pale:#161129;--line:#2f2752;--muted:#b3abcc;--lead:#cfc8e3;--frame-border:#2f2752;--secondary-hover:rgb(196 176 255 / .12);--surface:#1e1838;--link:#c4b0ff;--shadow:0 0 0;color:var(--navy);background:radial-gradient(55% 75% at 84% 22%,rgb(226 69 155 / .18),transparent 62%),#161129;background-size:100% calc(100svh - var(--hh)),auto;background-repeat:no-repeat}
.hero h1,.hero .strip-text strong{color:var(--navy)}
[data-theme=dark] :is(.hero .overline,.hero .button-secondary){color:var(--link)}
[data-theme=dark] .hero .button-secondary{border-color:var(--link);background:transparent}
[data-theme=dark] .hero .button-primary{box-shadow:0 6px 20px rgb(117 82 214 / .35)}
.hero-lead{color:var(--lead)}
.hero-badge{box-shadow:none}
[data-theme=dark] .hero-strip{--icon-p:#ece8f7;--icon-a:#ff8fc8}
.hero .hero-strip{margin-top:0;padding:28px 0 40px;border-top:0}

.hero-stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;column-gap:clamp(32px,5vw,80px);box-sizing:border-box;min-height:calc(100svh - var(--hh));padding-block:clamp(28px,6vh,88px)}
.hero-text{display:grid;justify-items:start}
.hero-text h1{margin-top:clamp(16px,2.6vh,26px);font-size:clamp(2.6rem,min(4.9vw,9.2vh),5.4rem);line-height:1.04}
.hero-text .hero-lead{max-width:52ch;margin-top:clamp(16px,2.6vh,28px)}
.hero-text .hero-actions{margin-top:clamp(22px,3.4vh,36px)}

/* The cube */
.hero-logo{position:relative;justify-self:center;width:min(100%,clamp(260px,32vw,500px),62vh);aspect-ratio:1;perspective:1000px}
.hero-logo::before{content:"";position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(closest-side,rgb(226 69 155 / .22),rgb(117 82 214 / .14) 55%,transparent);filter:blur(24px);animation:logo-glow 7s ease-in-out 2.4s infinite alternate both}
.hero-logo-tilt{position:relative;width:100%;height:100%;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hero-logo svg{display:block;width:100%;height:100%;overflow:visible;animation:logo-float 6s ease-in-out 2.4s infinite alternate}
.cube-base{animation:cube-fade .5s ease-out .55s both}
.cube-top{animation:cube-top .9s cubic-bezier(.16,1,.3,1) .05s both}
.cube-left{animation:cube-left .9s cubic-bezier(.16,1,.3,1) .15s both}
.cube-right{animation:cube-right .9s cubic-bezier(.16,1,.3,1) .25s both}
.cube-route{stroke-dasharray:1;animation:cube-draw 1.2s linear .95s both}
.cube-node{transform-box:fill-box;transform-origin:center}
.cube-node-1{animation:cube-pop .5s cubic-bezier(.34,1.56,.64,1) 1.1s both}
.cube-node-2{animation:cube-pop .5s cubic-bezier(.34,1.56,.64,1) 1.58s both}
.cube-node-3{animation:cube-pop .5s cubic-bezier(.34,1.56,.64,1) 2.08s both}
.cube-pulse,.cube-ring{pointer-events:none}
@keyframes cube-fade{from{opacity:0}}
@keyframes cube-top{from{opacity:0;transform:translate(0,-110px)}}
@keyframes cube-left{from{opacity:0;transform:translate(-95px,55px)}}
@keyframes cube-right{from{opacity:0;transform:translate(95px,55px)}}
@keyframes cube-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes cube-pop{from{opacity:0;transform:scale(.3)}}
@keyframes logo-float{to{transform:translateY(-10px)}}
@keyframes logo-glow{from{opacity:.75}to{opacity:1}}

/* The journey icon stays away while the hero is in view: the cube is the one visual here */
.at-hero .journey-orbit,.at-hero .journey-track{opacity:0}
.journey-orbit{transition:opacity .3s}

@media(max-width:800px){
.hero-stage{grid-template-columns:1fr;align-content:center;row-gap:clamp(12px,2.4vh,28px);padding-block:20px}
.hero-logo{order:-1;justify-self:start;width:clamp(84px,13vh,180px)}
.hero-text h1{font-size:clamp(2.1rem,min(10.6vw,6.2vh),4rem);margin-top:14px}
.hero-text .hero-lead{margin-top:14px}
.hero-text .hero-actions{margin-top:22px}
}
@media(max-width:520px){.hero-text .hero-lead{font-size:17px;line-height:1.5}}
@media(max-width:800px) and (max-height:760px){.hero-lead-next{display:none}}

@media(prefers-reduced-motion:reduce){
.hero-logo::before,.hero-logo svg,.cube-base,.cube-top,.cube-left,.cube-right,.cube-route,.cube-node{animation:none}
.cube-route{stroke-dashoffset:0}
.cube-pulse,.cube-ring{display:none}
.hero-logo-tilt{transform:none;transition:none}
}
@media(max-width:800px) and (max-height:700px){.hero-logo{width:64px}.hero-stage{row-gap:10px}.hero-text h1{margin-top:10px}}