/* ============ Mousse Club — thème Noël (Christmas Night, samedi 19 décembre 2026) ============
   Calque posé PAR-DESSUS style.css : retirer la ligne <link noel.css> et le
   <script noel.js> de index.html suffit à revenir au site normal.
   Les décors (neige, guirlande, boules, sapins, cadeaux, houx…) sont injectés
   par noel.js ; tout est en fichiers externes (CSP sans inline).
   Règles de perf héritées d'Halloween : pas de filter/drop-shadow ni d'ombres
   animées, tout ce qui bouge passe par transform/opacity, pause hors écran. */

@font-face{
  font-family:'Great Vibes';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/greatvibes-latin.woff2) format('woff2');
}

body.noel{
  --bg:#06080b; --bg2:#0a0e13; --bg3:#0f151c;
  --gold:#d9b45a; --gold2:#f0d99a; --gold-dim:rgba(217,180,90,.5);
  --line:rgba(240,217,154,.15);
  --red:#c4162f; --red2:#8e0f22; --pine:#0f4a33; --snow:#f5f3ee;
  --script:'Great Vibes','Bricolage Grotesque',serif;
}

/* ---------- tonalité générale ---------- */
.noel .hero{background:radial-gradient(ellipse 90% 70% at 50% 15%,#0f2233 0%,#081019 55%,#06080b 100%)}
.noel .hero::after{background:radial-gradient(circle at 50% 44%,rgba(217,180,90,.18),transparent 46%)}
.noel .hero::before{background:linear-gradient(180deg,rgba(6,12,20,.55),rgba(6,8,11,.55) 55%,#06080b)!important}
.noel .nav{background:linear-gradient(180deg,rgba(6,8,11,.95),rgba(6,8,11,0))}
.noel .section.alt{background:linear-gradient(180deg,var(--bg2),var(--bg))}
.noel .invite{background:radial-gradient(ellipse 70% 90% at 50% 0%,#2a0a12,var(--bg) 70%)}
.noel .dj-sec{background:linear-gradient(180deg,var(--bg),#0b1410)}
.noel .countdown{position:relative;overflow:hidden;background:radial-gradient(ellipse 60% 80% at 50% 0%,#101b26,var(--bg) 70%)}
.noel .foot{background:var(--bg2)}
.noel .btn-gold:hover{box-shadow:0 14px 44px -12px rgba(217,180,90,.75),0 0 26px rgba(196,22,47,.35)}
.noel .nav-cta:hover{background:rgba(196,22,47,.14)}
.noel .rules li::before{content:"❄";color:var(--gold2)}
.noel .invite-form input:focus,.noel .invite-form textarea:focus{background:rgba(217,180,90,.06)}
.noel .dj-photo{box-shadow:0 0 0 2px var(--gold),0 0 60px -6px rgba(217,180,90,.6),0 0 120px -20px var(--red)!important}
.noel h2{text-shadow:0 0 30px rgba(217,180,90,.18)}

/* bulles du héros -> flocons flous (bokeh) */
.noel .bubble{background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,255,255,.2) 50%,transparent 72%);border:0}
.noel .bubble:nth-child(3n){background:radial-gradient(circle,rgba(240,217,154,.8),rgba(217,180,90,.2) 50%,transparent 72%)}

/* ---------- héros : calques ---------- */
.nl-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.nl-back{z-index:1}
.nl-front{z-index:4;overflow:visible}

.nl-star{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#fff;
  opacity:.2;animation:nl-twinkle var(--d,3s) ease-in-out infinite var(--w,0s);will-change:opacity}
@keyframes nl-twinkle{0%,100%{opacity:.15}50%{opacity:.95}}
/* voile froid tout en haut (fixe : pas de flou animé) */
.nl-aurora{position:absolute;left:-10%;right:-10%;top:-20%;height:60%;
  background:radial-gradient(ellipse 50% 60% at 30% 40%,rgba(80,170,190,.12),transparent 70%),
             radial-gradient(ellipse 45% 50% at 72% 30%,rgba(217,180,90,.10),transparent 70%);
  animation:nl-aurora 18s ease-in-out infinite alternate}
@keyframes nl-aurora{from{transform:translateX(-3%)}to{transform:translateX(3%)}}

/* guirlande */
.nl-garland{position:absolute;left:0;right:0;top:64px;height:clamp(70px,9vw,110px);z-index:4;pointer-events:none}
.nl-garland svg{width:100%;height:100%;display:block;overflow:visible}
.nl-garland .wire{fill:none;stroke:#1d2a22;stroke-width:2.2;vector-effect:non-scaling-stroke}
.nl-garland .sock{fill:#2b3a31}
.nl-garland .glass{opacity:.35;animation:nl-bulb var(--d,2s) ease-in-out infinite var(--w,0s)}
.nl-garland .halo{opacity:0;animation:nl-halo var(--d,2s) ease-in-out infinite var(--w,0s)}
@keyframes nl-bulb{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes nl-halo{0%,100%{opacity:0}50%{opacity:.28}}

/* boules suspendues */
.nl-bauble{position:absolute;top:0;left:var(--x);width:var(--s,46px);pointer-events:auto;cursor:pointer;
  transform-origin:50% 0;animation:nl-swing var(--d,4s) ease-in-out infinite var(--w,0s);will-change:transform}
.nl-bauble .str{display:block;width:1px;height:var(--l,90px);margin:0 auto;background:linear-gradient(180deg,rgba(240,217,154,.1),rgba(240,217,154,.7))}
.nl-bauble svg{width:100%;height:auto;margin-top:-2px;overflow:visible}
.nl-bauble .cap{fill:#c9a24c}
.nl-bauble .loop{fill:none;stroke:#c9a24c;stroke-width:2}
.nl-bauble .hl{fill:#fff;opacity:.38}
.nl-bauble .mot{fill:none;stroke:rgba(255,236,190,.75);stroke-width:2.4}
.nl-bauble .mot.f{fill:rgba(255,236,190,.85);stroke:none}
.nl-bauble.red .ball{fill:#b3122b}
.nl-bauble.gold .ball{fill:#c99a36}
.nl-bauble.gold .mot{stroke:rgba(120,14,30,.75)}
.nl-bauble.gold .mot.f{fill:rgba(140,16,34,.85)}
.nl-bauble.green .ball{fill:#0f4a33}
.nl-bauble.hit{animation:nl-hit 1.1s cubic-bezier(.3,1.6,.5,1)}
@keyframes nl-swing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes nl-hit{0%{transform:rotate(0)}20%{transform:rotate(-24deg)}45%{transform:rotate(16deg)}65%{transform:rotate(-8deg)}85%{transform:rotate(4deg)}100%{transform:rotate(0)}}

/* chapeau sur la couronne */
.crown.nl-hatted{position:relative}
.nl-hat{position:absolute;left:50%;top:-16px;width:46px;margin-left:-6px;transform:rotate(14deg);transform-origin:20% 90%}
.nl-hat svg{width:100%;height:auto;overflow:visible}
.nl-hat .red{fill:var(--red)}
.nl-hat .shade{fill:#000;opacity:.22}
.nl-hat .fur{fill:var(--snow)}

/* sapins enneigés en bas du héros */
.nl-forest{position:absolute;left:0;right:0;bottom:-1px;height:clamp(60px,10vw,120px);z-index:4;pointer-events:none}
.nl-forest svg{width:100%;height:100%;display:block}
.nl-forest .trees,.nl-forest .ground{fill:var(--bg)}
.nl-forest .caps{fill:rgba(245,243,238,.85)}

/* neige (canvas) */
.nl-snow{position:absolute;inset:0;z-index:2;pointer-events:none;width:100%;height:100%}

/* bandeau « Christmas Night » */
.nl-banner{font-family:var(--script);font-size:clamp(46px,9vw,92px);line-height:1;color:var(--gold2);margin:-6px 0 18px;
  text-shadow:0 0 18px rgba(217,180,90,.55),0 0 46px rgba(196,22,47,.35)}
.nl-banner small{display:block;font-family:var(--sans);font-size:clamp(11px,1.6vw,13px);letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink);opacity:.8;margin-top:12px;text-shadow:none}

/* gerbe au toucher */
.nl-burst{position:absolute;z-index:6;width:var(--s,20px);margin:calc(var(--s,20px) / -2) 0 0 calc(var(--s,20px) / -2);
  opacity:0;pointer-events:none;animation:nl-burst 1.25s cubic-bezier(.15,.7,.35,1) forwards}
.nl-burst svg{width:100%;height:auto;display:block}
.nl-burst svg g{fill:none;stroke:#fff;stroke-width:2.6}
.nl-burst.star svg path{fill:var(--gold2)}
@keyframes nl-burst{0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}15%{opacity:1}
  100%{opacity:0;transform:translate(var(--tx),calc(var(--ty) + 60px)) scale(1) rotate(var(--r))}}
.nl-hint{position:absolute;left:24px;bottom:26px;z-index:6;text-align:left;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(245,243,238,.75);pointer-events:none;animation:nl-hint 2.4s ease-in-out infinite;transition:opacity .6s}
.nl-hint.off{opacity:0!important;animation:none}
@keyframes nl-hint{0%,100%{opacity:.35}50%{opacity:1}}
.noel .scroll-hint{z-index:6}

/* ---------- compte à rebours ---------- */
.nl-gifts{display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,4vw,36px);margin:6px auto 26px;
  opacity:0;transform:translateY(30px) scale(.8);transition:opacity .8s ease .2s,transform .9s cubic-bezier(.3,1.6,.5,1) .2s}
.nl-gifts.in{opacity:1;transform:none}
.nl-gift{width:clamp(58px,9vw,86px);position:relative}
.nl-gift.big{width:clamp(74px,12vw,112px)}
.nl-gift svg{width:100%;height:auto;overflow:visible;display:block}
.nl-gift::before{content:"";position:absolute;inset:-20% -25% -5%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(217,180,90,.3),transparent 65%)}
.nl-gift .lid{animation:nl-lid 3.2s ease-in-out infinite}
.nl-gift:nth-child(2) .lid{animation-delay:-1.1s}
.nl-gift:nth-child(3) .lid{animation-delay:-2.2s}
@keyframes nl-lid{0%,70%,100%{transform:none}78%{transform:translateY(-9px) rotate(-4deg)}86%{transform:none}91%{transform:translateY(-4px) rotate(2deg)}}
.noel .cd-n{color:var(--gold2)}
/* neige posée sur les cases du décompte */
.noel #ouverture .cd-box{position:relative}
.noel #ouverture .cd-box::after{content:"";position:absolute;left:-3px;right:-3px;top:-7px;height:13px;pointer-events:none;
  border-radius:9px 9px 4px 4px;
  background:radial-gradient(circle at 18% 100%,var(--snow) 6px,transparent 6.5px),
             radial-gradient(circle at 52% 90%,var(--snow) 8px,transparent 8.5px),
             radial-gradient(circle at 84% 100%,var(--snow) 6px,transparent 6.5px),
             linear-gradient(var(--snow),var(--snow)) 0 100%/100% 5px no-repeat;opacity:.92}

/* ---------- houx ---------- */
.nl-holly{position:absolute;top:10px;width:clamp(70px,10vw,120px);pointer-events:none;z-index:0;opacity:.85}
.nl-holly.l{left:10px;transform:rotate(-18deg)}
.nl-holly.r{right:10px;transform:scaleX(-1) rotate(-18deg)}
.nl-holly svg{width:100%;height:auto;display:block}
.nl-holly .leaf{fill:#0f4a33}
.nl-holly .leaf.l2{fill:#145c3f}
.nl-holly .vein{fill:none;stroke:rgba(150,220,170,.35);stroke-width:1.2}
.nl-holly .berry{fill:#c4162f}
.nl-holly .shine{fill:#fff;opacity:.55}

/* ---------- neige douce section invitation ---------- */
.nl-flurry{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.nl-fl{position:absolute;top:-12px;left:var(--x,50%);width:var(--s,4px);height:var(--s,4px);border-radius:50%;background:#fff;opacity:0;
  animation:nl-fall var(--d,12s) linear infinite var(--w,0s);will-change:transform}
.nl-fl.gold{background:var(--gold2)}
@keyframes nl-fall{0%{transform:translate(0,0);opacity:0}10%{opacity:.75}90%{opacity:.55}100%{transform:translate(var(--dx,20px),110vh);opacity:0}}
.noel #invitation .wrap,.noel #acces .wrap,.noel #ouverture .wrap{position:relative;z-index:1}

/* ---------- mobile ---------- */
@media(max-width:640px){
  .nl-hint{left:0;right:0;bottom:clamp(76px,12vw,130px);text-align:center}
  .nl-garland{top:58px}
  .nl-hat{width:38px;top:-13px}
  .nl-holly{opacity:.6}
}

/* =====================================================================
   ANIMATIONS D'ENTRÉE
   1) intro plein écran au premier chargement de la session : un cadeau tombe,
      il tremble, le couvercle saute, une gerbe d'étoiles et de flocons jaillit
      et le logo sort de la boîte — clic = passer ;
   2) haut de page qui apparaît en cascade (body.nl-go) ;
   3) sections qui tombent doucement au défilement (.reveal).
   ===================================================================== */
.nl-intro{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 55%,#13283a 0%,#08111b 55%,#040608 100%);transition:opacity .7s ease}
.nl-intro.out{opacity:0}
.nl-intro-skip{position:absolute;bottom:22px;left:0;right:0;z-index:6;text-align:center;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(245,243,238,.6);animation:nl-hint 2.4s ease-in-out infinite}

/* rayons de lumière derrière le cadeau */
.nl-rays{position:absolute;left:50%;top:52%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;z-index:0;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(240,217,154,.16) 0deg 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 55%);mask:radial-gradient(circle,#000 0,transparent 55%);
  animation:nl-rays-in .8s ease-out 1.7s forwards,nl-spin 26s linear 1.7s infinite}
@keyframes nl-rays-in{to{opacity:1}}
@keyframes nl-spin{to{rotate:360deg}}

.nl-pack{position:relative;z-index:2;width:min(56vw,270px);aspect-ratio:1/1.05;container-type:inline-size;
  animation:nl-pack-drop .75s cubic-bezier(.3,1.5,.5,1) both,nl-pack-wiggle .7s ease-in-out .85s 1}
.nl-intro.out .nl-pack{transform:scale(1.2);transition:transform .7s ease}
.nl-pack-box{position:absolute;left:4%;right:4%;bottom:0;height:58%;z-index:3;
  background:linear-gradient(90deg,#8e0f22,#c4162f 30%,#b3122b 70%,#7d0c1d);box-shadow:inset 0 10px 18px -8px rgba(0,0,0,.6)}
.nl-pack-box .rib,.nl-pack-lid .rib{position:absolute;top:0;bottom:0;left:50%;width:14%;margin-left:-7%;
  background:linear-gradient(90deg,#a8822e,#f0d99a 45%,#c99a36)}
.nl-pack-lid{position:absolute;left:0;right:0;bottom:56%;height:15%;z-index:4;
  background:linear-gradient(90deg,#9e0f24,#d21a35 30%,#c4162f 70%,#8a0d1f);
  animation:nl-lid-off .9s cubic-bezier(.25,.8,.4,1) 1.6s both}
.nl-pack-lid .bow{position:absolute;bottom:88%;width:30%;height:62%;border:5cqw solid #e0bd6a;border-radius:50% 50% 10% 50%}
.nl-pack-lid .bow.l{right:50%;transform:rotate(-14deg);transform-origin:100% 100%}
.nl-pack-lid .bow.r{left:50%;border-radius:50% 50% 50% 10%;transform:rotate(14deg);transform-origin:0 100%}
.nl-pack-lid .knot{position:absolute;left:50%;bottom:80%;width:12%;aspect-ratio:1;margin-left:-6%;border-radius:30%;background:#f0d99a}
.nl-pack-logo{position:absolute;left:-30%;right:-30%;bottom:22%;z-index:1;text-align:center;opacity:0;
  transform:translateY(30%) scale(.6);animation:nl-logo-rise 1s cubic-bezier(.25,1.3,.5,1) 1.8s forwards}
.nl-pack-logo svg{width:22cqw;margin:0 auto 3cqw;fill:var(--gold)}
.nl-pack-logo b{display:block;font-family:var(--serif);font-weight:800;font-size:22cqw;line-height:.9;color:#f3efe6;letter-spacing:-.01em}
.nl-pack-logo b span{display:block;background:linear-gradient(180deg,#f0d99a,#d9b45a 60%,#a5842f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nl-pack-logo i{display:block;font-style:normal;font-family:var(--script);font-size:17cqw;line-height:1;color:var(--gold2);margin-top:2cqw;
  text-shadow:0 0 14px rgba(217,180,90,.6)}

/* confettis, flocons et étoiles qui jaillissent */
.nl-conf{position:absolute;left:50%;top:50%;z-index:3;width:var(--s,10px);height:var(--s,10px);margin:-5px 0 0 -5px;opacity:0;
  background:var(--c,#d9b45a);border-radius:2px;animation:nl-conf var(--w,2s) cubic-bezier(.12,.75,.35,1) 1.75s forwards}
.nl-conf.fl,.nl-conf.st{background:none;height:auto}
.nl-conf svg{width:100%;height:auto;display:block}
.nl-conf.fl svg g{fill:none;stroke:#fff;stroke-width:2.6}
.nl-conf.st svg path{fill:var(--c,#f0d99a)}
@keyframes nl-conf{0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}10%{opacity:1}
  75%{opacity:1}100%{opacity:0;transform:translate(var(--tx),calc(var(--ty) + 22vh)) scale(1) rotate(var(--r))}}

@keyframes nl-pack-drop{from{opacity:0;transform:translateY(-70vh) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes nl-pack-wiggle{0%,100%{rotate:0deg}15%{rotate:-6deg}30%{rotate:6deg}45%{rotate:-5deg}60%{rotate:4deg}80%{rotate:-2deg}}
@keyframes nl-lid-off{0%{transform:none}20%{transform:translateY(-12%)}100%{transform:translate(70%,-260%) rotate(38deg);opacity:0}}
@keyframes nl-logo-rise{to{opacity:1;transform:translateY(-80%) scale(1)}}

/* 2) cascade du haut de page */
.noel .hero .reveal{transition:none;transform:none;filter:none}
.noel:not(.nl-go) .hero-inner > *{opacity:0}
.noel.nl-go .hero-inner > *{animation:nl-in-fall .9s cubic-bezier(.25,1,.5,1) both}
.noel.nl-go .hero-inner > .crown{animation:nl-in-drop .9s cubic-bezier(.3,1.6,.5,1) both}
.noel.nl-go .hero-inner > .eyebrow{animation-delay:.15s}
.noel.nl-go .hero-inner > .hero-title{animation-delay:.3s}
.noel.nl-go .hero-inner > .nl-banner{animation:nl-in-write 1.2s ease-out .7s both}
.noel.nl-go .hero-inner > .hero-sub{animation-delay:1.05s}
.noel.nl-go .hero-inner > .cd-mini{animation:nl-in-pop .7s cubic-bezier(.3,1.6,.5,1) 1.25s both}
.noel.nl-go .hero-inner > .hero-cta{animation-delay:1.4s}
.noel.nl-go .hero-inner > .hero-note{animation-delay:1.55s}
.noel:not(.nl-go) .nav,.noel:not(.nl-go) .nl-garland,.noel:not(.nl-go) .nl-bauble{opacity:0}
.noel .nav{transition:opacity .8s ease .2s,transform .8s ease .2s}
.noel:not(.nl-go) .nav{transform:translateY(-20px)}
.noel .nl-garland{transition:opacity 1s ease .4s}
.noel .nl-bauble{transition:opacity .8s ease .9s}
.noel:not(.nl-go) .nl-bauble .str{transform:scaleY(0)}
.nl-bauble .str{transform-origin:top;transition:transform .9s cubic-bezier(.3,1.4,.5,1) .9s}
@keyframes nl-in-fall{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
@keyframes nl-in-drop{from{opacity:0;transform:translateY(-70px)}to{opacity:1;transform:none}}
@keyframes nl-in-write{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 -10% 0 0)}}
@keyframes nl-in-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* 3) sections : elles descendent doucement */
.noel .reveal{transition:opacity .9s ease,transform .9s ease}
.noel h2.reveal{transform:translateY(-24px)}
.noel h2.reveal.in{transform:none}

/* ---------- pause hors écran ---------- */
.nl-hero-off .hero *,.nl-hero-off .hero *::before,.nl-hero-off .hero *::after,
.nl-inv-off .nl-fl{animation-play-state:paused!important}

/* ---------- accessibilité : mouvements réduits ---------- */
@media(prefers-reduced-motion:reduce){
  .nl-intro,.nl-snow,.nl-hint,.nl-burst,.nl-fl{display:none}
  .nl-star,.nl-aurora,.nl-garland .glass,.nl-garland .halo,.nl-bauble,.nl-gift .lid{animation:none!important}
  .nl-garland .glass{opacity:.9}
  .noel .hero-inner > *,.noel .nav,.noel .nl-bauble,.noel .nl-garland{opacity:1!important;animation:none!important;transform:none!important}
  .noel .nl-gifts{opacity:1;transform:none}
}

/* ---------- page invité (/i/…) ---------- */
body.gi.noel{background:radial-gradient(ellipse at 50% 0%,rgba(196,22,47,.18),transparent 60%),var(--bg)}
.gi.noel .gi-crown svg{fill:var(--gold)}

/* ---------- Secret Santa (bloc du décompte) ---------- */
.nl-santa{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:clamp(18px,4vw,44px);align-items:center;text-align:left;
  max-width:760px;margin:10px auto 34px;padding:clamp(20px,3.5vw,34px);border:1px solid rgba(196,22,47,.6);position:relative;
  background:radial-gradient(ellipse 60% 90% at 18% 50%,rgba(196,22,47,.28),transparent 70%),linear-gradient(180deg,#140a0d,#0b0709)}
.nl-santa::before,.nl-santa::after{content:"";position:absolute;width:22px;height:22px;border:1px solid var(--gold)}
.nl-santa::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.nl-santa::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.nl-santa-gift{width:100%;height:auto;overflow:visible}
.nl-santa-gift .body{fill:#b3122b}.nl-santa-gift .body2{fill:#c4162f}
.nl-santa-gift .shade{fill:#000;opacity:.25}
.nl-santa-gift .rib,.nl-santa-gift .bow,.nl-santa-gift .knot{fill:#e0bd6a}
.nl-santa-gift .knot{fill:#f0d99a}
.nl-santa-gift .sparks path{fill:var(--gold2);transform-box:fill-box;transform-origin:center;animation:nl-spark 2.2s ease-in-out infinite}
.nl-santa-gift .sparks path:nth-child(2){animation-delay:-.6s}.nl-santa-gift .sparks path:nth-child(3){animation-delay:-1.2s}
.nl-santa-gift .sparks path:nth-child(4){animation-delay:-1.7s}
@keyframes nl-spark{0%,100%{opacity:.2;transform:scale(.5)}50%{opacity:1;transform:scale(1.1)}}
.nl-santa-gift .shake{transform-box:fill-box;transform-origin:50% 100%;animation:nl-gshake 3.4s ease-in-out infinite}
@keyframes nl-gshake{0%,72%,100%{transform:none}76%{transform:rotate(-4deg)}80%{transform:rotate(4deg)}84%{transform:rotate(-3deg)}88%{transform:rotate(2deg)}92%{transform:none}}
.nl-santa-gift .lid{transform-box:fill-box;transform-origin:50% 100%;animation:nl-glid 3.4s ease-in-out infinite}
@keyframes nl-glid{0%,72%,100%{transform:none}78%{transform:translateY(-14px) rotate(-5deg)}86%{transform:translateY(-6px) rotate(3deg)}92%{transform:none}}
.nl-santa-gift .string{fill:none;stroke:var(--gold2);stroke-width:1.6}
.nl-santa-gift .tag{transform-box:view-box;transform-origin:150px 120px;animation:nl-tag 2.6s ease-in-out infinite}
@keyframes nl-tag{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.nl-santa-gift .label path{fill:#f5efe0;stroke:#c99a36;stroke-width:1.5}
.nl-santa-gift .label .hole{fill:#0b0709}
.nl-santa-gift text{font-family:var(--serif);font-weight:800;font-size:21px;fill:#8e0f22}
.nl-santa-t{font-family:var(--script);font-size:clamp(44px,7vw,64px);line-height:1;color:var(--gold2);margin-bottom:4px}
.nl-santa-d{color:var(--ink);font-size:16px;margin-bottom:16px}
.nl-santa-steps{list-style:none;display:grid;gap:12px}
.nl-santa-steps li{display:flex;align-items:center;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--line2)}
.nl-santa-steps li:last-child{border-bottom:0;padding-bottom:0}
.nl-santa-steps b{flex:0 0 38px;height:38px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:18px;color:#1a0b02;background:var(--gold)}
.nl-santa-steps li:nth-child(2) b{background:var(--red);color:#fff}
.nl-santa-steps li:nth-child(3) b{background:var(--pine);color:var(--gold2)}
.nl-santa-steps span{color:var(--muted);font-size:14px;line-height:1.35}
.nl-santa-steps strong{display:block;color:var(--ink);font-size:16px}
@media(max-width:640px){
  .nl-santa{grid-template-columns:1fr;text-align:center}
  .nl-santa-art{width:170px;margin:0 auto}
  .nl-santa-steps li{text-align:left}
}
@media(prefers-reduced-motion:reduce){.nl-santa-gift *{animation:none!important}}