/* coke-christmas.css — Coca-Cola Christmas: red page + white card (readable, no neon, no CRT) */

:root{
  /* Page background (Coke red) */
  --bg0: #b3122a;
  --bg1: #8f0f22;

  /* White card surface */
  --card: rgba(255, 255, 255, 0.97);
  --cardBorder: rgba(12, 14, 18, 0.14);

  /* Dark text */
  --text: rgba(12, 14, 18, 0.92);
  --muted: rgba(12, 14, 18, 0.62);

  /* Accents (keep it Coke) */
  --accent: #b3122a;
  --accent2: #8f0f22;
  --gold: var(--pine);
  --pine: #045f1f;
  --danger: #7a0b18;

  --shadow: 0 22px 70px rgba(0,0,0,0.30);
  --radius: 18px;

  /* Disable old effects */
  --scanOpacity: 0;
  --grainOpacity: 0;
  --glowOpacity: 0;
}

/* Kill the old synthwave “decorations” from site.css */
.page::before,
.page::after,
.card::before,
.card::after{
  content: none !important;
}

/* Make the background properly Christmassy + subtle “snow” */
body{
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,0.22) 0 2px, transparent 3px),
    radial-gradient(2px 2px at 28% 62%, rgba(255,255,255,0.18) 0 2px, transparent 3px),
    radial-gradient(2px 2px at 62% 32%, rgba(255,255,255,0.18) 0 2px, transparent 3px),
    radial-gradient(2px 2px at 84% 72%, rgba(255,255,255,0.20) 0 2px, transparent 3px),
    radial-gradient(1200px 900px at 20% 0%, var(--bg1), var(--bg0)) !important;
}

/* Buttons: solid Coke red, white text (no pink/green gradients) */
.btn.primary{
  border: 0 !important;
  background: var(--accent) !important;
  color: rgba(255,255,255,0.96) !important;
  font-weight: 900;
}
.btn.primary:hover{ filter: brightness(1.03); }

.btn.danger{
  border: 0 !important;
  background: var(--danger) !important;
  color: rgba(255,255,255,0.96) !important;
  font-weight: 900;
}

/* Inputs: clean white */
input[type="text"], select, textarea{
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(12,14,18,0.18) !important;
  color: rgba(12,14,18,0.92) !important;
}
input[type="text"]:focus, select:focus, textarea:focus{
  border-color: rgba(179,18,42,0.55) !important;
  box-shadow: 0 0 0 3px rgba(179,18,42,0.18) !important;
}

/* SPARKLE_OVERLAY — subtle festive shimmer (CSS-only, respects reduced motion) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* scattered “sparkles” */
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,0.28) 0 2px, transparent 3px),
    radial-gradient(2px 2px at 28% 62%, rgba(255,255,255,0.22) 0 2px, transparent 3px),
    radial-gradient(2px 2px at 62% 32%, rgba(255,255,255,0.22) 0 2px, transparent 3px),
    radial-gradient(2px 2px at 84% 72%, rgba(255,255,255,0.26) 0 2px, transparent 3px),
    radial-gradient(2px 2px at 44% 14%, rgba(215,162,26,0.22) 0 2px, transparent 3px),
    radial-gradient(2px 2px at 70% 46%, rgba(215,162,26,0.18) 0 2px, transparent 3px),
    radial-gradient(1px 1px at 18% 82%, rgba(255,255,255,0.18) 0 1px, transparent 2px),
    radial-gradient(1px 1px at 92% 22%, rgba(255,255,255,0.16) 0 1px, transparent 2px);
  opacity: 0.55;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.10));
}

@media (prefers-reduced-motion: no-preference){
  body::before{
    animation: sparkle_twinkle 4.8s ease-in-out infinite;
  }
  @keyframes sparkle_twinkle{
    0%,100%{
      opacity: 0.42;
      filter: drop-shadow(0 0 4px rgba(255,255,255,0.10));
      transform: translateY(0);
    }
    50%{
      opacity: 0.70;
      filter: drop-shadow(0 0 10px rgba(255,255,255,0.14));
      transform: translateY(-2px);
    }
  }
}

