:root{
  --red:#ff2d2d;
  --green:#00e676;
  --gold:#ffd54a;
  --blue:#4aa3ff;
  --pink:#ff4fd8;
  --purple:#9b6bff;

  --bg1:#06120f;
  --bg2:#0a1d18;

  --text:#ffffff;
  --muted:rgba(255,255,255,.85);
  --line:rgba(255,255,255,.18);

  --shadow:0 14px 40px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{
  cursor: url("assets/santa-cursor.png") 16 16, auto;
margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  line-height:1.5;
  background:
    radial-gradient(900px 500px at 15% 8%, rgba(255,77,216,.22), transparent 60%),
    radial-gradient(950px 560px at 85% 10%, rgba(255,213,74,.20), transparent 62%),
    radial-gradient(800px 520px at 55% 55%, rgba(0,230,118,.14), transparent 65%),
    linear-gradient(180deg, var(--bg2) 0%, #040607 100%);
  overflow-x:hidden;
}

/* ridiculous glitter */
body:before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.10) 1px, transparent 2.2px),
    radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 2.6px);
  background-size: 110px 110px, 160px 160px, 240px 240px;
  background-position: 0 0, 60px 40px, 100px 20px;
  opacity:.40;
}

a{color:inherit;text-decoration:none}
.container{width:min(1100px, calc(100% - 40px)); margin:0 auto}

/* TOPBAR */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(6,18,15,.75);
  backdrop-filter: blur(10px);
  border-bottom: 3px dashed rgba(255,213,74,.45);
  box-shadow: 0 0 40px rgba(255,45,45,.18);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; flex-wrap:wrap}
.brand-row{display:flex; align-items:center; gap:10px; font-weight:1000}
.brand-title{font-size:18px}
.brand-sub{color:var(--muted); font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-top:4px}
.brand-mark{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,45,45,.35), rgba(0,230,118,.28), rgba(255,213,74,.35));
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 0 20px rgba(255,213,74,.22);
}
.brand-emoji{filter: drop-shadow(0 0 8px rgba(255,213,74,.35)); font-size:18px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:14px;
  border:2px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(255,45,45,.35), rgba(0,230,118,.25), rgba(255,213,74,.20));
  box-shadow: var(--shadow);
  font-weight:1000;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:12px;
}
.btn:hover{transform: translateY(-1px) scale(1.01)}
.btn:active{transform: translateY(0)}
.btn-ghost{
  background: rgba(255,255,255,.05);
  box-shadow:none;
}
.btn-big{padding:14px 18px; font-size:13px}
.btn-confetti{
  background: linear-gradient(135deg, rgba(74,163,255,.35), rgba(255,77,216,.30), rgba(255,213,74,.22));
}

/* HERO */
.hero{padding:54px 0 26px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:start}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

.badge{
  display:inline-flex;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:2px dotted rgba(255,213,74,.55);
  background: rgba(0,0,0,.18);
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11px;
  box-shadow: 0 0 18px rgba(255,213,74,.18);
}

h1{margin:14px 0 10px; font-size:48px; line-height:1.05; text-shadow: 0 0 18px rgba(255,45,45,.22), 0 0 22px rgba(0,230,118,.16)}
@media (max-width:520px){h1{font-size:38px}}
.subtitle{display:block; margin-top:10px; font-size:16px; color:var(--muted); font-weight:900}

.lead{margin:0 0 16px; font-size:18px; color:rgba(255,255,255,.92)}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
.card{
  background: rgba(255,255,255,.07);
  border:2px solid rgba(255,255,255,.16);
  border-radius:18px;
  padding:14px;
  box-shadow: 0 0 24px rgba(255,77,216,.10);
  animation: glowSwap 2.5s infinite alternate;
}
@keyframes glowSwap{
  0%{box-shadow: 0 0 20px rgba(255,45,45,.16)}
  50%{box-shadow: 0 0 22px rgba(0,230,118,.14)}
  100%{box-shadow: 0 0 26px rgba(255,213,74,.16)}
}
.label{color:var(--muted); font-weight:1000; font-size:11px; letter-spacing:.12em; text-transform:uppercase}
.value{margin-top:6px; font-weight:900}

.actions{display:flex; gap:12px; flex-wrap:wrap; margin:12px 0 10px}
.fineprint{color:var(--muted); margin:8px 0 0}

.micro{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.micro span{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.16);
  font-weight:900;
  color:rgba(255,255,255,.92);
}

