/* ============================================================
   LA CABINA DEL SELFIE
   Scheletro: «il tavolo delle stampe»
   Firma:     «la stampa che esce»
   Palette campionata dal logo del cliente.
   Si animano solo transform, opacity e clip-path.
   ============================================================ */

@font-face{font-family:'Young Serif';src:url('font/young-serif-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Schibsted';src:url('font/schibsted-grotesk.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --petrolio:#102A37;
  --petrolio-alto:#16394A;
  --petrolio-fondo:#0A1B24;
  --corallo:#F74A3A;
  --corallo-scuro:#D33726;
  --menta:#B2DAD2;
  --menta-cupa:#7FB3AA;
  --carta:#EEF5F2;
  --carta-cupa:#E3EDE9;
  --crema:#FFFDF2;
  --inchiostro:#13252D;
  --testo-corpo:#2B3F49;
  --grigio:#5B6F78;
  --bianco:#FFFFFF;

  --titolo:'Young Serif',Georgia,'Times New Roman',serif;
  --testo:'Schibsted',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --max:1180px;
  --curva:cubic-bezier(.16,1,.3,1);

  /* ombre a strati: una stampa appoggiata su un tavolo non ha una sola ombra */
  --ombra:
    0 1px 2px rgba(16,42,55,.06),
    0 6px 12px -6px rgba(16,42,55,.16),
    0 22px 46px -26px rgba(16,42,55,.42);
  --ombra-alta:
    0 2px 4px rgba(16,42,55,.07),
    0 12px 24px -8px rgba(16,42,55,.20),
    0 40px 70px -32px rgba(16,42,55,.50);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px;overflow-x:clip}
body{
  margin:0;
  background:var(--carta);
  color:var(--inchiostro);
  font-family:var(--testo);
  font-size:17px;
  line-height:1.62;
  overflow-x:clip;
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(178,218,210,.22) 0%, transparent 58%),
    radial-gradient(rgba(16,42,55,.05) 1px, transparent 1px);
  background-size:100% 1400px, 24px 24px;
  background-attachment:scroll, scroll;
}

/* grana leggera: toglie la piattezza del digitale senza pesare */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--titolo);font-weight:400;line-height:1.1;letter-spacing:-.012em;margin:0}
p{margin:0 0 .7em}
p:last-child{margin-bottom:0}

.salta{position:absolute;left:-9999px;top:0;background:var(--corallo);color:#fff;padding:.7rem 1.1rem;z-index:220}
.salta:focus{left:.5rem;top:.5rem}
:focus-visible{outline:3px solid var(--corallo);outline-offset:3px;border-radius:4px}

.contenitore{width:min(100% - 2.4rem,var(--max));margin-inline:auto;position:relative;z-index:2}
.contenitore--stretto{width:min(100% - 2.4rem,660px)}

/* parole che salgono: preparate dal JS */
.su{display:inline-block;overflow:hidden;vertical-align:bottom}
.su>i{display:inline-block;font-style:inherit;transform:translateY(105%);will-change:transform}
.dentro .su>i,.su.mostra>i{transform:translateY(0);transition:transform .8s var(--curva)}

/* ─────────── LO SFONDO: macchine fotografiche e coriandoli ───────────
   Devono essere l'ultima cosa che si nota: opacità bassissima, nessun
   contorno netto, e si muovono più lentamente della pagina. */
.sfondo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.segno{position:absolute;display:block;color:var(--petrolio);opacity:.055;will-change:transform}
.segno svg{width:100%;height:auto;display:block}
.coriandolo{position:absolute;display:block;border-radius:2px;opacity:.12;will-change:transform}

/* ─────────── AVANZAMENTO E INDICE ─────────── */
.avanzamento{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:transparent;pointer-events:none}
.avanzamento span{
  display:block;height:100%;width:100%;background:var(--corallo);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
}
.indice{
  position:fixed;right:clamp(.5rem,1.4vw,1.1rem);top:50%;transform:translateY(-50%);
  z-index:55;display:flex;flex-direction:column;gap:.7rem;align-items:flex-end;
}
.indice a{
  display:flex;align-items:center;gap:.5rem;text-decoration:none;
  color:var(--grigio);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
}
.indice a::before{
  content:attr(data-eti);opacity:0;transform:translateX(6px);
  transition:opacity .3s ease,transform .3s var(--curva);white-space:nowrap;
}
.indice a span{
  width:7px;height:7px;border-radius:50%;background:rgba(16,42,55,.22);
  transition:transform .35s var(--curva),background-color .3s ease;
}
.indice a:hover::before,.indice a:focus-visible::before{opacity:1;transform:translateX(0)}
.indice a:hover span{background:var(--grigio)}
.indice a.qui span{background:var(--corallo);transform:scale(1.75)}
.indice.su-scuro a{color:rgba(255,253,242,.6)}
.indice.su-scuro a span{background:rgba(255,253,242,.28)}
.indice.su-scuro a.qui span{background:var(--corallo)}

/* ─────────── TESTATA ─────────── */
.testata{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem clamp(.9rem,3vw,1.6rem);
  background:rgba(16,42,55,.86);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  color:var(--crema);
  border-bottom:1px solid rgba(178,218,210,0);
  transition:padding .35s var(--curva),border-color .35s ease,background-color .35s ease;
}
.testata.rimpicciolita{padding-block:.4rem;border-bottom-color:rgba(178,218,210,.16)}
.marchio{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:700;letter-spacing:.005em;font-size:.95rem}
.marchio img{border-radius:50%;width:42px;height:42px;transition:width .35s var(--curva),height .35s var(--curva)}
.testata.rimpicciolita .marchio img{width:34px;height:34px}
.marchio span{color:var(--crema)}

/* ─────────── BOTTONI ─────────── */
.bottone{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  background:var(--corallo);color:#fff;
  font-weight:700;font-size:1rem;line-height:1.15;
  padding:.88rem 1.45rem;border-radius:999px;
  text-decoration:none;border:2px solid var(--corallo);
  overflow:hidden;isolation:isolate;
  box-shadow:0 8px 20px -10px rgba(247,74,58,.8);
  transition:transform .3s var(--curva),box-shadow .3s ease,border-color .25s ease;
  will-change:transform;
}
.bottone::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--corallo-scuro);
  transform:translateY(101%);transition:transform .38s var(--curva);
}
.bottone:hover{transform:translateY(-3px);box-shadow:0 16px 30px -12px rgba(247,74,58,.75)}
.bottone:hover::before{transform:translateY(0)}
.bottone:active{transform:translateY(-1px) scale(.985)}
.bottone::after{
  content:"→";font-family:var(--testo);font-weight:400;
  transform:translateX(-3px);opacity:.75;transition:transform .35s var(--curva),opacity .3s ease;
}
.bottone:hover::after{transform:translateX(2px);opacity:1}
.bottone--piccolo{padding:.5rem 1rem;font-size:.88rem;box-shadow:none}
.bottone--vuoto{background:transparent;color:var(--menta);border-color:rgba(178,218,210,.42);box-shadow:none}
.bottone--vuoto::before{background:rgba(178,218,210,.14)}
.bottone--vuoto:hover{border-color:var(--menta);color:var(--crema);box-shadow:none}
.bottone--grande{padding:1.1rem 2.2rem;font-size:1.08rem}
.bottone--largo{display:flex;justify-content:center;width:100%}

