/* Caffè Firenze: componenti in più sopra base.css. Stesse regole: due font, due grandezze, un fondo, un accento. */
body { font-weight: 400; }
h1, h2, h3 { font-weight: 650; letter-spacing: -0.01em; }
p { color: var(--muted); }
.strip-bar { background: rgba(var(--accent-rgb), .18); }
.block p { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ---------- header: logo a cupola, carrello ---------- */
.brand { display: flex; align-items: center; color: var(--accent); }
.brand svg { height: 46px; width: auto; }
.site-header { gap: 34px; }
.nav { gap: 30px; }
.cart-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; background: var(--accent); color: var(--on-accent); }
.cart-btn:hover { background: var(--accent-hi); }
.cart-btn svg { width: 20px; height: 20px; }
.menu-toggle { margin-left: 0; }
@media (max-width: 980px) { .cart-btn { margin-left: auto; padding: 0 14px; } .brand svg { height: 40px; } }

/* ---------- apertura 3D: la cupola di chicchi ---------- */
.hero3d { --h: 430vh; position: relative; height: var(--h); }
.hero3d[data-interno="1"] { --h: 950vh; }
/* il segnalibro delle intensità cade quando la camera guarda la prima vela */
.hero3d-anchor { position: absolute; left: 0; top: calc((var(--h) - 100vh) * 0.585); width: 1px; height: 1px; }
.hero3d-fade { position: absolute; inset: 0; z-index: 2; background: var(--bg); opacity: 0; pointer-events: none; }
.facts.intens-static { display: none; }
.hero3d.is-static ~ .intens-static { display: grid; padding-top: var(--sec); }
.hero3d.is-static .hero3d-anchor { top: 100%; }
.hero3d-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s ease; }
.hero3d.is-live canvas { opacity: 1; }
.hero3d-copy { position: absolute; z-index: 1; left: var(--gutter); top: 50%; width: min(600px, 42vw); transform: translateY(-44%); opacity: 0; visibility: hidden; transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .1, 1), visibility 0s .6s; }
.hero3d-copy.is-on { opacity: 1; visibility: visible; transform: translateY(-50%); transition-delay: 0s; }
.hero3d-copy h1, .hero3d-copy h2 { margin-bottom: .3em; }
.hero3d-copy p { color: var(--text-c); max-width: 30em; }
.hero3d-copy .btns { justify-content: flex-start; }
.hero3d-fallback { display: none; }
.hero3d.is-static { height: auto; }
.hero3d.is-static .hero3d-pin { position: relative; height: 100svh; min-height: 620px; }
.hero3d.is-static canvas { display: none; }
.hero3d.is-static .hero3d-fallback { display: block; position: absolute; right: var(--gutter); bottom: 8%; width: min(54vw, 760px); height: auto; }
.hero3d.is-static .hero3d-copy[data-step="0"] { opacity: 1; visibility: visible; transform: translateY(-50%); }
@media (max-width: 760px) {
  .hero3d { --h: 380vh; }
  .hero3d[data-interno="1"] { --h: 820vh; }
  .hero3d-copy { top: calc(76px + 2vh); left: var(--gutter); right: var(--gutter); width: auto; text-align: center; transform: translateY(12px); }
  .hero3d-copy.is-on { transform: none; }
  /* sotto la cupola gli affreschi arrivano fin sotto il testo: il testo ha dietro il fondo */
  .hero3d-copy[data-step="3"], .hero3d-copy[data-href] { top: 68px; padding: 10px 12px 14px; background: var(--bg); box-shadow: 0 10px 24px var(--bg); }
  .hero3d-copy p { margin: 0 auto; }
  .hero3d-copy .btns { justify-content: center; }
  .hero3d.is-static .hero3d-copy[data-step="0"] { transform: none; }
  .hero3d.is-static .hero3d-fallback { left: var(--gutter); width: auto; bottom: 6%; }
}

/* ---------- un'immagine che si apre a tutto schermo con lo scroll (come Il Buco) ---------- */
.full.grow { overflow: hidden; }
.full.grow img, .full.grow video { clip-path: inset(0 var(--gx, 0%) round 0); transition: clip-path .1s linear; }
.full.grow.is-wide img, .full.grow.is-wide video { height: 100vh; height: 100svh; }
.full.alpha { padding: 2vh 0 6vh; }
.full.alpha img { object-fit: contain; height: 62vh; height: 62svh; max-height: none; }
.full.alpha.low img { height: 46vh; height: 46svh; }

