/* KAITEN 3D — vestito della sezione a scorrimento.
   Palette presa dalla pagina kaiten: notte #0d1420, oro #ffd27a, chiaro #e6e9ee. */

.k3d{position:relative;background:#0d1420;color:#e6e9ee}
.k3d-scroller{position:relative}
.k3d-stage{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;background:#f4f2ee}
.k3d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* velo che scurisce la scena quando il locale si accende */
.k3d-velo{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 42%,rgba(0,0,0,0) 42%,rgba(4,8,14,.55) 100%);
  opacity:0;transition:opacity .5s linear}

/* testo sopra la scena */
.k3d-testo{position:absolute;left:0;right:0;bottom:0;padding:26px 22px 30px;pointer-events:none;
  background:linear-gradient(to top,rgba(6,10,16,.86),rgba(6,10,16,.44) 55%,rgba(6,10,16,0));
  opacity:0;transition:opacity .45s ease}
.k3d.acceso .k3d-testo{opacity:1}
.k3d-testo .in{max-width:1080px;margin:0 auto}
.k3d-occhiello{font:600 .74rem/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:#ffd27a;margin:0 0 8px}
.k3d-passo{min-height:4.6em}
.k3d-passo h3{font:700 clamp(1.35rem,3.6vw,2.15rem)/1.14 Georgia,'Times New Roman',serif;margin:0 0 6px;color:#fff}
.k3d-passo p{font:400 clamp(.95rem,1.9vw,1.08rem)/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  margin:0;color:#cfd6dd;max-width:56ch}
.k3d-dato{display:inline-block;margin-top:10px;padding:5px 11px;border:1px solid rgba(255,210,122,.5);
  border-radius:999px;font:600 .82rem/1 system-ui,sans-serif;color:#ffd27a;background:rgba(255,210,122,.08)}
.k3d-passo{opacity:0;transform:translateY(10px);transition:opacity .34s ease,transform .34s ease}
.k3d-passo.vivo{opacity:1;transform:none}

/* barra di avanzamento */
.k3d-rail{position:absolute;left:22px;top:50%;transform:translateY(-50%);width:2px;height:min(46vh,320px);
  background:rgba(255,255,255,.22);border-radius:2px;overflow:hidden;opacity:0;transition:opacity .4s}
.k3d.acceso .k3d-rail{opacity:1}
.k3d-rail i{position:absolute;left:0;top:0;width:100%;height:0;background:#ffd27a;border-radius:2px}

/* etichetta della fonte, in alto */
.k3d-fonte{position:absolute;left:22px;top:20px;font:600 .7rem/1.3 system-ui,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:#33506e;background:rgba(255,255,255,.82);border:1px solid rgba(27,58,92,.18);
  padding:6px 11px;border-radius:999px;opacity:0;transition:opacity .5s,color .5s,background .5s}
.k3d.acceso .k3d-fonte{opacity:1}
.k3d.notte .k3d-fonte{color:#ffd27a;background:rgba(13,20,32,.72);border-color:rgba(255,210,122,.35)}

/* invito a scorrere */
.k3d-invito{position:absolute;right:22px;bottom:26px;font:600 .74rem/1 system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:#5c6670;display:flex;align-items:center;gap:8px;opacity:.9;transition:opacity .3s,color .4s}
.k3d.notte .k3d-invito{color:#8b9aab}
.k3d-invito span{display:block;width:1px;height:26px;background:currentColor;animation:k3dgiu 1.9s ease-in-out infinite}
@keyframes k3dgiu{0%,100%{transform:scaleY(.35);opacity:.4}50%{transform:scaleY(1);opacity:1}}
.k3d.finito .k3d-invito{opacity:0}

/* chiusura con la chiamata all azione */
.k3d-chiusa{position:absolute;inset:auto 0 0 0;padding:0 22px 96px;text-align:center;pointer-events:none;opacity:0;
  transition:opacity .5s ease}
.k3d.finale .k3d-chiusa{opacity:1;pointer-events:auto}
.k3d-chiusa a{display:inline-block;background:#ffd27a;color:#0d1420;font:700 1rem/1 system-ui,sans-serif;
  padding:15px 26px;border-radius:999px;text-decoration:none;box-shadow:0 12px 34px rgba(0,0,0,.42)}
.k3d-chiusa a:hover{background:#ffdf9c}

/* riserva senza WebGL o con animazioni ridotte */
.k3d-riserva{display:none;padding:34px 22px;background:#0d1420}
.k3d-riserva img{width:100%;max-width:960px;margin:0 auto 18px;display:block;border-radius:14px}
.k3d-riserva ol{max-width:760px;margin:0 auto;padding-left:20px}
.k3d-riserva li{margin:0 0 12px;color:#cfd6dd;font:400 1rem/1.55 system-ui,sans-serif}
.k3d-riserva li b{color:#fff;font-family:Georgia,serif;font-size:1.1rem;display:block;margin-bottom:2px}
.k3d.senza3d .k3d-scroller{display:none}
.k3d.senza3d .k3d-riserva{display:block}

@media (max-width:720px){
  .k3d-rail{display:none}
  .k3d-testo{padding:20px 16px 26px}
  .k3d-fonte{left:16px;top:14px;font-size:.62rem}
  .k3d-invito{right:16px;bottom:20px;font-size:.64rem}
  .k3d-chiusa{padding-bottom:118px}
}
@media (prefers-reduced-motion:reduce){
  .k3d-invito span{animation:none}
}