/* ==========================================================================
   gui.css — Loves Comics (Retro 90s Neon UI System)
   Author: Black Trace Labs x Loves Comics
   Purpose:
   - Global variables & tokens for a 90s neon comic/card theme
   - Typography system (Google Fonts: Bangers, Press Start 2P, Inter, VT323)
   - Navigation + Dropdowns + Cards + Buttons + Forms
   - Animations: float, bounce, shimmer, CRT, starfield, halftone, ribbons
   - Icon boosters for Font Awesome (fa-glow, fa-ring, fa-burst, etc.)
   - Responsive helpers to complement Bootstrap
   - Accessibility: reduced motion support
   ========================================================================== */

/* ==========================================================================
   0) ROOT TOKENS
   --------------------------------------------------------------------------
   Tweak these and the whole theme changes.
   ========================================================================== */
:root {
  /* Core palette */
  --lc-bg:           #0b0b16;   /* deep retro black-purple */
  --lc-surface:      #13132a;   /* panel bg */
  --lc-surface-2:    #19193a;   /* alt panel bg */
  --lc-text:         #e8f6ff;   /* main text */
  --lc-text-dim:     #bcd6ff;   /* dim text */

  /* Neon accents */
  --lc-cyan:         #00f0ff;
  --lc-pink:         #ff2bd6;
  --lc-purple:       #a855f7;
  --lc-yellow:       #ffe66d;
  --lc-green:        #66ff00;
  --lc-orange:       #ff9f1c;

  /* Borders & grid hairlines */
  --lc-grid:         rgba(168,85,247,0.14);
  --lc-grid-strong:  rgba(168,85,247,0.28);

  /* Radii */
  --lc-radius:       16px;
  --lc-radius-lg:    22px;
  --lc-radius-pill:  999px;

  /* Shadows */
  --lc-shadow:       0 10px 24px rgba(0,240,255,.18), 0 6px 12px rgba(255,43,214,.12);
  --lc-shadow-strong:0 16px 38px rgba(0,240,255,.22), 0 10px 22px rgba(255,43,214,.18);
  --lc-inner-glow:   inset 0 0 0 1px rgba(0,240,255,.35), inset 0 0 24px rgba(168,85,247,.15);

  /* Text glow presets */
  --lc-glow-cyan:    0 0 8px rgba(0,240,255,.95), 0 0 22px rgba(0,240,255,.5);
  --lc-glow-pink:    0 0 8px rgba(255,43,214,.95), 0 0 22px rgba(255,43,214,.5);
  --lc-glow-yellow:  0 0 8px rgba(255,230,109,.95), 0 0 22px rgba(255,230,109,.5);
  --lc-glow-green:   0 0 8px rgba(102,255,0,.95),  0 0 22px rgba(102,255,0,.5);

  /* Typography (loaded in header.php) */
  --lc-font-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --lc-font-display: "Bangers", "Press Start 2P", system-ui, sans-serif;
  --lc-font-pixel:   "Press Start 2P", monospace;
  --lc-font-term:    "VT323", monospace;

  /* Layout */
  --lc-container-max: 1320px;

  /* Z */
  --z-nav: 1000;
  --z-top: 1100;
}

/* Respect light mode without losing vibe */
@media (prefers-color-scheme: light) {
  :root {
    --lc-bg: #101025;
    --lc-surface: #17173a;
  }
}

/* ==========================================================================
   1) BASE & GLOBAL
   ========================================================================== */
html, body {
  background:
    radial-gradient(1200px 700px at 50% -160px, rgba(168,85,247,.24), transparent 60%),
    var(--lc-bg);
  color: var(--lc-text);
  font-family: var(--lc-font-body);
  min-height: 100%;
  scroll-behavior: smooth;
}
* { -webkit-tap-highlight-color: transparent; }

.container { max-width: var(--lc-container-max); }

/* Links (crosshair + neon hover) */
a, .btn-link {
  color: var(--lc-cyan);
  text-decoration: none;
  cursor: crosshair;
  transition: color .18s ease, text-shadow .18s ease, filter .18s ease, transform .18s ease;
}
a:hover, a:focus-visible {
  color: var(--lc-pink);
  text-shadow: var(--lc-glow-pink);
}

/* Utility text styles */
.muted, .text-muted { color: var(--lc-text-dim) !important; }
.pixel { font-family: var(--lc-font-pixel); letter-spacing: .08em; }
.term  { font-family: var(--lc-font-term); }

/* ==========================================================================
   2) TYPOGRAPHY: GLORIOUS 90s HEADERS
   ========================================================================== */