/* POSTER */
.hero-visual{display:flex; flex-direction:column; gap:10px}
.poster{
  position:relative;
  display:block;
  border-radius:22px;
  overflow:hidden;
  border:3px solid rgba(255,213,74,.35);
  box-shadow: 0 0 30px rgba(255,213,74,.22), 0 0 40px rgba(255,45,45,.14);
}
.poster img{width:100%; height:auto; display:block; transform:scale(1); transition: transform .25s ease}
.poster:hover img{transform:scale(1.03)}
.poster-overlay{
  position:absolute; inset:auto 12px 12px 12px;
  display:flex; justify-content:space-between; gap:10px; align-items:flex-end; flex-wrap:wrap;
}
.poster-cta{
  padding:10px 12px;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  border:2px solid rgba(255,255,255,.18);
  font-weight:1000;
  box-shadow: 0 0 22px rgba(255,77,216,.16);
}
.poster-sub{
  padding:8px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.9);
  font-weight:900;
  font-size:12px;
}
.hint{
  color:var(--muted);
  font-size:13px;
  padding:10px 12px;
  border:1px dashed rgba(255,255,255,.22);
  border-radius:14px;
  background: rgba(0,0,0,.10);
}
.hint code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:12px}

/* SECTIONS */
.section{padding:56px 0; border-top: 3px dotted rgba(255,255,255,.18); position:relative}
.section.alt{background: rgba(255,255,255,.04)}
h2{margin:0 0 14px; font-size:30px; text-shadow: 0 0 18px rgba(74,163,255,.14)}
p{margin:0 0 14px}
.muted{color:var(--muted); font-weight:800}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.tile{
  background: rgba(255,255,255,.07);
  border:2px solid rgba(255,255,255,.16);
  border-radius:18px;
  padding:18px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.tile:before{
  content:"";
  position:absolute; inset:-80px -80px auto auto;
  width:200px; height:200px;
  background: radial-gradient(circle, rgba(74,163,255,.22), transparent 60%);
  transform: rotate(25deg);
}
.tile h3{margin:0 0 8px; font-size:18px}
.tile p{margin:0; color:var(--muted); font-weight:800}

.callout{
  margin-top:18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px;
  border-radius:18px;
  border:3px solid rgba(255,213,74,.30);
  background: linear-gradient(135deg, rgba(255,213,74,.12), rgba(0,230,118,.08), rgba(255,77,216,.10));
  box-shadow: 0 0 30px rgba(255,213,74,.14);
}
.callout-title{font-weight:1000}
.callout-text{color:var(--muted); margin-top:4px; font-weight:800}

.pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.pill{
  padding:10px 12px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.14);
  font-weight:1000;
  box-shadow: 0 0 18px rgba(0,230,118,.10);
}
.pill-ghost{background: transparent; color:var(--muted)}

.note{
  margin-top:18px;
  padding:14px;
  border-radius:16px;
  border:2px dashed rgba(255,255,255,.18);
  background: rgba(0,0,0,.12);
  color:var(--muted);
  font-weight:800;
}

.map{
  margin-top:14px;
  border:3px solid rgba(255,77,216,.22);
  border-radius:18px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.map iframe{width:100%; height:360px; border:0}

.faq details{
  border:2px solid rgba(255,255,255,.18);
  border-radius:16px;
  padding:14px 16px;
  background: rgba(0,0,0,.16);
  margin-bottom:12px;
  box-shadow: 0 0 18px rgba(255,213,74,.10);
}
.faq summary{cursor:pointer; font-weight:1000}
.faq p{margin:10px 0 0; color:var(--muted); font-weight:800}

/* FOOTER */
.footer{padding:26px 0}
.footer-inner{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:center}
.footer-title{font-weight:1000}
.footer-sub{color:var(--muted); margin-top:4px; font-weight:800}
.footer-links{display:flex; gap:14px; color:var(--muted); font-weight:900}
.footer-links a:hover{color:var(--text)}

/* SECTION STRING LIGHTS */
.section-lights:before{
  content:"";
  position:absolute;
  left:0; right:0; top:-14px;
  height:28px;
  background:
    radial-gradient(circle at 12px 16px, rgba(255,45,45,.95) 0 6px, transparent 7px),
    radial-gradient(circle at 48px 16px, rgba(0,230,118,.95) 0 6px, transparent 7px),
    radial-gradient(circle at 84px 16px, rgba(255,213,74,.95) 0 6px, transparent 7px),
    radial-gradient(circle at 120px 16px, rgba(74,163,255,.95) 0 6px, transparent 7px),
    radial-gradient(circle at 156px 16px, rgba(255,77,216,.95) 0 6px, transparent 7px),
    linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.0));
  background-size: 180px 28px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 0 8px rgba(255,213,74,.25));
  animation: twinkle 1.1s infinite alternate;
  opacity:.95;
}
@keyframes twinkle{
  0%{filter: drop-shadow(0 0 6px rgba(255,213,74,.25)); opacity:.85}
  100%{filter: drop-shadow(0 0 14px rgba(255,213,74,.35)); opacity:1}
}

