/*
 * mercy.r0ice.com — shared theme + base styles
 * Used by: /camping/*, /films/, /heart/, /pulse/
 *
 * Theme set:
 *   films (default) · mercy · velvet · ink · sea · library · cabin · lobby · forest · rose
 * Persistence: localStorage['mercy.theme']
 *
 * Conventions:
 *   - Both --text and --fg map to same value (back-compat across pages)
 *   - Both --together and --accent map to same value
 *   - Base font: EB Garamond serif
 */

:root {
  /* Default = films palette */
  --bg: #13110e;
  --bg-2: #1a1814;
  --surface: #221f1b;
  --surface-2: #2c2924;
  --line: #332f2a;
  --line-soft: #23201c;
  --line-2: #23201c;
  --text: #ece5db;
  --fg: #ece5db;
  --text-2: #c8c0ba;
  --mute: #8a8278;
  --accent: #c8a86b;
  --mercy: #c97a8e;
  --seth: #88a4c4;
  --together: #c8a86b;
  --warm: #c8a86b;
  --warm-soft: #c97a8e;
  --rose: #c97a8e;
  --leaf: #8db89a;
  --gold: #c8a86b;
  --funded: #8db89a;
  --champ: #c8a86b;
  --danger: #b66873;
  --ok: #8db89a;
  --warn: #d8b56e;

  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --shadow-1: 0 6px 24px -8px rgba(0, 0, 0, .7);
  --shadow-2: 0 12px 40px -8px rgba(0, 0, 0, .8);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}