/* ─────────── BANDE SCURE: lastre appoggiate sul tavolo ─────────── */
.banda-scura{
  background:
    radial-gradient(90% 120% at 72% 8%, rgba(178,218,210,.14) 0%, transparent 55%),
    linear-gradient(180deg, var(--petrolio-alto) 0%, var(--petrolio) 42%, var(--petrolio-fondo) 100%);
  color:var(--crema);position:relative;isolation:isolate;overflow:hidden;
}
.banda-scura::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,253,242,.05) 1px, transparent 1px);
  background-size:26px 26px;
}
.banda-scura>*{position:relative;z-index:2}
.banda-scura h2,.banda-scura h1{color:var(--crema)}

.sezione-cornice,.sezione-contatti{
  width:min(100% - 1.8rem,1360px);margin-inline:auto;border-radius:30px;
  box-shadow:var(--ombra-alta);
}
.apertura{border-radius:0 0 34px 34px}

.marchio-grande{margin:0 0 clamp(.9rem,2vw,1.4rem)}
.marchio-grande img{
  width:min(100%,300px);height:auto;border-radius:14px;
  border:1px solid rgba(178,218,210,.16);
  box-shadow:0 1px 0 rgba(255,253,242,.06) inset, 0 26px 50px -24px rgba(0,0,0,.78);
}
.apertura-testo .occhiello{max-width:64ch;margin-top:.9rem}
.titolo-grande{font-size:clamp(1.9rem,3.6vw,2.75rem);letter-spacing:-.012em}
.titolo-grande em{font-style:normal;color:var(--menta)}
.titolo-medio{font-size:clamp(1.7rem,4vw,2.6rem);max-width:24ch}
.sezione-cornice .titolo-medio,.sezione-contatti .titolo-medio{margin-inline:auto;text-align:center}
.occhiello{color:rgba(255,253,242,.8);font-size:clamp(1rem,1.8vw,1.1rem);margin-top:1.1rem;max-width:48ch}
.occhiello--stretto{margin-inline:auto;text-align:center;max-width:62ch}
.azioni{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
.azioni--centro{justify-content:center}

/* ─────────── 1 · APERTURA E LA FIRMA ─────────── */
.apertura{min-height:0}
.apertura-scena{position:relative;min-height:calc(87svh - 66px);display:flex;align-items:center;padding:clamp(1.3rem,2.6vh,2rem) 0 clamp(1.8rem,3.4vh,2.5rem);overflow:hidden}
.apertura-griglia{
  width:min(100% - 2.4rem,var(--max));margin-inline:auto;
  display:grid;grid-template-columns:1fr 1fr;
  grid-template-areas:"logo stampa" "testo stampa";
  column-gap:clamp(1.4rem,3vw,2.6rem);row-gap:0;align-items:center;
}
.marchio-grande{grid-area:logo;align-self:end;position:relative;z-index:3}
.apertura-testo{grid-area:testo;align-self:start;position:relative;z-index:3}
.stampante{grid-area:stampa}
.titolo-grande .riga{display:block;overflow:hidden}

/* la stampante */
.stampante{position:relative;display:flex;flex-direction:column;align-items:center}
.stampante::before{
  content:"";position:absolute;left:50%;top:-14%;width:135%;height:130%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side, rgba(178,218,210,.20), transparent 72%);
}
.stampante-corpo{
  width:min(100%,640px);height:78px;border-radius:14px 14px 6px 6px;
  background:linear-gradient(180deg,#25485A 0%,#183341 58%,#0D242F 100%);
  box-shadow:
    inset 0 1px 0 rgba(178,218,210,.32),
    inset 0 -8px 14px -10px rgba(0,0,0,.9),
    0 18px 34px -18px rgba(0,0,0,.85);
  position:relative;z-index:3;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;
}
.stampante-spia{
  position:absolute;top:13px;right:18px;width:7px;height:7px;border-radius:50%;
  background:var(--corallo);box-shadow:0 0 12px var(--corallo);
  animation:pulsa 2.4s ease-in-out infinite;
}
@keyframes pulsa{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.42;transform:scale(.82)}}
.feritoia{
  display:block;width:78%;height:12px;border-radius:3px;
  background:linear-gradient(180deg,#04121A 0%,#0B2029 100%);
  box-shadow:inset 0 3px 5px rgba(0,0,0,.95),0 1px 0 rgba(178,218,210,.22);
}
.foglio-vano{width:min(100%,640px);overflow:hidden;position:relative;z-index:2;margin-top:-5px}
.foglio{
  position:relative;transform:translate3d(0,-100%,0);will-change:transform;
  background:#fff;padding:8px 8px 10px;border-radius:3px;
  box-shadow:0 26px 46px -20px rgba(0,0,0,.85);
  contain:layout paint;
}
.foglio .strato{width:100%;display:block;border-radius:1px}
.foglio .strato--ym,.foglio .strato--pieno{position:absolute;inset:8px 8px 10px;width:calc(100% - 16px);height:auto}
.foglio .strato--ym{clip-path:inset(0 0 100% 0);will-change:clip-path;backface-visibility:hidden}
.foglio .strato--pieno{clip-path:inset(0 0 100% 0);will-change:clip-path;backface-visibility:hidden}
.lucido{
  position:absolute;inset:8px 8px 10px;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.85) 50%,transparent 64%);
  transform:translate3d(-110%,0,0);will-change:transform,opacity;
}
.passata{
  margin-top:1.2rem;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(178,218,210,.75);min-height:1.2em;display:flex;align-items:center;gap:.6rem;
}
.passata::before{content:"";width:26px;height:1px;background:rgba(178,218,210,.4)}
.passata .js-passata{color:var(--corallo);font-weight:700}

