/* ========================================== */
/*  REAPER SQUAD — THEME TYPOGRAPHY SYSTEM     */
/*  10 themes, each with a distinct heading +  */
/*  body pairing. Body fonts always stay       */
/*  highly readable; personality lives in      */
/*  headings, letter-spacing and glow.         */
/* ========================================== */


/* ─── THEME TRANSITION OVERLAY ─── */
#themeTransitionOverlay {
  position: fixed; inset: 0; z-index: 99999;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--tx, 50%) var(--ty, 50%), var(--accent) 0%, transparent 70%);
  transition: opacity 0s;
}
#themeTransitionOverlay.burst {
  animation: themeBurst 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes themeBurst {
  0%   { opacity: 0;   transform: scale(0); }
  30%  { opacity: 0.55; transform: scale(1.8); }
  60%  { opacity: 0.3;  transform: scale(3); }
  100% { opacity: 0;   transform: scale(5); }
}

/* ─── SCANLINE LAYER — Cyberpunk exclusive (kept off elsewhere so it stays distinct) ─── */
#scanlineLayer {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,255,200,0.018) 2px, rgba(0,255,200,0.018) 4px
  );
  display: none;
  animation: scanlineScroll 8s linear infinite;
}
@keyframes scanlineScroll {
  0%   { background-position: 0 0; }
  100% { background-position: 0 100px; }
}
body.theme-cyber #scanlineLayer { display: block; }

/* ─── NOISE GRAIN OVERLAY — restrained per theme, near-off for the clean themes ─── */
#grainLayer {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.4s;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
  /* Was 0.15s — repainted a full-viewport mix-blend-mode:overlay layer ~6.7
     times/sec, forever, on every theme with grain opacity > 0 (crimson,
     royal, cyber, emerald, arctic, dark — i.e. most themes, including the
     default). That's the real cause of "laggy on theme switch": it's not
     actually switch-time cost, it's a constant background repaint tax that
     runs the whole time you're on a grainy theme. Slowing it to 0.6s cuts
     the repaint frequency ~4x; the grain still visibly shifts/flickers,
     just without hammering the compositor every frame. */
  animation: grainShift 0.6s steps(1) infinite;
  mix-blend-mode: overlay;
}
@keyframes grainShift {
  0%   { background-position: 0 0; }
  25%  { background-position: -30px 20px; }
  50%  { background-position: 15px -25px; }
  75%  { background-position: -20px -10px; }
  100% { background-position: 10px 30px; }
}
body.theme-crimson  #grainLayer { opacity: 0.55; }
body.theme-royal    #grainLayer { opacity: 0.3;  }
body.theme-cyber     #grainLayer { opacity: 0.3;  }
body.theme-emerald  #grainLayer { opacity: 0.18; }
body.theme-arctic   #grainLayer { opacity: 0.06; } /* clean/minimal — texture kept nearly off */
body.theme-dark      #grainLayer { opacity: 0.12; }

/* ════════════════════════════════════════════
   PER-THEME FONT + TEXT OVERRIDES
   body font, heading style, accent text, cards
════════════════════════════════════════════ */

/* ── 1. REAPER DARK — aggressive / futuristic / gaming ── */
body.theme-dark {
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  letter-spacing: 0.01em;
}
body.theme-dark .hdr-title {
  font-family: 'Bebas Neue', cursive;
  letter-spacing: 3px; font-size: 1.15rem;
  text-shadow: 0 0 20px rgba(124,111,255,0.5);
}
body.theme-dark .sp-title {
  font-family: 'Bebas Neue', cursive; letter-spacing: 4px;
}

/* ── 2. REAPER LIGHT — clean / modern / readable ── */
body.theme-light {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.01em;
}
body.theme-light .hdr-title {
  font-family: 'Playfair Display', serif;
  font-weight: 900; letter-spacing: 0.5px; font-size: 0.95rem;
}
body.theme-light .sp-title {
  font-family: 'Playfair Display', serif;
}
body.theme-light .page { font-family: 'Montserrat', sans-serif; }

