/* Profile themes. Each theme overrides the design tokens from style.css, plus a few decorative extras.
   Content must stay identical across themes: only colours, fonts, shapes and decorations change.
   Behaviour (effects, sound, intros) lives in themes.js. Tijs uses the classic tokens from style.css. */

/* ---------- Shared theme machinery ---------- */

.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#fx-back { z-index: -1; }
#fx-front { z-index: 1500; }

/* Switching profile reveals the new theme in a circle growing from the clicked avatar. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: theme-reveal .9s cubic-bezier(.65, 0, .25, 1); }
@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--reveal-x, 50%) var(--reveal-y, 0)); }
  to { clip-path: circle(150vmax at var(--reveal-x, 50%) var(--reveal-y, 0)); }
}

.sound-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 1600; min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 12px; font-weight: 600; box-shadow: 0 6px 22px #0003; }
.sound-toggle.pulse { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--warm) 25%, transparent), 0 6px 22px #0003; } }
html[data-sound] #toast { bottom: 76px; }

.xp-hud { display: none; }

.float-text { position: fixed; z-index: 1700; pointer-events: none; white-space: nowrap; transform: translate(-50%, -50%); animation: float-up 1.4s ease-out forwards; }
@keyframes float-up {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); }
  15% { opacity: 1; transform: translate(-50%, -90%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -260%) scale(1); }
}

html.shake main, html.shake .topbar { animation: shake .6s cubic-bezier(.36, .07, .19, .97); }
html.shake-small main { animation: shake-small .3s ease-out; }
@keyframes shake {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(5px, -3px); }
  30%, 50%, 70% { transform: translate(-9px, 4px); }
  40%, 60% { transform: translate(9px, -4px); }
}
@keyframes shake-small { 25% { transform: translate(-3px, 2px); } 75% { transform: translate(3px, -2px); } }

/* =====================================================================
   Lise · Enchanted fjord: pastel, sparkly, rounded, a little bit magic
   ===================================================================== */

