/* =========================================================
   season.css — seasonal announcement bar + strip + picker
   thumbnails. Rendered by season.js from GET /api/season.
   Tokens follow theme.css where it has them; the two season
   palettes are local to this file.
   ========================================================= */
:root {
  --season-xmas-a: #8b1a1a; --season-xmas-b: #1f4d2e; --season-xmas-ink: #fff7ec; --season-xmas-accent: #f2c14e;
  --season-hal-a: #3b1a5c;  --season-hal-b: #c8541a;  --season-hal-ink: #fff4e6;  --season-hal-accent: #ffb347;
}

/* Announcement bar — inserted as the first child of <body>. */
.season-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 16px; font: 600 14px/1.35 Inter, system-ui, sans-serif; text-align: center;
  color: var(--season-xmas-ink); background: linear-gradient(90deg, var(--season-xmas-b), var(--season-xmas-a));
}
.season-bar[data-season="halloween"] { color: var(--season-hal-ink); background: linear-gradient(90deg, var(--season-hal-a), var(--season-hal-b)); }
.season-bar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.season-bar .season-bar__icon { font-size: 16px; line-height: 1; }
.season-bar .season-bar__copy { appearance: none; -webkit-appearance: none; margin: 0; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 999px; background: rgba(255, 255, 255, .14); color: inherit; font: 700 12px/1 Inter, system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.season-bar .season-bar__copy.is-copied { background: #fff; color: #8b1a1a; border-color: #fff; }
.season-bar[data-season="halloween"] .season-bar__copy.is-copied { color: #c8541a; }

/* Seasonal strip — mounted into [data-season-strip]. */
.season-strip {
  position: relative; overflow: hidden; border-radius: 16px; margin: 14px 0 18px;
  color: var(--season-xmas-ink); background: var(--season-xmas-b) center / cover no-repeat;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.season-strip[data-season="halloween"] { color: var(--season-hal-ink); background-color: var(--season-hal-a); }
.season-strip::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.15) 100%); }
.season-strip__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 18px; align-items: center; padding: 18px 18px; }
.season-strip__eyebrow { font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .9; margin: 0 0 8px; }
.season-strip__title { font: 800 clamp(20px, 4.2vw, 28px)/1.15 Inter, system-ui, sans-serif; margin: 0 0 6px; text-wrap: balance; }
.season-strip__sub { font: 500 14px/1.45 Inter, system-ui, sans-serif; margin: 0 0 12px; max-width: 46ch; opacity: .95; }
.season-strip__cta {
  display: inline-block; padding: 11px 18px; border-radius: 999px; font: 700 14px/1 Inter, system-ui, sans-serif; text-decoration: none;
  color: #1b1b1b; background: var(--season-xmas-accent); box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.season-strip[data-season="halloween"] .season-strip__cta { background: var(--season-hal-accent); }
.season-strip__cards { display: flex; gap: 10px; align-items: flex-end; }
.season-strip__cards img { width: 96px; max-width: 100%; height: auto; border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,.35); transform: rotate(-4deg); }
.season-strip__cards img + img { transform: rotate(5deg); margin-left: -14px; }
@media (max-width: 560px) {
  .season-strip__in { grid-template-columns: 1fr; padding: 16px 14px; }
  .season-strip__cards { justify-content: flex-start; }
  .season-strip__cards img { width: 84px; }
}

/* Picker: a small sample next to the occasion pills when a seasonal one is active. */
.season-sample { display: flex; gap: 12px; align-items: center; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.04); }
.season-sample img { width: 56px; height: auto; border-radius: 4px; flex: none; }
.season-sample p { margin: 0; font: 500 13px/1.4 Inter, system-ui, sans-serif; color: inherit; opacity: .85; }
.season-sample b { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .season-strip__cards img { transition: transform .25s ease; }
  .season-strip:hover .season-strip__cards img { transform: rotate(0); }
  .season-strip:hover .season-strip__cards img + img { transform: rotate(0); }
}

/* The product pages style .pill with display:flex, which would override the hidden attribute. */
.pill[hidden], [data-season-pill][hidden] { display: none !important; }

/* While the seasonal bar is up, the pink benefits ribbon below it is one bar too many on a phone. */
body.has-season-bar .promo { display: none; }

/* =========================================================
   Vibrancy layer (owner 2026-10-08: "more visuals and effects
   all around the pages"). Everything below is additive, keyed
   off body.has-season[-christmas|-halloween], and switches off
   under prefers-reduced-motion.
   ========================================================= */