/* l'invito a scorrere: chiude il fondo della schermata invece di lasciarlo vuoto */
.invito{
  position:absolute;left:50%;bottom:clamp(.7rem,1.8vh,1.4rem);transform:translateX(-50%);
  margin:0;display:flex;align-items:center;gap:.65rem;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(178,218,210,.55);white-space:nowrap;
  transition:opacity .4s ease;
}
.invito-riga{
  display:block;width:34px;height:1px;background:rgba(178,218,210,.45);position:relative;overflow:hidden;
}
.invito-riga::after{
  content:"";position:absolute;inset:0;background:var(--corallo);
  transform:translateX(-100%);animation:scorriRiga 2.6s ease-in-out infinite;
}
@keyframes scorriRiga{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.apertura-scena.via .invito{opacity:0}

/* ─────────── LE STAMPE APPOGGIATE SUL PIANO ─────────── */
.fascia{padding:clamp(2.2rem,4vw,3.6rem) 0;position:relative;z-index:2}
.fascia--stretta{padding-block:clamp(1.8rem,3.2vw,2.6rem)}
.fascia--senza-fondo{padding-bottom:.9rem}

.foglio-scheda{
  width:min(100% - 2.4rem,640px);
  background:var(--bianco);
  border-radius:5px;
  box-shadow:var(--ombra);
  padding:clamp(1.6rem,3.4vw,2.5rem) clamp(1.5rem,3.2vw,2.5rem) 0;
  position:relative;
  transition:transform .55s var(--curva),box-shadow .45s ease;
}
.foglio-scheda[data-n]::before{
  content:attr(data-n);
  position:absolute;top:clamp(1.1rem,2.4vw,1.7rem);right:clamp(1.2rem,3vw,2.2rem);
  font-family:var(--titolo);font-size:.9rem;color:var(--menta-cupa);
  letter-spacing:.06em;
}
.foglio-scheda--sx{margin-left:max(1.2rem,calc((100vw - var(--max))/2));margin-right:auto}
.foglio-scheda--dx{margin-right:max(1.2rem,calc((100vw - var(--max))/2));margin-left:auto}
.foglio-scheda--pieno{margin-inline:0;width:100%}
.foglio-scheda--largo{
  width:min(100% - 2.4rem,var(--max));margin-inline:auto;
  padding-inline:clamp(1.5rem,4vw,3rem);
}
.foglio-scheda--largo .foglio-corpo h2{max-width:none}
.foglio-scheda--largo .faq details p{max-width:none}
.ruota-sx{transform:rotate(-1.1deg)}
.ruota-dx{transform:rotate(1.1deg)}

.foglio-corpo h2{font-size:clamp(1.5rem,3.1vw,2.15rem);margin-bottom:.85rem;max-width:20ch}
.foglio-corpo p{color:var(--testo-corpo);max-width:56ch}
.foglio-piede{
  margin-top:1.6rem;padding:.8rem 0 1.15rem;
  border-top:1px solid rgba(16,42,55,.09);
  font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--grigio);
  display:flex;align-items:center;gap:.6rem;
}
.foglio-piede::before{content:"";width:18px;height:1px;background:var(--menta-cupa);flex:0 0 auto}

