/* ============================================================
   IL PULITO CHE TI PREMIA — Operazione a premi 2026/0361
   Landing regolamento · www.ilpulitopremia.it
   Palette campionata dal banner ufficiale
   Contrasti verificati WCAG 2.1 AA (vedi note nel progetto)
   ============================================================ */

:root{
  --magenta:      #C30078;
  --magenta-dark: #98005E;
  --magenta-lite: #E0338F;
  --navy:         #293156;
  --sky-strong:   #47A0DA;
  --blue-ink:     #1D6CA0;   /* azzurro testuale: 4.9:1 su sky-pale */
  --sky:          #A4D0EB;
  --sky-pale:     #E4F1F9;
  --ink:          #3A3F5C;
  --white:        #FFFFFF;
  --paper:        #FDFDFB;
  --radius:       22px;
  --shadow:       0 10px 30px rgba(41,49,86,.12);
  --font-display: "Baloo 2","Nunito","Segoe UI",system-ui,sans-serif;
  --font-body:    "Nunito","Segoe UI",system-ui,sans-serif;
  /* grana di carta condivisa (feTurbulence, alpha 4,5%) */
  --grain: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncA type="linear" slope=".045"/></feComponentTransfer></filter><rect width="140" height="140" filter="url(%23n)"/></svg>');
}

*{ box-sizing:border-box; margin:0; padding:0; }

[hidden]{ display:none !important; }

/* solo per screen reader */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

.container{
  max-width:1060px;
  margin:0 auto;
  padding:0 22px;
}

main:focus{ outline:none; }

/* ---------- Accessibilità: skip link e focus ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--navy); color:var(--white);
  padding:10px 18px; z-index:100; border-radius:0 0 12px 0;
}
.skip-link:focus{ left:0; }

a:focus-visible,
.btn:focus-visible{
  outline:3px solid var(--magenta);
  outline-offset:3px;
}
.btn--primary:focus-visible{ outline-color:var(--navy); }
.strip a:focus-visible{ outline-color:var(--white); }
footer a:focus-visible{ outline-color:var(--white); }

/* ---------- Bottoni ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.02em;
  text-decoration:none;
  padding:14px 34px;
  border-radius:999px;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn .ico{
  width:1.15em; height:1.15em;
  margin-right:.55em;
  flex:none;
}
.btn--primary{
  background:var(--magenta);
  color:var(--white);
  box-shadow:0 8px 22px rgba(195,0,120,.35);
}
.btn--primary:hover{
  background:var(--magenta-dark);
  transform:translateY(-2px) scale(1.03);
}
.btn--ghost{
  background:var(--white);
  color:var(--magenta);
  box-shadow:0 6px 18px rgba(41,49,86,.22);
}
.btn--ghost:hover{
  transform:translateY(-2px) scale(1.03);
  color:var(--magenta-dark);
}

/* ---------- Hero ---------- */
.hero{ background:var(--sky); }
.hero__banner{ width:100%; }

.hero--mobile{ display:none; }
.hero--mobile img{ width:100%; }

/* ---------- Strip date + CTA ---------- */
.strip{
  background:var(--magenta);
  color:var(--white);
  padding:18px 0;
}
.strip__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.strip__text{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.12rem;
  margin:6px 22px 6px 0;
}
.strip__text strong{ white-space:nowrap; }
.strip .btn{ margin:6px 0; }

/* ---------- Sezioni ---------- */
.section{ padding:64px 0 58px; }
.section--sky{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, var(--white) 0%, var(--sky-pale) 100%);
}
.section--sky .container{ position:relative; z-index:1; }

.eyebrow{
  font-family:var(--font-body);
  font-weight:800;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue-ink);
  text-align:center;
  margin-bottom:6px;
}
.section__title{
  font-family:var(--font-display);
  font-weight:800;
  color:var(--navy);
  font-size:clamp(1.7rem, 4vw, 2.3rem);
  text-align:center;
  line-height:1.15;
  margin-bottom:36px;
}

