/* ============================================================
   Billy Digitals — WOW motion layer (light theme)
   Tasteful, GPU-cheap interactions: scroll progress, 3D tilt,
   magnetic buttons, parallax, aurora accents, reveals.
   All transform/opacity only. Gated + reduced-motion safe.
   ============================================================ */

/* ---------- scroll progress bar ---------- */
.wow-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  z-index:2000;background:linear-gradient(90deg,#1d6ff5,#22d3ee);pointer-events:none;will-change:transform}

/* ---------- pinned zoom statement (scroll-scrubbed 3D scale) ---------- */
.pinzoom{position:relative;height:250vh}
.pinzoom .pz-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;gap:18px;padding:0 5vw}
.pz-eyebrow{opacity:.8}
.pz-word{font-family:'Space Grotesk','Inter',sans-serif;font-weight:600;letter-spacing:-.04em;line-height:.9;color:#fff;
  font-size:clamp(3rem,12vw,10rem);transform:scale(var(--pz,.55));transform-origin:50% 50%;will-change:transform,opacity;margin:0}
.pz-word .lime{color:#d3fd50}
.pz-tag{color:#8a8a8a;font-size:clamp(1rem,2vw,1.3rem);opacity:var(--pzt,0);transition:opacity .3s}
@media (max-width:860px){
  .pinzoom{height:200vh}
  .pz-word{font-size:clamp(2.6rem,14vw,5rem)}
}
@media (prefers-reduced-motion:reduce){.pz-word{transform:none!important}.pz-tag{opacity:1!important}}

/* ---------- featured-project category pills (tecreative-style) ---------- */
.cw-pills{position:absolute;left:14px;top:14px;z-index:4;display:flex;flex-wrap:wrap;gap:8px;pointer-events:none}
.cw-pills span{background:rgba(255,255,255,.94);color:#12131a;font-weight:600;font-size:.8rem;letter-spacing:.01em;
  padding:7px 15px;border-radius:999px;box-shadow:0 6px 16px rgba(10,20,40,.18);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* ---------- colored service panels with spinning wireframe globe ---------- */
.panels{padding:clamp(30px,5vw,70px) 0 0}
.panel{position:relative;overflow:hidden;border-radius:28px;padding:clamp(28px,4vw,52px);margin-bottom:22px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;min-height:290px;color:#fff}
.panel.p-blue{background:linear-gradient(135deg,#4f7cf6,#3a63e0)}
.panel.p-purple{background:linear-gradient(135deg,#8f7cf2,#6f57e6)}
.panel.p-cream{background:linear-gradient(135deg,#efe9dc,#e4dcc9);color:#14151d}
.panel h3{font-family:var(--font-display,'Space Grotesk',sans-serif);font-weight:700;font-size:clamp(1.9rem,3.8vw,3.1rem);
  line-height:1.02;letter-spacing:-.02em;margin-bottom:18px;color:inherit}
.panel p,.panel .ptags span{color:inherit}
.panel p{font-size:1.05rem;opacity:.94;max-width:40ch;margin-top:16px;line-height:1.5}
.panel .ptags{display:flex;flex-wrap:wrap;gap:10px}
.panel .ptags span{border:1.5px solid currentColor;border-radius:999px;padding:8px 18px;font-weight:600;font-size:.88rem;opacity:.92}
.panel .pglobe{justify-self:center;width:min(240px,64%);color:inherit}
.wire-globe{width:100%;height:auto;display:block;overflow:visible}
.wire-globe .wg-static ellipse,.wire-globe .wg-static circle.mer,.wire-globe .wg-static line{fill:none;stroke:currentColor;stroke-width:1.1;opacity:.4}
.wire-globe .wg-spin ellipse{fill:none;stroke:currentColor;stroke-width:1.1;opacity:.6}
.wire-globe .wg-spin{transform-origin:100px 100px;animation:wgSpin 20s linear infinite}
.wire-globe .node{fill:currentColor;opacity:.95}
@keyframes wgSpin{to{transform:rotate(360deg)}}
html.lenis-scrolling .wire-globe .wg-spin{animation-play-state:paused}
@media (max-width:760px){
  .panel{grid-template-columns:1fr;min-height:0}
  .panel .pglobe{justify-self:start;width:150px;margin-top:22px;order:3}
}
@media (prefers-reduced-motion:reduce){.wire-globe .wg-spin{animation:none}}

/* ---------- bold statement band + moving green highlight pill ---------- */
.statement{padding:clamp(64px,9vw,120px) 0;text-align:center}
.statement h2{font-family:var(--font-display,'Space Grotesk',sans-serif);font-weight:700;letter-spacing:-.025em;line-height:1.08;
  font-size:clamp(2.1rem,7vw,5rem);color:var(--text);margin:0 auto;max-width:15ch}
.hl-pill{display:inline-block;overflow:hidden;vertical-align:baseline;background:#c6f24e;color:#0e1220;
  border-radius:.42em;width:3.7em;height:1.02em;line-height:1.02em;position:relative;top:.16em;box-shadow:0 8px 22px rgba(150,200,40,.28)}
.hl-pill .hl-track{display:inline-block;white-space:nowrap;will-change:transform;animation:hlMarquee 5.5s linear infinite}
.hl-pill .hl-track span{padding:0 .34em}
@keyframes hlMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hl-pill .hl-track{animation:none}}

/* ---------- rotating circular badge button (rayo-style) ---------- */
.spin-badge{position:relative;width:136px;height:136px;margin:0 auto 30px;display:grid;place-items:center;color:var(--text)}
.spin-badge .ring{position:absolute;inset:0;width:100%;height:100%;animation:spinBadge 16s linear infinite}
.spin-badge .ring text{font-family:var(--font-display,'Space Grotesk',sans-serif);font-size:11.6px;letter-spacing:.16em;font-weight:600;fill:currentColor;text-transform:uppercase}
.spin-badge .core{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:var(--grad-btn,linear-gradient(100deg,#1d6ff5,#0891b2));box-shadow:0 12px 26px rgba(29,111,245,.36);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.spin-badge .core svg{width:23px;height:23px}
.spin-badge:hover .core{transform:scale(1.1)}
.spin-badge:hover .ring{animation-duration:7s}
@keyframes spinBadge{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin-badge .ring{animation:none}}

/* ---------- 3D tilt ---------- */
.tilt{transform-style:preserve-3d;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;will-change:transform}
.tilt .tilt-lift{transform:translateZ(28px);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.tilt-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(29,111,245,.14),transparent 45%);
  transition:opacity .35s ease;z-index:3}
.tilt.is-tilting .tilt-sheen{opacity:1}

/* ---------- reveal (richer than base) ---------- */
.wow-up{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.wow-up.in{opacity:1;transform:none}
.wow-stagger > *{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.wow-stagger.in > *{opacity:1;transform:none}
.wow-stagger.in > *:nth-child(2){transition-delay:.06s}
.wow-stagger.in > *:nth-child(3){transition-delay:.12s}
.wow-stagger.in > *:nth-child(4){transition-delay:.18s}
.wow-stagger.in > *:nth-child(5){transition-delay:.24s}
.wow-stagger.in > *:nth-child(6){transition-delay:.30s}
.wow-stagger.in > *:nth-child(7){transition-delay:.36s}
.wow-stagger.in > *:nth-child(8){transition-delay:.42s}

/* ---------- phone gyroscope tilt (mobile "fully 3D" feel) ----------
   Cards tilt to how the phone is held. Transform-only (no layout impact).
   Applied only AFTER a card has revealed (.in) so it never fights the
   reveal, and only to safe cards (never carousel .plan/.tcard). --gx/--gy
   are driven by wow.js from the device orientation; 0deg at rest. */
@media (hover:none) and (prefers-reduced-motion:no-preference){
  .services-grid,.offer-grid{perspective:1000px}
  .card.in,.offer.in{
    transform:perspective(1000px) rotateX(var(--gx,0deg)) rotateY(var(--gy,0deg));
    transition:transform .25s ease-out;transform-style:preserve-3d;will-change:transform;
  }
}

/* ---------- aurora accent blobs (subtle, moving) ---------- */
.wow-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.wow-aurora::before,.wow-aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;
  will-change:transform}
.wow-aurora::before{width:46vw;height:46vw;max-width:620px;max-height:620px;left:-8vw;top:-10vw;
  background:radial-gradient(circle,rgba(29,111,245,.20),transparent 70%);animation:wowFloatA 20s ease-in-out infinite alternate}
.wow-aurora::after{width:40vw;height:40vw;max-width:560px;max-height:560px;right:-6vw;bottom:-12vw;
  background:radial-gradient(circle,rgba(34,211,238,.18),transparent 70%);animation:wowFloatB 26s ease-in-out infinite alternate}
@keyframes wowFloatA{to{transform:translate(60px,40px) scale(1.15)}}
@keyframes wowFloatB{to{transform:translate(-50px,-40px) scale(1.1)}}
.wow-aurora + *{position:relative;z-index:1}

/* keep section content above aurora */
.section{position:relative}

/* ---------- magnetic buttons ---------- */
.magnetic-btn{will-change:transform;transition:transform .35s cubic-bezier(.2,.7,.2,1)}

/* ---------- 3D scroll reveal (homepage) ----------
   Upgrades the existing .reveal so content rotates up into place in 3D as
   it scrolls into view. Transform/opacity only — never changes layout size.
   Parents get perspective so the rotateX reads with real depth. */
/* Desktop only (>=861px). On phones/tablets the base fade-in reveal is kept —
   heavy per-section 3D there risks blank sections + costs performance.
   Carousel/self-managed cards (.plan, .tcard) are excluded — they own their
   visibility and must never be hidden by the reveal transform. */
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  .container,.services-grid,.offer-grid,.process-list,.footer-grid{perspective:1300px}
  .reveal:not(.plan):not(.tcard){
    opacity:0;transform:translateY(44px) rotateX(14deg) scale(.985);
    transform-origin:50% 100%;
    transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .95s cubic-bezier(.2,.7,.2,1);
    will-change:transform,opacity;backface-visibility:hidden;
  }
  .reveal:not(.plan):not(.tcard).in{opacity:1;transform:none}
}

/* ---------- pause heavy motion while actively scrolling / off-screen ---------- */
html.lenis-scrolling .wow-aurora::before,
html.lenis-scrolling .wow-aurora::after{animation-play-state:paused!important}

@media (hover:none){
  .tilt{transform:none!important}
  .tilt-sheen{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wow-up,.wow-stagger>*{opacity:1!important;transform:none!important;transition:none!important}
  .wow-aurora::before,.wow-aurora::after{animation:none!important}
  .tilt,.magnetic-btn{transition:none!important}
  .wow-progress{display:none}
}

/* ============================================================
   EXTRA MOTION LAYER — cursor spotlight · idle 3D float ·
   button shine · heading blur-in. Transform/opacity/filter only,
   desktop-gated where it could cost mobile perf. Reduced-motion safe.
   ============================================================ */

/* Dala constellation — ONE cloud fixed behind the whole page,
   morphing shape on scroll (lightbulb → globe → swirl). The page
   content rides above it (z-index:1); sections go transparent so
   the black-velvet void + constellation show through everywhere. */
.dala-bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}
body{background:#0a0a0a}
.site-header,#main,.powerstrip,.site-footer,.chat,.toast{position:relative;z-index:1}
.hero,.section,.section-alt,.statement,.panels-sec,.pinzoom,.powerstrip{background:transparent!important}
.pinzoom .pz-stage{background:transparent}
/* let the hero bulb show through — only a faint bottom fade for legibility */
.hero .hero-scrim{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 44%,rgba(10,10,10,.34),transparent 72%),
  linear-gradient(180deg,transparent 66%,#0a0a0a 100%)!important}

/* cursor spotlight that tracks the pointer across the hero (desktop) */
.wow-spot{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .5s ease;mix-blend-mode:screen;
  background:radial-gradient(340px circle at var(--sx,50%) var(--sy,50%),rgba(56,189,248,.16),rgba(43,127,255,.06) 40%,transparent 72%)}
.hero>.container,.hero .hero-inner,.hero-welcome{position:relative;z-index:2}

/* idle 3D float on the wireframe globes + spinning contact badge */
@media (min-width:761px) and (prefers-reduced-motion:no-preference){
  .panel .pglobe{animation:wowFloat 7.5s ease-in-out infinite}
  .panel.p-purple .pglobe{animation-delay:-2.5s}
  .panel.p-cream .pglobe{animation-delay:-4.8s}
  .spin-badge{animation:wowFloat 6s ease-in-out infinite}
}
@keyframes wowFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0)}}

/* moving shine sweep across primary CTAs */
.btn-primary,.nav-cta{position:relative;overflow:hidden}
.btn-primary::after,.nav-cta::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);pointer-events:none;animation:wowShine 4.6s ease-in-out infinite}
@keyframes wowShine{0%,62%{left:-60%}80%,100%{left:130%}}

/* blur-to-sharp entrance on the big serif section heads (desktop) */
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  .section-head.reveal h2{filter:blur(9px);transition:filter 1s cubic-bezier(.2,.7,.2,1)}
  .section-head.reveal.in h2{filter:blur(0)}
}

@media (prefers-reduced-motion:reduce){
  .panel .pglobe,.spin-badge{animation:none!important}
  .btn-primary::after,.nav-cta::after{display:none}
  .section-head.reveal h2{filter:none!important}
}
html.lenis-scrolling .panel .pglobe,html.lenis-scrolling .spin-badge{animation-play-state:paused}

/* ============================================================
   HULY-STYLE TILE BORDER BEAM
   A light comet continuously traces each tile's rounded outline —
   a rotating conic gradient masked to the border ring only. This is
   the huly.io tile outline animation. GPU-cheap: one masked layer
   per tile, only the angle animates. Paused while scrolling / off
   under reduced-motion.
   ============================================================ */
@property --hb{syntax:'<angle>';inherits:false;initial-value:0deg}
.hbeam{position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:4;
  background:conic-gradient(from var(--hb),
    transparent 0 68%,
    rgba(128,82,255,.0) 68%,
    #8052ff 82%, #c4b5fd 88%, #ffffff 90.5%, #c4b5fd 93%, #8052ff 96%,
    transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);mask-composite:exclude;
  animation:hbSpin 5.5s linear infinite;animation-play-state:paused;opacity:.95;filter:drop-shadow(0 0 4px rgba(128,82,255,.55))}
.hbeam.live{animation-play-state:running}
/* stagger so the comets aren't all in lock-step */
.panel:nth-child(2) .hbeam,.card:nth-child(2) .hbeam,.tcard:nth-child(2n) .hbeam{animation-delay:-1.8s}
.panel:nth-child(3) .hbeam,.card:nth-child(3) .hbeam,.tcard:nth-child(3n) .hbeam{animation-delay:-3.4s}
.card:nth-child(4) .hbeam{animation-delay:-4.6s}
@keyframes hbSpin{to{--hb:360deg}}
/* retire the old electric plan ring so tiles share one outline system */
#plans .blaze{opacity:0!important;animation:none!important}
html.lenis-scrolling .hbeam{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hbeam{animation:none!important;opacity:.5}}