/* ============================================================
   VOLT — HERO 3D
   Floor grid, orbiting solid objects and a dashboard mockup.
   No widget PHP is edited: the JS injects the extra layers and
   this file styles them. Turn it off in the Customizer and the
   hero returns to its previous state.

   CRITICAL STRUCTURE NOTE
   `opacity` is a grouping property. Any value below 1 forces
   transform-style back to `flat`, collapsing 3D faces into one
   plane. So fade-in lives on the outer wrapper (.v3o) and the
   rotation lives on an inner element (.v3v) whose opacity is
   never animated. Do not merge these two elements.
   ============================================================ */

.hero{position:relative;overflow:hidden;isolation:isolate;border:0;
  padding:clamp(50px,5.4vw,86px) 0 clamp(64px,6.4vw,108px);
  background:radial-gradient(64% 106% at 88% 2%,rgba(198,242,78,.28),transparent 56%),
             radial-gradient(58% 96% at 4% 98%,rgba(14,122,70,.10),transparent 62%),var(--paper,#faf9f4)}
.hero .wrap{position:relative;z-index:5}
.hero::before,.hero::after{display:none}
.hero-main{padding-bottom:0;grid-template-columns:1fr 1.06fr;gap:clamp(34px,4.2vw,64px)}
@media(max-width:980px){.hero-main{grid-template-columns:1fr;gap:58px}}

/* The reference hero carries the dashboard alone. The widget's two
   floating status chips are kept in the markup — so their Elementor
   settings survive — but hidden while this layer is on. */
.hv-chip{display:none !important}

/* ---------- floor grid ---------- */
.v3-floor{position:absolute;inset:0;z-index:1;pointer-events:none;perspective:300px;overflow:hidden}
.v3-floor i{position:absolute;left:-70%;right:-70%;bottom:-28%;height:150%;display:block;
  transform:rotateX(75deg);transform-origin:bottom center;
  background-image:
    linear-gradient(rgba(14,122,70,.36) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,122,70,.22) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.5) 42%,transparent 76%);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.5) 42%,transparent 76%);
  animation:v3Floor 3.4s linear infinite}
@keyframes v3Floor{to{background-position:0 72px,0 0}}

/* ---------- grain ---------- */
.v3-grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.38}
.v3-grain::before{content:"";position:absolute;inset:-200%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
  animation:v3Grain .7s steps(4) infinite}
@keyframes v3Grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,-4%)}
  50%{transform:translate(2%,3%)}75%{transform:translate(-2%,2%)}100%{transform:translate(0,0)}}

/* ---------- 3D objects ---------- */
.v3-objs{position:absolute;inset:0;z-index:2;pointer-events:none;
  perspective:1000px;perspective-origin:50% 45%;transform-style:preserve-3d}