/* ---------- Step (lista ordinata: 1-2-3 anche per gli screen reader) ---------- */
.steps{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  margin:0 -11px;
  list-style:none;
  counter-reset:none;
}
.step{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:54px 26px 28px;
  position:relative;
  flex:1 1 280px;
  margin:34px 11px 0;
  max-width:330px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.step:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 38px rgba(41,49,86,.18);
}
.step__num{
  position:absolute;
  top:-27px; left:50%;
  margin-left:-27px;
  width:54px; height:54px;
  border-radius:50%;
  background:var(--magenta);
  color:var(--white);
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.5rem;
  line-height:54px;
  text-align:center;
  box-shadow:0 8px 18px rgba(195,0,120,.35);
}
.step__title{
  font-family:var(--font-display);
  font-weight:800;
  color:var(--magenta);
  font-size:1.25rem;
  text-transform:uppercase;
  text-align:center;
  margin-bottom:10px;
}
.step p{ font-size:.98rem; }
.step .note{
  display:block;
  margin-top:10px;
  font-size:.85rem;
  color:#4E5576;   /* 7.3:1 su bianco */
}
.step address{
  font-style:normal;
  font-weight:700;
  color:var(--navy);
  margin-top:10px;
  font-size:.95rem;
  line-height:1.45;
}

/* ============================================================
   LA BUSTA — "cosa mettere nella busta"
   Foglio in flusso normale (riserva lo spazio finale), busta
   sotto; il foglio rientra nella busta di -100px e la tasca
   frontale lo copre. Stato base = busta aperta con lettera
   fuori (leggibile anche senza JS); lo stato chiuso e la
   coreografia esistono solo sotto html.anim.
   ============================================================ */
.post{
  max-width:640px;
  margin:64px auto 0;
}