/* A little “foil” warmth around the main card */
.card{
  box-shadow:
    0 22px 70px rgba(0,0,0,0.30),
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 28px rgba(215,162,26,0.10);
}

/* SPARKLE_JS_LAYER — real twinkle sparkles (JS creates elements) */
#sparkle-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* below card (card sits in normal flow above) */
  mix-blend-mode: screen;
}
.sparkle{
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0.0;
  transform: translate(-50%, -50%) scale(0.8);
  /* a tiny “star glint” */
  background:
    radial-gradient(circle, rgba(255,255,255,0.95) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(215,162,26,0.55) 0 1px, transparent 3px);
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.14));
  border-radius: 999px;
}

@media (prefers-reduced-motion: no-preference){
  @keyframes sparkle_flicker{
    0%   { opacity: 0.0; transform: translate(-50%, -50%) scale(0.7); }
    15%  { opacity: 0.95; transform: translate(-50%, -50%) scale(1.05); }
    35%  { opacity: 0.25; transform: translate(-50%, -50%) scale(0.85); }
    55%  { opacity: 0.85; transform: translate(-50%, -50%) scale(1.00); }
    100% { opacity: 0.0; transform: translate(-50%, -50%) scale(0.7); }
  }
}

/* SNOW_EFFECT — falling snow + bottom snowbank (no inline CSS, no CRT) */

/* Ensure content sits above snow layer */
.page{ position: relative; z-index: 1; }

/* Reuse existing sparkle-layer as the snow layer (so we don’t touch templates) */
#sparkle-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Hide any old sparkle dots if they briefly exist */
.sparkle{ display:none !important; }

/* Falling snowflakes */
.snowflake{
  position: absolute;
  left: 50%;
  top: -10vh;
  width: 6px;
  height: 6px;
  opacity: 0.9;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.12));
  transform: translate(-50%, -50%);
}

/* Slight variation: some flakes look “fluffier” */
.snowflake.fluff{
  background: rgba(255,255,255,0.78);
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.14));
}

@media (prefers-reduced-motion: no-preference){
  @keyframes snow_fall{
    0%   { transform: translate(-50%, -10vh) translateX(0px); opacity: 0.0; }
    10%  { opacity: 0.9; }
    100% { transform: translate(-50%, 110vh) translateX(var(--drift)); opacity: 0.0; }
  }
}

/* Bottom snowbank (fake settling) */
#snowbank{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--snowbank-h, 0px);
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(220px 70px at 15% 30%, rgba(255,255,255,0.90), rgba(255,255,255,0.0) 70%),
    radial-gradient(260px 90px at 55% 50%, rgba(255,255,255,0.88), rgba(255,255,255,0.0) 72%),
    radial-gradient(240px 80px at 85% 40%, rgba(255,255,255,0.86), rgba(255,255,255,0.0) 70%),
    linear-gradient(to top, rgba(255,255,255,0.92), rgba(255,255,255,0.0));
  opacity: 0.75;
}

/* STAR_TWINKLE_LAYER — twinkly stars behind everything (not dots) */
#star-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
  mix-blend-mode: screen;
}

.star{
  position: absolute;
  width: var(--s, 3px);
  height: var(--s, 3px);
  opacity: 0.0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0 45%, transparent 65%);
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.12));
}

.star::before,
.star::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.65);
  opacity: 0.8;
}

.star::before{ width: calc(var(--s, 3px) * 5); height: 1px; }
.star::after{ width: 1px; height: calc(var(--s, 3px) * 5); }

