/* Campaign banner, one shared style regardless of which campaign is active */
.alp-campaign-banner{
  display:flex; align-items:center; justify-content:center; gap:16px;
  background:var(--accent-interactive); color:var(--color-black-950);
  font-size:13px; font-weight:600; padding:8px 24px; text-align:center;
  position:relative;
}
.alp-campaign-banner__close{
  background:none; border:none; color:var(--color-black-950); cursor:pointer;
  font-size:13px; padding:2px; position:absolute; right:16px;
}

/* Christmas logo/Alpy treatment: intentionally left to real artwork rather
   than a CSS-drawn approximation. Once real Christmas assets are supplied,
   swap the logo/avatar src for the seasonal version here, e.g.:
   [data-campaign="christmas"] .alp-nav__logo img.alp-nav__logo--studio { content: url('assets/logos/christmas/lockup-black.png'); } */

/* Seasonal accent blending, gold stays present, never fully replaced.
   Only decorative surfaces (button fill, glow tint) shift, not text/border
   tokens, so contrast and brand recognition both hold up. */
[data-campaign="christmas"] .alp-button--primary{
  background: linear-gradient(135deg, var(--accent-interactive) 40%, #E5484D);
}
[data-campaign="christmas"] .alp-button--primary:hover{
  background: linear-gradient(135deg, var(--accent-interactive-hover) 40%, #C93E42);
}
[data-campaign="christmas"]{ --media-glow: rgba(229,72,77,0.16); }

[data-campaign="valentine"] .alp-button--primary{
  background: linear-gradient(135deg, var(--accent-interactive) 40%, #FF6B9D);
}
[data-campaign="valentine"] .alp-button--primary:hover{
  background: linear-gradient(135deg, var(--accent-interactive-hover) 40%, #E85C89);
}
[data-campaign="valentine"]{ --media-glow: rgba(255,107,157,0.16); }

/* Subtle frost vignette at the viewport edges, pairs with the snowfall
   effect (js/effects/snowfall.js). Restrained on purpose, a hint of frost,
   not a border. */
[data-campaign="christmas"] body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:39;
  background: radial-gradient(ellipse at top, rgba(255,255,255,0.06), transparent 40%),
              radial-gradient(ellipse at bottom, rgba(255,255,255,0.04), transparent 35%);
}