/* Cinematic hero + page motion. Reads the ZaviFx token layer only. */

.zx-hero{position:relative;overflow:hidden;background:var(--color-ink-strong);color:var(--color-on-dark);min-height:min(100svh,940px);display:flex;flex-direction:column;justify-content:center;padding-block:var(--space-hero) var(--space-section);isolation:isolate}
.zx-hero::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(120% 85% at 50% 8%,#1C1410 0%,#0A0A0A 55%,#000 100%)}
.zx-hero::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 1px,rgba(255,255,255,0) 1px 3px);mix-blend-mode:soft-light}

.zx-hero__stage{position:absolute;right:0;top:50%;transform:translateY(-50%);width:min(52vw,660px);aspect-ratio:1;z-index:1;pointer-events:none}
.zx-hero__gl{position:absolute;inset:0;pointer-events:auto}
.zx-hero__static{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88%;filter:drop-shadow(0 30px 70px rgba(217,58,18,.5))}
.zx-hero__static[data-dim]{opacity:0}
.zx-hero__bloom{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,140,60,.26) 0%,rgba(255,110,40,.10) 44%,rgba(255,110,40,0) 70%)}

.zx-hero__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:var(--space-xl);max-width:920px}

.zx-hero__eyebrow{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:var(--type-caption-size);letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-pill);padding:7px 16px;background:rgba(255,255,255,.03)}
.zx-hero__dot{width:6px;height:6px;border-radius:50%;background:var(--color-brand-orange);box-shadow:0 0 0 4px rgba(242,112,28,.18);animation:zx-pulse 2.4s var(--ease-standard) infinite}
@keyframes zx-pulse{0%,100%{box-shadow:0 0 0 3px rgba(242,112,28,.22)}50%{box-shadow:0 0 0 8px rgba(242,112,28,0)}}