/* --- il foglio --- */
.post__paper{
  position:relative;
  z-index:2;
  width:86%;
  margin:0 auto -100px;
  padding:26px 30px 122px;
  background:
    var(--grain),
    /* pieghe della lettera piegata in tre */
    linear-gradient(180deg, rgba(41,49,86,.07), rgba(41,49,86,0) 2px) 0 33%/100% 8px no-repeat,
    linear-gradient(0deg,   rgba(41,49,86,.05), rgba(41,49,86,0) 2px) 0 66%/100% 8px no-repeat,
    linear-gradient(180deg, var(--white) 0%, var(--paper) 60%, #F4F6F3 100%);
  border-radius:6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -20px 26px -22px rgba(41,49,86,.12),
    0 16px 34px rgba(41,49,86,.16);
  transform:rotate(-.4deg);
  transform-origin:bottom center;
}
.letter__head{
  text-align:center;
  font-family:var(--font-display);
  font-weight:800;
  color:var(--navy);
  letter-spacing:.06em;
  font-size:1.05rem;
  text-transform:uppercase;
}
.letter__sub{
  text-align:center;
  font-family:var(--font-body);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.22em;
  color:var(--magenta);
  text-transform:uppercase;
  margin:2px 0 16px;
}
.letter__sub::before{ content:"· "; content:"· " / ""; }
.letter__sub::after{  content:" ·"; content:" ·" / ""; }
.post__paper ul{ list-style:none; }
.post__paper li{
  position:relative;
  padding:12px 0 12px 40px;
  border-top:2px dashed var(--sky-pale);
  font-size:.97rem;
}
.post__paper li::before{
  content:"✓";
  content:"✓" / "";
  position:absolute;
  left:0; top:11px;
  width:26px; height:26px;
  border-radius:8px;
  background:var(--sky-pale);
  color:var(--magenta);
  font-weight:800;
  text-align:center;
  line-height:26px;
}
.letter__foot{
  border-top:2px dashed var(--sky-pale);
  margin-top:2px;
  padding-top:14px;
  text-align:center;
  font-size:.86rem;
  color:var(--navy);
}
.letter__foot strong{ color:var(--magenta); }

/* scintille all'arrivo della lettera (solo con animazioni attive) */
.sparks{
  position:absolute;
  left:0; right:0; top:-8px;
  height:0;
  pointer-events:none;
}
.sparks i{
  position:absolute;
  width:11px; height:11px;
  opacity:0;
  background:var(--magenta);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
}
.sparks i:nth-child(1){ left:10%; top:-4px; }
.sparks i:nth-child(2){ left:30%; top:-14px; width:8px; height:8px; background:var(--sky-strong); }
.sparks i:nth-child(3){ left:52%; top:-6px; }
.sparks i:nth-child(4){ left:72%; top:-16px; width:8px; height:8px; background:var(--sky-strong); }
.sparks i:nth-child(5){ left:90%; top:-5px; width:9px; height:9px; }

/* --- la busta --- */
.post__env{
  position:relative;
  height:0;
  padding-bottom:58%;
}

/* interno busta con pattern di sicurezza (visibile nell'apertura) */
.env__back{
  position:absolute; inset:0;
  z-index:1;
  border-radius:12px;
  background:
    repeating-linear-gradient(45deg, rgba(71,160,218,.17) 0 1.5px, rgba(71,160,218,0) 1.5px 6px),
    linear-gradient(180deg, var(--sky) 0%, var(--sky-pale) 55%, #F3FAFF 100%);
  box-shadow:
    inset 0 16px 24px -14px rgba(41,49,86,.30),
    0 26px 54px rgba(41,49,86,.24);
}

/* ombra portata dalla linguetta mentre si apre */
.env__shade{
  position:absolute; inset:0;
  z-index:2;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(41,49,86,.34), rgba(41,49,86,0) 62%);
  opacity:0;
  pointer-events:none;
}

/* linguetta: due facce nel 3D (carta fuori, azzurro a righe dentro) */
.env__flap{
  position:absolute;
  left:0; right:0; top:0;
  height:56%;
  transform-origin:top center;
  transform-style:preserve-3d;
  z-index:1;                       /* base: aperta, dietro al foglio */
  transform:perspective(1300px) rotateX(-180deg);
}
.env__flap::before,
.env__flap::after{
  content:"";
  position:absolute; inset:0;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  backface-visibility:hidden;
}
.env__flap::before{                /* faccia esterna: carta con grana */
  background:
    var(--grain),
    linear-gradient(200deg, rgba(71,160,218,.10), rgba(71,160,218,0) 45%),
    linear-gradient(180deg, #FFFFFF 0%, #F2F7FC 78%, #E0EBF5 100%);
  border-radius:12px 12px 0 0;
  box-shadow:inset 0 -2px 3px rgba(41,49,86,.06);
}
.env__flap::after{                 /* faccia interna: fodera a righe */
  background:
    repeating-linear-gradient(45deg, rgba(71,160,218,.17) 0 1.5px, rgba(71,160,218,0) 1.5px 6px),
    linear-gradient(180deg, #D5E9F8 0%, var(--sky-pale) 100%);
  transform:rotateX(180deg);
  border-radius:12px 12px 0 0;
}

/* sigillo di ceralacca sulla punta (sparisce ruotando con la linguetta) */
.env__seal{
  position:absolute;
  left:50%; top:100%;
  z-index:2;
  width:48px; height:48px;
  transform:translate(-50%, -56%);
  backface-visibility:hidden;
  border-radius:47% 53% 51% 49% / 52% 48% 52% 48%;
  background:radial-gradient(circle at 34% 28%,
    var(--magenta-lite) 0%, var(--magenta) 48%, var(--magenta-dark) 100%);
  box-shadow:
    0 4px 10px rgba(41,49,86,.30),
    inset 0 2px 4px rgba(255,255,255,.35),
    inset 0 -3px 6px rgba(0,0,0,.22);
}
.env__seal::before{                /* pacchetto in rilievo */
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:18px; height:13px;
  margin:-3px 0 0 -9px;
  background:
    linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)) 50% 0/4px 100% no-repeat,
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35));
  border-radius:1px;
}
.env__seal::after{                 /* fiocco in rilievo */
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:12px; height:5px;
  margin:-9px 0 0 -6px;
  border:2px solid rgba(255,255,255,.85);
  border-bottom:0;
  border-radius:5px 5px 0 0;
}

