/* ============================================================
   EarnWay Mirror — Cinematic Upgrade
   Layered ON TOP of style.css. Adds:
   - Full light theme via [data-theme="light"]
   - Smooth global theme crossfade
   - Custom cursor (ring + dot)
   - Scroll progress rail
   - Theme toggle with sun/moon morph
   - Aurora that follows the mouse
   - Marquee kinetic banner
   - Cinematic page entrance + character reveals
   - Magnetic + spring micro-interactions
   - Scroll-driven parallax & zoom
   ============================================================ */

/* ── Light theme tokens ─────────────────────────────────────── */
/* The base style.css sets dark tokens on :root.
   We override them via :root[data-theme="light"] (higher specificity). */
:root[data-theme="light"] {
  --bg-0: #f7f3ec;          /* warm pearl */
  --bg-1: #efe9de;          /* champagne */
  --bg-2: #faf6ef;          /* lifted card surface */
  --bg-3: #ffffff;          /* clean elevated panel */
  --surface: rgba(20, 12, 24, 0.04);
  --surface-2: rgba(20, 12, 24, 0.07);
  --border: rgba(20, 12, 24, 0.10);
  --border-strong: rgba(20, 12, 24, 0.22);

  --text: #1a0e16;          /* deep plum-black */
  --text-soft: rgba(26, 14, 22, 0.78);
  --text-muted: rgba(26, 14, 22, 0.58);
  --text-dim: rgba(26, 14, 22, 0.38);

  --accent: #c91e58;        /* deeper magenta for light bg contrast */
  --accent-soft: #e22861;
  --violet: #5b27c7;
  --violet-soft: #7c3aed;
  --gold: #b8853c;

  --grad-brand: linear-gradient(135deg, #c91e58 0%, #5b27c7 100%);
  --grad-flame: linear-gradient(135deg, #e22861 0%, #c91e58 35%, #5b27c7 100%);
  --grad-text: linear-gradient(120deg, #1a0e16 0%, #1a0e16 30%, #c91e58 60%, #5b27c7 100%);

  --shadow-glow: 0 30px 80px -20px rgba(201, 30, 88, 0.30);
  --shadow-glow-violet: 0 30px 80px -20px rgba(91, 39, 199, 0.28);
  --shadow-card: 0 30px 60px -32px rgba(48, 16, 36, 0.25);

  /* Local helpers */
  --nav-bg: rgba(247, 243, 236, 0.70);
  --nav-bg-scrolled: rgba(247, 243, 236, 0.92);
  --aurora-1: rgba(201, 30, 88, 0.22);
  --aurora-2: rgba(91, 39, 199, 0.18);
  --grain-strength: 0.018;
}

:root {
  /* Dark-mode versions of the local helpers */
  --nav-bg: rgba(5, 5, 15, 0.60);
  --nav-bg-scrolled: rgba(5, 5, 15, 0.92);
  --aurora-1: rgba(226, 40, 97, 0.30);
  --aurora-2: rgba(124, 58, 237, 0.28);
  --grain-strength: 0.025;

  --ease-cinema: cubic-bezier(0.16, 1, 0.3, 1);  /* slow-in, snappy-out */
  --ease-spring-soft: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ── Smooth theme crossfade ────────────────────────────────── */
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* Avoid initial flash by transitioning only after first paint (added via JS) */
html.theme-ready,
html.theme-ready body,
html.theme-ready .site-header,
html.theme-ready .product-card,
html.theme-ready .category-card,
html.theme-ready .feature,
html.theme-ready .stat-card,
html.theme-ready .banner,
html.theme-ready .site-footer,
html.theme-ready .btn-secondary,
html.theme-ready .eyebrow,
html.theme-ready .hero-chip,
html.theme-ready .product-card-image,
html.theme-ready .mobile-menu {
  transition:
    background 0.7s var(--ease-cinema),
    background-color 0.7s var(--ease-cinema),
    color 0.7s var(--ease-cinema),
    border-color 0.7s var(--ease-cinema),
    box-shadow 0.7s var(--ease-cinema);
}

/* Override the existing site-header background to use our token */
.site-header { background: var(--nav-bg) !important; }
.site-header.scrolled { background: var(--nav-bg-scrolled) !important; }

/* Adjust grain & atmosphere for light theme */
:root[data-theme="light"] body::before { opacity: var(--grain-strength); }
:root[data-theme="light"] .atmosphere::before { opacity: 0.45; mix-blend-mode: multiply; }
:root[data-theme="light"] .atmosphere::after  { opacity: 0.40; mix-blend-mode: multiply; }

/* Light-mode meta theme color is set by JS; meta itself is in header */

/* ── Aurora — radial gradient that follows the mouse ───────── */
.aurora {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;          /* between atmosphere and content */
  opacity: 0;
  transition: opacity 1.2s var(--ease-cinema);
  background:
    radial-gradient(
      600px circle at var(--mx, 50%) var(--my, 50%),
      var(--aurora-1) 0%,
      transparent 45%
    ),
    radial-gradient(
      900px circle at calc(var(--mx, 50%) + 10%) calc(var(--my, 50%) - 10%),
      var(--aurora-2) 0%,
      transparent 60%
    );
  filter: blur(20px);
  mix-blend-mode: screen;
}
:root[data-theme="light"] .aurora { mix-blend-mode: multiply; }
.aurora.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .aurora { display: none; }
}

/* ── Custom cursor (desktop only) ──────────────────────────── */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  will-change: transform;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.3s ease, width 0.25s var(--ease-spring-soft),
              height 0.25s var(--ease-spring-soft),
              background-color 0.25s ease, border-color 0.25s ease;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: #ffffff;
  transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%);
}
.cursor-on .cursor-dot,
.cursor-on .cursor-ring { opacity: 1; }

.cursor-hover .cursor-ring {
  width: 64px; height: 64px;
  border-color: var(--accent-soft);
  background: rgba(226, 40, 97, 0.06);
}
.cursor-hover .cursor-dot { width: 0; height: 0; }

.cursor-press .cursor-ring {
  width: 28px; height: 28px;
  background: rgba(226, 40, 97, 0.18);
}

/* Hide native cursor on interactive elements when custom cursor is on.
   We use a body class so we can disable on touch devices. */
.cursor-on,
.cursor-on a,
.cursor-on button,
.cursor-on .btn,
.cursor-on .product-card,
.cursor-on .category-card,
.cursor-on input,
.cursor-on textarea { cursor: none; }
.cursor-on input,
.cursor-on textarea { cursor: text; }

@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
  .cursor-on, .cursor-on * { cursor: auto !important; }
}

