/*
Theme Name: Xmas Minimal
Version: 1.1.1
Author: Alessandro
*/
/* Google Font via CSS (ok) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
/* ===== BASE / RESET MINIMAL ===== */
html, body {
  height: 100%;
}
/* ===== XMAS BG MOBILE-FIRST (NO OVALI) ===== */
body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #fff;
  overflow: hidden;
  position: relative;
  /* rosso cartoncino: tutto lineare, zero ovali */
  background: linear-gradient(180deg, #e0001c 0%, #b10018 55%, #860012 100%);
}
/* vignetta scura ai lati + leggero sheen verticale */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: /* sheen verticale tipo carta (molto soft) */ linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.00) 22%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.00) 78%, rgba(255, 255, 255, 0.04) 100%), /* vignettatura: scurisce bordi e basso (natalizia stage) */ radial-gradient(120% 100% at 50% 35%, rgba(0, 0, 0, 0.00) 35%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.78) 100%), /* extra: bottom fade (dà profondità su mobile) */ linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.20) 65%, rgba(0, 0, 0, 0.55) 100%);
  animation: xmasVignetteBreath 7s ease-in-out infinite;
  opacity: 1;
}
@keyframes xmasVignetteBreath {
  0% {
    opacity: 0.92;
    filter: contrast(1.05) saturate(1.05);
  }
  50% {
    opacity: 1.00;
    filter: contrast(1.10) saturate(1.12);
  }
  100% {
    opacity: 0.92;
    filter: contrast(1.05) saturate(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
}
/* ===== OVERLAY BOKEH + STARS (POMPATO) ===== */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* sotto al contenuto (che sta a z-index:1) */
  opacity: 0.95;
  mix-blend-mode: screen;
  background: /* bokeh BIG (vicino) */ radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.16) 0 22px, rgba(255, 255, 255, 0) 78px), radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.14) 0 26px, rgba(255, 255, 255, 0) 88px), radial-gradient(circle at 62% 58%, rgba(255, 255, 255, 0.12) 0 32px, rgba(255, 255, 255, 0) 110px), radial-gradient(circle at 28% 74%, rgba(255, 255, 255, 0.11) 0 24px, rgba(255, 255, 255, 0) 92px), radial-gradient(circle at 86% 78%, rgba(255, 255, 255, 0.10) 0 26px, rgba(255, 255, 255, 0) 104px), /* bokeh MID (lontano) */ radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.08) 0 16px, rgba(255, 255, 255, 0) 62px), radial-gradient(circle at 60% 84%, rgba(255, 255, 255, 0.07) 0 18px, rgba(255, 255, 255, 0) 66px), /* stellini pattern */ radial-gradient(circle, rgba(255, 230, 190, 0.55) 0 1px, rgba(255, 230, 190, 0) 2px), radial-gradient(circle, rgba(255, 255, 255, 0.35) 0 1px, rgba(255, 255, 255, 0) 2px);
  background-size:
    auto, auto, auto, auto, auto, auto, auto, 140px 140px, 220px 220px;
  background-position:
    18% 22%, 78% 18%, 62% 58%, 28% 74%, 86% 78%, 40% 30%, 60% 84%, 0 0, 40px 80px;
  filter: blur(0.4px);
  animation: xmasOverlayFloat 10s ease-in-out infinite;
}
@keyframes xmasOverlayFloat {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: .90;
  }
  50% {
    transform: translate3d(-0.6%, 0.4%, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: .90;
  }
}
/* ===== NEVE (DOM, creato via JS) ===== */
.xmas-snow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.xmas-flake {
  position: absolute;
  top: -10vh;
  left: 0;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: rgba(255, 255, 255, var(--alpha));
  filter: blur(var(--blur));
  transform: translate3d(var(--x), 0, 0);
  animation: xmasSnowFall var(--dur) linear var(--delay) infinite;
  will-change: transform;
}
/* leggero luccichio per alcuni fiocchi */
.xmas-flake.is-twinkle {
  animation-name: xmasSnowFall, xmasTwinkle;
  animation-duration: var(--dur), calc(var(--dur) * 0.35);
  animation-timing-function: linear, ease-in-out;
  animation-delay: var(--delay), 0s;
  animation-iteration-count: infinite, infinite;
}
@keyframes xmasSnowFall {
  0% {
    transform: translate3d(var(--x), -12vh, 0);
  }
  100% {
    transform: translate3d(calc(var(--x) + var(--drift)), 112vh, 0);
  }
}
@keyframes xmasTwinkle {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
#xmas-gate {
    overflow-y: auto;
    height: 100vh;
}
/* mobile: meno carico */
@media (max-width: 520px) {
  body::after {
    filter: blur(0.35px);
    opacity: 0.9;
  }
}
/* rispetta riduzione animazioni */
@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
  }
  .xmas-flake {
    animation: none;
  }
}
/* ===== LAYOUT MOBILE-FIRST ===== */
main {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
}
.container {
  width: 100%;
  max-width: 100%; /* mobile-first */
  margin-top: 0;
}
/* tipografia */
h1, h2, h3 {
  font-weight: 600;
  margin: 0 0 1rem 0;
}
p {
  margin: 0 0 1rem 0;
  opacity: 0.95;
}
/* form controls */
button, input, select {
  font: inherit;
}
/* ===== FORM ===== */
.xmas-form {
  display: grid;
  gap: 0.75rem;
  box-sizing: border-box;
  margin: 2rem auto;
  max-width: 640px;
}
.logo {
    margin: 4rem auto;
    display: block;
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,.9)) drop-shadow(0px 0px 28px rgba(255,255,255,.8));
    width: 90%;
    max-width: 363px;
}