/* BORDER LIGHTS */
.border-lights{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
}
.bulb{
  position:absolute;
  width:18px; height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.22);
  box-shadow: 0 0 16px rgba(255,255,255,.18);
  transform: translate(-50%, -50%);
  animation: bulbBlink 1.2s infinite steps(2, end);
}
.bulb:after{
  content:"";
  position:absolute;
  left:50%; top:100%;
  width:10px; height:6px;
  transform:translateX(-50%);
  border-radius:0 0 6px 6px;
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.14);
}
@keyframes bulbBlink{
  0%{filter: brightness(.8); opacity:.70}
  100%{filter: brightness(1.9); opacity:1}
}

/* SNOW */
.snow{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:50;
}
.snowflake{
  position:absolute;
  top:-10px;
  color:rgba(255,255,255,.92);
  font-size: 14px;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.25));
  animation: fall linear infinite;
}
@keyframes fall{
  to{transform: translateY(calc(100vh + 30px))}
}

/* SPARKLES */
.sparkle-layer{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:60;
}
.sparkle{
  position:absolute;
  width:10px; height:10px;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 60%);
  filter: drop-shadow(0 0 10px rgba(255,213,74,.35));
  border-radius:50%;
  animation: sparkle 900ms ease-out forwards;
}
@keyframes sparkle{
  0%{transform: translate(-50%,-50%) scale(.4); opacity:0}
  30%{opacity:1}
  100%{transform: translate(-50%,-50%) scale(2.2); opacity:0}
}

/* CONFETTI */
.confetti{
  position:fixed;
  top:-10px;
  width:10px; height:14px;
  border-radius:3px;
  z-index:70;
  pointer-events:none;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall{
  to{
    transform: translateY(calc(100vh + 30px)) rotate(720deg);
    opacity:.95;
  }
}



/* CHRISTMAS-ISH WIGGLE + GLOW + PULSE */
.festive-sub{
  display:inline-block;
  position:relative;
  animation: wiggle 2.6s ease-in-out infinite, pulse 3.8s ease-in-out infinite;
  text-shadow:
    0 0 6px rgba(255,213,74,.6),
    0 0 12px rgba(255,45,45,.4),
    0 0 18px rgba(0,230,118,.35);
}

@keyframes wiggle{
  0%   { transform: rotate(0deg) scale(1); }
  10%  { transform: rotate(-1.5deg) scale(1.02); }
  20%  { transform: rotate(1.5deg) scale(1.02); }
  30%  { transform: rotate(-1deg); }
  40%  { transform: rotate(1deg); }
  50%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@keyframes pulse{
  0%{ filter: brightness(1); letter-spacing:.14em; }
  50%{ filter: brightness(1.35); letter-spacing:.18em; }
  100%{ filter: brightness(1); letter-spacing:.14em; }
}

/* MUSIC PANEL */
.music-panel{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:14px;
}

.music-panel select,
.music-panel input[type="range"]{
  background:rgba(0,0,0,.4);
  color:white;
  border:2px solid rgba(255,255,255,.25);
  border-radius:12px;
  padding:8px 10px;
  font-weight:900;
}

.music-panel input[type="range"]{
  width:160px;
  padding:10px 8px;
}

.vol-wrap{
  font-weight:1000;
  padding:6px 10px;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.18);
}


/* Reindeer cursor on hover (buttons + links) */
a:hover, button:hover, .btn:hover {
  cursor: url("assets/reindeer-cursor.png") 16 16, pointer;
}


/* Jiggle on click */
.jiggle{
  animation: jiggle 420ms ease-in-out;
}
@keyframes jiggle{
  0%{ transform: rotate(0deg) scale(1); }
  15%{ transform: rotate(-2deg) scale(1.02); }
  30%{ transform: rotate(2deg) scale(1.02); }
  45%{ transform: rotate(-1.5deg) scale(1.01); }
  60%{ transform: rotate(1.5deg) scale(1.01); }
  100%{ transform: rotate(0deg) scale(1); }
}


/* Snowflake trail */
.snowflake-trail{
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 10000;
  font-size: 16px;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.35));
  opacity: 0.95;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  animation: trailFade 900ms ease-out forwards;
}
@keyframes trailFade{
  0%{ opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(0deg); }
  15%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(-50%, -80%) scale(1.6) rotate(180deg); }
}