html[data-person="Lise"] {
  --paper: #fff5fa;
  --ink: #4b2a5c;
  --green: #7a4fb5;
  --accent: #ffe9a8;
  --muted: #8d7299;
  --line: #f1d9ea;
  --personal: #ffc7ea;
  --card: #fffbfe;
  --surface: #ffffff;
  --soft: #fbeaf4;
  --hover: #f8e3f0;
  --badge: #efe4fc;
  --pending-bg: #ffe8d9;
  --pending-ink: #a35d3c;
  --optional-ink: #b05d92;
  --stop-line: #f5e3ee;
  --visit-border: #e2bfd8;
  --focus: #d65aa3;
  --hero-bg: linear-gradient(135deg, #6a48b0 0%, #a35bb7 55%, #e07fb0 100%);
  --hero-overlay: #7a4fb5;
  --hero-ink: #f6e6ff;
  --hero-dim: #ecd3f3;
  --stamp: #ffd6f0;
  --map-bg: #f3e6f3;
  --route: #8a5cc9;
  --route-day: #e0619d;
  --warm: #d4639f;
  --marker-fill: #ffc8e3;
  --sight: #f29cc8;
  --sky-1: #2e2163;
  --sky-2: #6d4ea6;
  --sky-3: #e9a6cc;
  --aurora-1: #ff9fe077;
  --aurora-2: #9ff7e066;
  --moon: #fff6d6;
  --mountain: #b9a2dc;
  --mountain-back: #8f74c0;
  --mountain-front: linear-gradient(115deg, #5d4593 30%, #c3a9e6 31%, #4a3478 57%);
  --snow: #ffffff;
  --water: linear-gradient(#cfa9e3, #7a5bab);
  --terrain: #3f2d6e;
  --postcard: #fff3fb;
  --font-head: 'Fredoka', 'DM Sans', sans-serif;
  --radius: 18px;
}
html[data-person="Lise"] body {
  background: radial-gradient(circle at 8% 0%, #ffe1f2 0, transparent 38%), radial-gradient(circle at 95% 35%, #efe2ff 0, transparent 40%), radial-gradient(circle at 20% 90%, #e2f6ff 0, transparent 35%), var(--paper);
  background-attachment: fixed;
}
html[data-person="Lise"] .hero { border-radius: 28px; box-shadow: 0 18px 50px #a35bb733; }
html[data-person="Lise"] h1 { letter-spacing: -2px; font-weight: 600; }
html[data-person="Lise"] h1 em {
  background: linear-gradient(90deg, #ffd6f0, #fff1a8, #b9f3ff, #e4c9ff, #ffd6f0);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer { to { background-position: 200% 0; } }
html[data-person="Lise"] h2::after { content: " ✦"; color: var(--warm); font-size: .7em; vertical-align: middle; }
html[data-person="Lise"] .moon { box-shadow: 0 0 40px #fff2b3, 0 0 90px #ffd1ec99; }
html[data-person="Lise"] .postcard { font-family: 'Fredoka', Georgia, serif; font-style: normal; }
html[data-person="Lise"] .profile[aria-pressed=true] { border-color: var(--warm); background: #fff; box-shadow: 0 4px 16px #d4639f33; }
html[data-person="Lise"] .profile[aria-pressed=true] .avatar { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-6deg); } }
html[data-person="Lise"] .day-card { transition: transform .25s, box-shadow .25s; }
html[data-person="Lise"] .day-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px #d4639f22; }
html[data-person="Lise"] .visit[aria-pressed=true] { background: linear-gradient(135deg, #ff9ad5, #b98cff); border-color: transparent; }
html[data-person="Lise"] .badge { border-radius: 999px; }
html[data-person="Lise"] .countdown-units > span { border-radius: 14px; }
html[data-person="Lise"] .leaflet-tile-pane { filter: saturate(.75) sepia(.12) hue-rotate(-15deg) brightness(1.04); }
html[data-person="Lise"] .sound-toggle { background: linear-gradient(135deg, #ffe1f2, #efe2ff); border-color: #e2bfd8; }

/* =====================================================================
   Joppe · Observatory: night-sky dark mode, mono type, star charts
   ===================================================================== */

html[data-person="Joppe"] {
  color-scheme: dark;
  --paper: #0a0f1f;
  --ink: #dfe7ff;
  --green: #4f7fe0;
  --accent: #ffd479;
  --muted: #8e9bbd;
  --line: #25315a;
  --personal: #ffd479;
  --card: #0f1630;
  --surface: #18213f;
  --soft: #141d3b;
  --hover: #1a2650;
  --badge: #1b2a52;
  --pending-bg: #2a2347;
  --pending-ink: #e5b3ff;
  --optional-ink: #c9a6ff;
  --stop-line: #1d2748;
  --visit-border: #3a4775;
  --focus: #7fb2ff;
  --on-primary: #ffffff;
  --hero-bg: radial-gradient(ellipse at 20% 0%, #24346b 0, #10183a 55%, #070b1c 100%);
  --hero-overlay: #10183a;
  --hero-text: #eef2ff;
  --hero-ink: #b9c6e6;
  --hero-dim: #8e9bbd;
  --stamp: #ffd479;
  --map-bg: #0d1430;
  --route: #7fb2ff;
  --route-day: #ffd479;
  --warm: #ffb86b;
  --marker-fill: #ffd479;
  --sight: #4f7fe0;
  --sky-1: #03050f;
  --sky-2: #0b1433;
  --sky-3: #1c2b5a;
  --aurora-1: #5dffb466;
  --aurora-2: #7f9dff55;
  --moon: #f4f1de;
  --mountain: #1e2a52;
  --mountain-back: #16204a;
  --mountain-front: linear-gradient(115deg, #0f1838 30%, #2a3a6e 31%, #0b1230 57%);
  --snow: #9fb0d6;
  --water: linear-gradient(#142050, #060b20);
  --terrain: #050916;
  --postcard: #cfe0ff;
  --font-body: 'JetBrains Mono', ui-monospace, monospace;
  --radius: 4px;
}
html[data-person="Joppe"] h1 { letter-spacing: -3px; }
html[data-person="Joppe"] h1 em { color: var(--accent); text-shadow: 0 0 24px #ffd47966; }
html[data-person="Joppe"] .eyebrow::before { content: "// "; opacity: .6; }
html[data-person="Joppe"] .avatar { border-color: #ffffff33; }
html[data-person="Joppe"] .brand-icon { color: #0a0f1f; background: var(--accent); }
html[data-person="Joppe"] .landscape::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, #7fb2ff12 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, #7fb2ff12 0 1px, transparent 1px 40px);
}
html[data-person="Joppe"] .zodiac {
  display: block; position: absolute; top: 46%; left: 50%; width: 250px; height: 250px; margin: -125px 0 0 -125px; z-index: 1;
  border: 1px dashed #ffd47944; border-radius: 50%; animation: orbit 90s linear infinite;
}
html[data-person="Joppe"] .zodiac::after { content: ""; position: absolute; inset: 34px; border: 1px solid #7fb2ff22; border-radius: 50%; }
html[data-person="Joppe"] .zodiac span { position: absolute; left: 50%; top: 50%; width: 22px; margin: -11px; text-align: center; font-size: 15px; color: #ffd479bb; transform: rotate(calc(var(--i) * 30deg)) translateY(-125px); }
@keyframes orbit { to { transform: rotate(360deg); } }
html[data-person="Joppe"] .moon { box-shadow: 0 0 30px #f4f1de66; }
html[data-person="Joppe"] .stamp { font-family: var(--font-head); }
html[data-person="Joppe"] .zodiac span, html[data-person="Joppe"] .star-chart, .telescope-log { font-variant-emoji: text; }
html[data-person="Joppe"] .star-chart { display: block; font-size: 11px; line-height: 1.7; color: var(--accent); border: 1px dashed var(--line); border-radius: 4px; padding: 8px 10px; margin: 0 0 10px; }
html[data-person="Joppe"] .daylight { color: #9fc4ff; }
html[data-person="Joppe"] .day-card, html[data-person="Joppe"] .essentials article { background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(2px); }
html[data-person="Joppe"] .day-card:hover { border-color: #4f7fe0; box-shadow: 0 0 0 1px #4f7fe055, 0 0 30px #4f7fe022; }
html[data-person="Joppe"] .countdown-units b { font-family: var(--font-body); font-weight: 500; color: var(--accent); }
html[data-person="Joppe"] .leaflet-tile-pane { filter: invert(1) hue-rotate(195deg) brightness(.85) contrast(.9) saturate(.6); }
html[data-person="Joppe"] .leaflet-container.leaflet-grab { cursor: crosshair; }
html[data-person="Joppe"] .leaflet-popup-content-wrapper, html[data-person="Joppe"] .leaflet-popup-tip,
html[data-person="Roel"] .leaflet-popup-content-wrapper, html[data-person="Roel"] .leaflet-popup-tip { background: var(--surface); color: var(--ink); }
html[data-person="Joppe"] .leaflet-bar a, html[data-person="Roel"] .leaflet-bar a { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-person="Joppe"] .leaflet-control-attribution, html[data-person="Roel"] .leaflet-control-attribution { background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--muted); }
html[data-person="Joppe"] .leaflet-control-attribution a, html[data-person="Roel"] .leaflet-control-attribution a { color: var(--ink); }
html[data-person="Joppe"] .pin { border-color: #dfe7ff; }

.telescope-log {
  position: fixed; left: 16px; bottom: 16px; z-index: 1700; display: flex; flex-direction: column; gap: 4px; max-width: calc(100vw - 32px);
  padding: 12px 14px; border: 1px solid #7fb2ff55; border-radius: 6px; background: #0a0f1fee; color: #9fd3ff;
  font: 12px/1.5 'JetBrains Mono', ui-monospace, monospace; pointer-events: none; animation: log-life 4.6s forwards;
}
.telescope-log span { opacity: 0; animation: log-line .25s calc(var(--i) * .5s) forwards; }
@keyframes log-line { to { opacity: 1; } }
@keyframes log-life { 0%, 88% { opacity: 1; } 100% { opacity: 0; } }
.float-mono { font: 600 12px 'JetBrains Mono', ui-monospace, monospace; color: #ffd479; text-shadow: 0 0 10px #ffd47999; }

/* =====================================================================
   Roel · MAXIMUM EPIC: volcanic, loud, trailer energy
   ===================================================================== */

html[data-person="Roel"] {
  color-scheme: dark;
  --paper: #120b09;
  --ink: #f6eadb;
  --green: #ff6a1f;
  --accent: #ffb000;
  --muted: #b39a86;
  --line: #3b2620;
  --personal: #ffb000;
  --card: #1a100c;
  --surface: #26150f;
  --soft: #2a1610;
  --hover: #33190f;
  --badge: #3a1d10;
  --pending-bg: #3a2410;
  --pending-ink: #ffb000;
  --optional-ink: #ff8a4c;
  --stop-line: #2c1a13;
  --visit-border: #6b3a26;
  --focus: #ffb000;
  --on-primary: #1a0703;
  --hero-bg: radial-gradient(ellipse at 70% 115%, #ff5a1f 0, #9b1e0b 30%, #2a0905 65%, #120403 100%);
  --hero-overlay: #2a0905;
  --hero-text: #fff3e6;
  --hero-ink: #f3cdb3;
  --hero-dim: #d9a888;
  --stamp: #ffb000;
  --map-bg: #1a0e0a;
  --route: #ff6a1f;
  --route-day: #ffb000;
  --warm: #ff6a1f;
  --marker-fill: #ffb000;
  --sight: #ff6a1f;
  --sky-1: #0d0302;
  --sky-2: #4a0e06;
  --sky-3: #c2360d;
  --aurora-1: #ff3d0055;
  --aurora-2: #ffb00044;
  --moon: #ff9a6a;
  --mountain: #3a1510;
  --mountain-back: #2a0c07;
  --mountain-front: linear-gradient(115deg, #1c0705 30%, #4a170c 31%, #140504 57%);
  --snow: #ff6a1f;
  --water: linear-gradient(#ff7a1f, #7a1205);
  --terrain: #0a0302;
  --postcard: #ffd9a0;
  --font-head: 'Anton', Impact, sans-serif;
  --radius: 4px;
}
html[data-person="Roel"] body { background: radial-gradient(ellipse at 50% 120%, #4a1206 0, transparent 60%), var(--paper); background-attachment: fixed; }
html[data-person="Roel"] h1, html[data-person="Roel"] h2, html[data-person="Roel"] h3 { text-transform: uppercase; font-weight: 400; letter-spacing: .5px; }
html[data-person="Roel"] h1 { font-size: 92px; line-height: .95; letter-spacing: 0; }
html[data-person="Roel"] h1 em {
  background: linear-gradient(0deg, #ff3d00, #ffb000 55%, #fff3c4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px #ff6a1f99);
  animation: flicker 2.2s infinite;
}
@keyframes flicker { 0%, 100% { filter: drop-shadow(0 0 18px #ff6a1f99); } 45% { filter: drop-shadow(0 0 30px #ffb000cc); } 50% { filter: drop-shadow(0 0 12px #ff3d0088); } }
html[data-person="Roel"] .snow { filter: drop-shadow(0 0 22px #ff6a1f); animation: lava-glow 2.8s ease-in-out infinite; }
@keyframes lava-glow { 50% { filter: drop-shadow(0 0 40px #ffb000); } }
html[data-person="Roel"] .moon { box-shadow: 0 0 40px #ff5a1f99; }
html[data-person="Roel"] .postcard { font-family: 'Anton', Impact, sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: 1px; }
html[data-person="Roel"] .tabs b, html[data-person="Roel"] .badge, html[data-person="Roel"] .countdown-label { text-transform: uppercase; letter-spacing: 1px; }
html[data-person="Roel"] .countdown-units b { font-size: 30px; color: #ffd27a; text-shadow: 0 0 14px #ff6a1f; }
html[data-person="Roel"] .brand-icon { box-shadow: 0 0 16px #ff6a1f88; }
html[data-person="Roel"] .day-card { transition: transform .15s, box-shadow .15s, border-color .15s; }
html[data-person="Roel"] .day-card:hover { transform: scale(1.01); border-color: var(--warm); box-shadow: 0 0 28px #ff6a1f33; }
html[data-person="Roel"] .visit[aria-pressed=true] { background: radial-gradient(circle, #ffd27a, #ff6a1f 70%); border-color: #ffb000; box-shadow: 0 0 12px #ff6a1f; }
html[data-person="Roel"] .leaflet-tile-pane { filter: grayscale(.6) sepia(.7) hue-rotate(-25deg) saturate(1.5) brightness(.6) contrast(1.2); }
html[data-person="Roel"] .pin { border-color: #ffd27a; }
html[data-person="Roel"] .sound-toggle { font-family: 'Anton', Impact, sans-serif; font-weight: 400; letter-spacing: 1px; background: #1a100c; border-color: #ff6a1f; box-shadow: 0 0 18px #ff6a1f55; }
html[data-person="Roel"] .xp-hud {
  display: flex; flex-direction: column; position: fixed; left: 16px; bottom: 16px; z-index: 1600; padding: 8px 14px;
  border: 1px solid #ff6a1f; border-radius: 4px; background: #1a100cee; box-shadow: 0 0 18px #ff6a1f44; pointer-events: none;
}
.xp-hud b { font: 400 20px 'Anton', Impact, sans-serif; letter-spacing: 1px; color: #ffd27a; }
.xp-hud span { font-size: 9px; letter-spacing: 1.5px; color: var(--muted); }

.lightning { position: fixed; inset: 0; z-index: 1650; background: #fff; pointer-events: none; animation: lightning .7s forwards; }
@keyframes lightning { 0% { opacity: .95; } 12% { opacity: 0; } 22% { opacity: .7; } 100% { opacity: 0; } }
.epic-slam {
  position: fixed; inset: 0; z-index: 1660; display: grid; place-content: center; text-align: center; pointer-events: none;
  font-family: 'Anton', Impact, sans-serif; text-transform: uppercase; color: #fff3e6; animation: slam 2s cubic-bezier(.2, .9, .3, 1) forwards;
}
.epic-slam span { font-size: min(26vw, 260px); line-height: .9; background: linear-gradient(0deg, #ff3d00, #ffb000 55%, #fff3c4); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px #ff3d00); }
.epic-slam b { font-weight: 400; font-size: min(5vw, 40px); letter-spacing: .3em; text-shadow: 0 0 20px #000, 0 0 40px #ff3d00; }
@keyframes slam {
  0% { opacity: 0; transform: scale(3); }
  12% { opacity: 1; transform: scale(1); }
  75% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.08); }
}
.float-epic { font: 400 22px 'Anton', Impact, sans-serif; letter-spacing: 1px; color: #ffd27a; text-shadow: 0 0 12px #ff3d00, 0 2px 0 #000; }

@media (max-width: 800px) {
  html[data-person="Roel"] h1 { font-size: 68px; }
  html[data-person="Joppe"] .zodiac { transform-origin: center; scale: .7; }
}
@media (max-width: 480px) {
  html[data-person="Roel"] h1 { font-size: 74px; }
  .sound-toggle { right: 12px; bottom: 12px; }
  html[data-person="Roel"] .xp-hud { left: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root) { animation: none; }
  html[data-person] *, html[data-person] *::before, html[data-person] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  html[data-person] .telescope-log { animation: log-life 4.6s forwards !important; }
  html[data-person] .telescope-log span { animation: log-line .01ms forwards !important; }
  html[data-person] .float-text { animation: float-up 1.4s forwards !important; }
}