.zx-hero__title{font-size:clamp(2.25rem,7.2vw,5.75rem);font-weight:var(--weight-semibold);line-height:1;letter-spacing:-.042em;color:#fff;margin:0;max-width:15ch;text-shadow:0 2px 40px rgba(0,0,0,.45)}
.zx-line{display:block;overflow:hidden;padding-bottom:.06em}
.zx-line__in{display:block;transform:translateY(112%);animation:zx-lineup 1s var(--ease-standard) forwards}
.zx-line__in--accent{background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes zx-lineup{to{transform:none}}

.zx-hero__sub{font-size:clamp(1rem,1.5vw,1.3125rem);line-height:1.55;color:rgba(255,255,255,.72);max-width:52ch;margin:0}
.zx-swap{position:relative;display:inline-grid;vertical-align:bottom;color:#fff;font-weight:var(--weight-semibold);overflow:hidden}
.zx-swap__ghost{visibility:hidden;grid-area:1/1;white-space:nowrap}
.zx-swap__word{grid-area:1/1;white-space:nowrap;opacity:0;transform:translateY(.9em);transition:opacity var(--duration-slow) var(--ease-standard),transform var(--duration-slow) var(--ease-standard);text-align:left;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.zx-swap__word[data-on]{opacity:1;transform:none}

.zx-hero__cta{display:flex;gap:var(--space-md);align-items:center;flex-wrap:wrap}
.zx-hero__cta .zx-btn--primary{background:#fff;color:var(--color-ink-strong)}
.zx-hero__cta .zx-btn--primary:hover{background:var(--color-surface);color:var(--color-ink-strong)}
.zx-ghostbtn{display:inline-flex;align-items:center;gap:var(--space-sm);background:transparent;border:0;color:#fff;font-size:var(--type-body-size);font-weight:var(--weight-medium);cursor:pointer;padding:6px 4px}
.zx-ghostbtn__ring{width:40px;height:40px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:var(--transition-standard)}
.zx-ghostbtn:hover .zx-ghostbtn__ring{background:#fff;color:var(--color-ink-strong);border-color:#fff;transform:translateX(3px)}

.zx-hero__meta{display:flex;gap:var(--space-lg);flex-wrap:wrap;font-size:var(--type-caption-size);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.38)}

.zx-hero__scroll{position:absolute;right:var(--gutter-desktop);bottom:104px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)}
.zx-hero__scrollword{font-size:var(--type-micro-size);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.zx-hero__scrollline{width:1px;height:48px;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));position:relative;overflow:hidden}
.zx-hero__scrollline::after{content:"";position:absolute;inset:0;background:#fff;animation:zx-scrolldrip 2s var(--ease-standard) infinite}
@keyframes zx-scrolldrip{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

.zx-marquee{position:absolute;left:0;right:0;bottom:0;z-index:2;border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.35);overflow:hidden;padding-block:var(--space-md)}
.zx-marquee__track{display:flex;width:max-content;animation:zx-marq 38s linear infinite}
.zx-marquee__set{display:flex}
.zx-marquee__item{display:inline-flex;align-items:center;gap:var(--space-lg);padding-right:var(--space-lg);font-size:var(--type-body-sm-size);letter-spacing:.02em;color:rgba(255,255,255,.52);white-space:nowrap}
.zx-marquee__sep{font-style:normal;color:var(--color-brand-orange);opacity:.75}
@keyframes zx-marq{to{transform:translateX(-50%)}}

/* section reveals */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity 620ms var(--ease-standard),transform 620ms var(--ease-standard)}
[data-reveal][data-shown]{opacity:1;transform:none}
[data-reveal-d="1"]{transition-delay:80ms}[data-reveal-d="2"]{transition-delay:160ms}[data-reveal-d="3"]{transition-delay:240ms}

@media (prefers-reduced-motion:reduce){
  .zx-line__in{transform:none;animation:none}
  .zx-marquee__track,.zx-hero__scrollline::after,.zx-hero__dot{animation:none}
  [data-reveal]{opacity:1;transform:none;transition:none}
}
@media (max-width:1023px){.zx-hero__scroll{display:none}.zx-hero{min-height:auto;padding-block:var(--space-section-lg) 0}.zx-marquee{position:static;margin-top:var(--space-xxxl)}.zx-hero__stage{inset:auto -22% -6% auto;width:96vw;opacity:.55}.zx-hero__title{max-width:none}}

/* full-bleed stage for the orbiting composition */
.zx-hero__stage--full{position:absolute;inset:0;width:auto;aspect-ratio:auto}
.zx-hero__stage--full .zx-hero__bloom{left:62%;top:52%;width:min(120vw,1200px)}
.zx-hero__stage--full .zx-hero__static{left:66%;top:56%;width:min(40vw,340px)}
.zx-hero{background:#080605}
.zx-hero::before{background:radial-gradient(120% 90% at 68% 42%,#2A150A 0%,#0C0806 52%,#050403 100%)}
.zx-hero__inner{padding-top:var(--space-xxl)}
.zx-hero__title{text-shadow:0 4px 60px rgba(0,0,0,.65)}
.zx-hero__sub{text-shadow:0 2px 24px rgba(0,0,0,.6)}
@media (max-width:1023px){.zx-hero__stage--full{opacity:.6}}

/* --- split hero: copy left, orbiting ball right; never overlapping --- */
@media (min-width:1024px){
  .zx-hero__inner{max-width:none;display:grid;grid-template-columns:minmax(0,54%) minmax(0,46%);align-items:center;column-gap:var(--space-section)}
  .zx-hero__inner > *{grid-column:1;justify-self:start}
  .zx-hero__stage--full{inset:0 0 0 52%;width:auto}
  .zx-hero__stage--full .zx-hero__bloom{left:50%;top:50%;width:132%}
  .zx-hero__stage--full .zx-hero__static{left:50%;top:50%;width:64%}
  .zx-hero__title{max-width:none;font-size:clamp(2.5rem,4.6vw,4.5rem)}
  .zx-hero__sub{max-width:44ch}
}
@media (min-width:1440px){.zx-hero__title{font-size:5rem}}
@media (max-width:1023px){
  .zx-hero{padding-block:calc(var(--nav-height) + var(--space-xxxl)) 0;text-align:left}
  .zx-hero__stage--full{position:relative;inset:auto;order:9;width:100%;height:min(56vw,340px);margin-top:var(--space-xl);opacity:1}
  .zx-hero__stage--full .zx-hero__bloom{width:120%}
  .zx-hero__stage--full .zx-hero__static{width:52%}
  .zx-hero__inner{gap:var(--space-lg)}
  .zx-hero__title{font-size:clamp(2rem,8vw,3.25rem);max-width:none}
  .zx-hero__meta{gap:var(--space-md);font-size:var(--type-micro-size)}
}
@media (max-width:479px){.zx-hero__cta{width:100%}.zx-hero__cta .zx-btn{width:100%;justify-content:center}}

@media (max-width:1023px){
  .zx-hero__stage{position:relative;right:auto;top:auto;transform:none;order:9;width:min(78vw,420px);margin:var(--space-xxl) auto 0}
}

/* ===== 2D animated brand orb — always visible ===== */
.zx-orb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:82%;aspect-ratio:1;display:grid;place-items:center;z-index:2;animation:zx-orb-float 7s var(--ease-standard) infinite}
@keyframes zx-orb-float{0%,100%{transform:translate(-50%,-50%) scale(1)}35%{transform:translate(-50%,calc(-50% - 16px)) scale(1.015)}70%{transform:translate(calc(-50% + 8px),calc(-50% - 6px)) scale(.99)}}
.zx-orb__ball{animation:zx-orb-breathe 9s var(--ease-standard) infinite}
@keyframes zx-orb-breathe{0%,100%{box-shadow:0 40px 90px -20px rgba(217,58,18,.6),0 0 0 1px rgba(255,190,140,.26) inset,0 0 110px rgba(255,120,50,.3)}50%{box-shadow:0 46px 110px -18px rgba(240,80,24,.78),0 0 0 1px rgba(255,214,176,.4) inset,0 0 170px rgba(255,140,60,.5)}}
.zx-orb__ball{position:relative;width:74%;aspect-ratio:1;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 26%,#FFD9A8 0%,#FF8A3D 26%,#E2440F 58%,#8E1F06 82%,#3A0C02 100%);
  box-shadow:0 40px 90px -20px rgba(217,58,18,.65),0 0 0 1px rgba(255,190,140,.28) inset,0 0 120px rgba(255,120,50,.35)}
.zx-orb__sheen{position:absolute;inset:-30%;background:conic-gradient(from 0deg,rgba(255,255,255,0) 0deg,rgba(255,235,210,.5) 40deg,rgba(255,255,255,0) 110deg,rgba(255,180,120,.35) 210deg,rgba(255,255,255,0) 300deg);mix-blend-mode:screen;animation:zx-spin 14s linear infinite}
@keyframes zx-spin{to{transform:rotate(1turn)}}
.zx-orb__dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,225,190,.55) 1px,transparent 1.4px);background-size:9px 9px;opacity:.5;animation:zx-dots 9s linear infinite}
@keyframes zx-dots{to{background-position:90px 0}}
.zx-orb__scan{position:absolute;left:-20%;right:-20%;height:26%;top:-30%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,246,232,.6),rgba(255,255,255,0));mix-blend-mode:overlay;filter:blur(2px);animation:zx-scan 3.6s var(--ease-standard) infinite}
@keyframes zx-scan{0%{top:-30%}70%,100%{top:112%}}
.zx-orb__shade{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 70% 78%,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 58%)}
.zx-orb{--mx:50%;--my:50%}
.zx-orb__mark{position:relative;z-index:4;width:66%;filter:drop-shadow(0 10px 26px rgba(80,20,0,.55));animation:zx-mark 7s var(--ease-standard) infinite;opacity:0;transform-origin:center;transition:opacity 420ms var(--ease-standard);-webkit-mask-image:radial-gradient(circle 0px at var(--mx) var(--my),#000 0,#000 60%,transparent 100%);mask-image:radial-gradient(circle 0px at var(--mx) var(--my),#000 0,#000 60%,transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%}
.zx-orb[data-reveal] .zx-orb__mark{opacity:1;-webkit-mask-image:radial-gradient(circle 340px at var(--mx) var(--my),#000 0,#000 55%,transparent 100%);mask-image:radial-gradient(circle 340px at var(--mx) var(--my),#000 0,#000 55%,transparent 100%)}
.zx-orb__ball::after{content:"";position:absolute;inset:0;z-index:3;border-radius:50%;pointer-events:none;opacity:0;transition:opacity 380ms var(--ease-standard);background:radial-gradient(circle 220px at var(--mx) var(--my),rgba(255,240,220,.34) 0%,rgba(255,170,90,.12) 45%,transparent 72%)}
.zx-orb[data-reveal] .zx-orb__ball::after{opacity:1}
.zx-orb[data-reveal] .zx-orb__dots{opacity:.85}
.zx-orb__spark{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity 320ms}
.zx-orb[data-reveal] .zx-orb__spark{opacity:1}
.zx-orb__spark i{position:absolute;left:var(--mx);top:var(--my);width:3px;height:3px;border-radius:50%;background:#FFE9CF;box-shadow:0 0 10px rgba(255,190,120,.95);animation:zx-sparkout 1.5s linear infinite;transform:rotate(var(--a)) translateX(0)}
@keyframes zx-sparkout{0%{opacity:0;transform:rotate(var(--a)) translateX(6px) scale(.6)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(120px) scale(.2)}}
.zx-orb__dustfield{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:96%;aspect-ratio:1;z-index:1;pointer-events:none}
.zx-dust{position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);border-radius:50%;background:rgba(255,205,160,.85);box-shadow:0 0 8px rgba(255,150,80,.7);offset-path:circle(var(--r) at 50% 50%);animation:zx-orbit var(--d) linear infinite,zx-dustpulse 4s ease-in-out infinite}
@keyframes zx-dustpulse{0%,100%{opacity:.25}50%{opacity:.9}}
@keyframes zx-mark{0%,100%{transform:rotate(-2.5deg) scale(1) translateY(0)}30%{transform:rotate(1.5deg) scale(1.05) translateY(-6px)}65%{transform:rotate(3deg) scale(1.02) translateY(3px)}}
.zx-orb[data-reveal] .zx-orb__mark{animation-duration:4.5s}
.zx-orb__ring{position:absolute;border-radius:50%;border:1px solid rgba(255,170,110,.3)}
.zx-orb__ring--a{inset:2%;border-style:dashed;animation:zx-spin 26s linear infinite}
.zx-orb__ring--b{inset:-8%;border-color:rgba(255,140,70,.16);animation:zx-spin 40s linear infinite reverse}
.zx-orb__sat{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--brand-gradient);box-shadow:0 0 18px rgba(255,140,60,.9);offset-path:circle(46% at 50% 50%);animation:zx-orbit 11s linear infinite}
.zx-orb__sat--2{width:7px;height:7px;offset-path:circle(54% at 50% 50%);animation-duration:17s;animation-direction:reverse}
@keyframes zx-orbit{to{offset-distance:100%}}
.zx-hero__static{display:none}
.zx-hero__gl{z-index:3;mix-blend-mode:screen;opacity:.9}

/* rotating word as an animated chip */
.zx-swap--chip{overflow:visible;padding:2px 14px 4px;border-radius:var(--radius-pill);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,160,90,.4);box-shadow:0 0 0 0 rgba(242,112,28,.45);transition:transform 320ms var(--ease-standard),box-shadow 320ms var(--ease-standard),border-color 320ms;cursor:default;animation:zx-chip 3.4s var(--ease-standard) infinite}
@keyframes zx-chip{0%,100%{box-shadow:0 0 0 0 rgba(242,112,28,.4)}50%{box-shadow:0 0 22px 2px rgba(242,112,28,.28)}}
.zx-swap--chip::after{content:"";position:absolute;left:10%;right:10%;bottom:2px;height:2px;border-radius:2px;background:var(--brand-gradient);transform:scaleX(.4);transform-origin:left;transition:transform 420ms var(--ease-standard)}
.zx-swap--chip:hover,.zx-swap--chip:focus-visible{transform:translateY(-2px);border-color:var(--color-brand-orange);box-shadow:0 10px 30px -8px rgba(242,112,28,.6);outline:none}
.zx-swap--chip:hover::after{transform:scaleX(1)}
.zx-swap--chip .zx-swap__word{background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}

@media (max-width:1023px){.zx-orb{width:74%}}
@media (prefers-reduced-motion:reduce){
  .zx-orb,.zx-orb__sheen,.zx-orb__dots,.zx-orb__scan,.zx-orb__mark,.zx-orb__ring,.zx-orb__sat,.zx-swap--chip,.zx-dust,.zx-orb__spark i{animation:none}
  .zx-orb__mark{opacity:1;-webkit-mask-image:none;mask-image:none}
  .zx-orb__dustfield{display:none}
}

.zx-orb{opacity:1!important;visibility:visible!important;pointer-events:auto;cursor:crosshair}
.zx-hero__stage{pointer-events:none;overflow:visible}
.zx-hero{overflow:hidden}