/* fronte busta con incavo a V (il foglio spunta lì dentro) */
.env__front{
  position:absolute; inset:0;
  z-index:3;
  clip-path:polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
  border-radius:12px;
  background:
    var(--grain),
    linear-gradient(160deg, rgba(71,160,218,.08), rgba(71,160,218,0) 40%),
    linear-gradient(180deg, #FBFDFF 0%, #FFFFFF 45%, #EDF5FB 100%);
}
/* pieghe diagonali della tasca */
.env__front::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(149deg, rgba(41,49,86,0) calc(50% - 2px), rgba(41,49,86,.11) 50%, rgba(41,49,86,0) calc(50% + 2px)) 0 0/50.5% 52.5% no-repeat,
    linear-gradient(-149deg, rgba(41,49,86,0) calc(50% - 2px), rgba(41,49,86,.11) 50%, rgba(41,49,86,0) calc(50% + 2px)) 100% 0/50.5% 52.5% no-repeat;
}
/* bordo "posta aerea" su lati e fondo */
.env__front::after{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  border:7px solid transparent;
  border-top:0;
  border-image:repeating-linear-gradient(45deg,
    var(--magenta) 0 9px, #FFFFFF 9px 18px,
    var(--sky-strong) 18px 27px, #FFFFFF 27px 36px) 7;
  opacity:.85;
}

/* francobollo con fiocco regalo */
.env__stamp{
  position:absolute;
  top:9%; right:5.5%;
  z-index:4;
  width:62px; height:74px;
  padding:5px;
  background:var(--white);
  outline:3px dotted rgba(71,160,218,.5);
  outline-offset:-1px;
  box-shadow:0 3px 8px rgba(41,49,86,.18);
  transform:rotate(4deg);
}
.env__stamp i{
  position:absolute; inset:5px;
  background:linear-gradient(180deg, var(--magenta) 0%, var(--magenta-dark) 100%);
}
.env__stamp i::before{             /* pacchetto */
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:26px; height:19px;
  margin:-6px 0 0 -13px;
  background:
    linear-gradient(#fff,#fff) 50% 0/6px 100% no-repeat,
    linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45));
}
.env__stamp i::after{              /* fiocco */
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:16px; height:7px;
  margin:-14px 0 0 -8px;
  border:2.5px solid #fff;
  border-radius:6px 6px 0 0;
  border-bottom:0;
}
.env__stamp small{
  position:absolute;
  left:0; right:0; bottom:7px;
  text-align:center;
  font:800 8px/1 var(--font-body);
  letter-spacing:.14em;
  color:#fff;
}