/* ── 3. CYBERPUNK — futuristic / techno (headings only — body stays readable) ── */
body.theme-cyber {
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  letter-spacing: 0.02em;
}
body.theme-cyber .hdr-title {
  font-family: 'Major Mono Display', monospace;
  font-size: 0.78rem; letter-spacing: 2px;
  animation: cyberGlitch 3s steps(1) infinite;
  text-shadow: 0 0 8px #00ffcc, 0 0 20px #00ffcc, 2px 0 #00ccff, -2px 0 #00ffcc;
}
@keyframes cyberGlitch {
  0%,88%,100% {
    text-shadow: 0 0 8px #00ffcc, 0 0 20px #00ffcc;
    transform: translateX(0) skewX(0deg);
  }
  89% { transform: translateX(-3px) skewX(-3deg); text-shadow: 3px 0 #00ccff, -3px 0 #00ffcc, 0 0 20px #00ffcc; }
  90% { transform: translateX(2px) skewX(2deg); text-shadow: -2px 0 #ff00cc, 2px 0 #00ffcc; }
  91% { transform: translateX(0) skewX(0deg); }
  94% { transform: translateX(1px); }
  95% { transform: translateX(-1px) skewX(1deg); text-shadow: 2px 0 #00ccff, 0 0 15px #00ffcc; }
  96% { transform: translateX(0); }
}
body.theme-cyber .sp-title {
  font-family: 'Major Mono Display', monospace; letter-spacing: 3px; font-size: 1rem;
  text-shadow: 0 0 20px #00ffcc;
}

/* ── 4. CRIMSON / BLOOD — sharp / powerful ── */
body.theme-crimson {
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  letter-spacing: 0.02em;
  font-weight: 600;
}
body.theme-crimson .hdr-title {
  font-family: 'Oxanium', sans-serif;
  font-weight: 900; letter-spacing: 3px; font-size: 1.05rem;
  animation: crimsonTitlePulse 3s ease-in-out infinite;
  text-shadow: 0 0 12px #e2323a, 0 0 26px #a3141c;
}
@keyframes crimsonTitlePulse {
  0%,100% { text-shadow: 0 0 10px #e2323a, 0 0 18px #a3141c; }
  50%     { text-shadow: 0 0 22px #ff6b5c, 0 0 44px #e2323a; }
}
body.theme-crimson .sp-title {
  font-family: 'Oxanium', sans-serif; font-weight: 900; letter-spacing: 4px;
  text-shadow: 0 0 20px #e2323a;
}

/* ── 5. ARCTIC / FROST — clean / minimal / technical ── */
body.theme-arctic {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.015em;
}
body.theme-arctic .hdr-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700; letter-spacing: 2px; font-size: 0.85rem;
  text-shadow: 0 0 10px rgba(99,199,255,0.55);
}
body.theme-arctic .sp-title {
  font-family: 'Orbitron', sans-serif; letter-spacing: 3px;
  text-shadow: 0 0 16px rgba(99,199,255,0.6);
}

/* ── 6. EMERALD / FOREST — grounded / natural ── */
body.theme-emerald {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.01em;
}
body.theme-emerald .hdr-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800; text-transform: uppercase; letter-spacing: 2.5px; font-size: 1rem;
  text-shadow: 0 0 14px rgba(51,209,122,0.5);
}
body.theme-emerald .sp-title {
  font-family: 'Rajdhani', sans-serif; font-weight: 800; letter-spacing: 3px;
  text-shadow: 0 0 18px rgba(51,209,122,0.55);
}

/* ── 7. ROYAL / COSMIC — elegant / premium ── */
body.theme-royal {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.02em;
}
body.theme-royal .hdr-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.78rem; letter-spacing: 2px;
  animation: royalTitleGlow 2.5s ease-in-out infinite alternate;
  text-shadow: 0 0 10px #9b6bff, 0 0 24px #9b6bff;
}
@keyframes royalTitleGlow {
  0%  { text-shadow: 0 0 6px #9b6bff, 0 0 15px #9b6bff; }
  100%{ text-shadow: 0 0 18px #c4a8ff, 0 0 40px #9b6bff, 0 0 60px #f0c14b; }
}
body.theme-royal .sp-title {
  font-family: 'Cinzel Decorative', serif; font-size: 1rem;
  text-shadow: 0 0 20px #9b6bff;
}

/* ── 8. SAKURA — elegant / soft ── */
body.theme-sakura {
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.04em;
}
body.theme-sakura .hdr-title {
  font-family: 'Satisfy', cursive;
  font-size: 1.05rem; letter-spacing: 1px;
  animation: sakuraTitleDrift 4s ease-in-out infinite alternate;
  text-shadow: 0 0 12px rgba(255,127,176,0.7), 0 0 30px rgba(255,194,214,0.5);
}
@keyframes sakuraTitleDrift {
  0%  { text-shadow: 0 0 8px rgba(255,127,176,0.5), 0 0 20px rgba(255,194,214,0.3); transform: translateY(0px); }
  100%{ text-shadow: 0 0 20px rgba(255,127,176,0.9), 0 0 45px rgba(255,194,214,0.6); transform: translateY(-2px); }
}
body.theme-sakura .sp-title {
  font-family: 'Satisfy', cursive; letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(255,127,176,0.8);
}

/* ── 9. LAVENDER DREAM — dreamy / refined ── */
body.theme-lavender {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.02em; font-weight: 500;
}
body.theme-lavender .hdr-title {
  font-family: 'Abril Fatface', cursive;
  font-size: 1rem; letter-spacing: 1.5px;
  animation: lavenderTitleShine 3s ease-in-out infinite alternate;
  text-shadow: 0 0 16px rgba(167,139,250,0.7);
}
@keyframes lavenderTitleShine {
  0%  { text-shadow: 0 0 8px rgba(167,139,250,0.5); }
  100%{ text-shadow: 0 0 22px rgba(224,195,252,0.85), 0 0 40px rgba(167,139,250,0.5); }
}
body.theme-lavender .sp-title {
  font-family: 'Abril Fatface', cursive; letter-spacing: 2px;
  text-shadow: 0 0 24px rgba(167,139,250,0.8);
}

/* ── 10. ROSE / VALENTINE — romantic / sophisticated ── */
body.theme-rose {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.01em;
}
body.theme-rose .hdr-title {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900; letter-spacing: 0.5px; font-size: 1rem;
  animation: roseTitleFloat 3s ease-in-out infinite alternate;
  text-shadow: 0 0 14px rgba(255,143,171,0.8);
}
@keyframes roseTitleFloat {
  0%  { transform: translateY(0); text-shadow: 0 0 10px rgba(255,143,171,0.6); }
  100%{ transform: translateY(-2px); text-shadow: 0 0 25px rgba(255,143,171,1), 0 0 50px rgba(255,180,200,0.7); }
}
body.theme-rose .sp-title {
  font-family: 'Playfair Display', serif; font-style: italic;
  text-shadow: 0 0 20px rgba(255,143,171,0.8);
}

/* ════════════════════════════════════════════
   CARD & BUTTON UPGRADES PER THEME
════════════════════════════════════════════ */
body.theme-cyber .habit-card,
body.theme-cyber .ex-card {
  border-color: rgba(0,255,200,0.25) !important;
  box-shadow: 0 0 10px rgba(0,255,200,0.06), inset 0 0 20px rgba(0,255,200,0.02) !important;
}
body.theme-cyber .habit-card:hover,
body.theme-cyber .ex-card:hover {
  box-shadow: 0 0 20px rgba(0,255,200,0.2), 0 0 40px rgba(0,255,200,0.08) !important;
  border-color: rgba(0,255,200,0.5) !important;
}
body.theme-crimson .habit-card,
body.theme-crimson .ex-card {
  border-color: rgba(226,50,58,0.2) !important;
  box-shadow: 0 0 12px rgba(226,50,58,0.05), inset 0 1px 0 rgba(226,50,58,0.1) !important;
}
body.theme-crimson .habit-card:hover,
body.theme-crimson .ex-card:hover {
  box-shadow: 0 0 20px rgba(226,50,58,0.18) !important;
  border-color: rgba(226,50,58,0.4) !important;
}
body.theme-emerald .habit-card:hover,
body.theme-emerald .ex-card:hover {
  box-shadow: 0 0 18px rgba(51,209,122,0.2) !important;
  border-color: rgba(51,209,122,0.35) !important;
}
body.theme-royal .habit-card:hover,
body.theme-royal .ex-card:hover {
  box-shadow: 0 0 18px rgba(155,107,255,0.2) !important;
  border-color: rgba(155,107,255,0.35) !important;
}

/* ════════════════════════════════════════════
   PREMIUM AUTH BOX UPGRADE
════════════════════════════════════════════ */
body.theme-arctic .auth-box {
  box-shadow: 0 0 40px rgba(99,199,255,0.25), 0 0 80px rgba(191,233,255,0.08) !important;
  border-color: rgba(99,199,255,0.35) !important;
}
body.theme-cyber .auth-box {
  box-shadow: 0 0 30px rgba(0,255,200,0.2), inset 0 0 40px rgba(0,255,200,0.03) !important;
  border-color: rgba(0,255,200,0.3) !important;
}
body.theme-royal .auth-box {
  box-shadow: 0 0 40px rgba(155,107,255,0.2), 0 0 80px rgba(240,193,75,0.08) !important;
  border-color: rgba(155,107,255,0.25) !important;
}
body.theme-crimson .auth-box {
  box-shadow: 0 0 30px rgba(226,50,58,0.22) !important;
  border-color: rgba(226,50,58,0.3) !important;
}
body.theme-sakura .auth-box {
  box-shadow: 0 0 30px rgba(255,127,176,0.2) !important;
  border-color: rgba(255,127,176,0.25) !important;
}

/* ════════════════════════════════════════════
   SPLASH SCREEN UPGRADES
════════════════════════════════════════════ */
body.theme-crimson #splash {
  background: radial-gradient(ellipse at center, #1a0505, #0a0202);
}
body.theme-royal #splash {
  background: radial-gradient(ellipse 80% 60% at 50% 70%, #170f2c, #0c0818);
}
body.theme-cyber #splash {
  background: radial-gradient(ellipse at center, #002a2a, #001616);
}
body.theme-arctic #splash {
  background: radial-gradient(ellipse at center, #0f2438, #0a1520);
}
body.theme-emerald #splash {
  background: radial-gradient(ellipse at center, #122417, #0a150f);
}
body.theme-sakura #splash {
  background: radial-gradient(ellipse at center, #26121b, #1a0d14);
}
body.theme-lavender #splash {
  background: radial-gradient(ellipse at center, #1c1836, #120f22);
}
body.theme-rose #splash {
  background: radial-gradient(ellipse at center, #28131c, #1c0e14);
}

/* ════════════════════════════════════════════
   SMOOTH BODY FONT INHERITANCE
════════════════════════════════════════════ */
body.theme-royal .hdr-title,
body.theme-royal .sp-title,
body.theme-royal .auth-logo h1 {
  font-family: 'Cinzel Decorative', serif;
}
body.theme-crimson .hdr-title,
body.theme-crimson .sp-title,
body.theme-crimson .auth-logo h1 {
  font-family: 'Oxanium', sans-serif;
  letter-spacing: 3px;
}

/* ─── LIGHT theme card override ─── */
body.theme-light .habit-card,
body.theme-light .ex-card {
  box-shadow: 0 4px 20px rgba(91,79,255,0.08) !important;
}

/* ─── Bottom nav active indicator upgrade ─── */
.bnav.active::after {
  content: '';
  display: block;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin: 2px auto 0;
  box-shadow: 0 0 8px var(--accent);
  animation: navDot 1.5s ease-in-out infinite alternate;
}
@keyframes navDot {
  0%  { transform: scale(0.8); opacity: 0.6; }
  100%{ transform: scale(1.2); opacity: 1; }
}

/* ─── Button press micro-animation ─── */
.auth-btn, .acc-select-btn {
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}
.auth-btn:active, .acc-select-btn:active {
  transform: scale(0.97) !important;
}