/* =========================================================
   Polline: scatole.css
   "Scatole vuote". Variabili del design (tema chiaro), stati di elenco e pulsanti,
   e le animazioni delle scatole (si aprono con delle transizioni pilotate da data-attribute).
   Le classi dei moduli email (.pl-*) arrivano da laboratorio.css.
   ========================================================= */

.sv {
  --pg: #FFF6EC; --pg2: #FFF0DF; --card: #FFFFFF;
  --ink: #1A2B4A; --body: rgba(26,43,74,0.82); --muted: rgba(26,43,74,0.75); --hair: rgba(26,43,74,0.12); --quiet: #E8D6C2;
  --pollen: #F9DF5E; --pollen-soft: #FFEFC4; --kraft: #FBC68A; --kraft2: #F4C892; --sh: #E8D6C2;
  --sky: #3AB3D9; --ok: #1F6F8B; --ko: #1A2B4A; --btn: #1A2B4A; --btn-fg: #FFF6EC;
  color: var(--body);
}
.sv [hidden] { display: none !important; }
.sv button:focus-visible, .sv a:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

/* elenco delle 18 frasi */
.sv-opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; font-weight: 500; line-height: 1.3; text-align: left; cursor: pointer; transition: background-color 120ms, opacity 140ms; }
.sv-opt:hover { background: var(--pg); }
.sv-chk { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--muted); background: transparent; font-size: 13px; font-weight: 800; line-height: 1; color: var(--btn-fg); }
.sv-opt[aria-pressed="true"] { background: var(--pollen-soft); font-weight: 700; }
.sv-opt[aria-pressed="true"] .sv-chk { background: var(--btn); border-color: var(--btn); }
.sv-opt[aria-pressed="true"] .sv-chk::after { content: '✓'; }
.sv-opt:disabled { opacity: 0.45; cursor: not-allowed; }
.sv-opt:disabled:hover { background: transparent; }

/* cartone: biglietti pieni che si tolgono con un tocco */
.sv-slot { min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 0; border-radius: 14px; background: #FFFFFF; color: #1A2B4A; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; text-align: left; cursor: pointer; box-shadow: 0 3px 0 0 rgba(26,43,74,0.14); transition: transform 120ms; }
.sv-slot:hover { transform: translateY(-2px); }
.sv-slot-empty { min-height: 96px; display: grid; place-items: center; border: 1.5px dashed rgba(26,43,74,0.4); border-radius: 14px; font-size: 13px; font-weight: 600; color: rgba(26,43,74,0.75); }

/* pulsanti */
.sv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--btn); color: var(--btn-fg); border: 1.5px solid var(--btn); border-radius: 999px; padding: 14px 26px; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; text-decoration: none; box-shadow: 0 4px 0 0 var(--sh); transition: transform 120ms, box-shadow 120ms; }
.sv-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--sh); color: var(--btn-fg); }
.sv-btn:active { transform: translateY(1px); box-shadow: none; }
.sv-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 0 var(--sh); }
.sv-btn-sm { padding: 11px 20px; font-size: 16px; }
.sv-btn-o { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px; padding: 11px 20px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 120ms, opacity 140ms; }
.sv-btn-o:hover { background: var(--pollen-soft); }
.sv-btn-o:disabled { cursor: not-allowed; }
.sv-link { background: transparent; border: 0; padding: 0; font: inherit; font-size: 15px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sv-link-ink { color: var(--ink); font-size: 16px; font-weight: 600; padding: 12px 16px; }
.sv-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 84px; padding: 12px 16px; border: 1.5px solid var(--quiet); border-radius: 16px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color 140ms, color 140ms, transform 120ms; }
.sv-tab:hover { transform: translateY(-2px); }
.sv-tab[aria-selected="true"] { background: var(--btn); color: var(--btn-fg); border-color: var(--btn); box-shadow: 0 4px 0 0 var(--sh); }

/* le scatole: entrata, linguette che si aprono, contenuto che sale, timbro che cade */
.sv-box { opacity: 0; transform: translateY(24px); transition: opacity 260ms ease var(--ed, 0ms), transform 300ms cubic-bezier(0.34, 1.32, 0.64, 1) var(--ed, 0ms); }
#sv-result[data-entered] .sv-box { opacity: 1; transform: none; }
.sv-flap-l { transform-origin: 0% 100%; transition: transform 380ms cubic-bezier(0.34, 1.32, 0.64, 1) var(--fd, 0ms); }
.sv-flap-r { transform-origin: 100% 100%; transition: transform 380ms cubic-bezier(0.34, 1.32, 0.64, 1) var(--fd, 0ms); }
#sv-result[data-opened] .sv-flap-l { transform: rotate(-82deg); }
#sv-result[data-opened] .sv-flap-r { transform: rotate(82deg); }
.sv-rise { transition: transform 420ms cubic-bezier(0.34, 1.32, 0.64, 1) var(--rd, 0ms); }
#sv-result[data-opened] .sv-rise { transform: translateY(-48%); }
.sv-stamp { opacity: 0; transform: translateX(-50%) rotate(-9deg) scale(1.6); transition: opacity 200ms ease var(--sd, 0ms), transform 260ms cubic-bezier(0.34, 1.32, 0.64, 1) var(--sd, 0ms); }
#sv-result[data-opened] .sv-stamp { opacity: 1; transform: translateX(-50%) rotate(-9deg) scale(1); }
.sv-details { opacity: 0; transform: translateY(16px); transition: opacity 420ms ease, transform 420ms ease; }
#sv-result[data-details] .sv-details { opacity: 1; transform: none; }
.sv-scorebar { width: 0; transition: width 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms; }
#sv-result[data-details] .sv-scorebar { width: var(--w, 0%); }

/* il furgone: scatole che entrano, poi parte */
.sv-cargo { opacity: 0; transform: translateY(-110px); transition: transform 320ms cubic-bezier(0.34, 1.32, 0.64, 1), opacity 200ms; }
.sv-cargo[data-in] { opacity: 1; transform: none; }
.sv-van { left: 16px; transition: left 1900ms cubic-bezier(0.55, 0, 0.25, 1); }
.sv-van[data-go] { left: calc(100% - 246px); }
.sv-wheel { transition: transform 1900ms cubic-bezier(0.55, 0, 0.25, 1); }
.sv-van[data-go] .sv-wheel { transform: rotate(1080deg); }

@media (prefers-reduced-motion: reduce) {
  .sv *, .sv *::before, .sv *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; }
}