/* timbro postale */
.env__postmark{
  position:absolute;
  top:12%; right:calc(5.5% + 66px);
  z-index:4;
  width:72px; height:72px;
  border:2.5px solid rgba(41,49,86,.34);
  border-radius:50%;
  transform:rotate(-14deg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:rgba(41,49,86,.55);
  font-weight:800;
  font-size:.56rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.5;
}
.env__postmark::after{             /* onde di annullo */
  content:"";
  position:absolute;
  left:-46px; top:50%;
  width:40px; height:26px;
  margin-top:-13px;
  background:repeating-linear-gradient(180deg,
    rgba(41,49,86,.30) 0 2px, transparent 2px 8px);
  border-radius:50%/100%;
}

/* indirizzo sul fronte */
.env__addr{
  position:absolute;
  left:8%; bottom:13%;
  z-index:4;
  font-size:.92rem;
  line-height:1.55;
  color:var(--navy);
  transform:rotate(-.5deg);
}
.env__addr strong{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:.02em;
}

/* ---------- Premio ---------- */
.prize__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.prize__text{
  flex:1 1 330px;
  max-width:460px;
  margin:10px 26px;
}
.prize__text .eyebrow,
.prize__text .section__title{ text-align:left; }
.prize__text .section__title{ margin-bottom:14px; }
.prize__media{
  flex:0 1 480px;
  margin:10px 26px;
}
.prize__media img{
  width:100%;
  filter:drop-shadow(0 22px 26px rgba(41,49,86,.22));
}
.prize__note{
  margin-top:14px;
  font-size:.88rem;
  color:#464C6B;   /* 7.3:1 su sky-pale */
}

/* ---------- CTA regolamento ---------- */
.cta{
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:66px 0 74px;
  background:linear-gradient(180deg, var(--sky-pale) 0%, var(--sky) 100%);
}
.cta .container{ position:relative; z-index:1; }
.cta .section__title{ margin-bottom:10px; }
.cta__hint{ margin-bottom:26px; }
.cta .btn{ font-size:1.18rem; padding:17px 42px; }
.cta__meta{
  display:block;
  margin-top:14px;
  font-size:.85rem;
  color:var(--navy);   /* 7.7:1 anche sul fondo più scuro del gradiente */
}

/* ---------- Bolle di sapone ambientali ---------- */
.bubbles{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:0;
}
.bubbles span{
  position:absolute;
  bottom:-70px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 30%,
    rgba(255,255,255,.95), rgba(190,224,246,.35) 55%, rgba(164,208,235,.06) 78%);
  box-shadow:inset 0 0 8px rgba(255,255,255,.65), inset 2px -3px 6px rgba(71,160,218,.18);
  opacity:0;
}
.bubbles span:nth-child(1){ left:8%;  width:26px; height:26px; }
.bubbles span:nth-child(2){ left:24%; width:14px; height:14px; }
.bubbles span:nth-child(3){ left:47%; width:32px; height:32px; }
.bubbles span:nth-child(4){ left:68%; width:18px; height:18px; }
.bubbles span:nth-child(5){ left:86%; width:24px; height:24px; }
.bubbles span:nth-child(6){ left:36%; width:10px; height:10px; }

/* ---------- CTA fissa (appare allo scroll) ---------- */
.sticky-cta{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translate(-50%, 120%);
  opacity:0;
  z-index:60;
  transition:transform .35s ease, opacity .35s ease;
  pointer-events:none;
  max-width:calc(100% - 28px);
}
.sticky-cta .btn{
  box-shadow:0 14px 34px rgba(41,49,86,.38);
  white-space:nowrap;
}
.sticky-cta.is-visible{
  transform:translate(-50%, 0);
  opacity:1;
  pointer-events:auto;
}

/* ---------- Footer note legali ---------- */
.footer{
  background:var(--navy);
  color:rgba(255,255,255,.82);
  padding:44px 0 40px;
  font-size:.83rem;
  line-height:1.65;
}
.footer p{ margin-bottom:14px; }
.footer a{ color:var(--white); font-weight:700; }
.footer .footer__contact{
  font-size:.95rem;
  color:var(--white);
}
.footer .footer__small{
  font-size:.76rem;
  opacity:.75;
  margin-bottom:0;
}

/* ============================================================
   ANIMAZIONI
   La classe .anim è aggiunta da JS solo se IntersectionObserver
   esiste e il sistema non chiede motion ridotto; senza JS la
   pagina resta tutta visibile e la busta è aperta.
   Coreografia busta: entra la busta → si apre la linguetta
   (col sigillo che ruota via) e l'ombra scorre → esce il foglio
   raddrizzandosi in prospettiva → la busta accusa il colpo →
   spunte in sequenza → scintille.
   ============================================================ */