.brand-glow, h1, h2, h3, h4, h5, h6 {
  font-family: var(--lc-font-display);
  letter-spacing: .02em;
}
h1.brand-glow, .glow-h1 { font-size: clamp(2.2rem, 1rem + 4vw, 5rem); line-height: 1.02; }
h2.brand-glow, .glow-h2 { font-size: clamp(1.8rem, .8rem + 3vw, 3.2rem); }
h3.brand-glow, .glow-h3 { font-size: clamp(1.5rem, .7rem + 2vw, 2.2rem); }

.brand-glow,
.glow-cyan   { color: var(--lc-cyan);   text-shadow: var(--lc-glow-cyan);   }
.glow-pink   { color: var(--lc-pink);   text-shadow: var(--lc-glow-pink);   }
.glow-yellow { color: var(--lc-yellow); text-shadow: var(--lc-glow-yellow); }
.glow-green  { color: var(--lc-green);  text-shadow: var(--lc-glow-green);  }

.glow-underline { border-bottom: 1px solid var(--lc-grid); padding-bottom: .35rem; }

/* Pulsing glow animation for hero titles/logos */
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(0,240,255,.55)); }
  50%      { filter: drop-shadow(0 0 14px rgba(0,240,255,.85)); }
}
.glow-pulse { animation: glowPulse 3.5s ease-in-out infinite; }

/* Paragraphs */
p { line-height: 1.7; }

/* ==========================================================================
   3) NAVIGATION (works with Bootstrap classes)
   ========================================================================== */
.nav-neon {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: linear-gradient(180deg, rgba(12,12,22,.92), rgba(12,12,22,.78));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--lc-grid);
}
.navbar .nav-link {
  color: var(--lc-text);
  opacity: .95;
  padding: .55rem .75rem;
  border-radius: 10px;
}
.navbar .nav-link:hover, .navbar .nav-link:focus-visible {
  color: var(--lc-pink);
  text-shadow: var(--lc-glow-pink);
}
.navbar .nav-link.active {
  color: var(--lc-yellow);
  text-shadow: var(--lc-glow-yellow);
}

/* Dropdown menu */
.dropdown-neon,
.dropdown-menu.card-neon {
  background: linear-gradient(180deg, rgba(18,18,37,.98), rgba(18,18,37,.9));
  border: 1px solid var(--lc-grid);
  box-shadow: var(--lc-shadow);
  border-radius: var(--lc-radius);
}
.dropdown-item { color: var(--lc-text); }
.dropdown-item:hover, .dropdown-item:focus-visible {
  background: rgba(168,85,247,.12);
  color: var(--lc-pink);
}

/* ==========================================================================
   4) PANELS, CARDS, SURFACES
   ========================================================================== */
.surface     { background: var(--lc-surface);     border: 1px solid var(--lc-grid); }
.surface-alt { background: var(--lc-surface-2);   border: 1px solid var(--lc-grid); }

.card-neon, .panel-neon {
  background: linear-gradient(180deg, rgba(18,18,37,.85), rgba(18,18,37,.62));
  border: 1px solid var(--lc-grid);
  border-radius: var(--lc-radius);
  box-shadow: var(--lc-shadow);
}
.card-neon:hover {
  transform: translateY(-2px);
  box-shadow: var(--lc-shadow-strong);
}

.neon-border { box-shadow: var(--lc-inner-glow); border-radius: var(--lc-radius-lg); }
.neon-divider { border-top: 1px dashed var(--lc-grid-strong); }

/* Holographic shine overlay for product shots */
.holo-shine {
  position: relative;
  overflow: hidden;
}
.holo-shine::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.06) 30%, transparent 60%);
  transform: translateX(-100%);
  animation: holoSweep 3.6s linear infinite;
}
@keyframes holoSweep { to { transform: translateX(100%); } }

/* ==========================================================================
   5) ICON POWER-UPS (Font Awesome boosters)
   ========================================================================== */
/* Glow the icon */
.fa-glow      { text-shadow: var(--lc-glow-cyan); }
.fa-glow-pink { text-shadow: var(--lc-glow-pink); }
.fa-glow-ylw  { text-shadow: var(--lc-glow-yellow); }
.fa-glow-grn  { text-shadow: var(--lc-glow-green); }

/* Neon ring around stacked icons */
.fa-ring {
  position: relative;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,240,255,.45), inset 0 0 14px rgba(168,85,247,.2);
}