/* ---------- testo fermo a sinistra, foto che scorrono a destra ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); padding: var(--sec) var(--gutter) var(--sec) var(--gutter); }
.split-copy { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; }
.split-step { grid-area: 1 / 1; opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .7s cubic-bezier(.2, .7, .1, 1); }
.split-step.is-on { opacity: 1; transform: none; }
.split-step h2 { margin-bottom: .34em; }
.split-media { display: grid; gap: clamp(28px, 6vh, 72px); padding: 12vh 0; }
.split-media .slide { height: 78vh; height: 78svh; flex: none; }
.split-media .slide.is-render > img { inset: 4% 0; height: 92%; }
@media (max-width: 860px) {
  .split { display: block; padding: 0; }
  .split-copy { position: static; height: auto; display: none; }
  .split-media { padding: 0; gap: 0; }
  .split-media .slide { height: 88svh; }
  .split-media .slide-copy { display: block; }
}
@media (min-width: 861px) { .split-media .slide-copy { display: none; } }

/* ---------- capsule: si sceglie toccando la capsula ---------- */
.caps { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter) var(--sec); }
.caps-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(8px, 2vw, 28px); align-items: end; }
.caps-pick { position: relative; display: grid; justify-items: center; gap: 10px; padding: 8px 0 14px; border-bottom: 1px solid var(--line); color: var(--muted); transition: color .3s, border-color .3s; }
.caps-pick img { width: 100%; max-width: 230px; height: auto; transform: translateY(14px) rotate(-8deg) scale(.86); transition: transform .7s cubic-bezier(.2, .7, .1, 1), filter .4s; filter: saturate(.85); }
.caps-pick:hover img { transform: translateY(4px) rotate(-4deg) scale(.92); }
.caps-pick[aria-pressed="true"] { color: var(--text-c); border-color: var(--accent); }
.caps-pick[aria-pressed="true"] img { transform: translateY(-10px) rotate(0) scale(1.04); filter: none; }
.caps-info { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px clamp(28px, 5vw, 80px); margin-top: clamp(32px, 5vw, 56px); align-items: start; }
.caps-detail[hidden] { display: none; }
.caps-info h3 { margin-bottom: .2em; }
.caps-info .chips { margin-top: 4px; }
.caps-info .total { margin-top: 18px; }
@media (max-width: 760px) {
  .caps-row { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .caps-pick { gap: 4px; }
  .caps-pick span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .caps-pick[aria-pressed="true"] span { width: auto; height: auto; overflow: visible; clip: auto; bottom: -1.9em; }
  .caps-info { grid-template-columns: 1fr; margin-top: 46px; }
}

/* ---------- scelte, prezzi, carrello ---------- */
.chip small { font: inherit; color: var(--muted); }
.total .price { font-size: var(--title); }
.price s { color: var(--muted); font-size: var(--text); margin-left: 8px; }
.buy-bar { position: sticky; bottom: 0; z-index: 30; background: var(--bg); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.qty button { width: 44px; height: 50px; }
.qty output { min-width: 2ch; text-align: center; }
.cart { width: min(480px, 100vw); max-width: 100vw; height: 100svh; max-height: 100svh; margin: 0 0 0 auto; padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--bg); color: var(--text-c); }
.cart::backdrop { background: rgba(var(--accent-rgb), .18); }
.cart-in { display: grid; grid-template-rows: auto 1fr auto; height: 100%; padding: 22px var(--gutter); }
.cart-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cart-head h2 { font-size: var(--title); }
.cart-list { overflow: auto; padding: 8px 0; }
.cart-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-list li span { color: var(--muted); }
.cart-list li button { color: var(--accent); justify-self: start; min-height: 32px; }
.cart-foot { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.cart-foot .rows li { border: 0; padding: 4px 0; }
.cart-foot .btn { width: 100%; }
.cart-empty { color: var(--muted); padding: 22px 0; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, calc(100% + 40px)); padding: 12px 20px; background: var(--text-c); color: var(--bg); visibility: hidden; transition: transform .45s cubic-bezier(.2, .7, .1, 1), visibility 0s .45s; white-space: nowrap; }
.toast.is-on { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }

/* ---------- scheda prodotto ---------- */
.pdp-buy { max-width: 1120px; margin: 0 auto; padding: var(--sec) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); }
.pdp-buy .choice-step:first-of-type { margin-top: 0; }
.pdp-buy h2 { margin-bottom: .3em; }
.meter { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 16px 0 6px; }
.meter i { height: 8px; background: rgba(var(--accent-rgb), .16); }
.meter i.on { background: var(--accent); }
@media (max-width: 860px) {
  .pdp-buy { grid-template-columns: 1fr; padding-bottom: 0; }
  .pdp-buy .buy-bar { margin: 0 calc(var(--gutter) * -1); padding: 12px var(--gutter) 16px; border-top: 1px solid var(--line); }
  .pdp-buy .buy-bar .total { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* ---------- calcolatore dell'abbonamento ---------- */
.calc select { width: 100%; min-height: 52px; padding: 0 14px; background: none; border: 1px solid var(--line); font: inherit; color: inherit; border-radius: 0; }
.calc .rows { margin-top: 22px; }

/* gallerie di prodotti scontornati: da computer il testo a sinistra e la busta a destra */
@media (min-width: 861px) {
  .strip .slide.is-render > img { left: 44%; right: 5%; width: auto; }
  .strip .slide.is-render .slide-copy { top: 50%; bottom: auto; right: 58%; transform: translateY(-50%); padding: 0 0 0 var(--gutter); }
}
/* video di prodotto con scritte sulle buste: il testo sta accanto, mai sopra */
.strip .slide.is-side .slide-copy { background: none; }
@media (min-width: 861px) {
  .strip .slide.is-side > video { position: absolute; left: 40%; top: 0; width: 60%; }
  .strip .slide.is-side .slide-copy { top: 50%; bottom: auto; right: 63%; transform: translateY(-50%); padding: 0 0 0 var(--gutter); }
}
@media (max-width: 860px) {
  .strip .slide.is-side > video { height: 60%; margin-top: 64px; }
}
.slide-copy .btns { justify-content: flex-start; margin-top: 16px; }
.rows b { white-space: normal; text-align: right; }

.foot-note { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter) var(--sec); text-align: center; }
.facts h3 { color: var(--text-c); }
.site-footer .brand svg { height: 72px; }
@media (max-width: 760px) { .full.alpha img, .full.alpha.low img { height: auto; } }
/* telefono: il prodotto scontornato sta in alto e il testo sotto, senza toccarsi */
@media (max-width: 860px) {
  .strip .slide.is-render > img { inset: 9% 0 auto; height: 50%; }
  .strip .slide.is-render .slide-copy { padding-top: 24px; }
  .slide-copy { background: linear-gradient(180deg, transparent, rgba(var(--bg-rgb), .93) 46%, var(--bg)); }
}
/* schermi bassi (telefono in orizzontale): la foto con il testo sopra sta in uno schermo */
@media (max-height: 520px) { .cover { min-height: 0; } .cover-copy { bottom: 20px; } }

/* ================================================================ vita: family friendly (03/11)
   Forme tonde, i colori delle etichette dietro i prodotti, foto sul tavolo, disegni a mano. */
.btn, .chip, .cart-btn, .qty, .toast, .calc select { border-radius: 999px; }
.qty { overflow: hidden; }

/* ---------- apertura con la foto: respira piano ---------- */
.cover.is-foto > img { transform-origin: 50% 40%; }
@media (max-width: 760px) { .cover-copy h1 br { display: none; } }
.vita .cover.is-foto > img { animation: respiro 22s ease-in-out infinite alternate; }
@keyframes respiro { from { transform: scale(1); } to { transform: scale(1.07); } }
.vita .cover .cover-copy > * { opacity: 0; translate: 0 22px; }
.vita .cover.is-in .cover-copy > * { animation: sale .9s cubic-bezier(.2, .7, .1, 1) both; }
.vita .cover.is-in .cover-copy > :nth-child(2) { animation-delay: .12s; }
.vita .cover.is-in .cover-copy > :nth-child(3) { animation-delay: .24s; }
@keyframes sale { to { opacity: 1; translate: 0 0; } }

/* ---------- disegni a mano: si tracciano quando entrano ---------- */
.doodle { position: absolute; overflow: visible; pointer-events: none; color: var(--text-c); }
.doodle path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.vita .doodle path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(.6, .1, .2, 1) var(--d, .2s); }
.vita .is-in .doodle path, .vita .is-here .doodle path, .vita .is-in.doodle path { stroke-dashoffset: 0; }
.doodle path:nth-child(2) { --d: .45s; } .doodle path:nth-child(3) { --d: .7s; } .doodle path:nth-child(4) { --d: .9s; }
.segnato { position: relative; display: inline-block; white-space: nowrap; }
.doodle.sotto { left: -2%; bottom: -.16em; width: 104%; height: .28em; color: var(--accent); }
.doodle.sotto path { stroke-width: 3.4; }