@media (prefers-reduced-motion: no-preference){
  .fade-in{
    opacity:0;
    animation:fadeIn .8s ease .05s forwards;
  }
  @keyframes fadeIn{ to{ opacity:1; } }

  .strip{ overflow:hidden; }
  .strip__inner{ animation:slideUp .7s ease .25s backwards; }
  @keyframes slideUp{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:none; }
  }

  .bubbles span{ animation:bubbleUp 16s linear infinite; }
  .bubbles span:nth-child(1){ animation-duration:15s; animation-delay:-3s; }
  .bubbles span:nth-child(2){ animation-duration:19s; animation-delay:-11s; }
  .bubbles span:nth-child(3){ animation-duration:13s; animation-delay:-6s; }
  .bubbles span:nth-child(4){ animation-duration:21s; animation-delay:-15s; }
  .bubbles span:nth-child(5){ animation-duration:17s; animation-delay:-1s; }
  .bubbles span:nth-child(6){ animation-duration:23s; animation-delay:-9s; }
  @keyframes bubbleUp{
    0%  { transform:translateY(0) translateX(0); opacity:0; }
    8%  { opacity:.55; }
    50% { transform:translateY(-330px) translateX(14px); }
    88% { opacity:.3; }
    100%{ transform:translateY(-660px) translateX(-8px); opacity:0; }
  }
}

/* stato iniziale + arrivo degli elementi .reveal */
.anim .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s ease, transform .7s ease;
}
.anim .reveal.in{ opacity:1; transform:none; }

/* step: arrivo scalato + numero che "salta" dentro */
.anim .steps-reveal .step{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .6s ease, transform .6s ease;
}
.anim .steps-reveal .step:nth-child(2){ transition-delay:.15s; }
.anim .steps-reveal .step:nth-child(3){ transition-delay:.3s; }
.anim .steps-reveal.in .step{ opacity:1; transform:none; }

.anim .steps-reveal .step__num{
  transform:scale(.2);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.anim .steps-reveal .step:nth-child(1) .step__num{ transition-delay:.25s; }
.anim .steps-reveal .step:nth-child(2) .step__num{ transition-delay:.4s; }
.anim .steps-reveal .step:nth-child(3) .step__num{ transition-delay:.55s; }
.anim .steps-reveal.in .step__num{ transform:scale(1); }

/* ------- busta: coreografia completa ------- */
/* 1) entra la busta */
.anim .post .post__env{
  transition:opacity .6s ease, transform .6s ease;
}
.anim .post:not(.in) .post__env{
  opacity:0;
  transform:translateY(34px) scale(.96);
  transition:none;
}

/* 2) la linguetta si apre (z scambiato quando è di taglio) */
.anim .post .env__flap{
  transition:transform .8s cubic-bezier(.55,.06,.35,1) .5s,
             z-index 0s linear .9s;
}
.anim .post:not(.in) .env__flap{
  transform:perspective(1300px) rotateX(0deg);
  z-index:5;
  transition:none;
}

/* …e l'ombra della linguetta scorre via */
@keyframes flapShade{
  0%  { opacity:.55; }
  55% { opacity:.30; }
  100%{ opacity:0; }
}
.anim .post.in .env__shade{ animation:flapShade .85s ease .5s both; }

/* 3) il foglio esce raddrizzandosi in prospettiva */
.anim .post .post__paper{
  transition:transform 1.05s cubic-bezier(.2,.9,.28,1.14) 1.05s,
             opacity .45s ease 1.05s;
}
.anim .post:not(.in) .post__paper{
  opacity:0;
  transform:perspective(900px) rotateX(12deg) translateY(46%) scale(.6) rotate(2deg);
  transition:none;
}

/* 4) la busta accusa il colpo quando il foglio esce */
@keyframes envKick{
  0%{ transform:translateY(0); }
  45%{ transform:translateY(5px); }
  100%{ transform:translateY(0); }
}
.anim .post.in .env__back{ animation:envKick .55s ease 1.15s; }

/* 5) voci della lettera in sequenza */
.anim .post .post__paper li{
  opacity:0;
  transform:translateX(-12px);
  transition:opacity .45s ease, transform .45s ease;
}
.anim .post .post__paper li:nth-child(1){ transition-delay:1.7s; }
.anim .post .post__paper li:nth-child(2){ transition-delay:1.85s; }
.anim .post .post__paper li:nth-child(3){ transition-delay:2s; }
.anim .post.in .post__paper li{ opacity:1; transform:none; }
.anim .post .post__paper li::before{
  transform:scale(0);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.anim .post .post__paper li:nth-child(1)::before{ transition-delay:1.85s; }
.anim .post .post__paper li:nth-child(2)::before{ transition-delay:2s; }
.anim .post .post__paper li:nth-child(3)::before{ transition-delay:2.15s; }
.anim .post.in .post__paper li::before{ transform:scale(1); }

/* 6) scintille finali, una volta sola */
@keyframes sparkPop{
  0%  { opacity:0; transform:scale(0) rotate(0deg); }
  35% { opacity:1; transform:scale(1) rotate(25deg) translateY(-6px); }
  100%{ opacity:0; transform:scale(.25) rotate(60deg) translateY(-20px); }
}
.anim .post.in .sparks i{ animation:sparkPop .75s ease both; }
.anim .post.in .sparks i:nth-child(1){ animation-delay:2.05s; }
.anim .post.in .sparks i:nth-child(2){ animation-delay:2.12s; }
.anim .post.in .sparks i:nth-child(3){ animation-delay:2.19s; }
.anim .post.in .sparks i:nth-child(4){ animation-delay:2.26s; }
.anim .post.in .sparks i:nth-child(5){ animation-delay:2.33s; }

/* premio: entra da destra, poi fluttua */
.anim .prize__media{
  opacity:0;
  transform:translateX(40px);
  transition:opacity .7s ease, transform .7s ease;
}
.anim .prize__media.in{ opacity:1; transform:none; }
@keyframes floaty{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-12px); }
}
.anim .prize__media.in img{
  animation:floaty 5.5s ease-in-out 1s infinite;
}