/* ── Scroll progress rail ──────────────────────────────────── */
.scroll-rail {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 200;
  background: transparent;
  pointer-events: none;
}
.scroll-rail-fill {
  height: 100%;
  width: 0%;
  background: var(--grad-flame);
  box-shadow: 0 0 14px rgba(226, 40, 97, 0.6);
  transform-origin: left center;
  transition: width 0.08s linear;
}

/* ── Theme toggle button ───────────────────────────────────── */
.theme-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.4s var(--ease-spring-soft),
    border-color 0.3s ease,
    background 0.3s ease;
  flex-shrink: 0;
}
.theme-toggle:hover {
  transform: rotate(15deg) scale(1.08);
  border-color: var(--accent);
}
.theme-toggle:active { transform: rotate(15deg) scale(0.96); }

.theme-toggle svg {
  width: 22px; height: 22px;
  color: var(--text);
  transition: transform 0.6s var(--ease-cinema), opacity 0.4s var(--ease-cinema);
}
.theme-toggle .icon-sun  { position: absolute; }
.theme-toggle .icon-moon { position: absolute; }

/* Default = dark theme → show MOON (we're in dark, click to go light) */
:root:not([data-theme="light"]) .theme-toggle .icon-sun {
  opacity: 0; transform: rotate(-180deg) scale(0.4);
}
:root:not([data-theme="light"]) .theme-toggle .icon-moon {
  opacity: 1; transform: rotate(0) scale(1);
}
/* Light theme → show SUN */
:root[data-theme="light"] .theme-toggle .icon-sun {
  opacity: 1; transform: rotate(0) scale(1);
}
:root[data-theme="light"] .theme-toggle .icon-moon {
  opacity: 0; transform: rotate(180deg) scale(0.4);
}