/* String of lights right under the bar. */
.season-lights { display: flex; justify-content: space-between; padding: 0 6px; height: 14px; overflow: hidden; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0)); }
.season-lights i { display: block; width: 10px; height: 14px; border-radius: 0 0 8px 8px; margin-top: -2px; opacity: .9; box-shadow: 0 2px 8px currentColor; background: currentColor; animation: season-twinkle 1.6s ease-in-out infinite; }
.season-lights i:nth-child(4n+1) { color: #ff4d4d; }
.season-lights i:nth-child(4n+2) { color: #ffd84d; animation-delay: .4s; }
.season-lights i:nth-child(4n+3) { color: #4de37a; animation-delay: .8s; }
.season-lights i:nth-child(4n+4) { color: #4db8ff; animation-delay: 1.2s; }
.season-lights[data-season="halloween"] i:nth-child(odd) { color: #ff9a2e; }
.season-lights[data-season="halloween"] i:nth-child(even) { color: #b96bff; }
@keyframes season-twinkle { 0%, 100% { opacity: .45; transform: scaleY(.92); } 50% { opacity: 1; transform: scaleY(1); } }

/* Falling snow / leaves canvas: fixed, never catches a tap. It sits BEHIND the
   page content (owner 2026-10-27: "back on UI elements, like boxes and buttons"):
   z-index -1 puts it under the body, so the body must be transparent and the
   page colour moves to <html>, otherwise the canvas would be painted over. Boxes,
   buttons and photos keep their own backgrounds and simply cover the particles. */
.season-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
html:has(body.has-season) { background: var(--bg, #fffdfb); }
body.has-season { background: transparent; }

/* Corner decorations on the upload box and the strip. */
.season-host { position: relative; }
.season-decor { position: absolute; font-size: 34px; line-height: 1; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); animation: season-float 3.6s ease-in-out infinite; z-index: 2; }
.season-decor--tl { top: -14px; left: -10px; }
.season-decor--tr { top: -14px; right: -8px; animation-delay: .9s; }
.season-decor--bl { bottom: -12px; left: -8px; animation-delay: 1.8s; }
.season-decor--br { bottom: -12px; right: -10px; animation-delay: 2.7s; }
@keyframes season-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }

/* Edition badge above the page title. */
.season-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px 12px 6px 8px; border-radius: 999px; font: 700 12.5px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; color: #fff; background: linear-gradient(90deg, var(--season-xmas-a), var(--season-xmas-b)); box-shadow: 0 6px 18px rgba(139, 26, 26, .28); }
.season-badge[data-season="halloween"] { background: linear-gradient(90deg, var(--season-hal-a), var(--season-hal-b)); box-shadow: 0 6px 18px rgba(200, 84, 26, .3); }
.season-badge b { font-size: 15px; }

/* Primary buttons get a slow shimmer sweep in the season colour. */
body.has-season .btn--primary, body.has-season .season-strip__cta { position: relative; overflow: hidden; }
body.has-season .btn--primary::after, body.has-season .season-strip__cta::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); animation: season-sweep 3.2s ease-in-out infinite; pointer-events: none; }
body.has-season-halloween .btn--primary::after { background: linear-gradient(90deg, rgba(255,180,71,0), rgba(255,200,120,.6), rgba(255,180,71,0)); }
@keyframes season-sweep { 0% { left: -60%; } 45%, 100% { left: 130%; } }

/* Upload box glow in the season colour. */
body.has-season-christmas .updrop, body.has-season-christmas .upload { box-shadow: 0 0 0 2px rgba(242, 193, 78, .55), 0 14px 34px rgba(139, 26, 26, .16); }
body.has-season-halloween .updrop, body.has-season-halloween .upload { box-shadow: 0 0 0 2px rgba(255, 154, 46, .6), 0 14px 34px rgba(59, 26, 92, .25); }

/* Strip comes alive: the background drifts, the cards float, sparkles twinkle. */
.season-strip { background-size: 115% auto; animation: season-pan 28s ease-in-out infinite alternate; }
@keyframes season-pan { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.season-strip::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 18% 30%, rgba(255,255,255,.55) 0 2px, transparent 3px), radial-gradient(circle at 72% 22%, rgba(255,255,255,.5) 0 1.5px, transparent 3px), radial-gradient(circle at 86% 68%, rgba(255,255,255,.6) 0 2px, transparent 3px), radial-gradient(circle at 40% 80%, rgba(255,255,255,.45) 0 1.5px, transparent 3px), radial-gradient(circle at 58% 48%, rgba(255,255,255,.5) 0 1.5px, transparent 3px); animation: season-sparkle 2.4s ease-in-out infinite; }
@keyframes season-sparkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.season-strip__cards img { animation: season-card-float 4s ease-in-out infinite; }
.season-strip__cards img + img { animation-delay: 1.3s; }
@keyframes season-card-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (min-width: 720px) { .season-strip__cards img { width: 124px; } }

@media (prefers-reduced-motion: reduce) {
  .season-lights i, .season-decor, .season-strip, .season-strip::after, .season-strip__cards img, body.has-season .btn--primary::after, body.has-season .season-strip__cta::after { animation: none !important; }
  .season-canvas { display: none; }
}