/* CTA finale: anello pulsante per invitare al download */
@keyframes pulseRing{
  0%{   box-shadow:0 8px 22px rgba(195,0,120,.35), 0 0 0 0 rgba(195,0,120,.45); }
  70%{  box-shadow:0 8px 22px rgba(195,0,120,.35), 0 0 0 18px rgba(195,0,120,0); }
  100%{ box-shadow:0 8px 22px rgba(195,0,120,.35), 0 0 0 0 rgba(195,0,120,0); }
}
.anim .btn--pulse{ animation:pulseRing 2.6s ease-out .8s infinite; }

/* icona della CTA fissa che ondeggia appena */
@keyframes bob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(2px); }
}
.anim .sticky-cta.is-visible .ico{ animation:bob 1.7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .anim .reveal, .anim .steps-reveal .step, .anim .post .post__paper,
  .anim .post .post__paper li, .anim .prize__media, .anim .post .post__env{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .anim .post .env__flap{ transform:perspective(1300px) rotateX(-180deg) !important; z-index:1 !important; }
  .anim .btn--pulse, .anim .prize__media.in img,
  .anim .post.in .env__back, .anim .post.in .env__shade,
  .anim .post.in .sparks i, .bubbles span,
  .anim .sticky-cta.is-visible .ico{ animation:none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .hero--desktop{ display:none; }
  .hero--mobile{ display:block; }
  .strip__inner{ justify-content:center; text-align:center; }
  .strip__text{ margin-right:0; }
  .section{ padding:52px 0 46px; }
  .prize__text .eyebrow,
  .prize__text .section__title{ text-align:center; }
  .prize__text{ order:2; }
  .prize__media{ order:1; margin-bottom:6px; }
  .sticky-cta .btn{ font-size:.98rem; padding:13px 26px; }
}

@media (max-width:560px){
  .post__paper{
    width:92%;
    margin-bottom:-74px;
    padding:22px 20px 96px;
  }
  .post__env{ padding-bottom:64%; }
  .env__seal{ width:40px; height:40px; }
  .env__stamp{ width:50px; height:60px; top:7%; right:4.5%; }
  .env__stamp i::before{ width:20px; height:15px; margin:-4px 0 0 -10px; }
  .env__stamp i::after{ width:12px; height:6px; margin:-11px 0 0 -6px; }
  .env__addr{ font-size:.78rem; bottom:10%; }
  .env__postmark{ width:56px; height:56px; right:calc(4.5% + 54px); font-size:.5rem; }
  .env__postmark::after{ display:none; }
}