/* ============================================================
   CodingInABox — product page (arm.html, studio.html) styles.
   Shared rules (.glass-nav, .cta-cyber, .dark-glass, .neon-text-*,
   .logo-animated, .cyber-grid, .circuit-overlay, .mono-font) live in
   /lms/lms.css — do not re-declare them here.
   Was products/products.css until the site became single-product
   (2026-08-10).
   ============================================================ */

:root {
    --neon-green: #39FF14;
}

/* Product pages previously set overflow-x hidden via an inline
   @layer base body rule; keep it (glow/shimmer effects overhang). */
body {
    overflow-x: hidden;
}

/* ── Holographic shimmer on product imagery (detail + kit pages) ── */
.holographic-shim {
    position: relative;
    overflow: hidden;
}

.holographic-shim::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 0%, rgba(0, 240, 255, 0.1) 45%, rgba(255, 0, 229, 0.1) 50%, rgba(0, 240, 255, 0.1) 55%, transparent 100%);
    transform: rotate(25deg);
    pointer-events: none;
}

/* ── Gallery thumbnail active state (toggled by inline gallery JS —
      class name must stay exactly ".thumb-active") ── */
.thumb-active {
    border-color: var(--neon-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

/* ── products.html catalog utilities ── */
.glass-card {
    background: rgba(10, 22, 40, 0.8);
    backdrop-filter: blur(16px);
    border: 1px solid #00F0FF33;
}

.glass-card:hover {
    border-color: #00F0FF;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.text-glow-cyan {
    text-shadow: 0 0 10px #00F0FF, 0 0 20px #00F0FF66;
}

.text-glow-magenta {
    text-shadow: 0 0 10px #FF00E5, 0 0 20px #FF00E566;
}

.text-cyan-neon\/40,
.text-cyan-neon\/50 {
    color: rgba(0, 240, 255, 0.82) !important;
}

.neon-border-glow {
    box-shadow: 0 0 5px #00F0FF, inset 0 0 5px #00F0FF;
}

.circuit-pattern {
    background-image: radial-gradient(#00F0FF 0.5px, transparent 0.5px), radial-gradient(#00F0FF 0.5px, #050B1A 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    opacity: 0.1;
}

.hologram-shimmer {
    position: relative;
    overflow: hidden;
}

.hologram-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg,
            transparent 0%,
            rgba(0, 240, 255, 0.1) 40%,
            rgba(255, 0, 229, 0.1) 50%,
            rgba(0, 240, 255, 0.1) 60%,
            transparent 100%);
    pointer-events: none;
}

.grid-bg {
    background-image:
        linear-gradient(to right, rgba(0, 240, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ============================================================
   Exploded-view scroll-scrub (arm.html #explode) — 2026-08-13
   Section is 350vh; the stage stays sticky for the scrub. JS
   (arm-explode.js) swaps the canvas for a video/poster on
   mobile & reduced-motion and adds .explode-static.
   ============================================================ */
.explode-section { height: 350vh; position: relative; }
.explode-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh; /* iOS URL-bar jumps */
  overflow: hidden;
}
.explode-stage canvas,
.explode-stage video,
.explode-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Annotation cards fade in during their progress window */
.explode-annotation {
  position: absolute;
  max-width: 300px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.explode-annotation.on { opacity: 1; transform: none; }

/* Static fallback: collapse the tall scroller, stack annotations */
.explode-section.explode-static { height: auto; }
.explode-section.explode-static .explode-stage {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 9;
}
.explode-section.explode-static .explode-annotation {
  position: static;
  opacity: 1;
  transform: none;
  max-width: none;
  margin: 0.75rem 1.25rem;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .explode-annotation { transition: none; opacity: 1; transform: none; }
}