/* ==========================================================================
   My Virtual Buds — Page-specific animated hero scenes
   --------------------------------------------------------------------------
   Loads AFTER css/style.css and progressively replaces the single generic
   hero background with a scene that matches the topic of each page.

   How it works
   ------------
   1. Each page's hero markup carries a data-hero="<scene>" attribute:
        <div class="hero-bg" data-hero="web" aria-hidden="true">…</div>
   2. js/hero-scenes.js reads that attribute and injects the matching SVG art.
   3. This file supplies the per-scene colour field, pattern and animation.

   If JavaScript is unavailable the field + auroras still render, so every
   hero degrades gracefully to a themed (but static-art-free) background.
   Motion is disabled wholesale by the prefers-reduced-motion rule in
   style.css, and js/hero-scenes.js strips SMIL animation to match.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layer stack inside .hero-bg
   ::before  → colour field        (z 0)
   span      → aurora blobs        (z 1)
   .hs-art   → topical SVG motif   (z 2)
   ::after   → pattern overlay     (z 3)
   -------------------------------------------------------------------------- */

.hero-bg[data-hero] {
  /* Per-scene tokens — overridden by each scene block below. */
  --hs-a: #0B1210;
  --hs-b: #14261A;
  --hs-glow: #4C9950;
  --hs-accent: #F2C230;
  --hs-line: rgba(255, 255, 255, 0.34);
  --hs-soft: rgba(255, 255, 255, 0.14);
}

.hero-bg[data-hero]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 130% at 85% 15%, rgba(255, 255, 255, 0.07) 0%, transparent 55%),
    radial-gradient(90% 120% at 8% 95%, var(--hs-b) 0%, transparent 62%),
    linear-gradient(155deg, var(--hs-a) 0%, var(--hs-b) 130%);
}

.hero-bg[data-hero] > span { z-index: 1; }
.hero-bg[data-hero]::after { z-index: 3; }

.hs-art {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  right: 0;
  width: clamp(300px, 46vw, 560px);
  opacity: 0.95;
  pointer-events: none;
}
.hs-art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hs-art--full { left: 0; width: auto; right: 0; }

