/* Aspetto condiviso da sito e popup dell'estensione.
   Le dimensioni si regolano con le variabili in :root, ridefinite da ciascuno;
   i colori con data-theme sul <body> (vedi THEMES in events.js). */

/* Lobster incluso nel progetto (licenza in fonts/OFL.txt): nessuna richiesta a Google Fonts */
@font-face {
  font-family: 'Lobster';
  font-display: swap;
  src: url(fonts/lobster-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lobster';
  font-display: swap;
  src: url(fonts/lobster-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --sky: #093246;
  --ground: #a9d4e4;
  --accent: #ffc720;
  --particle: #fff;
  --font: 'Lobster', cursive;

  --number-size: 8rem;
  --label-size: 2rem;
  --title-size: 4rem;

  --tree-w: 656px;   /* trees.png è 1076x328: larghezza e altezza restano in proporzione */
  --tree-h: 200px;
  --tree-speed: 19s;
  --santa: 300px;    /* lato di un fotogramma dello sprite di Babbo Natale */
  --santa-frames: 28;
}

/* Temi (natale ripete i valori di :root, così vale anche dentro un elemento di un altro tema) */
[data-theme="natale"]    { --sky: #093246; --ground: #a9d4e4; --accent: #ffc720; --particle: #fff; }
[data-theme="inverno"]   { --sky: #0d1f3c; --ground: #c9dcf0; --accent: #ffe08a; }
[data-theme="festa"]     { --sky: #241a4a; --ground: #3a2d6e; --accent: #ffcf4d; }
[data-theme="amore"]     { --sky: #4a0d24; --ground: #7a1f3d; --accent: #ffa3bd; --particle: #ff6f91; }
[data-theme="primavera"] { --sky: #1d4d3a; --ground: #8fcf8a; --accent: #ffe680; --particle: #ffd1e6; }
[data-theme="estate"]    { --sky: #0b5d8a; --ground: #f2d48a; --accent: #ffe14d; --particle: #bfe9ff; }
[data-theme="halloween"] { --sky: #1b0f2e; --ground: #2e1a47; --accent: #ff8c1a; --particle: #c9a6ff; }
[data-theme="shopping"]  { --sky: #121212; --ground: #2a2a2a; --accent: #ffd400; --particle: #ffd400; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--sky);
  color: var(--accent);
  font-family: var(--font);
}

/* Primo schermo: conto alla rovescia sopra, scena sotto */

.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.countdown {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
}

.title, .subtitle, .greeting {
  margin: 0;
  font-size: var(--title-size);
  font-weight: normal;
  overflow-wrap: anywhere;
}

.timer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 2.5rem;
}

.unit { display: flex; align-items: baseline; gap: .4rem; }
.unit__number { font-size: var(--number-size); font-variant-numeric: tabular-nums; }
.unit__label { font-size: var(--label-size); }

.greeting, .past { display: none; }
.is-today .timer, .is-today .title, .is-today .subtitle,
.is-past .timer, .is-past .title, .is-past .subtitle { display: none; }
.is-today .greeting { display: block; }
.is-past .past { display: block; }

/* Scena: alberi che scorrono, prato innevato e Babbo Natale che cammina */

.scene {
  position: relative;
  flex: none;
  height: calc(var(--tree-h) + var(--santa) * .8);
  overflow: hidden;
}

.scene__trees {
  position: absolute;
  inset: 0 0 auto;
  height: var(--tree-h);
  background: url(img/trees.png) 0 0 / var(--tree-w) var(--tree-h) repeat-x;
  animation: trees var(--tree-speed) linear infinite;
}

.scene__ground {
  position: absolute;
  inset: calc(var(--tree-h) * .85) 0 0;   /* copre i tronchi, come nell'originale */
  background: var(--ground);
}

.scene__santa {
  position: absolute;
  left: 50%;
  top: calc(var(--tree-h) - var(--santa) * .25);
  width: var(--santa);
  height: var(--santa);
  transform: translateX(-50%);
  background: url(img/santa-walk.png) 0 0 / calc(var(--santa) * var(--santa-frames)) var(--santa);
  animation: santa-walk 1s steps(var(--santa-frames)) infinite;
}

/* Lo spostamento è esattamente una tessera, così il ciclo non ha scatti */
@keyframes trees { to { background-position: calc(var(--tree-w) * -1) 0; } }
@keyframes santa-walk { to { background-position: calc(var(--santa) * var(--santa-frames) * -1) 0; } }

/* Scena delle altre feste: una grande emoji che fluttua su una collina */

.scene--emoji {
  height: calc(var(--santa) * .9);
}

.scene--emoji::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 45%;
  border-radius: 50% 50% 0 0;
  background: var(--ground);
}

.scene__emoji {
  position: absolute;
  left: 50%;
  bottom: 22%;
  font-size: calc(var(--santa) * .45);
  line-height: 1;
  transform: translateX(-50%);
  animation: float 3s ease-in-out infinite;
}

@keyframes float { 50% { transform: translate(-50%, -12%); } }

/* Fiocchi (o cuori, stelle, coriandoli: dipende dal tema) */

.particles { pointer-events: none; }

.particle {
  position: fixed;
  top: -10%;
  z-index: 10;
  color: var(--particle);
  font: 2em Arial, sans-serif;
  text-shadow: 0 0 5px #000;
  user-select: none;
  animation: fall 10s linear infinite, shake 3s ease-in-out infinite;
}

.particle:nth-child(1)  { left: 1%;  animation-delay: 0s, 0s; }
.particle:nth-child(2)  { left: 10%; animation-delay: 1s, 1s; }
.particle:nth-child(3)  { left: 20%; animation-delay: 6s, .5s; }
.particle:nth-child(4)  { left: 30%; animation-delay: 4s, 2s; }
.particle:nth-child(5)  { left: 40%; animation-delay: 2s, 2s; }
.particle:nth-child(6)  { left: 50%; animation-delay: 8s, 3s; }
.particle:nth-child(7)  { left: 60%; animation-delay: 6s, 2s; }
.particle:nth-child(8)  { left: 70%; animation-delay: 2.5s, 1s; }
.particle:nth-child(9)  { left: 80%; animation-delay: 1s, 0s; }
.particle:nth-child(10) { left: 90%; animation-delay: 3s, 1.5s; }
.particle:nth-child(11) { left: 25%; animation-delay: 2s, 0s; }
.particle:nth-child(12) { left: 65%; animation-delay: 4s, 2.5s; }

/* Coriandoli colorati per il tema festa */
[data-theme="festa"] .particle { font-size: 1.2em; text-shadow: none; }
[data-theme="festa"] .particle:nth-child(4n+1) { color: #ff5d8f; }
[data-theme="festa"] .particle:nth-child(4n+2) { color: #4dd2ff; }
[data-theme="festa"] .particle:nth-child(4n+3) { color: #ffd23f; }
[data-theme="festa"] .particle:nth-child(4n)   { color: #7cf29c; }

@keyframes fall { to { top: 100%; } }
@keyframes shake { 50% { transform: translateX(80px); } }

/* Chi ha chiesto meno movimento al sistema non vede fiocchi né animazioni */
@media (prefers-reduced-motion: reduce) {
  .particles { display: none; }
  .scene__trees, .scene__santa, .scene__emoji { animation: none; }
}