/* ==========================================================================
   GV Mediatech — home page effects layer ("dark & electric" + kinetic)
   Loaded after home.css, home page only. Everything here is presentation:
   the page reads the same with this file missing, and every animation stops
   under prefers-reduced-motion. js/home-fx.js drives the moving parts.
   ========================================================================== */

/* ---------- the hero goes to night ---------- */
.hero{background:
  radial-gradient(120% 90% at 50% 0%, #0B3A25 0%, #062B1A 38%, #03110A 100%);
  color:#fff;isolation:isolate}
.hero-glow{background:
  radial-gradient(46% 52% at 86% 8%, rgba(240,144,24,.34), transparent 64%),
  radial-gradient(44% 50% at 6% 88%, rgba(63,185,141,.30), transparent 62%),
  radial-gradient(30% 34% at 52% 60%, rgba(228,96,24,.12), transparent 70%)}
/* grain reads as texture on dark only when it lightens */
.hero::after{mix-blend-mode:overlay;opacity:.22}

/* the live wave field (js/home-fx.js) sits between the glow and the copy */
.hero-waves{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  opacity:.9}
/* a soft light that follows the pointer across the hero */
.hero-cursor{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .4s ease;
  background:radial-gradient(420px circle at var(--cx,50%) var(--cy,40%),
    rgba(240,144,24,.16), rgba(63,185,141,.06) 40%, transparent 70%)}
.hero.is-pointing .hero-cursor{opacity:1}

.hero .eyebrow{color:var(--green-lt)}
.hero-h1{color:#fff;text-shadow:0 0 42px rgba(63,185,141,.18)}
.hero-h1 em{background:linear-gradient(96deg,#FFC061,var(--orange) 45%,var(--rust));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(240,144,24,.35))}
.hero-sub{color:rgba(255,255,255,.84)}
.rotor{color:#fff;border-bottom-color:var(--orange)}
.hero-creator-note{color:rgba(255,255,255,.72)}
.hero-creator-note a{color:var(--green-lt)}
.hero-creator-note a:hover{color:#FFC061}
/* the second button becomes glass on dark */
.hero .btn--ghost{background:rgba(255,255,255,.08);color:#fff;
  border-color:rgba(255,255,255,.38);box-shadow:none;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero .btn--ghost:hover{background:#fff;color:var(--forest);border-color:#fff}
.hero .btn:not(.btn--ghost):not(.btn--creator){box-shadow:0 0 0 0 rgba(240,144,24,.5),
  0 10px 30px -8px rgba(240,144,24,.6)}
.hero .btn--creator{color:#fff;border-color:var(--green-lt)}

/* the equaliser card turns to glass */
.hero-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12)}
.hero-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 48%, transparent 62%);
  transform:translateX(var(--sheen,-60%));transition:transform .5s ease}

/* ---------- kinetic headline (letters rise into place) ---------- */
.k-ch{display:inline-block;will-change:transform,opacity;
  animation:kIn .8s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(var(--k,0) * 26ms + 120ms)}
.k-w{display:inline-block;white-space:nowrap}
.k-sp{display:inline-block;width:.24em}
.hero-h1 em.k-block{display:inline-block;animation:kIn .9s cubic-bezier(.2,.9,.2,1) both;
  animation-delay:calc(var(--k,0) * 26ms + 180ms)}
@keyframes kIn{
  from{opacity:0;transform:translateY(.55em) rotateX(-75deg) scale(.96);filter:blur(4px)}
  to{opacity:1;transform:none;filter:none}}

/* ---------- ticker: a seam of light between the dark bands ---------- */
.ticker{background:#03110A;border-top:1px solid rgba(240,144,24,.5);
  border-bottom:1px solid rgba(63,185,141,.25);
  box-shadow:inset 0 1px 18px -8px rgba(240,144,24,.5)}
.ticker-row span{transition:color .2s ease,text-shadow .2s ease}
@media (hover:hover){.ticker-row span:hover{color:#FFC061;text-shadow:0 0 18px rgba(240,144,24,.6)}}

/* ---------- numbers: a dark glass band ---------- */
.numbers-sec{background:linear-gradient(180deg,#03110A 0%,#062B1A 100%);color:#fff;
  position:relative;overflow:hidden}
.numbers-sec::before{content:"";position:absolute;inset:auto -10% -60% -10%;height:120%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 100%, rgba(63,185,141,.18), transparent 70%)}
.numbers-sec .kicker{color:var(--green-lt)}
.numbers-sec .h2{color:#fff}
.numbers-sec .stat{position:relative;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden}
.numbers-sec .stat::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--orange),var(--green-lt),transparent)}
.numbers-sec .stat b{color:#FFC061;text-shadow:0 0 26px rgba(240,144,24,.45)}
.numbers-sec .stat span{color:#fff}
.numbers-sec .stat small{color:var(--muted-d)}

/* ---------- 3D tilt + sheen on cards (desktop pointers only) ---------- */
.fx-tilt{transform-style:preserve-3d}
.fx-tilt.is-tilting{transition:transform .08s linear !important}
.fx-tilt.is-settling{transition:transform .5s cubic-bezier(.2,.8,.2,1) !important}
.fx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;
  transition:opacity .3s ease;mix-blend-mode:soft-light;
  background:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),transparent 55%)}
.fx-tilt.is-tilting .fx-glare{opacity:1}

/* ---------- magnetic buttons ---------- */
.fx-mag{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.fx-mag.is-pulling{transition:transform .08s linear}

/* ---------- headings sharpen into focus ---------- */
.h2.reveal{filter:blur(6px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),
  transform .6s cubic-bezier(.2,.7,.3,1),filter .7s ease}
.h2.reveal.in{filter:none}

/* ---------- motion off: everything still, nothing hidden ---------- */
@media (prefers-reduced-motion:reduce){
  .k-ch,.hero-h1 em.k-block{animation:none;opacity:1;transform:none;filter:none}
  .hero-cursor,.hero-card::after{display:none}
  .h2.reveal{filter:none}
  .fx-tilt,.fx-mag{transform:none !important}
}

/* ---------- print: back to paper ---------- */
@media print{
  .hero,.numbers-sec{background:#fff !important;color:#000 !important}
  .hero-waves,.hero-cursor,.fx-glare{display:none !important}
  .hero-sub,.hero-creator-note,.numbers-sec .h2,.numbers-sec .stat span{color:#000 !important}
  .numbers-sec .stat b{color:#000 !important;text-shadow:none}
}

/* ==========================================================================
   The launch simulator (js/hero-sim.js) in the hero card
   ========================================================================== */
.sim{padding:16px 16px 14px;cursor:default}
@media (min-width:760px){.sim{padding:20px 20px 16px}}
.sim-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sim-live{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#FFC061}
.sim-live i{width:8px;height:8px;border-radius:50%;background:#FF4D4D;
  box-shadow:0 0 0 0 rgba(255,77,77,.6);animation:simPing 1.6s ease-out infinite}
@keyframes simPing{70%{box-shadow:0 0 0 8px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}
.sim-tabs{display:flex;gap:4px;padding:4px;border-radius:99px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12)}
.sim-tabs [role=tab]{min-height:44px;padding:0 14px;border:0;border-radius:99px;background:none;
  font:inherit;font-size:.84rem;font-weight:700;color:rgba(255,255,255,.75);cursor:pointer}
.sim-tabs [role=tab][aria-selected=true]{background:#fff;color:var(--forest)}
.sim-tabs [role=tab]:focus-visible{outline:2px solid #FFC061;outline-offset:2px}
.sim-panels{position:relative;z-index:1}
.sim-panel:focus{outline:none}
.sim-panel:focus-visible{outline:2px solid #FFC061;outline-offset:4px;border-radius:14px}
.sim-stage{position:relative;height:210px;border-radius:16px;overflow:hidden;
  background:radial-gradient(80% 70% at 50% 45%,rgba(240,144,24,.10),rgba(3,17,10,.55) 70%);
  border:1px solid rgba(255,255,255,.08)}
@media (min-width:760px){.sim-stage{height:240px}}
.sim-cap{margin:10px 2px 0;font-size:.84rem;color:rgba(255,255,255,.78);line-height:1.45}
.sim .swipe-hint{position:relative;z-index:1;margin:8px 0 0}

/* ---- feed: a phone's worth of notifications ---- */
.sim-phone{display:flex;justify-content:center;padding:12px}
.sim-notes{position:relative;z-index:1;width:min(100%,300px);display:grid;gap:8px;align-content:start}
.sim-note{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:14px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:simIn .5s cubic-bezier(.2,.9,.2,1) both}
.sim-note:nth-child(4){opacity:.45}
@keyframes simIn{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
.sim-av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:.8rem;color:#10231A;background:var(--hue,#F09018);
  box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.sim-tx{flex:1;min-width:0;display:grid;line-height:1.25}
.sim-tx b{font-size:.82rem;color:#fff}
.sim-tx small{font-size:.75rem;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-ht{color:#FF6B8B;font-size:.9rem}
.sim-hearts{position:absolute;inset:0;pointer-events:none;z-index:2}
.sim-heart{position:absolute;bottom:-10px;font-size:1.2rem;color:var(--c,#FF6B8B);
  text-shadow:0 0 12px currentColor;animation:simFloat 2.5s ease-out forwards}
@keyframes simFloat{
  0%{transform:translate(0,0) scale(.6);opacity:0}
  15%{opacity:1}
  100%{transform:translate(var(--drift,0),-230px) scale(1.2);opacity:0}}

/* ---- creators: the constellation canvas ---- */
.sim-canvas{display:block;width:100%;height:100%}

/* ---- city: the buzz map ---- */
.sim-map{background:
  radial-gradient(60% 55% at 52% 50%,rgba(240,144,24,.12),transparent 70%),
  linear-gradient(160deg,rgba(3,17,10,.6),rgba(6,43,26,.5))}
.sim-roads{position:absolute;inset:0;width:100%;height:100%}
.sim-roads ellipse,.sim-roads line{fill:none;stroke:rgba(255,255,255,.10);stroke-width:.35;
  vector-effect:non-scaling-stroke}
.sim-roads line{stroke-dasharray:1.5 1.5}
.sim-venue,.sim-node{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:3px;
  pointer-events:auto}
.sim-venue i{width:14px;height:14px;border-radius:50%;background:#FFC061;
  box-shadow:0 0 18px 4px rgba(240,144,24,.7)}
.sim-venue b{font-size:.75rem;font-weight:800;color:#FFC061;white-space:nowrap;text-transform:uppercase;letter-spacing:.06em}
.sim-venue::before{content:"";position:absolute;left:50%;top:7px;width:14px;height:14px;margin-left:-7px;
  border-radius:50%;border:2px solid rgba(255,192,97,.8);opacity:0}
.sim-venue.is-ripple::before{animation:simRipple 1.8s ease-out 2}
@keyframes simRipple{from{transform:scale(1);opacity:.9}to{transform:scale(9);opacity:0}}
.sim-node i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28);
  transition:background .4s ease,box-shadow .4s ease}
.sim-node b{font-size:.75rem;font-weight:600;color:rgba(255,255,255,.45);white-space:nowrap;
  transition:color .4s ease}
.sim-node.is-lit i{background:#3FB98D;box-shadow:0 0 12px 3px rgba(63,185,141,.7)}
.sim-node.is-lit b{color:#fff}
.sim-node.is-flash i{animation:simFlash .8s ease-out}
@keyframes simFlash{0%{transform:scale(2.4);background:#FFC061}100%{transform:scale(1)}}
/* on a narrow card, only the dots: the labels would collide */
@media (max-width:420px){.sim-node b{display:none}.sim-node.is-lit b{display:none}}

/* ---- reach + launch ---- */
.sim-foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:12px;flex-wrap:wrap}
.sim-reach{display:grid}
.sim-reach b{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,6vw,2.4rem);line-height:1;
  color:#FFC061;text-shadow:0 0 22px rgba(240,144,24,.5);font-variant-numeric:tabular-nums}
.sim-reach span{font-size:.78rem;color:rgba(255,255,255,.72)}
.sim-go{min-height:44px;padding:0 20px;background:linear-gradient(90deg,var(--orange),var(--rust));
  border-color:transparent;color:#10231A;font-weight:800;box-shadow:0 8px 24px -8px rgba(240,144,24,.8)}
.sim-go:hover{filter:brightness(1.08)}

@media (prefers-reduced-motion:reduce){
  .sim-live i,.sim-note,.sim-heart,.sim-venue.is-ripple::before,.sim-node.is-flash i{animation:none}
}

/* ---------- launch it: venue chips, charge, countdown, result ---------- */
.sim-kinds{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.sim-kind{min-height:44px;padding:0 14px;border-radius:99px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);font:inherit;font-size:.84rem;font-weight:700;color:rgba(255,255,255,.8);
  cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.sim-kind:hover{border-color:#FFC061;color:#fff}
.sim-kind[aria-pressed=true]{background:rgba(240,144,24,.18);border-color:var(--orange);color:#FFC061}
.sim-kind:focus-visible{outline:2px solid #FFC061;outline-offset:2px}

/* the button: a charge ring fills around it while held */
.sim-go{position:relative;isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;min-width:140px}
.sim-go-ring{position:absolute;inset:-4px;border-radius:99px;z-index:-1;pointer-events:none;
  background:conic-gradient(#FFC061 var(--charge,0deg),rgba(255,255,255,.12) var(--charge,0deg));
  opacity:0;transition:opacity .2s ease}
.sim.is-charging .sim-go-ring{opacity:1}
.sim.is-charging .sim-go{transform:scale(.97)}
.sim-go:disabled{opacity:.85;cursor:progress}
/* the whole card warms up with the charge */
.sim{box-shadow:0 30px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12),
  0 0 calc(var(--glow,0) * 60px) calc(var(--glow,0) * 6px) rgba(240,144,24,calc(var(--glow,0) * .55))}
.sim.is-charging{border-color:rgba(255,192,97,calc(.2 + var(--glow,0) * .6))}
.sim.is-charging .sim-stage{animation:simShake .12s linear infinite;
  animation-play-state:running;filter:saturate(calc(1 + var(--glow,0)))}
@keyframes simShake{0%{transform:translate(0,0)}25%{transform:translate(calc(var(--glow,0)*1.6px),calc(var(--glow,0)*-1px))}
  50%{transform:translate(calc(var(--glow,0)*-1.4px),calc(var(--glow,0)*1px))}75%{transform:translate(calc(var(--glow,0)*1px),0)}}
.sim.is-launching{animation:simFlashCard 1.2s ease-out}
@keyframes simFlashCard{0%{box-shadow:0 0 0 0 rgba(255,192,97,.9),0 0 90px 20px rgba(240,144,24,.6)}
  100%{box-shadow:0 30px 80px -30px rgba(0,0,0,.7),0 0 0 0 rgba(240,144,24,0)}}
.sim-hint{position:relative;z-index:1;margin:8px 0 0;font-size:.78rem;color:rgba(255,255,255,.72)}

/* 3 . 2 . 1 . GO over the card */
.sim-count{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;
  font-family:var(--display);font-size:clamp(4rem,14vw,7rem);color:#FFC061;
  text-shadow:0 0 40px rgba(240,144,24,.8);background:rgba(3,17,10,.35);border-radius:inherit}
.sim-count.is-tick{animation:simTick .36s cubic-bezier(.2,.9,.2,1)}
@keyframes simTick{from{transform:scale(1.8);opacity:0}to{transform:scale(1);opacity:1}}

/* the result, over the stage */
.sim-result{position:absolute;left:12px;right:12px;bottom:12px;z-index:4;padding:14px 16px;border-radius:16px;
  background:rgba(6,43,26,.92);border:1px solid rgba(255,192,97,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8),0 0 30px -8px rgba(240,144,24,.6)}
.sim-result.is-in{animation:simUp .45s cubic-bezier(.2,.9,.2,1) both}
@keyframes simUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.sim-result-k{margin:0 0 4px;font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#FFC061}
.sim-result-t{margin:0 0 10px;font-size:.92rem;line-height:1.45;color:#fff}
.sim-result-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.sim-result-acts .btn{min-height:44px}
.sim-again{color:var(--green-lt);min-height:44px}

/* confetti, thrown from the button across the hero */
.sim-confetti{position:absolute;z-index:6;width:8px;height:14px;border-radius:2px;background:var(--c,#F09018);
  pointer-events:none;animation:simConfetti 1.6s cubic-bezier(.15,.7,.3,1) forwards}
.sim-confetti.is-dot{width:9px;height:9px;border-radius:50%}
@keyframes simConfetti{
  0%{transform:translate(-50%,-50%) rotate(0) scale(.4);opacity:1}
  70%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 120px)) rotate(var(--rot)) scale(1);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .sim.is-charging .sim-stage,.sim.is-launching,.sim-count.is-tick,.sim-result.is-in{animation:none}
  .sim-confetti{display:none}
}