/* Sparkle burst on toggle */
.theme-toggle .spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-soft);
  pointer-events: none;
  opacity: 0;
}
.theme-toggle.bursting .spark {
  animation: sparkBurst 0.8s var(--ease-cinema) forwards;
}
@keyframes sparkBurst {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx, 30px), var(--sy, -30px)) scale(0.2); }
}

/* Make the dashboard menu wrap nicely with the new toggle */
.nav-actions { gap: 0.6rem; }

/* ── Page entrance ─────────────────────────────────────────── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.page-enter > * {
  animation: pageIn 1s var(--ease-cinema) both;
}
.page-enter > *:nth-child(1) { animation-delay: 0.05s; }
.page-enter > *:nth-child(2) { animation-delay: 0.15s; }
.page-enter > *:nth-child(3) { animation-delay: 0.25s; }
.page-enter > *:nth-child(4) { animation-delay: 0.35s; }
.page-enter > *:nth-child(5) { animation-delay: 0.45s; }

/* Cinematic curtain on first paint */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg-0);
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: curtainOut 1.4s var(--ease-cinema) 0.2s forwards;
}
.curtain-mark {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 7vw, 5rem);
  letter-spacing: -0.03em;
  background: var(--grad-flame);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(8px);
  animation: markIn 0.6s var(--ease-cinema) 0.1s forwards,
             markOut 0.4s var(--ease-cinema) 0.9s forwards;
}
@keyframes markIn  { to { opacity: 1; transform: translateY(0); } }
@keyframes markOut { to { opacity: 0; transform: translateY(-6px); filter: blur(8px); } }
@keyframes curtainOut {
  0%   { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); }
}
@media (prefers-reduced-motion: reduce) {
  .curtain { display: none; }
  .page-enter > * { animation: none !important; }
}

/* ── Cinematic character reveal (used on H1) ───────────────── */
/* When cinematic.js has split chars in, the word-level slide-up
   in style.css is overridden so only the char animation plays.
   Without JS or with reduced motion, the original word animation runs.
   NOTE: style.css declares `.hero-copy h1 span { display: block }` which
   has specificity (0,1,2) and would force every .char + .hero-word onto
   its own line. We use the same parent chain to win the cascade. */
.hero h1.chars-ready { overflow: visible; }
.hero-copy h1.chars-ready .hero-word,
.hero-copy h1 .hero-word {
  display: inline-block;
  transform: none !important;
  transition: none !important;
  overflow: visible;
}

.hero-copy h1 .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotate(6deg);
  filter: blur(10px);
  transition:
    opacity 0.7s var(--ease-cinema),
    transform 0.9s var(--ease-cinema),
    filter 0.9s var(--ease-cinema);
}
.hero-copy h1 .char.in {
  opacity: 1;
  transform: translateY(0) rotate(0);
  filter: blur(0);
}

/* Enhanced .reveal — the existing one fades, ours adds blur+lift */
.reveal {
  filter: blur(8px);
  transition:
    opacity 0.9s var(--ease-cinema),
    transform 1s var(--ease-cinema),
    filter 0.9s var(--ease-cinema);
}
.reveal.in { filter: blur(0); }

