/*
  🎄 Tema natalizio
  Si attiva quando l'elemento <html> ha class="theme-xmas".
  (vedi templates/base.html)
*/

html.theme-xmas {
  --bg: #020806;
  --bg-soft: #03110b;
  --card: #06130c;
  --card-soft: #081a11;

  /* manteniamo l'identità “gold” ma più calda */
  --gold: #f5d08a;
  --gold-soft: rgba(245, 208, 138, 0.18);
  --gold-strong: #ffe3a8;

  --text-main: #fbfbfd;
  --text-soft: rgba(243, 244, 246, 0.68);

  --border-soft: rgba(245, 208, 138, 0.22);
  --shadow-soft: 0 22px 55px rgba(0, 0, 0, 0.86);

  --xmas-red: #e34b4b;
  --xmas-green: #2db36a;
  --xmas-ice: rgba(224, 242, 254, 0.78);
}

html.theme-xmas body {
  background:
    radial-gradient(circle at top, rgba(45, 179, 106, 0.18) 0, #02040a 44%, #000 100%),
    radial-gradient(circle at 18% 12%, rgba(227, 75, 75, 0.10), transparent 55%),
    radial-gradient(circle at 82% 10%, rgba(245, 208, 138, 0.11), transparent 62%);
}


html.theme-xmas .app-shell{
  position: relative; 
}

html.theme-xmas .app-shell::before{
  content:"";
  position:absolute;
  inset:0;  
  border-radius: inherit;
  padding: 4px;                
  background: repeating-linear-gradient(
    45deg,
    rgba(195,59,59,0.85) 0 10px, 
    rgba(255,255,255,0.00) 10px 20px,
    rgba(47,164,106,0.85) 20px 30px,
    rgba(255,255,255,0.00) 30px 40px
  );

 
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events:none;
  opacity: 0.50;               
}

/* 🎄 Lucine in alto (inserite da base.html con .xmas-lights) */
.xmas-lights {
  display: none;
}

html.theme-xmas .xmas-lights {
  display: block;
  position: absolute !important;
  left: 0;
  right: 0;
  top: 0 !important;
  height: 58px;
  padding-top: 0;
  pointer-events: none;
  z-index: 5 !important;

  /* Filo + bagliori */
  background:
    /* filo */
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.00) 0,
      rgba(0, 0, 0, 0.00) 18px,
      rgba(245, 208, 138, 0.18) 19px,
      rgba(245, 208, 138, 0.05) 20px,
      rgba(0, 0, 0, 0.00) 21px
    ),
    /* lucine (punti) */
    radial-gradient(circle at 8% 20px, rgba(227, 75, 75, 0.95) 0 2.4px, transparent 3.4px),
    radial-gradient(circle at 18% 22px, rgba(45, 179, 106, 0.95) 0 2.4px, transparent 3.4px),
    radial-gradient(circle at 28% 19px, rgba(245, 208, 138, 0.95) 0 2.4px, transparent 3.4px),
    radial-gradient(circle at 38% 23px, rgba(224, 242, 254, 0.92) 0 2.4px, transparent 3.4px),
    radial-gradient(circle at 48% 19px, rgba(227, 75, 75, 0.95) 0 2.4px, transparent 3.4px),
    radial-gradient(circle at 58% 22px, rgba(45, 179, 106, 0.95) 0 2.4px, transparent 3.4px),
    radial-gradient(circle at 68% 20px, rgba(245, 208, 138, 0.95) 0 2.4px, transparent 3.4px),
    radial-gradient(circle at 78% 23px, rgba(224, 242, 254, 0.92) 0 2.4px, transparent 3.4px),
    radial-gradient(circle at 88% 19px, rgba(227, 75, 75, 0.95) 0 2.4px, transparent 3.4px);

  filter:
    drop-shadow(0 8px 22px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 10px rgba(245, 208, 138, 0.16));

  opacity: 0.95;
}

html.theme-xmas .xmas-lights::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 20px, rgba(227, 75, 75, 0.22), transparent 10px),
    radial-gradient(circle at 18% 22px, rgba(45, 179, 106, 0.22), transparent 10px),
    radial-gradient(circle at 28% 19px, rgba(245, 208, 138, 0.18), transparent 10px),
    radial-gradient(circle at 38% 23px, rgba(224, 242, 254, 0.18), transparent 10px),
    radial-gradient(circle at 48% 19px, rgba(227, 75, 75, 0.20), transparent 10px),
    radial-gradient(circle at 58% 22px, rgba(45, 179, 106, 0.20), transparent 10px),
    radial-gradient(circle at 68% 20px, rgba(245, 208, 138, 0.16), transparent 10px),
    radial-gradient(circle at 78% 23px, rgba(224, 242, 254, 0.16), transparent 10px),
    radial-gradient(circle at 88% 19px, rgba(227, 75, 75, 0.20), transparent 10px);
  opacity: 0.85;
  animation: xmas-twinkle 2.4s ease-in-out infinite;
}

/* 🎄 Candy-cane “grande” sulle card delle pagine (senza pseudo-elementi) */
html.theme-xmas .page-container .card{
  border: 4px solid transparent !important;
  border-radius: 24px; /* o var(--radius-xl) se esiste */
  background:
    radial-gradient(circle at top left, rgba(244,201,122,0.05), rgba(5,8,22,0.96)) padding-box,
    repeating-linear-gradient(
      45deg,
      rgba(195,59,59,0.95) 0 18px,
      rgba(255,255,255,0.00) 18px 34px,
      rgba(47,164,106,0.95) 34px 52px,
      rgba(255,255,255,0.00) 52px 70px
    ) border-box !important;
}


@keyframes xmas-twinkle {
  0%, 100% { opacity: 0.65; filter: blur(0px); }
  50% { opacity: 0.95; filter: blur(0.4px); }
}

@media (prefers-reduced-motion: reduce) {
  html.theme-xmas .xmas-lights::after { animation: none; }
}