.passi{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.passi li{display:flex;gap:.9rem;align-items:flex-start;color:var(--testo-corpo)}
.passi span{
  flex:0 0 auto;width:29px;height:29px;border-radius:50%;
  background:var(--petrolio);color:var(--menta);
  font-family:var(--titolo);font-size:.92rem;
  display:grid;place-items:center;margin-top:1px;
  box-shadow:0 6px 12px -6px rgba(16,42,55,.6);
}
.targhette{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:1.2rem 0 0;padding:0}
.targhette li{
  font-size:.78rem;letter-spacing:.05em;padding:.32rem .78rem;border-radius:999px;
  background:var(--carta);color:var(--testo-corpo);border:1px solid rgba(16,42,55,.09);
  transition:transform .3s var(--curva),background-color .3s ease,color .3s ease;
}
.targhette li:hover{transform:translateY(-2px);background:var(--petrolio);color:var(--menta);border-color:transparent}

/* ─────────── MEDIA: coppie, griglie, video ─────────── */
.coppia,.griglia-cornici,.nastro-video{
  width:min(100% - 2.4rem,var(--max));margin:clamp(1.1rem,2.2vw,1.7rem) auto 0;
  display:grid;gap:clamp(.7rem,1.5vw,1.05rem);
  position:relative;
}
/* l'alone dietro le foto: toglie il grigiore senza aggiungere elementi */
.coppia::before,.due-colonne::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-6%;right:-6%;top:-8%;bottom:-8%;
  background:
    radial-gradient(46% 60% at 22% 34%, rgba(178,218,210,.55), transparent 70%),
    radial-gradient(42% 56% at 82% 68%, rgba(247,74,58,.14), transparent 72%);
}
/* più contenute: a tutta larghezza erano due lastroni */
.coppia{grid-template-columns:1fr 1fr;width:min(100% - 2.4rem,920px)}
.griglia-cornici{grid-template-columns:repeat(2,1fr)}
.nastro-video{grid-template-columns:repeat(3,1fr)}

/* ─────────── LA GALLERIA DI UNA FESTA SOLA ───────────
   Tre per riga su desktop, due su telefono: mai una foto sola in mezzo a una
   riga vuota. Il 5:4 è voluto diverso dal 3:2 della griglia delle cornici —
   quelle sono STAMPE, queste sono FOTOGRAFIE della festa. */
.griglia-festa{
  width:min(100% - 2.4rem,var(--max));margin:clamp(1.1rem,2.2vw,1.7rem) auto 0;
  display:grid;gap:clamp(.7rem,1.5vw,1.05rem);
  grid-template-columns:repeat(3,1fr);position:relative;
}
.griglia-festa figure{
  margin:0;background:#fff;padding:8px;border-radius:5px;box-shadow:var(--ombra);
  overflow:hidden;position:relative;cursor:zoom-in;
  transition:transform .5s var(--curva),box-shadow .45s ease;
}
.griglia-festa figure:hover{transform:translateY(-6px);box-shadow:var(--ombra-alta)}
.griglia-festa img{width:100%;aspect-ratio:5/4;height:auto;object-fit:cover;border-radius:2px;display:block}
.griglia-festa figcaption{
  padding:.55rem .2rem .2rem;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grigio);
}

.coppia figure,.griglia-cornici figure,.clip,.foto-alta{
  margin:0;background:#fff;padding:9px;border-radius:5px;box-shadow:var(--ombra);
  overflow:hidden;position:relative;
  transition:transform .5s var(--curva),box-shadow .45s ease;
}
.coppia figure:hover,.griglia-cornici figure:hover,.clip:hover,.foto-alta:hover{
  transform:translateY(-6px);box-shadow:var(--ombra-alta);
}

/* il rivelo: la foto si scopre dall'alto come una stampa che esce */
.coppia figure.compare img,.foto-alta.compare img{clip-path:inset(0 0 100% 0)}
.coppia figure.compare.dentro img,.foto-alta.compare.dentro img{
  clip-path:inset(0 0 0 0);transition:clip-path 1s var(--curva) .08s;
}
/* i mirini di registro, come sul foglio di stampa */
.coppia figure::before,.foto-alta::before{
  content:"";position:absolute;left:16px;top:16px;width:24px;height:24px;z-index:4;
  border-left:2px solid var(--corallo);border-top:2px solid var(--corallo);
  opacity:0;transform:translate(7px,7px);pointer-events:none;
  transition:opacity .35s ease,transform .5s var(--curva);
}
.coppia figure:hover::before,.foto-alta:hover::before{opacity:.9;transform:translate(0,0)}
.coppia img,.foto-alta img{border-radius:2px;transform:scale(1.09);will-change:transform}
.griglia-cornici img{border-radius:2px}
.coppia img{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover}
.griglia-cornici img{width:100%}
.foto-alta img{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover}
.griglia-cornici figcaption,.clip figcaption{
  padding:.65rem .25rem .3rem;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--grigio);
}
.clip video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:2px;background:var(--petrolio)}