/* Shared stroke / fill helpers used by every scene */
.hs-line   { fill: none; stroke: var(--hs-line); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hs-line-2 { fill: none; stroke: var(--hs-soft); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.hs-accent { fill: none; stroke: var(--hs-accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hs-ring-line { fill: none; stroke: var(--hs-accent); stroke-width: 2; }
.hs-fill   { fill: var(--hs-soft); }
.hs-fill-a { fill: var(--hs-accent); }
.hs-fill-g { fill: var(--hs-glow); }

/* --------------------------------------------------------------------------
   Shared animation utilities
   -------------------------------------------------------------------------- */
@keyframes hs-draw     { from { stroke-dashoffset: var(--hs-len, 400); } to { stroke-dashoffset: 0; } }
@keyframes hs-grow-x   { 0%, 8% { transform: scaleX(0); } 42%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes hs-fade     { 0%, 12% { opacity: 0; } 34%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hs-blink    { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes hs-pulse    { 0%, 100% { opacity: 0.07; transform: scale(1); } 50% { opacity: 0.22; transform: scale(1.3); } }
@keyframes hs-ping     { 0% { opacity: 0.75; transform: scale(0.25); } 100% { opacity: 0; transform: scale(1); } }
@keyframes hs-rise     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes hs-float-up { 0% { opacity: 0; transform: translateY(16px); } 20%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px); } }
@keyframes hs-spin     { to { transform: rotate(360deg); } }
@keyframes hs-dash     { to { stroke-dashoffset: -48; } }
@keyframes hs-sweep    { 0% { transform: translateY(-8%); } 100% { transform: translateY(108%); } }
@keyframes hs-glitch   { 0%, 92%, 100% { transform: translate(0, 0); } 93% { transform: translate(-5px, 2px); } 95% { transform: translate(4px, -2px); } 97% { transform: translate(-2px, 0); } }
@keyframes hs-tick     { 0%, 10% { stroke-dashoffset: 26; } 26%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 26; } }

.hs-d1 { animation-delay: 0.35s !important; }
.hs-d2 { animation-delay: 0.7s  !important; }
.hs-d3 { animation-delay: 1.05s !important; }
.hs-d4 { animation-delay: 1.4s  !important; }
.hs-d5 { animation-delay: 1.75s !important; }
.hs-d6 { animation-delay: 2.1s  !important; }
.hs-d7 { animation-delay: 2.45s !important; }
.hs-d8 { animation-delay: 2.8s  !important; }

/* ==========================================================================
   1. HOME — "Signal network"
   A living constellation of connected nodes: the whole business, wired up.
   ========================================================================== */
.hero-bg[data-hero='home'] {
  --hs-a: #0B1210;
  --hs-b: #10241A;
  --hs-glow: #4C9950;
  --hs-accent: #F2C230;
}
.hero-bg[data-hero='home']::after {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.10) 1.5px, transparent 1.5px);
  background-size: 30px 30px;
  opacity: 0.55;
}
.hero-bg[data-hero='home'] span:nth-child(1) { background: var(--hs-glow); opacity: 0.5; }
.hero-bg[data-hero='home'] span:nth-child(2) { background: #7BC142; opacity: 0.26; }
.hero-bg[data-hero='home'] span:nth-child(3) { background: var(--hs-accent); opacity: 0.16; }

.hs-node { animation: hs-pulse 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hs-web-link { stroke-dasharray: 6 6; animation: hs-dash 3s linear infinite; }

/* ==========================================================================
   2. WEB DESIGN & HOSTING — "A site assembling itself"
   Browser chrome draws in, wireframe blocks land, code types beneath it.
   ========================================================================== */
.hero-bg[data-hero='web'] {
  --hs-a: #07161A;
  --hs-b: #0C2A2A;
  --hs-glow: #2FA88B;
  --hs-accent: #F2C230;
  --hs-line: rgba(255, 255, 255, 0.40);
}
.hero-bg[data-hero='web']::after {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 0.9;
  animation: hero-grid-drift 60s linear infinite;
}
.hero-bg[data-hero='web'] span:nth-child(1) { background: var(--hs-glow); opacity: 0.42; }
.hero-bg[data-hero='web'] span:nth-child(2) { background: #1B6E7A; opacity: 0.38; }
.hero-bg[data-hero='web'] span:nth-child(3) { background: var(--hs-accent); opacity: 0.14; }

.hs-frame { stroke-dasharray: var(--hs-len, 1100); stroke-dashoffset: var(--hs-len, 1100); animation: hs-draw 2.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.hs-block { transform-box: fill-box; transform-origin: left center; animation: hs-grow-x 7s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.hs-code  { transform-box: fill-box; transform-origin: left center; animation: hs-grow-x 6s steps(14, end) infinite; }
.hs-caret { animation: hs-blink 1.05s steps(1, end) infinite; }

/* ==========================================================================
   3. IT SUPPORT — "Everything humming"
   Rack status lights blink, packets travel the traces, a health ring sweeps.
   ========================================================================== */
.hero-bg[data-hero='it'] {
  --hs-a: #060F18;
  --hs-b: #0B2430;
  --hs-glow: #3E8FD0;
  --hs-accent: #7BC142;
  --hs-line: rgba(255, 255, 255, 0.36);
}
.hero-bg[data-hero='it']::after {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 34px),
    radial-gradient(circle, rgba(255, 255, 255, 0.09) 1.4px, transparent 1.4px);
  background-size: 34px 34px, 34px 34px;
  opacity: 0.55;
  animation: hero-grid-drift 70s linear infinite;
}
.hero-bg[data-hero='it'] span:nth-child(1) { background: #1E5631; opacity: 0.5; }
.hero-bg[data-hero='it'] span:nth-child(2) { background: var(--hs-glow); opacity: 0.28; }
.hero-bg[data-hero='it'] span:nth-child(3) { background: var(--hs-accent); opacity: 0.18; }

.hs-led   { animation: hs-blink 1.6s steps(1, end) infinite; }
.hs-led-b { animation: hs-blink 2.3s steps(1, end) infinite; }
.hs-trace { stroke-dasharray: 4 7; animation: hs-dash 2.4s linear infinite; }
.hs-scan  { animation: hs-scan-y 5s ease-in-out infinite; }
@keyframes hs-scan-y {
  0%, 4%   { transform: translateY(0); opacity: 0; }
  10%      { opacity: 0.55; }
  90%      { opacity: 0.55; }
  96%, 100% { transform: translateY(237px); opacity: 0; }
}

/* ==========================================================================
   4. VIRTUAL ASSISTANT — "Your day, handed back"
   Calendar fills, a to-do list ticks itself off, the clock keeps sweeping.
   ========================================================================== */
.hero-bg[data-hero='va'] {
  --hs-a: #16110A;
  --hs-b: #2A1E0C;
  --hs-glow: #D9A916;
  --hs-accent: #7BC142;
  --hs-line: rgba(255, 255, 255, 0.38);
}
.hero-bg[data-hero='va']::after {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.09) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  opacity: 0.5;
}
.hero-bg[data-hero='va'] span:nth-child(1) { background: #C9871B; opacity: 0.38; }
.hero-bg[data-hero='va'] span:nth-child(2) { background: #4C9950; opacity: 0.3; }
.hero-bg[data-hero='va'] span:nth-child(3) { background: #F2C230; opacity: 0.2; }

.hs-cell  { animation: hs-fade 8s ease-in-out infinite; }
.hs-check { stroke-dasharray: 26; stroke-dashoffset: 26; animation: hs-tick 8s ease-in-out infinite; }
.hs-hand  { transform-box: fill-box; transform-origin: bottom center; animation: hs-spin 12s linear infinite; }
.hs-hand-slow { transform-box: fill-box; transform-origin: bottom center; animation: hs-spin 72s linear infinite; }

/* ==========================================================================
   5. PRICING — "The itemized receipt"
   The brand's signature object: a receipt printing, line by line, no surprises.
   ========================================================================== */
.hero-bg[data-hero='pricing'] {
  --hs-a: #0D1109;
  --hs-b: #2C2409;
  --hs-glow: #F2C230;
  --hs-accent: #F2C230;
  --hs-line: rgba(255, 255, 255, 0.40);
}
.hero-bg[data-hero='pricing']::after {
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 12px);
  opacity: 0.7;
  animation: hero-grid-drift 90s linear infinite;
}
.hero-bg[data-hero='pricing'] span:nth-child(1) { background: #A8801A; opacity: 0.34; }
.hero-bg[data-hero='pricing'] span:nth-child(2) { background: #4C9950; opacity: 0.3; }
.hero-bg[data-hero='pricing'] span:nth-child(3) { background: #F2C230; opacity: 0.2; }

.hs-receipt-line { transform-box: fill-box; transform-origin: left center; animation: hs-grow-x 9s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.hs-amount { animation: hs-fade 9s ease-in-out infinite; }
.hs-bar { transform-box: fill-box; transform-origin: bottom center; animation: hs-bar-grow 6s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
@keyframes hs-bar-grow { 0%, 6% { transform: scaleY(0.08); } 40%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0.08); } }

/* ==========================================================================
   6. ABOUT — "Real people, connected"
   Orbiting figures link up; a trust line climbs steadily behind them.
   ========================================================================== */
.hero-bg[data-hero='about'] {
  --hs-a: #08150F;
  --hs-b: #16351F;
  --hs-glow: #4C9950;
  --hs-accent: #F2C230;
}
.hero-bg[data-hero='about']::after {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.085) 1.5px, transparent 1.5px);
  background-size: 34px 34px;
  opacity: 0.5;
  animation: hero-grid-drift 80s linear infinite;
}
.hero-bg[data-hero='about'] span:nth-child(1) { background: #2E7D46; opacity: 0.52; }
.hero-bg[data-hero='about'] span:nth-child(2) { background: #7BC142; opacity: 0.26; }
.hero-bg[data-hero='about'] span:nth-child(3) { background: var(--hs-accent); opacity: 0.16; }

.hs-orbit  { transform-box: fill-box; transform-origin: center; animation: hs-spin 46s linear infinite; }
.hs-orbit-r { transform-box: fill-box; transform-origin: center; animation: hs-spin 62s linear reverse infinite; }
.hs-person { animation: hs-rise 5.5s ease-in-out infinite; }

/* ==========================================================================
   7. CONTACT — "We're one message away"
   A pin over Broward pings outward, messages fly up, the signal answers back.
   ========================================================================== */
.hero-bg[data-hero='contact'] {
  --hs-a: #05131C;
  --hs-b: #0B2D33;
  --hs-glow: #2FA88B;
  --hs-accent: #F2C230;
  --hs-line: rgba(255, 255, 255, 0.38);
}
.hero-bg[data-hero='contact']::after {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.09) 1.4px, transparent 1.4px);
  background-size: 28px 28px;
  opacity: 0.5;
  animation: hero-grid-drift 65s linear infinite;
}
.hero-bg[data-hero='contact'] span:nth-child(1) { background: #14705E; opacity: 0.5; }
.hero-bg[data-hero='contact'] span:nth-child(2) { background: #1E5631; opacity: 0.4; }
.hero-bg[data-hero='contact'] span:nth-child(3) { background: var(--hs-accent); opacity: 0.16; }

.hs-ring   { transform-box: fill-box; transform-origin: center; animation: hs-ping 3.4s ease-out infinite; }
.hs-bubble { animation: hs-float-up 6s ease-in-out infinite; }
.hs-wave   { stroke-dasharray: 3 8; animation: hs-dash 2.8s linear infinite; }

/* ==========================================================================
   8. PRIVACY POLICY — "Private by default"
   A shield draws itself closed; the document behind it stays sealed.
   ========================================================================== */
.hero-bg[data-hero='privacy'] {
  --hs-a: #071310;
  --hs-b: #102C22;
  --hs-glow: #2FA88B;
  --hs-accent: #7BC142;
  --hs-line: rgba(255, 255, 255, 0.36);
}
.hero-bg[data-hero='privacy']::after {
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 16px);
  opacity: 0.8;
}
.hero-bg[data-hero='privacy'] span:nth-child(1) { background: #1E5631; opacity: 0.5; }
.hero-bg[data-hero='privacy'] span:nth-child(2) { background: #14705E; opacity: 0.3; }
.hero-bg[data-hero='privacy'] span:nth-child(3) { background: var(--hs-accent); opacity: 0.12; }

.hs-shield { stroke-dasharray: var(--hs-len, 520); stroke-dashoffset: var(--hs-len, 520); animation: hs-draw 3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.hs-shackle { transform-box: fill-box; transform-origin: bottom center; animation: hs-lock 6s ease-in-out infinite; }
@keyframes hs-lock { 0%, 20% { transform: translateY(-5px); } 38%, 100% { transform: translateY(0); } }
.hs-redact { transform-box: fill-box; transform-origin: left center; animation: hs-grow-x 7s cubic-bezier(0.16, 1, 0.3, 1) infinite; }

/* ==========================================================================
   9. TERMS OF SERVICE — "Plain language, on the record"
   Pages of terms write themselves out, then get signed off.
   ========================================================================== */
.hero-bg[data-hero='terms'] {
  --hs-a: #0B1210;
  --hs-b: #232312;
  --hs-glow: #A8801A;
  --hs-accent: #F2C230;
  --hs-line: rgba(255, 255, 255, 0.36);
}
.hero-bg[data-hero='terms']::after {
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 14px);
  opacity: 0.75;
}
.hero-bg[data-hero='terms'] span:nth-child(1) { background: #4C9950; opacity: 0.36; }
.hero-bg[data-hero='terms'] span:nth-child(2) { background: #A8801A; opacity: 0.3; }
.hero-bg[data-hero='terms'] span:nth-child(3) { background: var(--hs-accent); opacity: 0.14; }

.hs-write { transform-box: fill-box; transform-origin: left center; animation: hs-grow-x 10s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.hs-stamp { transform-box: fill-box; transform-origin: center; animation: hs-stamp-press 10s ease-in-out infinite; }
@keyframes hs-stamp-press {
  0%, 62% { opacity: 0; transform: scale(1.9) rotate(-14deg); }
  70%, 94% { opacity: 1; transform: scale(1) rotate(-14deg); }
  100% { opacity: 0; transform: scale(1) rotate(-14deg); }
}

/* ==========================================================================
   10. 404 — "Lost signal"
   The page fragments drift apart while a radar keeps looking for them.
   ========================================================================== */
.hero-bg[data-hero='404'] {
  --hs-a: #140E0A;
  --hs-b: #2B1A10;
  --hs-glow: #C9871B;
  --hs-accent: #F2C230;
  --hs-line: rgba(255, 255, 255, 0.34);
}
.hero-bg[data-hero='404']::after {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: 0.5;
  animation: hero-grid-drift 40s linear infinite;
}
.hero-bg[data-hero='404'] span:nth-child(1) { background: #8A4B1E; opacity: 0.4; }
.hero-bg[data-hero='404'] span:nth-child(2) { background: #1E5631; opacity: 0.38; }
.hero-bg[data-hero='404'] span:nth-child(3) { background: var(--hs-accent); opacity: 0.16; }

.hs-glitch { animation: hs-glitch 4s steps(1, end) infinite; }
.hs-drift  { animation: hs-rise 7s ease-in-out infinite; }
.hs-radar  { transform-box: fill-box; transform-origin: center; animation: hs-spin 6s linear infinite; }

/* --------------------------------------------------------------------------
   Responsive + motion safety
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hs-art { width: 62%; opacity: 0.6; }
  .hs-art--full { width: auto; opacity: 0.75; }
}
@media (max-width: 640px) {
  .hs-art:not(.hs-art--full) { display: none; }
  .hs-art--full { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-art * { animation: none !important; }
  .hs-frame, .hs-shield, .hs-check { stroke-dashoffset: 0 !important; }
  .hs-block, .hs-code, .hs-receipt-line, .hs-redact, .hs-write { transform: scaleX(1) !important; }
  .hs-bar { transform: scaleY(1) !important; }
  .hs-cell, .hs-amount, .hs-bubble, .hs-stamp { opacity: 1 !important; }
  .hs-ring { display: none; }
}