/* ── Marquee kinetic banner ────────────────────────────────── */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 1.6rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(90deg, var(--bg-0) 0%, transparent 8%, transparent 92%, var(--bg-0) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track {
  display: inline-flex;
  gap: 3rem;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  padding-left: 3rem;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  color: var(--text);
  letter-spacing: -0.01em;
}
.marquee-item::after {
  content: '✦';
  margin-left: 1rem;
  font-style: normal;
  background: var(--grad-flame);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Magnetic button feedback ──────────────────────────────── */
.btn,
.theme-toggle,
.product-card,
.category-card {
  will-change: transform;
}
.btn::after { transition: transform 0.4s var(--ease-spring-soft); }

/* When .magnetic is added we let JS set --mx-pull / --my-pull */
.magnetic {
  transform: translate(var(--mx-pull, 0), var(--my-pull, 0));
  transition: transform 0.45s var(--ease-spring-soft);
}

/* ── Spring press effect on all .btn ───────────────────────── */
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }
.btn-primary:active { transform: translateY(0) scale(0.97); }

/* ── Hero stat counters: subtle glow when animating ────────── */
.hero-stat strong {
  background: var(--grad-flame);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.hero-stat strong.counting {
  animation: countPulse 0.6s var(--ease-cinema);
}
@keyframes countPulse {
  0%   { filter: brightness(1.4); }
  100% { filter: brightness(1); }
}

/* ── Scroll-driven hero zoom & fade ────────────────────────── */
.hero-visual,
.hero-copy {
  will-change: transform, opacity;
}

/* ── Light-theme refinements for existing components ───────── */
:root[data-theme="light"] body { color: var(--text-soft); }
:root[data-theme="light"] .text-gradient {
  background: linear-gradient(120deg, #1a0e16 0%, #1a0e16 25%, #c91e58 60%, #5b27c7 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
:root[data-theme="light"] .eyebrow {
  background: rgba(201, 30, 88, 0.08);
  border-color: rgba(201, 30, 88, 0.35);
  color: var(--accent);
}
:root[data-theme="light"] .btn-secondary {
  background: rgba(20, 12, 24, 0.04);
  color: var(--text);
}
:root[data-theme="light"] .btn-secondary:hover {
  background: rgba(20, 12, 24, 0.08);
  border-color: var(--accent);
}
:root[data-theme="light"] .btn-ghost:hover { color: var(--accent); }

:root[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-1); }
:root[data-theme="light"] ::selection { background: var(--accent); color: #fff; }

/* Cards in light mode — bring up surface contrast */
:root[data-theme="light"] .product-card,
:root[data-theme="light"] .category-card,
:root[data-theme="light"] .feature,
:root[data-theme="light"] .stat-card {
  background: var(--bg-2);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}
:root[data-theme="light"] .product-card:hover,
:root[data-theme="light"] .category-card:hover {
  border-color: var(--accent);
  box-shadow: 0 30px 60px -28px rgba(201, 30, 88, 0.30);
}
:root[data-theme="light"] .product-card-image {
  background: linear-gradient(135deg, #ffffff 0%, #f3ede4 100%);
}

/* Footer in light mode */
:root[data-theme="light"] .site-footer {
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  color: var(--text-soft);
}
:root[data-theme="light"] .site-footer h4 { color: var(--text); }
:root[data-theme="light"] .site-footer a:hover { color: var(--accent); }

/* Mobile menu in light mode */
:root[data-theme="light"] .mobile-menu {
  background: rgba(247, 243, 236, 0.97);
  color: var(--text);
}

/* Hero chips polish in light mode */
:root[data-theme="light"] .hero-chip {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--border);
  color: var(--text);
  box-shadow: 0 12px 30px -16px rgba(48, 16, 36, 0.25);
}

/* Banner contrast preserved in light mode (the gradient banner stays bold) */
:root[data-theme="light"] .banner h2 em { color: #fff; -webkit-text-fill-color: #fff; }

/* Hero scroll cue in light mode */
:root[data-theme="light"] .scroll-cue { color: var(--text-muted); }

/* Hero orbs intensity tuned for light mode */
:root[data-theme="light"] .hero-orb { mix-blend-mode: multiply; opacity: 0.55; }

/* Cursor color tuned for light mode (since mix-blend: difference works either way,
   we keep the same white cursor — diff makes it look dark on light bg) */

/* ── Reduce motion friendly fallbacks ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .hero-copy h1 .char { transition: opacity 0.3s linear; transform: none; filter: none; }
  .reveal { transition: opacity 0.3s linear; filter: none; }
}

/* ── Mobile spacing tweaks for new toggle ──────────────────── */
@media (max-width: 768px) {
  .theme-toggle { width: 40px; height: 40px; }
  .theme-toggle svg { width: 20px; height: 20px; }
  .scroll-rail { height: 2px; }
}