/* site-c.css : Variant C "Cinematic Motion" layer for the public storefront.
   Loads AFTER site.css. Additive only - circuit texture, depth blobs, animated core in the hero,
   glass glow + animated top-sweep on cards. Reuses site.css tokens (--cyan, --violet, --ink, --glass). */

/* circuit-board texture under everything */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(34, 211, 238, .016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, .016) 1px, transparent 1px);
  background-size: 48px 48px;
}
.nav, .hero, main, footer { position: relative; z-index: 1; }

/* drifting depth blobs behind the hero */
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(60px);
}
.hero::before { width: 480px; height: 480px; left: -6%; top: -10%; background: radial-gradient(circle, rgba(34, 211, 238, .14), transparent 65%); animation: sc-drift 18s ease-in-out infinite; }
.hero::after { width: 520px; height: 520px; right: -8%; bottom: -16%; background: radial-gradient(circle, rgba(124, 108, 246, .16), transparent 65%); animation: sc-drift 22s ease-in-out infinite reverse; }
@keyframes sc-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(34px, -26px); } }
.hero .container { position: relative; z-index: 1; }

/* ── animated core in the hero ── */
.hero-core { position: relative; width: 260px; height: 260px; margin: 0 auto 26px; }
.hc-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 22px; display: grid; place-items: center;
  font-size: 38px; color: var(--cyan); z-index: 3;
  background: linear-gradient(135deg, rgba(34, 211, 238, .12), rgba(124, 108, 246, .18));
  border: 1px solid rgba(34, 211, 238, .25);
  box-shadow: 0 0 40px rgba(34, 211, 238, .25), 0 0 80px rgba(124, 108, 246, .12);
  animation: sc-breathe 4s ease-in-out infinite;
}
.hc-core span { display: inline-block; animation: sc-spin 20s linear infinite; filter: drop-shadow(0 0 12px rgba(34, 211, 238, .8)); }
@keyframes sc-breathe { 0%, 100% { box-shadow: 0 0 30px rgba(34, 211, 238, .2), 0 0 60px rgba(124, 108, 246, .1); } 50% { box-shadow: 0 0 60px rgba(34, 211, 238, .4), 0 0 110px rgba(124, 108, 246, .2); } }
@keyframes sc-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.hc-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(34, 211, 238, .12); }
.hc-ring.r1 { width: 140px; height: 140px; animation: sc-orbit 9s linear infinite; }
.hc-ring.r2 { width: 200px; height: 200px; animation: sc-orbit 15s linear infinite reverse; border-color: rgba(124, 108, 246, .1); }
.hc-ring.r3 { width: 256px; height: 256px; animation: sc-orbit 24s linear infinite; border-color: rgba(52, 211, 153, .08); }
@keyframes sc-orbit { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.hc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; }
.hc-trace { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: sc-draw 2.4s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes sc-draw { to { stroke-dashoffset: 0; } }
.hc-dot { animation: sc-pulse 2s ease-in-out infinite 2.4s; }
@keyframes sc-pulse { 0%, 100% { opacity: 1; r: 3; } 50% { opacity: .55; r: 5; } }
@media (max-width: 600px) { .hero-core { width: 200px; height: 200px; } .hc-ring.r3 { width: 200px; height: 200px; } }

/* glass cards: cinematic inset glow + animated top sweep */
.glass-card { position: relative; overflow: hidden; box-shadow: 0 8px 40px rgba(0, 0, 0, .4), 0 0 0 .5px rgba(34, 211, 238, .06) inset; }
.glass-card::after {
  content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 1px; will-change: transform;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .8), transparent);
  transform: translateX(-100%);
  animation: sc-sweep 5s linear infinite;
}
@keyframes sc-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .hc-core, .hc-core span, .hc-ring, .hc-trace, .hc-dot, .glass-card::after { animation: none !important; }
}