/* ---------- prodotti scontornati: il cerchio del colore dell'etichetta dietro ---------- */
.slide.is-render[style*="--disc"]::before { content: ""; position: absolute; left: var(--dx, 69.5%); top: var(--dy, 52%); width: var(--ds, min(70vh, 44vw)); aspect-ratio: 1; border-radius: 50%; background: var(--disc);
  transform: translate(-50%, -50%) translate(calc(var(--mx, 0) * -18px), calc(var(--my, 0) * -12px)) scale(calc(.35 + .65 * var(--p, 1))); transition: transform .6s cubic-bezier(.2, .7, .1, 1); }
.slide.is-render > img { transform: translateY(calc((1 - var(--p, 1)) * 70px)) rotate(calc((1 - var(--p, 1)) * -9deg + var(--mx, 0) * 4deg)); transition: transform .6s cubic-bezier(.2, .7, .1, 1); }
.vita .slide.is-render > img { animation: galleggia 6s ease-in-out infinite; }
.slide.is-render:nth-child(2n) > img { animation-delay: -3s; }
@keyframes galleggia { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@media (min-width: 861px) {
  /* il prodotto sta intero nella sua metà: le immagini larghe (kit, gruppi) non escono dallo schermo
     e la busta resta al centro del cerchio */
  .strip .slide.is-render > img { width: 51%; }
}
@media (max-width: 860px) {
  .slide.is-render[style*="--disc"]::before { --dx: 50%; --dy: 34%; --ds: min(44svh, 82vw); }
}
/* il profumo esce di lato, accanto alla cima della busta: sopra c'è il menu */
.slide .doodle.vapore { left: calc(69.5% + 19.5vh + 6px); top: 9%; width: 84px; height: 96px; }
.slide .doodle.chicchi { left: calc(69.5% + min(26vh, 16vw)); top: 66%; width: 78px; height: 70px; }
@media (max-width: 860px) {
  .slide .doodle.vapore { display: none; }
  .slide .doodle.chicchi { left: auto; right: 6%; top: 46%; width: 58px; height: 52px; }
}

/* ---------- foto come sul tavolo ---------- */
.tavola { position: relative; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter) var(--sec); }
.tavola-foto { position: relative; height: clamp(640px, 60vw, 860px); }
.polaroid { position: absolute; left: var(--l); top: var(--t); width: var(--w); margin: 0; padding: 12px 12px 0; background: #fff; border-radius: 6px;
  box-shadow: 0 2px 4px rgba(31, 22, 16, .08), 0 18px 40px -12px rgba(31, 22, 16, .28); transform: rotate(var(--r)); transition: transform .5s cubic-bezier(.2, .7, .1, 1), box-shadow .5s; }