/* l'unico comando sul video è l'audio */
.audio{
  position:absolute;right:15px;bottom:58px;z-index:5;
  display:inline-flex;align-items:center;gap:.4rem;
  border:0;cursor:pointer;font:inherit;font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--crema);background:rgba(16,42,55,.78);
  padding:.5rem;border-radius:50%;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .25s ease,transform .3s var(--curva);
}
.audio:hover{background:var(--corallo);transform:translateY(-2px)}
.audio-icona{width:14px;height:14px;flex:0 0 auto}
.audio-testo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* la lente che compare sul media apribile */
[data-luce]{cursor:zoom-in}
[data-luce]::after{
  content:"";position:absolute;top:16px;left:16px;width:34px;height:34px;border-radius:50%;
  background:rgba(16,42,55,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23FFFDF2' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4M7 5v4M5 7h4'/%3E%3C/svg%3E") center/16px no-repeat;
  opacity:0;transform:scale(.7);pointer-events:none;
  transition:opacity .3s ease,transform .4s var(--curva);
}
[data-luce]:hover::after{opacity:1;transform:scale(1)}
.stampa-foto[data-luce]::after{top:20px;left:20px}

.due-colonne{width:min(100% - 2.4rem,var(--max));margin-inline:auto;display:grid;grid-template-columns:1fr .78fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:center;position:relative}
.foto-alta{transform:rotate(-1.4deg)}
.foto-alta:hover{transform:rotate(-1.4deg) translateY(-6px)}

/* ─────────── 4 · IL CONFIGURATORE ─────────── */
.sezione-cornice{padding:clamp(2.8rem,5vw,4.4rem) 0}
.cornice-esempio{
  margin-top:clamp(1.8rem,3.6vw,2.8rem);
  display:grid;place-items:center;
}
.stampa-finta{
  width:min(100%,540px);background:#fff;padding:13px 13px 0;border-radius:5px;
  box-shadow:0 34px 60px -26px rgba(0,0,0,.8);transform:rotate(-1.3deg);
  transition:transform .5s var(--curva);
}
@keyframes sbalzo{0%{transform:rotate(-1.3deg) scale(1)}40%{transform:rotate(-1.3deg) scale(1.025)}100%{transform:rotate(-1.3deg) scale(1)}}
.stampa-foto{position:relative;overflow:hidden;border-radius:2px}
.stampa-foto img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
/* la passata di lucidatura che riparte a ogni cambio di stile */
.stampa-foto::before{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%);
  transform:translateX(-110%);
}
.stampa-in-corso .stampa-foto::before{animation:passa .6s ease-out}
@keyframes passa{0%{opacity:1;transform:translateX(-110%)}100%{opacity:0;transform:translateX(110%)}}
.stampa-didascalia{padding:.8rem .25rem 1.05rem;text-align:center}
.stampa-data{display:block;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grigio)}
.stampa-nomi{display:block;font-family:var(--titolo);font-size:clamp(1.3rem,2.6vw,1.75rem);color:var(--inchiostro);margin-top:.2rem;word-break:break-word}