/* THEME: mercy-hair — her actual orange-to-coral hair gradient. Default for /camping/ */
body[data-theme="mercy-hair"] {
  --bg: #14080a; --bg-2: #1d0a0e; --surface: #270e14; --surface-2: #34141d;
  --line: #4a1c2a; --line-soft: #2c1018; --line-2: #2c1018;
  --text: #fff1e8; --fg: #fff1e8; --text-2: #fbd0c2; --mute: #c89890;
  /* HER ACTUAL HAIR: vivid marigold top → coral-pink ends */
  --accent: #ff6a1e;    /* her orange */
  --mercy: #ff4a7a;     /* her pink-coral */
  --seth: #ffb27a;      /* warm amber to match without competing */
  --together: #ff8c40;  /* the mid-gradient point */
  --warm: #ff6a1e; --warm-soft: #ff4a7a; --rose: #ff4a7a; --leaf: #b8d4a0;
  --gold: #ff8c40; --funded: #b8d4a0; --champ: #ff8c40;
  --danger: #ff3050; --ok: #c8e8a8; --warn: #ffc560;
}
/* Mercy-hair body gets a subtle gradient backdrop nod */
body[data-theme="mercy-hair"]{
  background: radial-gradient(ellipse 1200px 600px at 50% -200px, rgba(255,106,30,.10), transparent 50%),
              radial-gradient(ellipse 800px 400px at 50% calc(100% + 100px), rgba(255,74,122,.06), transparent 60%),
              var(--bg);
  background-attachment: fixed;
}
/* Mercy-hair: the cross-page nav active link uses the actual gradient */
body[data-theme="mercy-hair"] .mercy-meta-nav a.active{
  background: linear-gradient(90deg, #ff6a1e, #ff4a7a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 600;
}
/* Mercy-hair: the H1 em gets the same gradient on this theme */
body[data-theme="mercy-hair"] h1 em{
  background: linear-gradient(90deg, #ff6a1e, #ff4a7a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Mercy-hair: pulse dot uses her gradient */
body[data-theme="mercy-hair"] .crown .dot{ background: linear-gradient(135deg, #ff6a1e, #ff4a7a) }


/* THEME: mercy — fire-orange + dusty pink + warm dark */
body[data-theme="mercy"] {
  --bg: #160605; --bg-2: #220b08; --surface: #2e1411; --surface-2: #3d1c17;
  --line: #5a3528; --line-soft: #311612; --line-2: #311612;
  --text: #fff4e8; --fg: #fff4e8; --text-2: #f0d2bd; --mute: #b18671;
  --accent: #ff4f25; --mercy: #ffa5bc; --seth: #ffceac; --together: #ffb574;
  --warm: #ff4f25; --warm-soft: #ffa5bc; --rose: #ffa5bc; --leaf: #9ad19a;
  --gold: #ffb574; --funded: #9ad19a; --champ: #ffb574;
  --danger: #e85a6a; --ok: #9ad19a; --warn: #ffd166;
}
body[data-theme="velvet"] {
  --bg: #0c0810; --bg-2: #15101d; --surface: #1b1626; --surface-2: #241d31;
  --line: #2a2336; --line-soft: #1f1a2a; --line-2: #1f1a2a;
  --accent: #d4a5e8; --mercy: #e85a8a; --seth: #6a9eff; --together: #f5b06e;
  --warm: #d4a5e8; --warm-soft: #e85a8a; --rose: #e85a8a; --leaf: #7ad1a8;
  --gold: #f5b06e; --funded: #7ad1a8; --champ: #f5b06e;
  --danger: #d4596f; --ok: #7ad1a8; --warn: #f5c451;
}
body[data-theme="ink"] {
  --bg: #f4ede0; --bg-2: #ede4d2; --surface: #e6dcc6; --surface-2: #dcd1b9;
  --line: #c4b89e; --line-soft: #d4c9b1; --line-2: #d4c9b1;
  --text: #2a2218; --fg: #2a2218; --text-2: #4a3f30; --mute: #8a7d68;
  --accent: #7a5530; --mercy: #a04760; --seth: #3d5a7f; --together: #7a5530;
  --warm: #7a5530; --warm-soft: #a04760; --rose: #a04760; --leaf: #3a6a4a;
  --gold: #7a5530; --funded: #3a6a4a; --champ: #7a5530;
  --danger: #9c3a4a; --ok: #3a6a4a; --warn: #7a5e2a;
}
body[data-theme="sea"] {
  --bg: #0a161a; --bg-2: #0f1f24; --surface: #142a30; --surface-2: #1c363c;
  --line: #234148; --line-soft: #172d33; --line-2: #172d33;
  --accent: #d4ba85; --mercy: #e89a78; --seth: #6abcb8; --together: #d4ba85;
  --warm: #d4ba85; --warm-soft: #e89a78; --rose: #e89a78; --leaf: #85c8a8;
  --gold: #d4ba85; --funded: #85c8a8; --champ: #d4ba85;
  --danger: #c47373; --ok: #85c8a8; --warn: #d4c478;
}
body[data-theme="library"] {
  --bg: #0a0814; --bg-2: #100c1d; --surface: #181226; --surface-2: #22182f;
  --line: #2c2240; --line-soft: #171028; --line-2: #171028;
  --text: #ece4d2; --fg: #ece4d2; --text-2: #c8b896; --mute: #7c6e92;
  --accent: #d49850; --mercy: #d4a6e0; --seth: #a4b8e8; --together: #e8c878;
  --warm: #d49850; --warm-soft: #d4a6e0; --rose: #d4a6e0; --leaf: #a8c498;
  --gold: #e8c878; --funded: #a8c498; --champ: #e8c878;
  --danger: #c47373; --ok: #a8c498; --warn: #d4c478;
}
body[data-theme="cabin"] {
  --bg: #1a0e08; --bg-2: #241408; --surface: #2e1c10; --surface-2: #3a2618;
  --line: #4a3520; --line-soft: #2c1c10; --line-2: #2c1c10;
  --text: #f4dfc4; --fg: #f4dfc4; --text-2: #dcc09a; --mute: #a08868;
  --accent: #e08840; --mercy: #e8a68a; --seth: #c4a276; --together: #f5c478;
  --warm: #e08840; --warm-soft: #e8a68a; --rose: #e8a68a; --leaf: #a8c485;
  --gold: #f5c478; --funded: #a8c485; --champ: #f5c478;
  --danger: #c47373; --ok: #a8c485; --warn: #f5c451;
}
body[data-theme="lobby"] {
  --bg: #0a1a1f; --bg-2: #0e2228; --surface: #142d34; --surface-2: #1c3a42;
  --line: #264852; --line-soft: #172d33; --line-2: #172d33;
  --text: #ede4cf; --fg: #ede4cf; --text-2: #c8b89a; --mute: #7a8c8a;
  --accent: #d4a85c; --mercy: #e8b8a6; --seth: #7ec4d4; --together: #f0d4a0;
  --warm: #d4a85c; --warm-soft: #e8b8a6; --rose: #e8b8a6; --leaf: #85c8a8;
  --gold: #f0d4a0; --funded: #85c8a8; --champ: #f0d4a0;
  --danger: #c47373; --ok: #85c8a8; --warn: #d4c478;
}
body[data-theme="forest"] {
  --bg: #0e140c; --bg-2: #161e12; --surface: #1c2618; --surface-2: #27331f;
  --line: #324028; --line-soft: #202a1a; --line-2: #202a1a;
  --accent: #c8a86b; --mercy: #cc8e7a; --seth: #7eb898; --together: #c8a86b;
  --warm: #c8a86b; --warm-soft: #cc8e7a; --rose: #cc8e7a; --leaf: #9dc485;
  --gold: #c8a86b; --funded: #9dc485; --champ: #c8a86b;
  --danger: #c47373; --ok: #9dc485; --warn: #d4b878;
}
body[data-theme="rose"] {
  --bg: #1c1014; --bg-2: #281620; --surface: #321d2c; --surface-2: #3e2535;
  --line: #4f3142; --line-soft: #2c1820; --line-2: #2c1820;
  --text: #f8e8e0; --fg: #f8e8e0; --text-2: #e0c0c8; --mute: #a08890;
  --accent: #e8a6b4; --mercy: #f4c8d2; --seth: #c8a4c0; --together: #e8a6b4;
  --warm: #e8a6b4; --warm-soft: #f4c8d2; --rose: #f4c8d2; --leaf: #b8c898;
  --gold: #e8a6b4; --funded: #b8c898; --champ: #e8a6b4;
  --danger: #d05c70; --ok: #b8c898; --warn: #e0b878;
}

/* Cross-page nav strip (sits above topnav on each page) */
.mercy-meta-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px 0;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
}
.mercy-meta-nav a {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  transition: color .2s;
}
.mercy-meta-nav a:hover, .mercy-meta-nav a.active {
  color: var(--mercy);
}
.mercy-meta-nav .sep { color: var(--line); padding: 6px 0 }

/* Theme switcher — row of circles (matches /films/ and /2026/) */
.theme-switch {
  display: inline-flex;
  gap: 5px;
  padding: 4px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.theme-switch button {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  cursor: pointer;
  padding: 0;
  transition: transform .15s, box-shadow .2s;
  background: var(--accent);
}
.theme-switch button:hover { transform: scale(1.2) }
.theme-switch button.active {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--mercy);
}
.theme-switch .ts-mercy-hair { background: linear-gradient(135deg, #ff6a1e 0%, #ff4a7a 100%) }
.theme-switch .ts-films  { background: #c8a86b }
.theme-switch .ts-mercy  { background: #ff4f25 }
.theme-switch .ts-velvet { background: #d4a5e8 }
.theme-switch .ts-ink    { background: #c4b89e }
.theme-switch .ts-sea    { background: #6abcb8 }
.theme-switch .ts-library{ background: #d49850 }
.theme-switch .ts-cabin  { background: #e08840 }
.theme-switch .ts-lobby  { background: #d4a85c }
.theme-switch .ts-forest { background: linear-gradient(135deg, #c8a86b, #9dc485) }
.theme-switch .ts-rose   { background: #f4c8d2 }
@media (max-width: 480px){
  .theme-switch button { width: 14px; height: 14px }
}

/* Mercy-hair: the crown logo strokes use the hair gradient */
body[data-theme="mercy-hair"] .crown svg path[stroke="currentColor"],
body[data-theme="mercy-hair"] .crown svg g[stroke="currentColor"] path,
body[data-theme="mercy-hair"] .crown svg line[stroke="currentColor"]{
  stroke: url(#hairGrad) !important;
}


/* === Hero + atmosphere (matches /films/ + /2026/) === */
.atmosphere { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; will-change: transform, opacity }
.orb.o1 { width: 560px; height: 560px; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); top: -10%; left: -8%; animation: drift1 22s ease-in-out infinite alternate }
.orb.o2 { width: 480px; height: 480px; background: radial-gradient(circle, var(--mercy) 0%, transparent 70%); top: 30%; right: -15%; animation: drift2 28s ease-in-out infinite alternate; opacity: .4 }
.orb.o3 { width: 520px; height: 520px; background: radial-gradient(circle, var(--leaf, #8fbe9b) 0%, transparent 70%); bottom: -10%; left: 20%; animation: drift3 30s ease-in-out infinite alternate; opacity: .35 }
.orb.o4 { width: 360px; height: 360px; background: radial-gradient(circle, var(--gold) 0%, transparent 70%); top: 55%; left: 60%; animation: drift4 26s ease-in-out infinite alternate; opacity: .3 }
@keyframes drift1 { 0% { transform: translate(0,0) scale(1); opacity: .55 } 100% { transform: translate(40px,80px) scale(1.1); opacity: .4 } }
@keyframes drift2 { 0% { transform: translate(0,0) scale(1); opacity: .4 } 100% { transform: translate(-60px,-40px) scale(1.08); opacity: .55 } }
@keyframes drift3 { 0% { transform: translate(0,0) scale(1); opacity: .35 } 100% { transform: translate(50px,-30px) scale(1.12); opacity: .45 } }
@keyframes drift4 { 0% { transform: translate(0,0) scale(1); opacity: .3 } 100% { transform: translate(-30px,40px) scale(1.05); opacity: .4 } }

.twinkles { position: fixed; inset: 0; z-index: -1; pointer-events: none }
.twinkle { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; opacity: 0; animation: twinkle 6s ease-in-out infinite; box-shadow: 0 0 4px rgba(255,255,255,.6) }
@keyframes twinkle { 0%,100% { opacity: 0; transform: scale(.5) } 50% { opacity: .6; transform: scale(1) } }

/* Hero pattern (films/2026 style) */
.hero-classic { padding: 60px 0 40px; text-align: center; max-width: 720px; margin: 0 auto }
.hero-classic .eyebrow {
  font-family: var(--sans); font-size: 11px; color: var(--warm);
  text-transform: uppercase; letter-spacing: .36em; margin-bottom: 30px;
  opacity: 0; animation: fadeUp 1.4s .2s forwards;
}
.hero-classic h1 {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: 56px; line-height: 1.1; letter-spacing: -.01em;
  color: var(--text); margin: 0 0 24px;
  opacity: 0; animation: fadeUp 1.5s .4s forwards;
}
.hero-classic h1 em { color: var(--mercy); font-style: italic }
@media (max-width: 480px) { .hero-classic h1 { font-size: 40px } }
.hero-classic .lede {
  font-size: 18px; color: var(--text-2); max-width: 540px; line-height: 1.7;
  font-weight: 300; margin: 0 auto;
  opacity: 0; animation: fadeUp 1.6s .6s forwards;
}
.hero-classic .lede em { color: var(--mercy); font-style: italic }
.hero-classic .deadline {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 11px; color: var(--mute);
  text-transform: uppercase; letter-spacing: .24em;
  padding: 10px 20px; border: 1px solid var(--line); border-radius: 30px;
  margin-top: 28px; opacity: 0; animation: fadeUp 1.6s .9s forwards;
}
.hero-classic .deadline .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mercy);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .4 } 50% { opacity: 1 } }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(20px) } 100% { opacity: 1; transform: translateY(0) } }

/* Section reveal-on-scroll (films/2026 use this) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.2s ease, transform 1.2s ease }
.reveal.in { opacity: 1; transform: translateY(0) }
/* === /Hero + atmosphere === */