@media (prefers-reduced-motion: no-preference){
  @keyframes star_twinkle{
    0%   { opacity: 0.05; filter: drop-shadow(0 0 6px rgba(255,255,255,0.10)); }
    20%  { opacity: 0.90; filter: drop-shadow(0 0 14px rgba(255,255,255,0.16)); }
    45%  { opacity: 0.18; filter: drop-shadow(0 0 7px rgba(255,255,255,0.10)); }
    70%  { opacity: 0.75; filter: drop-shadow(0 0 16px rgba(255,255,255,0.16)); }
    100% { opacity: 0.05; filter: drop-shadow(0 0 6px rgba(255,255,255,0.10)); }
  }
}

/* SNOWBANK_REWORK — replace straight gradient bank with lumpy drifts */
#snowbank{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 92px;         /* fixed, we animate reveal via JS */
  pointer-events: none;
  z-index: 0;
  background: transparent;
  overflow: hidden;
  transform: translateY(100%); /* JS will slide it up */
}

/* individual drifts */
#snowbank .drift{
  position: absolute;
  bottom: -18px;
  border-radius: 999px;
  background:
    radial-gradient(120px 50px at 30% 30%, rgba(255,255,255,0.98), rgba(255,255,255,0.86) 55%, rgba(255,255,255,0.0) 72%),
    linear-gradient(to top, rgba(255,255,255,0.94), rgba(255,255,255,0.0));
  opacity: 0.98;
  filter: drop-shadow(0 -6px 22px rgba(255,255,255,0.10)) drop-shadow(0 -2px 10px rgba(0,0,0,0.12));
  transform-origin: bottom;
}

/* SNOWDRIFT_CANVAS_CSS — bottom drift drawn on canvas (replaces the old bank visually) */
#snowbank-canvas{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  width: 100%;
  pointer-events: none;
  z-index: 0;
}

/* SANTA_FUR_TOP — thick white fur border + push content down */
.page{
  padding-top: 120px !important; /* move card down away from fur */
}

body::after{
  content:"";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 86px;
  pointer-events: none;
  z-index: 2;

  /* faux fur: layered tufts + soft shading */
  background:
    radial-gradient(26px 18px at 12px 58px, rgba(255,255,255,0.98) 0 62%, rgba(255,255,255,0) 70%) 0 0/74px 86px repeat-x,
    radial-gradient(22px 16px at 40px 66px, rgba(255,255,255,0.98) 0 62%, rgba(255,255,255,0) 72%) 0 0/82px 86px repeat-x,
    radial-gradient(18px 14px at 18px 72px, rgba(245,245,245,0.92) 0 60%, rgba(255,255,255,0) 72%) 0 0/64px 86px repeat-x,
    linear-gradient(to bottom, rgba(255,255,255,0.98), rgba(244,244,244,0.96));

  box-shadow:
    0 10px 22px rgba(0,0,0,0.18),
    inset 0 -10px 18px rgba(0,0,0,0.06);

  filter: blur(0.2px);
}

/* SANTA_FUR_TRIM_V2 — thick white “fur” trim at top + move content down */
.page{
  padding-top: 118px !important; /* keep the main card away from the trim */
}

/* Fur trim: layered tufts + subtle depth (no web assets, no JS) */
body::after{
  content:"";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 92px;
  pointer-events: none;
  z-index: 3;

  /* The trick: multiple scalloped tuft layers with slightly different sizes/offsets */
  background:
    /* deep shadow at the very bottom edge of trim */
    linear-gradient(to bottom, rgba(0,0,0,0.20), rgba(0,0,0,0) 26%),
    /* tuft layer 1 (big, soft) */
    radial-gradient(34px 26px at 18px 76px, rgba(255,255,255,0.98) 0 62%, rgba(255,255,255,0) 72%) 0 0/86px 92px repeat-x,
    /* tuft layer 2 (offset, medium) */
    radial-gradient(28px 22px at 54px 80px, rgba(250,250,250,0.96) 0 60%, rgba(255,255,255,0) 74%) 0 0/92px 92px repeat-x,
    /* tuft layer 3 (small frizz) */
    radial-gradient(18px 16px at 32px 84px, rgba(245,245,245,0.92) 0 58%, rgba(255,255,255,0) 78%) 0 0/64px 92px repeat-x,
    /* inner fluff shading */
    radial-gradient(260px 120px at 50% 40px, rgba(255,255,255,0.65), rgba(255,255,255,0) 72%),
    /* base fur body */
    linear-gradient(to bottom, rgba(255,255,255,0.98), rgba(246,246,246,0.96));

  /* depth */
  box-shadow:
    0 10px 26px rgba(0,0,0,0.22),
    inset 0 -18px 22px rgba(0,0,0,0.06),
    inset 0 10px 18px rgba(255,255,255,0.35);

  /* tiny blur helps it read like fibres instead of circles */
  filter: blur(0.35px);
}