.deco{position:absolute;pointer-events:none;transition:opacity .4s ease,transform .5s var(--curva);z-index:3}
.deco-1{top:0;left:0}.deco-2{top:0;right:0}.deco-3{bottom:0;left:0}.deco-4{bottom:0;right:0}
.stampa-finta[data-stile="origami"] .deco{width:23%;height:23%;opacity:1;
  background:conic-gradient(from 45deg,#E8593F 0 25%,#3E8FB0 0 50%,#79B04A 0 75%,#F0B429 0 100%);
  clip-path:polygon(0 0,100% 0,0 100%);}
.stampa-finta[data-stile="origami"] .deco-2{clip-path:polygon(100% 0,100% 100%,0 0)}
.stampa-finta[data-stile="origami"] .deco-3{clip-path:polygon(0 0,0 100%,100% 100%)}
.stampa-finta[data-stile="origami"] .deco-4{clip-path:polygon(100% 0,100% 100%,0 100%)}
.stampa-finta[data-stile="origami"] .stampa-foto{box-shadow:inset 0 0 0 11px #FDF6DF}

.stampa-finta[data-stile="eucalipto"] .deco{width:33%;height:31%;opacity:1;
  background:radial-gradient(ellipse at 30% 30%,#8FAE87 0 34%,transparent 35%),
             radial-gradient(ellipse at 62% 55%,#6E9469 0 26%,transparent 27%),
             radial-gradient(ellipse at 20% 70%,#A8C3A0 0 22%,transparent 23%);}
.stampa-finta[data-stile="eucalipto"] .stampa-foto{box-shadow:inset 0 0 0 13px #FFFFFF, inset 0 0 0 15px #DDE7DA}
.stampa-finta[data-stile="eucalipto"] .stampa-nomi{color:#5C7A55}

.stampa-finta[data-stile="oro"] .deco{width:42%;height:35%;opacity:1;
  background:radial-gradient(circle at 22% 28%,#D4A536 0 3.5%,transparent 4%),
             radial-gradient(circle at 55% 15%,#E7C264 0 2.5%,transparent 3%),
             radial-gradient(circle at 78% 46%,#D4A536 0 3%,transparent 3.5%),
             radial-gradient(circle at 35% 62%,#B8892A 0 2%,transparent 2.5%),
             radial-gradient(circle at 66% 74%,#E7C264 0 3%,transparent 3.5%);}
.stampa-finta[data-stile="oro"] .stampa-foto{box-shadow:inset 0 0 0 12px #12232B}
.stampa-finta[data-stile="oro"] .stampa-nomi{color:#B8892A}
.stampa-finta[data-stile="oro"] .stampa-didascalia{background:#12232B;margin:0 -13px;padding-inline:13px}
.stampa-finta[data-stile="oro"] .stampa-data{color:#8FA3AC}

/* ─────────── 8 · PACCHETTI ─────────── */
.griglia-pacchetti{
  width:min(100% - 2.4rem,var(--max));margin:clamp(1.1rem,2.2vw,1.7rem) auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.3vw,1rem);
}
.pacchetto{
  background:#fff;border-radius:5px;padding:1.6rem 1.3rem 1.4rem;box-shadow:var(--ombra);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .5s var(--curva),box-shadow .45s ease;
}
.pacchetto::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--menta);
  transform:scaleX(.32);transform-origin:0 50%;transition:transform .55s var(--curva);
}
.pacchetto:hover{transform:translateY(-8px);box-shadow:var(--ombra-alta)}
.pacchetto:hover::before{transform:scaleX(1)}
.pacchetto--su-misura{background:var(--petrolio);color:var(--crema)}
.pacchetto--su-misura::before{background:var(--corallo)}
.pacchetto-ore{font-family:var(--titolo);font-size:1.4rem;line-height:1.12;margin-bottom:.12em}
.pacchetto-foto{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--corallo-scuro);margin-bottom:.85em}
.pacchetto--su-misura .pacchetto-foto{color:var(--menta)}
.pacchetto-testo{font-size:.95rem;color:var(--testo-corpo)}
.pacchetto--su-misura .pacchetto-testo{color:rgba(255,253,242,.78)}
.pacchetto-link{margin-top:auto;padding-top:1rem;font-weight:700;color:var(--corallo);text-decoration:none;display:inline-flex;gap:.35rem}
.pacchetto-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ─────────── 9 · IL NASTRO CHE NON SI FERMA MAI ─────────── */
.nastro{
  overflow:hidden;padding:1rem 0 clamp(1.8rem,3.4vw,2.6rem);position:relative;z-index:2;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
/* I riquadri sono 24 (10 del Ferragosto già in pagina + 10 nuovi dello stesso
   Ferragosto + 4 del matrimonio del 14 giugno). Pista = 24 x (200px + 14,4px di
   gap) = 5146px. A 86s la velocità resta quella di prima, ~60 px/s: se si
   aggiungono o tolgono riquadri va rifatto il conto, se no il nastro cambia passo. */
.nastro-pista{display:flex;width:max-content;animation:scorri 86s linear infinite}
.nastro-gruppo{display:flex;gap:.9rem;padding-right:.9rem;align-items:center}
.nastro-voce{
  flex:0 0 auto;background:#fff;padding:8px;border-radius:5px;box-shadow:var(--ombra);
  display:block;border:0;cursor:zoom-in;line-height:0;font:inherit;position:relative;
  transition:transform .4s var(--curva),box-shadow .4s ease;
}
.nastro-voce:nth-child(3n){transform:rotate(1.4deg)}
.nastro-voce:nth-child(4n){transform:rotate(-1.6deg)}
.nastro-voce:hover{transform:translateY(-7px) rotate(0deg) scale(1.02);box-shadow:var(--ombra-alta)}
/* Se le cornici sono in numero DISPARI l'ultima resterebbe sola in mezza riga:
   invece si prende tutta la larghezza. Vale per qualsiasi numero, non va
   ritoccato quando se ne aggiungono o tolgono. */
.griglia-cornici figure:last-child:nth-child(odd){grid-column:1 / -1}

/* 200px, non più 150: ora il nastro ha solo verticali e la pista deve restare
   più larga dello schermo, se no il giro mostra un buco sui monitor grandi. */
.nastro-voce--alta{width:200px}
.nastro-voce--larga{width:330px}
.nastro-voce img{width:100%;height:auto;border-radius:2px;display:block}
.nastro-voce--alta img{aspect-ratio:9/16;object-fit:cover}
.nastro-voce--larga img{aspect-ratio:3/2;object-fit:cover}
@keyframes scorri{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ─────────── 10 · NUMERI ─────────── */
.numeri{
  width:min(100% - 2.4rem,var(--max));margin:clamp(1.1rem,2.2vw,1.6rem) auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,1.5vw,1.05rem);
}
.numero{
  background:linear-gradient(165deg,var(--petrolio-alto),var(--petrolio-fondo));
  color:var(--crema);border-radius:5px;padding:1.7rem 1.2rem;text-align:center;
  box-shadow:var(--ombra);position:relative;overflow:hidden;
  transition:transform .5s var(--curva),box-shadow .45s ease;
}
.numero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 100% at 50% 0%, rgba(178,218,210,.16), transparent 62%);
}
.numero:hover{transform:translateY(-6px);box-shadow:var(--ombra-alta)}
.numero strong{display:block;font-family:var(--titolo);font-size:clamp(2rem,4.4vw,2.9rem);font-weight:400;color:var(--menta);line-height:1;font-variant-numeric:tabular-nums}
.numero span{display:block;margin-top:.4rem;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,253,242,.68)}

/* ─────────── 11 · FAQ ─────────── */
.faq{margin-top:.5rem}
.faq details{border-top:1px solid rgba(16,42,55,.09)}
.faq details:last-child{border-bottom:1px solid rgba(16,42,55,.09)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.05rem 2.4rem 1.05rem 0;position:relative;
  font-weight:700;color:var(--inchiostro);transition:color .25s ease,padding-left .35s var(--curva);
}
.faq summary:hover{color:var(--corallo-scuro);padding-left:.35rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.5rem;top:1.42rem;width:11px;height:11px;
  border-right:2px solid var(--corallo);border-bottom:2px solid var(--corallo);
  transform:rotate(45deg);transition:transform .35s var(--curva);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding-bottom:1.1rem;color:var(--testo-corpo);max-width:64ch}
.faq details[open] p{animation:apri .45s var(--curva)}
@keyframes apri{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ─────────── 12 · CONTATTI ─────────── */
.sezione-contatti{padding:clamp(3rem,5.6vw,4.6rem) 0;text-align:center;margin-bottom:clamp(1.4rem,3vw,2.4rem)}
.sezione-contatti .occhiello{margin-inline:auto}
.contatti-altro{margin-top:1.7rem;color:rgba(255,253,242,.68);font-size:.98rem}
.contatti-altro a{color:var(--menta);text-decoration:underline;text-underline-offset:4px;transition:color .25s ease}
.contatti-altro a:hover{color:var(--crema)}

/* ─────────── PIEDE ─────────── */
.pieddipagina{background:var(--petrolio-fondo);color:rgba(255,253,242,.6);padding:2.8rem 0;font-size:.88rem;text-align:center;position:relative;z-index:2}
.pie-marchio{font-family:var(--titolo);color:var(--crema);font-size:1.2rem;margin-bottom:.55rem}
.pie-dati{line-height:1.8}
.pie-firma{margin-top:1.1rem}
.pieddipagina a{color:var(--menta);text-underline-offset:3px}

/* ─────────── COMPARSE: le stampe cadono sul tavolo ─────────── */
.compare{opacity:0;transform:translate3d(0,30px,0) scale(.975)}
.compare.dentro{opacity:1;transform:translate3d(0,0,0) scale(1);transition:opacity .65s ease,transform .85s var(--curva)}
.foglio-scheda.ruota-sx.compare{transform:translate3d(0,30px,0) scale(.975) rotate(-3deg)}
.foglio-scheda.ruota-dx.compare{transform:translate3d(0,30px,0) scale(.975) rotate(3deg)}
.foglio-scheda.ruota-sx.compare.dentro{transform:translate3d(0,0,0) scale(1) rotate(-1.1deg)}
.foglio-scheda.ruota-dx.compare.dentro{transform:translate3d(0,0,0) scale(1) rotate(1.1deg)}
.foto-alta.compare{transform:translate3d(0,30px,0) scale(.975) rotate(-4deg)}
.foto-alta.compare.dentro{transform:translate3d(0,0,0) scale(1) rotate(-1.4deg)}
.stampa-finta.compare{transform:translate3d(0,30px,0) scale(.96) rotate(-4deg)}
.stampa-finta.compare.dentro{transform:translate3d(0,0,0) scale(1) rotate(-1.3deg)}

/* ─────────── LA LUCE — apre qualsiasi foto o video ─────────── */
.luce{
  position:fixed;inset:0;z-index:200;
  background:rgba(6,17,23,.95);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:grid;grid-template-rows:1fr auto;place-items:center;
  padding:clamp(2.8rem,6vw,4rem) clamp(.8rem,4vw,3.4rem) clamp(1.2rem,3vw,2rem);
  opacity:0;transition:opacity .28s ease;
}
.luce[hidden]{display:none}
.luce.aperta{opacity:1}
.luce-corpo{margin:0;display:grid;place-items:center;max-width:100%;max-height:100%}
.luce-corpo img,.luce-corpo video{
  max-width:min(100%,1200px);max-height:78svh;width:auto;height:auto;
  border-radius:5px;background:#fff;box-shadow:0 40px 90px -34px #000;
  transform:scale(.94);opacity:0;
}
.luce.aperta .luce-corpo img,.luce.aperta .luce-corpo video{
  transform:scale(1);opacity:1;transition:transform .5s var(--curva),opacity .35s ease;
}
.luce-did{
  margin-top:1rem;color:var(--menta);font-size:.78rem;letter-spacing:.15em;
  text-transform:uppercase;text-align:center;
}
.luce-bottone{
  position:absolute;border:0;background:rgba(255,253,242,.09);color:var(--crema);
  width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:1.5rem;line-height:1;
  display:grid;place-items:center;transition:background-color .25s ease,transform .35s var(--curva);
}
.luce-bottone:hover{background:var(--corallo);transform:scale(1.08)}
.luce-chiudi{top:1rem;right:1rem;font-size:1.7rem}
.luce-prec{left:clamp(.4rem,2vw,1.4rem);top:50%;transform:translateY(-50%)}
.luce-succ{right:clamp(.4rem,2vw,1.4rem);top:50%;transform:translateY(-50%)}
.luce-prec:hover{transform:translateY(-50%) scale(1.08)}
.luce-succ:hover{transform:translateY(-50%) scale(1.08)}
.luce-conta{position:absolute;top:1.6rem;left:50%;transform:translateX(-50%);color:rgba(255,253,242,.5);font-size:.78rem;letter-spacing:.12em;font-variant-numeric:tabular-nums}
body.luce-aperta{overflow:hidden}

/* ─────────── TABLET ─────────── */
@media (max-width:1000px){
  .apertura{min-height:0}
  .due-colonne{grid-template-columns:1fr}
  .griglia-pacchetti{grid-template-columns:repeat(2,1fr)}
  .indice{display:none}
}

/* ─────────── TELEFONO ─────────── */
@media (max-width:640px){
  body{font-size:16px}
  .apertura{min-height:0;border-radius:0 0 24px 24px}
  .apertura-scena{min-height:0;padding:1.1rem 0 1.6rem}
  .apertura-griglia{grid-template-columns:1fr;grid-template-areas:"logo" "stampa" "testo";row-gap:.7rem}
  .marchio-grande{margin-bottom:.8rem}
  .marchio-grande img{width:min(100%,190px)}
  .passata{display:none}
  .invito{display:none}
  .stampante-corpo{height:54px}
  .stampante::before{display:none}
  .foglio-scheda{width:calc(100% - 1.6rem);margin-inline:auto !important}
  .ruota-sx,.ruota-dx{transform:rotate(0deg)}
  .foglio-scheda.ruota-sx.compare,.foglio-scheda.ruota-dx.compare{transform:translate3d(0,26px,0) scale(.98) rotate(0deg)}
  .foglio-scheda.ruota-sx.compare.dentro,.foglio-scheda.ruota-dx.compare.dentro{transform:none}
  .foto-alta,.foto-alta:hover{transform:none}
  .foto-alta.compare{transform:translate3d(0,26px,0) scale(.98)}
  .foto-alta.compare.dentro{transform:none}
  .coppia,.griglia-cornici{grid-template-columns:1fr 1fr}
  .griglia-festa{grid-template-columns:1fr 1fr}
  .griglia-festa figure:last-child:nth-child(odd){grid-column:1 / -1}
  .coppia img{aspect-ratio:4/5}
  .nastro-video{grid-template-columns:repeat(3,1fr);gap:.45rem}
  .clip{padding:5px}
  .clip figcaption{font-size:.58rem;letter-spacing:.03em;padding:.4rem .1rem .1rem}
  .audio{right:7px;bottom:32px;padding:.38rem}
  .audio-icona{width:12px;height:12px}
  .griglia-pacchetti{grid-template-columns:1fr 1fr}
  .numeri{grid-template-columns:1fr;gap:.6rem}
  .numero{padding:1.15rem;display:flex;align-items:baseline;justify-content:center;gap:.65rem}
  .numero strong{font-size:1.75rem}
  .nastro-voce--alta{width:118px}
  .nastro-voce--larga{width:250px}
  .nastro-pista{animation-duration:72s}
  .stampa-finta{transform:none}
  .stampa-finta.stampa-in-corso{animation:none}
  .sezione-cornice,.sezione-contatti{width:calc(100% - 1rem);border-radius:22px}
  .testata .bottone--piccolo{padding:.45rem .85rem;font-size:.8rem}
  .marchio span{display:none}
  .azioni .bottone{flex:1 1 100%;justify-content:center}
  [data-luce]::after{width:28px;height:28px;top:12px;left:12px;opacity:1;transform:scale(1);background-size:13px}
  .luce-corpo img,.luce-corpo video{max-height:68svh}
  .luce-bottone{width:42px;height:42px}
}

@media (max-width:400px){
  .contenitore{width:calc(100% - 1.6rem)}
  .titolo-grande{font-size:1.6rem}
}

/* ─────────── CHI PREFERISCE MENO MOVIMENTO ─────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .apertura{min-height:0}
  .apertura-scena{position:static;min-height:0}
  .foglio{transform:none}
  .foglio .strato--ym,.foglio .strato--pieno{clip-path:inset(0 0 0 0)}
  .nastro-pista{animation:none}
  .compare{opacity:1;transform:none}
  .su>i{transform:none}
  .coppia img,.foto-alta img{transform:none;clip-path:none !important}
  .luce-corpo img,.luce-corpo video{transform:none;opacity:1}
}