.polaroid img { width: 100%; height: auto; border-radius: 3px; }
.polaroid figcaption { padding: 12px 4px 14px; font-family: var(--font-title); font-weight: 600; color: var(--text-c); text-align: center; line-height: 1.25; }
/* il nastro adesivo, del colore di un'etichetta */
.polaroid::before { content: ""; position: absolute; z-index: 1; left: 50%; top: -14px; width: 92px; height: 28px; background: var(--nastro); opacity: .82; transform: translateX(-50%) rotate(calc(var(--r) * -1.6)); border-radius: 2px; }
.polaroid .doodle { z-index: 2; }
@media (hover: hover) {
  .polaroid:hover { z-index: 5; transform: rotate(0deg) scale(1.06) translateY(-6px); box-shadow: 0 4px 8px rgba(31, 22, 16, .1), 0 30px 60px -16px rgba(31, 22, 16, .38); }
}
.vita .tavola .polaroid { opacity: 0; }
.vita .tavola.is-in .polaroid { animation: cade .95s cubic-bezier(.2, .8, .25, 1.15) calc(var(--i) * .13s) both; }
@keyframes cade { from { opacity: 0; transform: translateY(-90px) rotate(calc(var(--r) * 3)) scale(1.12); } to { opacity: 1; transform: rotate(var(--r)); } }
.polaroid .doodle.cuore { right: -30px; top: -34px; width: 58px; height: 52px; color: var(--accent); }
.polaroid .doodle.sole { left: -44px; top: -40px; width: 86px; height: 86px; color: #e2a20a; }
.polaroid .doodle.vapore { left: 50%; top: -96px; width: 84px; height: 94px; margin-left: -42px; }
.polaroid .doodle.chicchi { right: -62px; bottom: 46px; width: 70px; height: 62px; }
@media (max-width: 760px) {
  .tavola-foto { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 14px; align-items: start; padding-top: 14px; }
  .polaroid { position: relative; left: auto; top: auto; width: auto; padding: 7px 7px 0; transform: rotate(calc(var(--r) * .6)); }
  .polaroid figcaption { padding: 8px 2px 10px; }
  .polaroid::before { width: 58px; height: 20px; top: -10px; }
  @keyframes cade { from { opacity: 0; transform: translateY(-50px) rotate(calc(var(--r) * 2)); } to { opacity: 1; transform: rotate(calc(var(--r) * .6)); } }
  .polaroid .doodle.cuore { right: -8px; top: -26px; width: 40px; height: 36px; }
  .polaroid .doodle.sole { left: -10px; top: -28px; width: 52px; height: 52px; }
  .polaroid .doodle.vapore { display: none; }
  .polaroid .doodle.chicchi { right: -10px; bottom: auto; top: -26px; width: 46px; height: 40px; }
}

/* ---------- capsule: cadono una dopo l'altra e rimbalzano, quella scelta fa un saltello ---------- */
.caps-pick { overflow: visible; }
.vita .caps:not(.is-in) .caps-pick img { opacity: 0; }
.vita .caps.is-in .caps-pick img { animation: rimbalzo 1.1s linear calc(var(--i) * .12s) both; }
.vita .caps-pick.hop img { animation: saltello .55s cubic-bezier(.3, 0, .4, 1) both; }
@keyframes rimbalzo {
  0% { opacity: 0; translate: 0 -170px; animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  38% { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(0, .5, .5, 1); }
  58% { translate: 0 -38px; animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  74% { translate: 0 0; animation-timing-function: cubic-bezier(0, .5, .5, 1); }
  86% { translate: 0 -11px; animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes saltello { 0%, 100% { translate: 0 0; } 45% { translate: 0 -30px; } }
.caps-pick .doodle.scintille { z-index: 1; left: 50%; top: -48px; width: 74px; height: 44px; margin-left: -37px; color: var(--accent); }
.caps-pick .doodle.scintille path { stroke-dashoffset: 1; transition: stroke-dashoffset .5s ease .15s; }
.caps-pick[aria-pressed="true"] .doodle.scintille path { stroke-dashoffset: 0; }
@media (max-width: 760px) { .caps-pick .doodle.scintille { top: -30px; width: 44px; height: 28px; margin-left: -22px; } }

/* ---------- footer: Firenze a strati. Ogni strato sale con la sua velocita' (vita.js), il sole tramonta,
   sul Ponte Vecchio si accendono le finestre e sulle rive salgono le buste ---------- */
.site-footer { --ph: max(15.3vw, 150px); padding: 0 0 28px; border-top: 0; background: var(--text-c); }
.site-footer p, .site-footer nav a { color: rgba(255, 250, 242, .74); }
.site-footer h2 { color: var(--c-velvety); }
.site-footer nav a:hover, .footer-legal a:hover { color: var(--c-velvety); }
.site-footer .brand { color: #fffaf2; }
.footer-grid { padding-top: clamp(40px, 5vw, 72px); }
.footer-scena { position: relative; height: clamp(380px, 42vw, 680px); overflow: hidden; background: var(--bg); }
.footer-scena .strato { position: absolute; left: 0; bottom: 0; width: 100%; will-change: transform; }
.footer-scena .lontano, .footer-scena .campi, .footer-scena .colline, .footer-scena .citta { height: max(25vw, 250px); bottom: calc(var(--ph) * .42); }
.footer-scena .campi { bottom: calc(var(--ph) * .42 - 8px); }
.footer-scena .ponte { height: var(--ph); }
/* da fermo il sole sta basso, mezzo dietro le colline: entrando parte alto e tramonta */
.footer-scena .sole { left: auto; right: 21%; bottom: auto; top: 32%; width: clamp(84px, 9vw, 150px); height: auto; }
.footer-scena .uccelli { left: 13%; bottom: auto; top: 12%; width: clamp(90px, 9vw, 150px); height: auto; }
.footer-prodotti { top: 0; height: 100%; pointer-events: none; }
.footer-busta { position: absolute; bottom: calc(var(--ph) * .5); width: auto; height: clamp(120px, 14vw, 250px); }
.footer-busta.b2, .footer-busta.b4 { height: clamp(96px, 11vw, 196px); }
.footer-busta.c1, .footer-busta.c2 { height: clamp(48px, 5vw, 86px); }
.footer-busta.b1 { left: 3%; } .footer-busta.b2 { left: 11%; } .footer-busta.c1 { left: 18%; }
.footer-busta.b3 { right: 3%; } .footer-busta.b4 { right: 11%; } .footer-busta.c2 { right: 18.5%; }
.vita .footer-busta { animation: galleggia 6s ease-in-out infinite; }
.footer-busta:nth-child(2n) { animation-delay: -2s; } .footer-busta:nth-child(3n) { animation-delay: -4s; }
.vita .footer-scena .finestre rect { opacity: 0; transition: opacity .5s ease calc(var(--i) * 45ms); }
.vita .footer-scena.is-lit .finestre rect { opacity: 1; }
.vita .footer-scena .onde { animation: onde 7s linear infinite; }
@keyframes onde { to { transform: translateX(-60px); } }
@media (max-width: 760px) {
  .footer-scena { height: 400px; }
  .footer-busta { height: 116px; }
  .footer-busta.b2, .footer-busta.b4, .footer-busta.c1, .footer-busta.c2 { display: none; }
  .footer-busta.b1 { left: 4%; } .footer-busta.b3 { right: 4%; }
  .footer-scena .sole { right: 14%; }
}

/* ================================================================ fondo personalizzato (04/11)
   Sotto ogni prodotto una fascia larga quanto la slide, del colore dell'etichetta: la busta ci sta sopra
   come su un piano. Scorrendo il colore cambia slide dopo slide. */
.slide[style*="--disc"]::after, .slide[style*="--banda"]::after { content: ""; position: absolute; left: 0; right: 0; top: var(--bt, 82%); bottom: 0; background: var(--banda, var(--disc)); }
.slide[style*="--disc"] > img, .slide[style*="--banda"] > img { z-index: 1; object-position: 50% 100%; }
.slide .doodle { z-index: 1; }
.strip-bar { z-index: 3; background: rgba(31, 22, 16, .16); }
.strip-bar i { background: var(--text-c); }
/* telefono: la busta sta in alto e il testo sotto, quindi la fascia fa da ripiano sotto la busta */
@media (max-width: 860px) {
  .slide[style*="--disc"]::after, .slide[style*="--banda"]::after { top: 52%; bottom: auto; height: 11%; }
}

/* ---------- 1 kg e 454 g vicine sullo stesso cerchio ---------- */
.slide.is-coppia { container-type: size; --k: calc(var(--r1) * .9 + .72 * var(--r2)); --h1: min(68cqh, 44cqw / var(--k)); --cx: 69.5cqw; --cb: 6cqh; }
.strip .slide.is-coppia > img { inset: auto; bottom: var(--cb); width: auto; max-width: none; }
.strip .slide.is-coppia > img.uno { height: var(--h1); left: calc(var(--cx) - var(--h1) * var(--k) / 2); }
.strip .slide.is-coppia > img.mezzo { height: calc(var(--h1) * .72); left: calc(var(--cx) - var(--h1) * var(--k) / 2 + var(--h1) * var(--r1) * .9); animation-delay: -2.2s; }
.slide.is-coppia .doodle.vapore { left: calc(var(--cx) - var(--h1) * var(--k) / 2 + var(--h1) * var(--r1) + 8px); top: calc(100cqh - var(--cb) - var(--h1) - 10px); }
@media (max-width: 860px) {
  .slide.is-coppia { --h1: min(46cqh, 80cqw / var(--k)); --cx: 50cqw; --cb: 41cqh; }
}

/* ================================================================ capitoli a colori (04/11, scelta A di Luca)
   Le parti della pagina hanno un colore pieno da bordo a bordo, preso dalle etichette. Il colore sta in un livello
   dietro, largo quanto lo schermo, così niente taglia le foto o i disegni che sporgono. */
.tinta-giallo { --fb: var(--c-velvety); }
.tinta-verde { --fb: var(--c-refined); }
.tinta-arancio { --fb: var(--c-fullbodied); }
.tinta-lilla { --fb: color-mix(in srgb, #a997d0 58%, var(--bg)); }
.tinta-rosso { --fb: color-mix(in srgb, var(--c-intense) 50%, var(--bg)); }
:is(.tinta-giallo, .tinta-verde, .tinta-arancio, .tinta-lilla, .tinta-rosso) { position: relative; isolation: isolate; }
:is(.tinta-giallo, .tinta-verde, .tinta-arancio, .tinta-lilla, .tinta-rosso)::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--fb); }
:is(.tinta-giallo, .tinta-verde, .tinta-arancio, .tinta-lilla, .tinta-rosso) .buy-bar { background: var(--fb); }
/* sull'arancione e sul rosso la parola in rosso non si leggerebbe: diventa scura come il resto del titolo */
:is(.tinta-arancio, .tinta-rosso) :is(em, legend, .form label span), :is(.tinta-arancio, .tinta-rosso) .segnato .doodle { color: var(--text-c); }
:is(.tinta-giallo, .tinta-verde, .tinta-arancio, .tinta-lilla, .tinta-rosso) .meter i:not(.on) { background: rgba(31, 22, 16, .14); }
/* dentro le gallerie anche il fondo della slide prende il colore dell'etichetta, più chiaro */
.slide[style*="--disc"], .slide[style*="--tinta"] { background: color-mix(in srgb, var(--tinta, var(--disc)) 30%, var(--bg)); }

/* ================================================================ come compaiono le immagini (04/11)
   Movimenti lenti, morbidi, fatti a mano: niente scatti, niente effetti digitali. Ogni immagine ha la sua entrata
   (data-rivela) e ogni busta nelle gallerie il suo modo di arrivare (data-entra).
   Gli stati nascosti valgono solo con .rv, che c'è solo se il movimento non è ridotto. */
@property --rv { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
[data-rivela] { position: relative; }
.full[data-rivela]:not([data-rivela="libro"]) { overflow: hidden; }
.full.is-wide img, .full.is-wide video { height: 100vh; height: 100svh; }
.rv-tela { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rv [data-rivela]:not(.rv-fine) > :is(img, video) { will-change: clip-path, transform, opacity; }
.rv [data-rivela].rv-fine > :is(img, video) { clip-path: none; -webkit-mask-image: none; mask-image: none; filter: none; }

/* velo: un velo che si alza dal basso, con il bordo sfumato, e la foto che sale appena */
.rv [data-rivela="velo"] > :is(img, video) { --rv: 0%;
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--rv) - 35%), transparent var(--rv)); mask-image: linear-gradient(to top, #000 calc(var(--rv) - 35%), transparent var(--rv));
  transition: --rv 2.2s cubic-bezier(.65, 0, .35, 1), translate 2.4s cubic-bezier(.16, 1, .3, 1), scale 2.4s cubic-bezier(.16, 1, .3, 1); }
.rv [data-rivela="velo"]:not(.rv-in) > :is(img, video) { translate: 0 50px; scale: 1.06; }
.rv [data-rivela="velo"].rv-in > :is(img, video) { --rv: 140%; }

/* finestra: una finestra con gli angoli tondi che si apre fino ai bordi, la foto si allontana piano */
.rv [data-rivela="finestra"] > :is(img, video) { transition: clip-path 2.1s cubic-bezier(.77, 0, .18, 1), scale 2.6s cubic-bezier(.16, 1, .3, 1); }
.rv [data-rivela="finestra"]:not(.rv-in) > :is(img, video) { clip-path: inset(16% 24% 16% 24% round 32px); scale: 1.3; }
.rv [data-rivela="finestra"].rv-in > :is(img, video) { clip-path: inset(0 0 0 0 round 0); }

/* luce: entra da sinistra come la luce del mattino, calda, e poi prende i suoi colori */
.rv [data-rivela="luce"] > :is(img, video) { --rv: 0%;
  -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--rv) - 45%), transparent var(--rv)); mask-image: linear-gradient(100deg, #000 calc(var(--rv) - 45%), transparent var(--rv));
  transition: --rv 2.3s cubic-bezier(.65, 0, .35, 1), filter 2.6s ease; }
.rv [data-rivela="luce"]:not(.rv-in) > :is(img, video) { filter: brightness(1.35) sepia(.35) saturate(.75); }
.rv [data-rivela="luce"].rv-in > :is(img, video) { --rv: 150%; filter: brightness(1) sepia(0) saturate(1); }

/* fuoco: come un obiettivo che mette a fuoco */
.rv [data-rivela="fuoco"] > :is(img, video) { transition: filter 2s cubic-bezier(.25, .1, .25, 1), scale 2.3s cubic-bezier(.16, 1, .3, 1), opacity 1.2s ease; }
.rv [data-rivela="fuoco"]:not(.rv-in) > :is(img, video) { opacity: 0; scale: 1.07; filter: blur(14px); }
.rv [data-rivela="fuoco"].rv-in > :is(img, video) { filter: blur(0); }

/* sollievo: il prodotto si posa, salendo piano e raddrizzandosi */
.rv [data-rivela="sollievo"] > img { transition: translate 1.9s cubic-bezier(.16, 1, .3, 1), rotate 1.9s cubic-bezier(.16, 1, .3, 1), opacity 1.1s ease; }
.rv [data-rivela="sollievo"]:not(.rv-in) > img { opacity: 0; translate: 0 70px; rotate: -2.5deg; }

/* pennellata, inchiostro e colonne: la foto la disegna un canvas sopra, finché non è arrivata */
.rv :is([data-rivela="pennellata"], [data-rivela="inchiostro"], [data-rivela="colonne"]):not(.rv-in) > img:not(.rv-colonna) { opacity: 0; }

/* colonne: copie della fila tagliate prodotto per prodotto, arrivano una dopo l'altra */
.rv-colonna { position: absolute; z-index: 1; max-width: none; object-fit: contain; opacity: 0; translate: 0 60px;
  transition: translate 1.5s cubic-bezier(.16, 1, .3, 1), rotate 1.5s cubic-bezier(.16, 1, .3, 1), opacity .9s ease; }
.rv-colonna.su { opacity: 1; translate: 0 0; rotate: 0deg !important; }

/* libro: il catalogo inclinato come appoggiato sul tavolo, si raddrizza scorrendo */
.full[data-rivela="libro"] { padding: 6vh 0 12vh; perspective: 1800px; }
.full[data-rivela="libro"] img { width: min(920px, 88vw); height: auto; max-height: none; margin: 0 auto; border-radius: 6px;
  box-shadow: 0 50px 90px -40px rgba(31, 22, 16, .5), 0 12px 24px -12px rgba(31, 22, 16, .3);
  transform: rotateY(calc(-26deg + 24deg * var(--q, 1))) rotateX(calc(12deg - 10deg * var(--q, 1))) rotateZ(calc(-4deg + 3.5deg * var(--q, 1))) translateY(calc((1 - var(--q, 1)) * 50px));
  transform-origin: 40% 60%; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }

/* le foto delle polaroid si posano sul tavolo e si sviluppano piano */
@keyframes cade { from { opacity: 0; transform: translateY(-46px) rotate(calc(var(--r) * 2)) scale(1.04); } to { opacity: 1; transform: rotate(var(--r)); } }
.vita .tavola.is-in .polaroid { animation-duration: 1.5s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); animation-delay: calc(var(--i) * .16s); }
.vita .tavola.is-in .polaroid img { animation: sviluppo 3.4s ease-out calc(var(--i) * .16s + .4s) both; }
@keyframes sviluppo { from { filter: brightness(1.7) saturate(0) contrast(.6) sepia(.35); } 55% { filter: brightness(1.08) saturate(.85) contrast(.96) sepia(.08); } to { filter: none; } }
/* le capsule si posano con un solo piccolo rimbalzo */
@keyframes rimbalzo {
  0% { opacity: 0; translate: 0 -60px; animation-timing-function: cubic-bezier(.4, 0, .9, .6); }
  55% { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(.1, .5, .4, 1); }
  76% { translate: 0 -9px; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  100% { opacity: 1; translate: 0 0; }
}
.vita .caps.is-in .caps-pick img { animation-duration: 1.4s; animation-delay: calc(var(--i) * .14s); }

/* le buste nelle gallerie: ognuna arriva a modo suo mentre la slide va al centro, con calma */
.slide.is-render > img { transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.slide.is-render[data-entra="sale"] > img { transform: translateY(calc((1 - var(--p, 1)) * 70px)) rotate(calc((1 - var(--p, 1)) * -5deg + var(--mx, 0) * 3deg)); }
.slide.is-render[data-entra="gira"] > img { transform: perspective(1200px) rotateY(calc((1 - var(--p, 1)) * 34deg + var(--mx, 0) * 6deg)) translateY(calc((1 - var(--p, 1)) * 24px)); }
.slide.is-render[data-entra="cade"] > img { transform: translateY(calc((1 - var(--p, 1)) * -80px)) rotate(calc((1 - var(--p, 1)) * 6deg + var(--mx, 0) * 3deg)); }
.slide.is-render[data-entra="scivola"] > img { transform: translateX(calc((1 - var(--p, 1)) * 120px)) rotate(calc((1 - var(--p, 1)) * 4deg + var(--mx, 0) * 3deg)); }
.slide.is-render[data-entra="cresce"] > img { transform: scale(calc(.82 + .18 * var(--p, 1))) rotate(calc((1 - var(--p, 1)) * 4deg + var(--mx, 0) * 3deg)); }
.slide.is-render[style*="--disc"]::before { transition: transform 1s cubic-bezier(.16, 1, .3, 1); }

/* la storia di Firenze: la fila sul cerchio, nella colonna di destra */
.split-media .slide.is-render[style*="--disc"]::before { --dx: 50%; --dy: 48%; --ds: min(62vh, 38vw); }
.split-media .slide.is-render > img { object-position: 50% 100%; }
@media (max-width: 860px) {
  .split-media .slide.is-render > img { inset: 8% 0 auto; height: 50%; }
  .split-media .slide.is-render[style*="--disc"]::before { --dx: 50%; --dy: 34%; --ds: min(44svh, 82vw); }
}
@media (max-width: 760px) { @keyframes cade { from { opacity: 0; transform: translateY(-30px) rotate(calc(var(--r) * 1.4)); } to { opacity: 1; transform: rotate(calc(var(--r) * .6)); } } }