/* SANTA_FUR_TRIM_SVG_V3 — textured fur trim using SVG noise mask */
.page{
  padding-top: 120px !important;
}

/* override any previous fur attempts */
body::after{
  content:"";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 92px;
  pointer-events: none;
  z-index: 4;

  background-image: url("/static/img/fur-trim.svg");
  background-repeat: repeat-x;
  background-position: top left;
  background-size: 800px 92px;

  /* depth so it sits “on top” of the red */
  box-shadow: 0 14px 26px rgba(0,0,0,0.28);
  filter: none;
}

/* SANTA_FUR_TRIM_IMG_V4 — real fur texture trim (PNG) */
.page{
  padding-top: 128px !important; /* move card down a bit more for the thicker trim */
}

body::after{
  content:"";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 92px;
  pointer-events: none;
  z-index: 6;

  background-image: url("/static/img/fur-trim.png");
  background-repeat: repeat-x;
  background-position: top left;
  background-size: 800px 92px;

  /* make it sit “on top” of the red like real trim */
  box-shadow:
    0 14px 26px rgba(0,0,0,0.28),
    inset 0 -10px 18px rgba(0,0,0,0.06);
}

/* SANTA_FUR_TRIM_SVG_V5 — fibrous fur trim (SVG strands), overrides earlier fur attempts */
.page{
  padding-top: 128px !important;
}

body::after{
  content:"";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 92px;
  pointer-events: none;
  z-index: 10;

  background-image: url("/static/img/fur-trim-v5.svg");
  background-repeat: repeat-x;
  background-position: top left;
  background-size: 800px 92px;

  box-shadow: 0 14px 26px rgba(0,0,0,0.28);
}

/* SANTA_FUR_TRIM_REAL_V7 — FINAL WINNER (real fur PNG + cache-bust) */
body::after{
  background-image: url("/static/img/fur-trim-real.png?v=20251217131056") !important;
  background-repeat: repeat-x !important;
  background-position: top left !important;
  background-size: 800px 92px !important;
}

/* SANTA_FUR_TRIM_REAL_V8 — remove red bleed: solid white backing under fur */
body::after{
  background-color: #ffffff !important;  /* key line: stops red showing through alpha */
  background-blend-mode: normal !important;
}

/* SANTA_FUR_SCALE_V9 — shrink fur trim to ~2/3 height */
:root{
  --fur-h: 62px; /* was 92px */
  --fur-w: 800px;
}

.page{
  padding-top: calc(var(--fur-h) + 40px) !important; /* keeps card comfortably below trim */
}

body::after{
  height: var(--fur-h) !important;
  background-size: var(--fur-w) var(--fur-h) !important;
}

/* SANTA_FUR_SCALE_V10 — adjust fur height to 72px */
:root{ --fur-h: 72px; }

/* BADGE_FORCE_THEME_V1 — make .badge darker (theme wins over site.css) */
.badge{
  background: rgba(0,0,0,0.18) !important;
}

/* BADGE_FORCE_THEME_V2 — FINAL WINNER: make badges clearly darker */
.badge{
  background: rgba(0,0,0,0.32) !important;
  border-color: rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.75) !important;
}
.badge strong{
  color: rgba(255,255,255,0.92) !important;
}