/* Burst animation (use with <i class="fa-solid ... fa-burst">) */
@keyframes iconBurst {
  0%   { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(255,43,214,0)); }
  50%  { transform: scale(1.15); filter: drop-shadow(0 0 10px rgba(255,43,214,.6)); }
  100% { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(255,43,214,0)); }
}
.fa-burst { animation: iconBurst 2.2s ease-in-out infinite; }

/* Wiggle (comic SFX vibe) */
@keyframes wiggle {
  0%,100% { transform: rotate(0deg); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}
.fa-wiggle { animation: wiggle 1.4s ease-in-out infinite; transform-origin: 50% 70%; }

/* ==========================================================================
   6) IMAGES & SPRITES (float / bounce / glow)
   ========================================================================== */
.img-glow { filter: drop-shadow(0 0 10px rgba(0,240,255,.55)) drop-shadow(0 0 20px rgba(255,43,214,.35)); }
.img-float { animation: floatY 6s ease-in-out infinite; will-change: transform; }
.img-bounce { animation: bounce90s 1.6s cubic-bezier(.28,.84,.42,1) infinite; will-change: transform; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bounce90s { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-16px); } 60% { transform: translateY(-8px); } }

/* CRT scanlines & halftone overlays */
.scanlines { position: relative; isolation: isolate; }
.scanlines::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,.05) 1px, transparent 3px, transparent 4px);
  mix-blend-mode: soft-light; opacity: .12; pointer-events: none; z-index: -1;
}
.halftone { position: relative; isolation: isolate; }
.halftone::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 2px 2px, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 8px 8px,
    radial-gradient(circle at 2px 2px, rgba(0,240,255,.04) 1px, transparent 1px) 4px 4px / 8px 8px;
  mix-blend-mode: soft-light; opacity: .55; pointer-events: none; z-index: -1;
}

/* ==========================================================================
   7) HERO DECOR: STARFIELD + RINGS (CSS-only flair)
   ========================================================================== */