.xmas-note{
font-size:.725rem;
line-height:1.5!important}
#xmas-gate p {
  text-align: center;
  font-size: 1.155rem;
}
#Livello_1 {
  max-width: 334px;
  width: 100%;
  margin: 2rem auto;
  display: block;
  filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, .5));
}
.xmas-form input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  outline: none;
  box-sizing: border-box;
}
.xmas-form input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.xmas-form input:focus {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.55);
}
.xmas-btn {
  padding: 0.9rem 1rem;
  border-radius: 10px;
  border: none;
  background: #fff;
  color: #000;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: auto;
  max-width: 202px;
}
.xmas-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.xmas-note {
  font-size: 0.85rem;
  opacity: 0.75;
}
/* ===== VIDEO AREA ===== */
.xmas-main-video video {
  /* border-radius: 12px; */
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  width: 100%;
}
/* ===== PLAYLIST PANEL ===== */
.xmas-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
  position: fixed;
  top: 48px;
  z-index: 99999;
  right: 15px;
}
.xmas-btn-secondary {
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.38);
  padding: 10px 20px;
}
.xmas-playlist-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(82vw, 320px);
  background: rgba(0, 0, 0, 0.88);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding: 100px 1rem;
  transform: translateX(100%);
  transition: transform 0.25s ease-out;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(8px);
}
.xmas-playlist-panel.is-open {
  transform: translateX(0);
}
.xmas-playlist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
  font-weight: 600;
}
.xmas-playlist-header button {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.xmas-playlist-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
  font-size: 0.95rem;
}
.xmas-playlist-list li {
  margin-bottom: .55rem;
}
.xmas-playlist-list a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}
.xmas-playlist-list a:hover, .xmas-playlist-list a.is-active {
  color: #fff;
  text-decoration: underline;
}
/* ===== COUNTDOWN MODE ===== */
.xmas-video-wrapper {
  transition: opacity 0.25s ease;
  position: relative;
  z-index: 5;
}
/* wrapper countdown */
.xmas-countdown-wrapper {
  margin-top: 1.5rem;
  text-align: center;
}
/* quando parte il countdown finale, nascondo i video e centro il counter */
.xmas-countdown-mode .xmas-video-wrapper {
  display: none;
}
.xmas-countdown-mode .xmas-countdown-wrapper {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* ===== FLAP COUNTDOWN ===== */
.xmas-countdown-board {
  display: inline-flex;
  gap: 0.35rem;
  margin-top: 1.25rem;
}
.flap {
  position: relative;
  width: 6.7rem;
  height: 8.5rem;
  background: rgba(0, 0, 0, 0.78);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .55);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.flap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.flap-inner {
  position: relative;
  transform-origin: center center;
  transition: transform 0.15s ease, color 0.15s ease;
}
.flap-inner.is-changing {
  transform: translateY(2px);
  color: #fff;
}
/* winners */
.xmas-winners.xmas-winners--populated {
  margin-top: 5rem;
  font-size: 1.25rem;
  line-height: 2.25;
  border: 2px solid;
  border-radius: 16px;
  padding: 0;
  position: relative
}
.xmas-winners strong {
  font-size: 1.5rem;
  border-radius: 16px 16px 0 0;
  background: #b2071e;
  padding: .25rem 1rem;
  line-height: 1.9;
  word-break: keep-all;
  min-width: 539px;
  display: block;
  margin: 0 auto 23px;
}
.form-box {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 740px;
  width: 100%;
}
em.prize {}
.name {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1;
}
p.xmas-winner-row {
  border-bottom: 1px dotted #fff;
  line-height: 1.5;
  padding-bottom: 1rem;
}
span.email {
  font-size: 70%;
}
span.ranking {
  font-size: 1.8rem;
  font-weight: 900;
  border-radius: 50%;
}
/* ===== SHOOTING STAR (oggetto creato via JS) ===== */
.xmas-shooting-star {
  position: fixed;
  left: 0;
  top: 0;
  width: 160px;
  height: 2px;
  pointer-events: none;
  z-index: 0; /* come neve/bokeh, sotto al contenuto */
  opacity: 0.0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 230, 200, 0.95) 55%, rgba(255, 255, 255, 0) 100%);
  filter: blur(0.2px);
  transform: translate3d(var(--sx), var(--sy), 0) rotate(var(--ang));
  animation: xmasShootingStar var(--dur) ease-out forwards;
}
@keyframes xmasShootingStar {
  0% {
    opacity: 0;
    transform: translate3d(var(--sx), var(--sy), 0) rotate(var(--ang));
  }
  10% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--sx) + var(--dx)), calc(var(--sy) + var(--dy)), 0) rotate(var(--ang));
  }
}
/* default */
#xmas-main-video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: 69% 50%;
  background: #000;
}
/* solo mobile: aggiusta inquadratura per speaker */
@media (max-width: 520px) {
  .flap {
    position: relative;
    width: 3.7rem;
    height: 5.5rem;
    font-size: 3.25rem;
    letter-spacing: 0.06em;
  }
  #xmas-gate p {
  text-align: center;
  font-size: 1.155rem;
    padding:0 1rem
}
  .xmas-winners strong{
    min-width: unset;
  }
  .xmas-note {
  font-size: 0.7125rem;
  opacity: 0.75;
}
  .xmas-form{
    max-width:90%;
    overflow-y: auto;
  }
  .logo {

    width: 90%;
    max-width: 350px;
}
  /* esempi (modifica come vuoi) */
  #xmas-main-video.speaker-stefano-valore {
    object-position: 30% 50%;
  } 
  #xmas-main-video.speaker-nicola-perrone {
    object-position: 72% 50%;
  } 
  #xmas-main-video.speaker-lorenzo-genzano {
    object-position: 49% 45%;
  } 
 #xmas-main-video.speaker-katia-sagrafena {
    object-position: 66% 45%;
  } 
  
  #xmas-main-video.speaker-giuseppe-placanica {
    object-position: 30% 45%;
  } 
    #xmas-main-video.speaker-francesca-magnozzi {
    object-position: 30% 45%;
  } 
    #xmas-main-video.speaker-mario-moscatelli {
    object-position: 29% 45%;
  }     #xmas-main-video.speaker-patrizia-romani {
    object-position: 61% 45%;
  } 
      #xmas-main-video.speaker-silvia-zucco{
    object-position: 32% 45%;
  }
        #xmas-main-video.speaker-michele-d-avino{
    object-position: 32% 45%;
  }
  
  #xmas-main-video.speaker-rita-favoccia {
    object-position: 67% 50%;
  }
}

/* ==========================
   CONFETTI BURST
   ========================== */
.xmas-confetti-wrap{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  overflow: hidden;
}
.xmas-confetti{
  position: absolute;
  border-radius: 2px;
  transform: translate3d(0,0,0) rotate(var(--rot0));
  filter: blur(0.15px);
  opacity: .95;
  animation: xmasConfettiFly 1800ms ease-out forwards;
  will-change: transform, opacity;
}

@keyframes xmasConfettiFly{
  0%   { transform: translate3d(0,0,0) rotate(var(--rot0)); opacity: 1; }
  70%  { opacity: 1; }
  100% {
    transform:
      translate3d(calc(var(--vx) * 28px), calc(var(--vy) * 28px + 520px), 0)
      rotate(calc(var(--rot0) + var(--rotv) * 12));
    opacity: 0;
  }
}