.v3o{position:absolute;opacity:0;animation:v3In .9s cubic-bezier(.22,1,.36,1) forwards}
@keyframes v3In{from{opacity:0}to{opacity:1}}
.v3v{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.v3v *{transform-style:preserve-3d;backface-visibility:visible}

.v3-sph{width:98px;height:98px;left:20.5%;top:5%}
.v3-sph .v3v{border-radius:50%;
  background:radial-gradient(circle at 33% 27%,#eefde0 0%,#a6e488 24%,#34ad63 60%,#06331d 100%);
  box-shadow:inset -13px -15px 32px rgba(0,0,0,.52),0 24px 40px -16px rgba(11,79,44,.55)}
.v3-sph .v3v::after{content:"";position:absolute;width:31px;height:20px;border-radius:50%;top:13%;left:14%;
  background:radial-gradient(circle,rgba(255,255,255,.96),transparent 72%)}

.v3-cube{width:76px;height:76px;left:2.5%;bottom:23%}
.v3-cube .v3v{animation:v3Cube 24s linear infinite}
@keyframes v3Cube{from{transform:rotateX(-20deg) rotateY(0) rotateZ(-4deg)}
  to{transform:rotateX(-20deg) rotateY(360deg) rotateZ(-4deg)}}
.v3-cube .f{position:absolute;inset:0;border:1px solid rgba(198,242,78,.28)}
.v3-cube .fr{transform:translateZ(38px);background:linear-gradient(140deg,#a9e28d,#1c8a4f)}
.v3-cube .bk{transform:rotateY(180deg) translateZ(38px);background:linear-gradient(140deg,#14663a,#071b12)}
.v3-cube .rt{transform:rotateY(90deg) translateZ(38px);background:linear-gradient(140deg,#2c9457,#0a3f22)}
.v3-cube .lf{transform:rotateY(-90deg) translateZ(38px);background:linear-gradient(140deg,#c6f24e,#3ba765)}
.v3-cube .tp{transform:rotateX(90deg) translateZ(38px);background:linear-gradient(140deg,#e9fdd2,#8ed36c)}
.v3-cube .bt{transform:rotateX(-90deg) translateZ(38px);background:linear-gradient(140deg,#071b12,#0d4a29)}

.v3-gyro{width:88px;height:88px;left:45.5%;bottom:14%}
.v3-gyro .v3v{animation:v3Gyro 20s linear infinite}
@keyframes v3Gyro{from{transform:rotateX(14deg) rotateY(0)}to{transform:rotateX(14deg) rotateY(360deg)}}
.v3-gyro .ring{position:absolute;inset:0;border-radius:50%;border:5px solid transparent}
.v3-gyro .r1{border-color:#c6f24e}
.v3-gyro .r2{border-color:#0e7a46;transform:rotateY(60deg)}
.v3-gyro .r3{border-color:#8ed36c;transform:rotateY(-60deg)}
.v3-gyro .r4{border-color:rgba(198,242,78,.6);transform:rotateX(70deg)}
.v3-gyro .core{position:absolute;inset:26%;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,#eefde0,#7fd07f 34%,#177a45 72%,#06331d);
  box-shadow:inset -6px -7px 14px rgba(0,0,0,.5)}

.v3-stack{width:88px;height:66px;left:47%;top:9%}
.v3-stack .v3v{animation:v3Stack 16s ease-in-out infinite}
@keyframes v3Stack{0%,100%{transform:rotateX(16deg) rotateY(-22deg)}50%{transform:rotateX(10deg) rotateY(18deg)}}
.v3-stack i{position:absolute;inset:0;border-radius:11px;border:1px solid rgba(198,242,78,.45)}
.v3-stack .s1{transform:translateZ(27px);background:linear-gradient(140deg,#a9e28d,#177a45)}
.v3-stack .s2{background:linear-gradient(140deg,#c6f24e,#2c9457)}
.v3-stack .s3{transform:translateZ(-27px);background:linear-gradient(140deg,#14663a,#071b12)}

.v3-sph2{width:56px;height:56px;right:3%;bottom:7%}
.v3-sph2 .v3v{border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#f4fee8,#c6f24e 28%,#5aa83a 68%,#123d21 100%);
  box-shadow:inset -8px -9px 20px rgba(0,0,0,.45),0 16px 28px -12px rgba(11,79,44,.5)}

.v3-sph  {animation:v3In .9s cubic-bezier(.22,1,.36,1) .9s forwards,  v3OrbA 17s ease-in-out 1.8s infinite}
.v3-cube {animation:v3In .9s cubic-bezier(.22,1,.36,1) 1.1s forwards, v3OrbB 21s ease-in-out 2.0s infinite}
.v3-gyro {animation:v3In .9s cubic-bezier(.22,1,.36,1) 1.3s forwards, v3OrbC 19s ease-in-out 2.2s infinite}
.v3-stack{animation:v3In .9s cubic-bezier(.22,1,.36,1) 1.5s forwards, v3OrbD 23s ease-in-out 2.4s infinite}
.v3-sph2 {animation:v3In .9s cubic-bezier(.22,1,.36,1) 1.7s forwards, v3OrbA 15s ease-in-out 2.6s infinite}
@keyframes v3OrbA{0%,100%{translate:0 0}25%{translate:16px -20px}50%{translate:0 -34px}75%{translate:-16px -20px}}
@keyframes v3OrbB{0%,100%{translate:0 0}25%{translate:-18px -14px}50%{translate:-6px -30px}75%{translate:14px -12px}}
@keyframes v3OrbC{0%,100%{translate:0 0}33%{translate:20px -18px}66%{translate:-12px -28px}}
@keyframes v3OrbD{0%,100%{translate:0 0}30%{translate:-14px 18px}70%{translate:12px 26px}}
@media(max-width:1180px){.v3-stack{top:6%;left:49%}}
@media(max-width:980px){.v3-gyro,.v3-stack,.v3-sph2{display:none}
  .v3-sph{left:78%;top:3%}.v3-cube{left:3%;bottom:8%}}
@media(max-width:600px){.v3-sph{width:70px;height:70px}.v3-cube{display:none}}

/* ---------- type scale, matched to the reference ---------- */
.hero-left h1{font-size:clamp(44px,6vw,80px);line-height:1.02;letter-spacing:-.05em;margin-bottom:24px}
.hero-left>p{font-size:17.5px;line-height:1.66;max-width:45ch;color:var(--ink-2);margin-bottom:32px}
.hero-flag{margin-bottom:26px;padding:11px 22px 11px 11px;font-size:13.5px}
.hero-flag .dot{width:11px;height:11px}

/* ---------- headline mask reveal ---------- */
.hero-left h1 .v3-ln{display:block;overflow:hidden;padding-bottom:.05em}
.hero-left h1 .v3-ln>span{display:block;transform:translateY(105%);
  animation:v3Rev .85s cubic-bezier(.22,1,.36,1) forwards}
.hero-left h1 .v3-ln:nth-child(1)>span{animation-delay:.14s}
.hero-left h1 .v3-ln:nth-child(2)>span{animation-delay:.24s}
.hero-left h1 .v3-ln:nth-child(3)>span{animation-delay:.34s}
.hero-left h1 .v3-ln:nth-child(4)>span{animation-delay:.44s}
@keyframes v3Rev{to{transform:none}}
.hero-left h1 .out::after{transform-origin:left;transform:scaleX(0);
  animation:v3Draw .6s cubic-bezier(.22,1,.36,1) .95s forwards}
@keyframes v3Draw{to{transform:scaleX(1)}}

.hero-flag{opacity:0;animation:v3Up .8s cubic-bezier(.22,1,.36,1) .06s forwards}
.hero-flag .dot{animation:v3Ping 2.8s ease-out 2.4s infinite}
@keyframes v3Ping{0%{box-shadow:0 0 0 0 rgba(198,242,78,.75)}70%,100%{box-shadow:0 0 0 13px rgba(198,242,78,0)}}
.hero-left>p{opacity:0;animation:v3Up .8s cubic-bezier(.22,1,.36,1) .48s forwards}
.hero-btns{opacity:0;animation:v3Up .8s cubic-bezier(.22,1,.36,1) .60s forwards}
@keyframes v3Up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- dashboard mockup ---------- */
.hv-browser{background:linear-gradient(155deg,#0e2e1e,#071b12 72%);border:0;border-radius:26px;
  padding:18px;position:relative;overflow:hidden;opacity:0;
  box-shadow:0 2px 6px rgba(16,25,20,.05),0 26px 50px -22px rgba(16,25,20,.28);
  animation:v3Rise 1s cubic-bezier(.22,1,.36,1) .26s forwards}
.hv-browser::before,.hv-browser::after{display:none}
@keyframes v3Rise{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
/* the widget's own blocks are replaced by the injected dashboard */
.hv-browser>.hv-head,.hv-browser>.hv-mini,.hv-browser>.hv-grid{display:none}

.v3-sweep{position:absolute;top:0;bottom:0;width:36%;left:-40%;z-index:6;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(198,242,78,.14) 44%,rgba(255,255,255,.2) 54%,transparent);
  animation:v3Sweep 1.6s cubic-bezier(.22,1,.36,1) 1s 2}
@keyframes v3Sweep{0%{left:-45%;opacity:1}100%{left:106%;opacity:0}}

.v3-chrome{display:flex;align-items:center;gap:7px;padding:2px 4px 14px;opacity:0;
  animation:v3Up .6s cubic-bezier(.22,1,.36,1) .58s forwards}
.v3-chrome i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);display:block}
.v3-chrome .url{margin-left:8px;flex:1;height:23px;border-radius:999px;background:rgba(255,255,255,.07);
  display:flex;align-items:center;padding:0 12px;font-size:10.5px;color:rgba(255,255,255,.45)}
.v3-app{display:grid;grid-template-columns:56px 1fr;gap:12px}
.v3-side{display:flex;flex-direction:column;gap:8px}
.v3-side i{height:31px;border-radius:9px;background:rgba(255,255,255,.07);opacity:0;display:block;
  animation:v3SlideL .55s cubic-bezier(.22,1,.36,1) forwards}
.v3-side i.on{background:rgba(198,242,78,.16)}
.v3-side i:nth-child(1){animation-delay:.72s}.v3-side i:nth-child(2){animation-delay:.78s}
.v3-side i:nth-child(3){animation-delay:.84s}.v3-side i:nth-child(4){animation-delay:.90s}
.v3-side i:nth-child(5){animation-delay:.96s}
.v3-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.v3-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.v3-tile{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:12px;
  padding:11px 12px;opacity:0;animation:v3SlideD .6s cubic-bezier(.22,1,.36,1) forwards}
.v3-tile:nth-child(1){animation-delay:1.02s}.v3-tile:nth-child(2){animation-delay:1.12s}
.v3-tile:nth-child(3){animation-delay:1.22s}
.v3-tile .k{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:4px}
.v3-tile .v{font-family:var(--disp,sans-serif);font-weight:800;font-size:17px;letter-spacing:-.035em;
  color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.v3-tile.hl{background:rgba(198,242,78,.14);border-color:rgba(198,242,78,.3)}
.v3-tile.hl .v{color:#c6f24e}
.v3-chart{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:12px;
  padding:11px 13px 7px;opacity:0;animation:v3SlideR .65s cubic-bezier(.22,1,.36,1) 1.34s forwards}
.v3-chart .ct{font-size:10px;font-weight:600;color:rgba(255,255,255,.6);margin-bottom:5px}
.v3-chart svg{width:100%;height:48px}
.v3-chart .ln2{fill:none;stroke:#c6f24e;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:420;
  stroke-dashoffset:420;animation:v3Draw2 1.4s cubic-bezier(.22,1,.36,1) 1.58s forwards}
@keyframes v3Draw2{to{stroke-dashoffset:0}}
.v3-chart .ar{opacity:0;animation:v3Fade .8s ease 2.12s forwards}
@keyframes v3Fade{to{opacity:1}}
.v3-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.v3-pc{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:12px;
  overflow:hidden;opacity:0;animation:v3SlideU .6s cubic-bezier(.22,1,.36,1) forwards}
.v3-pc:nth-child(1){animation-delay:1.56s}.v3-pc:nth-child(2){animation-delay:1.68s}
.v3-pc:nth-child(3){animation-delay:1.80s}
.v3-pc .th{aspect-ratio:16/10;display:block}
.v3-pc .bd{padding:8px 9px 9px}
.v3-pc .nm{height:5px;border-radius:3px;background:rgba(255,255,255,.32);margin-bottom:5px;display:block}
.v3-pc .pr{font-family:var(--disp,sans-serif);font-weight:700;font-size:11px;color:#c6f24e}
@keyframes v3SlideL{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes v3SlideD{from{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes v3SlideU{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
@keyframes v3SlideR{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}

/* ============================================================
   BACKSTOP — the other two hero treatments
   volt-motion.js paints a dark WebGL grid over the hero and flips
   the type to a light palette; volt-agency.js drops decorative
   SVGs into it. Both are gated in JS, but a cached script would
   still land them, so neutralise their CSS here too. This file
   is enqueued after volt-motion.css, so these win without
   !important on anything but the injected nodes.
   ============================================================ */
#volt-gl{display:none !important}
.hero .volt-3d{display:none !important}

.hero.volt-hero-dark{background:transparent;border-bottom-color:transparent}
.hero.volt-hero-dark h1{color:var(--ink)}
.hero.volt-hero-dark h1 .vi{color:var(--violet);-webkit-text-stroke:0}
.hero.volt-hero-dark h1 .out{-webkit-text-stroke:0;color:var(--ink)}
.hero.volt-hero-dark .hero-left>p,.hero.volt-hero-dark p{color:var(--ink-2)}
.hero.volt-hero-dark .hero-flag{background:var(--card);border-color:var(--line);color:var(--ink-2)}
body.volt-hero-3d .hero.volt-hero-dark .btn-out{color:var(--ink) !important;border-color:var(--line-2) !important}
body.volt-hero-3d .hero.volt-hero-dark .btn-out:hover{background:var(--ink) !important;color:#fff !important;border-color:var(--ink) !important}
.hero.volt-hero-dark .hv-browser{box-shadow:var(--sh-2)}

/* the motion layer hides these until it adds .volt-ready to <body>;
   this layer animates them itself, so start them visible */
body.volt-hero-3d .hero .hero-flag,
body.volt-hero-3d .hero>.wrap p,
body.volt-hero-3d .hero .hero-btns,
body.volt-hero-3d .hero .hero-visual{transform:none;transition:none}

@media (prefers-reduced-motion: reduce){
  .v3-floor i,.v3-grain::before,.v3v,.v3-sweep{animation:none !important}
  .v3o,.hero-flag,.hero-left>p,.hero-btns,.hv-browser,.v3-chrome,
  .v3-side i,.v3-tile,.v3-chart,.v3-pc,.v3-chart .ar{opacity:1 !important;animation:none !important}
  .hero-left h1 .v3-ln>span{transform:none !important;animation:none !important}
  .hero-left h1 .out::after{transform:scaleX(1) !important;animation:none !important}
  .v3-chart .ln2{stroke-dashoffset:0 !important;animation:none !important}
}