.starfield, .starfield::before, .starfield::after {
  position: absolute; inset: 0; pointer-events: none;
}
.starfield::before, .starfield::after {
  content: "";
  background:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent 50%),
    radial-gradient(1px 1px at 30% 80%, #fff, transparent 50%),
    radial-gradient(1px 1px at 50% 30%, #fff, transparent 50%),
    radial-gradient(1px 1px at 70% 60%, #fff, transparent 50%),
    radial-gradient(1px 1px at 90% 40%, #fff, transparent 50%);
  animation: starDrift 28s linear infinite; opacity: .35;
}
.starfield::after { animation-duration: 42s; opacity: .2; filter: blur(0.5px); }
@keyframes starDrift { from { transform: translateY(0); } to { transform: translateY(-200px); } }

/* Warping rings (use inside category tiles) */
.rings {
  position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,240,255,.15) 10%, transparent 11%),
    radial-gradient(circle at 50% 50%, rgba(255,43,214,.12) 20%, transparent 21%),
    radial-gradient(circle at 50% 50%, rgba(255,230,109,.10) 30%, transparent 31%);
  background-size: 40% 40%, 60% 60%, 80% 80%;
  animation: rings 10s linear infinite; opacity: .5; pointer-events: none;
}
@keyframes rings { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ==========================================================================
   8) BUTTONS, BADGES, RIBBONS
   ========================================================================== */
.btn-neon,
.btn-outline-light.neon-border {
  border-radius: var(--lc-radius-pill);
  border: 1px solid var(--lc-grid);
  box-shadow: var(--lc-inner-glow);
  color: var(--lc-text);
}
.btn-neon:hover,
.btn-outline-light.neon-border:hover {
  transform: translateY(-1px);
  box-shadow: var(--lc-shadow-strong);
  color: var(--lc-yellow);
}

.badge-ghost {
  --pad: .4rem .6rem;
  background: transparent;
  border: 1px solid var(--lc-grid);
  color: var(--lc-text);
  border-radius: var(--lc-radius-pill);
  padding: var(--pad);
  text-transform: uppercase;
  font-size: .75rem;
}

/* Comic corner ribbon */
.ribbon {
  position: absolute; top: 14px; left: -8px;
  background: linear-gradient(90deg, var(--lc-pink), var(--lc-purple));
  color: #fff; font-weight: 700; padding: .25rem .75rem;
  transform: skew(-12deg);
  box-shadow: 0 6px 12px rgba(0,0,0,.35), 0 0 14px rgba(255,43,214,.4);
}

/* ==========================================================================
   9) FORMS & INPUTS
   ========================================================================== */
.form-control.neon-border {
  background: rgba(255,255,255,.03);
  color: var(--lc-text);
  border: 1px solid var(--lc-grid);
  box-shadow: var(--lc-inner-glow);
}
.form-control.neon-border:focus {
  color: var(--lc-text);
  border-color: var(--lc-cyan);
  box-shadow: 0 0 0 0.2rem rgba(0,240,255,.15), var(--lc-inner-glow);
}

/* ==========================================================================
   10) MARQUEE (retro scroller)
   ========================================================================== */
.marquee {
  overflow: hidden; white-space: nowrap;
  border: 1px solid var(--lc-grid);
  border-radius: var(--lc-radius);
}
.marquee-track { display: inline-block; padding: .5rem 0; animation: marquee 22s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ==========================================================================
   11) BACK-TO-TOP Floating Button
   ========================================================================== */
.btn-top {
  position: fixed; right: 18px; bottom: 18px; z-index: var(--z-top);
  width: 46px; height: 46px; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 30%, rgba(0,240,255,.22), rgba(255,43,214,.18));
  border: 1px solid var(--lc-grid);
  border-radius: var(--lc-radius-pill);
  color: var(--lc-text);
  box-shadow: var(--lc-shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s linear;
}
.btn-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.btn-top:hover, .btn-top:focus-visible { color: var(--lc-yellow); box-shadow: var(--lc-shadow-strong); }
.btn-top .fa { text-shadow: var(--lc-glow-yellow); }

/* ==========================================================================
   12) TABLES, ALERTS, TOASTS (quick neon skins)
   ========================================================================== */
.table-neon {
  color: var(--lc-text);
  border-color: var(--lc-grid);
}
.table-neon thead th {
  border-bottom: 1px solid var(--lc-grid-strong);
  color: var(--lc-yellow);
}
.table-neon tbody tr { border-color: var(--lc-grid); }
.table-neon tbody tr:hover { background: rgba(168,85,247,.06); }

.alert-neon {
  background: linear-gradient(180deg, rgba(18,18,37,.9), rgba(18,18,37,.7));
  border: 1px solid var(--lc-grid-strong);
  color: var(--lc-text);
  box-shadow: var(--lc-shadow);
}

.toast-neon {
  background: var(--lc-surface);
  color: var(--lc-text);
  border: 1px solid var(--lc-grid);
  box-shadow: var(--lc-shadow);
}

/* ==========================================================================
   13) RESPONSIVE POLISH (complements Bootstrap)
   ========================================================================== */
@media (max-width: 575.98px) {
  .navbar .nav-link { padding: .5rem .6rem; }
  .brand-glow { letter-spacing: .5px; }
  .card-neon { border-radius: 14px; }
  .ribbon { top: 10px; left: -10px; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .card-neon { border-radius: 16px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .navbar .nav-link { padding: .55rem .75rem; }
}
@media (min-width: 1200px) {
  .brand-glow { font-size: clamp(1.4rem, .6rem + 2vw, 2rem); }
}

/* ==========================================================================
   14) ACCESSIBILITY: Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .marquee-track { animation: none !important; }
}

/* ==========================================================================
   15) BONUS: READY-TO-USE SECTION WRAPPERS
   ========================================================================== */
/* Hero wrapper with CRT vignette */
.hero-crt {
  position: relative; overflow: hidden; border-bottom: 1px solid var(--lc-grid);
  background: linear-gradient(180deg, rgba(12,12,22,.85), rgba(12,12,22,.65));
}
.hero-crt::before {
  content: ""; position: absolute; inset: -40px;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
}

/* Warp tile for categories */
.warp-tile {
  position: relative; overflow: hidden; border-radius: var(--lc-radius-lg);
  border: 1px solid var(--lc-grid);
  background:
    radial-gradient(800px 400px at 20% -10%, rgba(0,240,255,.15), transparent 60%),
    linear-gradient(180deg, rgba(18,18,37,.85), rgba(18,18,37,.6));
  box-shadow: var(--lc-shadow);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.warp-tile:hover { transform: translateY(-4px) rotate(-.35deg); box-shadow: var(--lc-shadow-strong); }

/* Product image aspect helper */
.aspect-4x3 { aspect-ratio: 4/3; object-fit: cover; }

/* ==========================================================================
   16) SKELETON / SHIMMER PLACEHOLDERS
   ========================================================================== */
.skeleton {
  position: relative; overflow: hidden; background: rgba(255,255,255,.05); border-radius: var(--lc-radius);
}
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }