/* ================================================================
   Paradigm Shift Labs — Anime/Gaming UI Overhaul
   Visual-only override layer loaded after theme.css + product-card.css
   ================================================================ */

/* ── 1. CSS Variable Overrides ─────────────────────────────────── */
:root {
  --bg:    #0A0A0F;
  --bg-2:  #0F0F1A;
  --bg-3:  #141428;
  --accent: #00D4C8;
  --amber:  #D4A843;
  --border: rgba(0,212,200,0.12);
  --card-bg: rgba(10,10,15,0.6);
  --glow-teal: 0 0 12px rgba(0,212,200,0.55), 0 0 32px rgba(0,212,200,0.22);
  --glow-gold:  0 0 12px rgba(212,168,67,0.55), 0 0 28px rgba(212,168,67,0.18);
  --font-display: 'Orbitron', 'Bebas Neue', sans-serif;
  --font-heading:  'Rajdhani', 'Bebas Neue', sans-serif;
}

/* ── 2. Typography Overrides ───────────────────────────────────── */
.hero-title,
.section-title,
.closing-title,
.shop-title,
.waitlist-title,
.preorders-title,
.reviews-title {
  font-family: var(--font-display);
  letter-spacing: 3px;
}

.nav-logo,
.section-label,
.manifesto-label,
.hero-badge,
.hero-label,
.waitlist-badge,
.closing-label,
.nav-link,
.sidebar-label,
.store-card-cat,
.product-cat-label,
.psl-brand-text {
  font-family: var(--font-heading);
}

/* ── 3. Navbar — HUD Aesthetic ─────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(10,10,15,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,212,200,0.18);
  transition: border-color 0.35s;
}

/* Teal accent bar — left edge */
.navbar::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* Gold accent bar — right edge */
.navbar::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: 0;
  width: 100px;
  height: 2px;
  background: linear-gradient(-90deg, var(--amber), transparent);
}

.nav-link:hover {
  text-shadow: var(--glow-teal);
}

.nav-logo-img {
  height: 38px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(0,212,200,0.4));
  transition: filter 0.25s;
}

.nav-logo-img:hover {
  filter: drop-shadow(0 0 14px rgba(0,212,200,0.75));
}

/* ── 4. Hero — Cinematic Treatment ────────────────────────────── */
.hero {
  min-height: 100vh;
  overflow: hidden;
}

.hero-bg {
  background:
    radial-gradient(ellipse at 62% 38%, rgba(0,212,200,0.14) 0%, transparent 52%),
    radial-gradient(ellipse at 18% 72%, rgba(212,168,67,0.09) 0%, transparent 46%),
    radial-gradient(ellipse at 85% 10%, rgba(0,212,200,0.07) 0%, transparent 38%),
    linear-gradient(170deg, #0A0A0F 0%, #0F0F1A 100%);
}

#psl-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* PSL logo in hero */
.hero-logo-img {
  height: 64px;
  width: auto;
  display: block;
  margin-bottom: 24px;
  filter: drop-shadow(0 0 16px rgba(0,212,200,0.5));
  animation: pslLogoGlow 3.5s ease-in-out infinite alternate;
}

@keyframes pslLogoGlow {
  from { filter: drop-shadow(0 0 10px rgba(0,212,200,0.35)); }
  to   { filter: drop-shadow(0 0 28px rgba(0,212,200,0.8)) drop-shadow(0 0 10px rgba(212,168,67,0.35)); }
}

/* Stat cards — glass + glow */
.stat-card {
  background: rgba(10,10,15,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,212,200,0.18);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.stat-card:hover {
  border-color: rgba(0,212,200,0.45);
  box-shadow: var(--glow-teal);
}

/* ── 5. Glitch Animation on Hero Title ─────────────────────────── */
.glitch-text {
  position: relative;
  display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.glitch-text::before {
  color: var(--accent);
  opacity: 0.7;
  animation: glitch1 4.5s infinite linear alternate-reverse;
}

.glitch-text::after {
  color: var(--amber);
  opacity: 0.5;
  animation: glitch2 3.8s infinite linear alternate-reverse;
}

@keyframes glitch1 {
  0%,65%  { clip: rect(0,0,0,0); transform: translate(0); }
  66%  { clip: rect(14px,9999px,56px,0); transform: translate(-3px,0); }
  75%  { clip: rect(72px,9999px,98px,0); transform: translate(3px,0); }
  84%  { clip: rect(30px,9999px,50px,0); transform: translate(-2px,0); }
  100% { clip: rect(0,0,0,0); transform: translate(0); }
}

@keyframes glitch2 {
  0%,70%  { clip: rect(0,0,0,0); transform: translate(0); }
  71%  { clip: rect(60px,9999px,85px,0); transform: translate(2px,0); }
  80%  { clip: rect(8px,9999px,24px,0); transform: translate(-2px,0); }
  90%  { clip: rect(44px,9999px,62px,0); transform: translate(1px,0); }
  100% { clip: rect(0,0,0,0); transform: translate(0); }
}

/* ── 6. Section Label Gradient Text ───────────────────────────── */
.section-label,
.manifesto-label,
.preorders-header .section-label {
  background: linear-gradient(90deg, var(--accent) 0%, var(--amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border-color: rgba(0,212,200,0.4);
}

/* ── 7. Hex-Grid Background Texture ───────────────────────────── */
.manifesto,
.philosophy,
.waitlist {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48'%3E%3Cpolygon points='28,1 55,14.5 55,41.5 28,55 1,41.5 1,14.5' fill='none' stroke='rgba(0%2C212%2C200%2C0.06)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 56px 48px;
}

/* ── 8. Product Card Glow + 3D Lift ───────────────────────────── */
.psl-product-card {
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.psl-product-card:hover {
  border-color: rgba(0,212,200,0.55);
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,212,200,0.25), var(--glow-teal);
}

/* Golden price glow */
.psl-product-card .card-price,
.store-card-price,
.home-product-price {
  text-shadow: 0 0 14px rgba(212,168,67,0.45);
}

/* Shop store-card same treatment */
.store-card {
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.store-card:hover {
  border-color: rgba(0,212,200,0.55);
  transform: translateY(-5px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5), var(--glow-teal);
}

/* ── 9. Button Glow + Shimmer Sweep ───────────────────────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent) 0%, rgba(0,180,170,0.92) 100%);
  border: 1px solid var(--accent);
  transition: transform 0.2s, box-shadow 0.3s, opacity 0.2s;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -70%;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--glow-teal);
}

.btn-primary:hover:not(:disabled)::after {
  left: 130%;
}

/* Waitlist / quiz CTA buttons */
.waitlist-form button,
.quiz-cta-btn,
.sticky-atc-btn,
.add-btn {
  position: relative;
  overflow: hidden;
}

.waitlist-form button::after,
.quiz-cta-btn::after,
.add-btn::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -70%;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
}

.waitlist-form button:hover:not(:disabled)::after,
.quiz-cta-btn:hover::after,
.add-btn:hover::after {
  left: 130%;
}

/* ── 10. Closing / CTA Section ────────────────────────────────── */
.closing {
  background: linear-gradient(180deg, #0A0A0F 0%, #0F0F1A 60%, rgba(0,212,200,0.04) 100%);
}

.closing-title {
  text-shadow: 0 0 40px rgba(0,212,200,0.15);
}

/* ── 11. Scroll-Reveal Base States ────────────────────────────── */
.psl-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1);
}

.psl-reveal.psl-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children via nth-child delay */
.philosophy-grid .philosophy-item.psl-reveal:nth-child(2) { transition-delay: 0.1s; }
.philosophy-grid .philosophy-item.psl-reveal:nth-child(3) { transition-delay: 0.2s; }
.philosophy-grid .philosophy-item.psl-reveal:nth-child(4) { transition-delay: 0.3s; }
.home-products-grid .psl-product-card.psl-reveal:nth-child(2) { transition-delay: 0.08s; }
.home-products-grid .psl-product-card.psl-reveal:nth-child(3) { transition-delay: 0.16s; }
.home-products-grid .psl-product-card.psl-reveal:nth-child(4) { transition-delay: 0.24s; }

/* ── 12. Reduced-Motion Safety ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .psl-reveal,
  .hero-logo-img,
  .glitch-text::before,
  .glitch-text::after,
  #psl-particles,
  .btn-primary::after,
  .waitlist-form button::after,
  .quiz-cta-btn::after,
  .add-btn::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}