/* ============================================================
   RICETTA — l'animazione scroll-driven (il "cantiere").
   Dipende dalle variabili di base.css (--liquid, --ottone, --carta...).
   ============================================================ */

/* ---------- IL CANTIERE (scroll animato) ---------- */
#stage{position:relative; height:640vh}
.sticky{
  position:sticky; top:0; height:100svh;
  display:grid; place-items:center; overflow:hidden;
}
.glass-holder{position:relative; display:grid; place-items:center}
svg.glass{width:min(66vw,420px); height:auto; overflow:visible; display:block}

/* bollicine: più marcate nei drink frizzanti (soda/spumante). L'intensità del
   layer #bubbles è pilotata da pour.js (opacity = quanto ingrediente frizzante c'è).
   La salita è in CSS (GPU, nessun loop JS): ogni bollicina ha durata/ritardo propri. */
#bubbles{transition:opacity .35s ease}
.bubble{
  fill:rgba(255,255,255,.72);
  transform-box:fill-box; transform-origin:center;
  animation:bubbleRise linear infinite; will-change:transform,opacity;
}
@keyframes bubbleRise{
  0%   {transform:translate(0,0) scale(.5); opacity:0}
  12%  {opacity:.85}
  80%  {opacity:.55}
  100% {transform:translate(var(--sway,0),-262px) scale(1); opacity:0}
}
@media (prefers-reduced-motion:reduce){ .bubble{animation:none; opacity:.5} }

/* etichetta dell'ingrediente che sta scendendo */
.pour-label{
  position:absolute; top:1%; left:2%; max-width:56%;
  text-align:left; pointer-events:none; opacity:0;
}
.pour-label b{
  display:block; font-family:var(--display); font-weight:700; font-style:italic;
  font-size:clamp(1.6rem,4.6vw,2.6rem); letter-spacing:-.01em;
}
.pour-label small{font-family:var(--mono); font-size:12px; letter-spacing:.24em; color:var(--ottone)}

/* le didascalie dei passaggi */
.captions{
  position:absolute; left:0; right:0; bottom:5svh;
  display:grid; place-items:center; padding-inline:6vw; pointer-events:none;
}
.caption{grid-area:1/1; max-width:36ch; text-align:center; opacity:0}
.caption h2{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.1rem); margin:.5rem 0 .4rem; line-height:1.15;
}
.caption p{margin:0; color:rgba(243,234,220,.68); font-size:.95rem}

/* jigger laterale: il livello nel bicchiere, in cl */
.gauge{
  position:absolute; right:max(3vw,18px); top:50%; translate:0 -50%;
  display:grid; gap:.6rem; justify-items:center;
}
.gauge-track{width:3px; height:min(46svh,340px); background:rgba(243,234,220,.14); position:relative; border-radius:2px}
.gauge-fill{position:absolute; left:0; bottom:0; width:100%; background:var(--liquid); border-radius:2px; box-shadow:0 0 14px var(--liquid)}
.gauge-tick{position:absolute; right:8px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:rgba(243,234,220,.4); translate:0 50%}
.gauge-read{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--carta)}

@media (max-width:820px){
  .gauge{right:12px}
  .gauge-track{height:34svh}
  .caption{max-width:30ch}
}

/* Rimando alla variante analcolica nell'header ricetta — stile "more-link" */
.hero-variant{margin:.8rem 0 0}
.hero-variant a{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-decoration:none;
  color:rgba(243,234,220,.5); border-bottom:1px solid transparent;
}
.hero-variant a:hover{color:var(--ottone); border-bottom-color:var(--ottone)}

/* Box "versione alcolica" nella pagina mocktail: card compatta, quadrata, centrata */
.alcohol-wrap{display:flex; justify-content:center}
.alcohol-box{position:relative; display:flex; flex-direction:column; width:100%; max-width:360px;
  text-decoration:none; color:inherit; border:1px solid rgba(243,234,220,.16); border-radius:16px;
  overflow:hidden; background:rgba(243,234,220,.03); transition:border-color .18s, transform .18s}
.alcohol-box:hover{border-color:var(--ottone); transform:translateY(-3px)}
.alcohol-box__img{width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--bg-b)}
.alcohol-box__img img{width:100%; height:100%; object-fit:cover; display:block}
.alcohol-box__txt{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35rem; padding:1.2rem 1.3rem 1.4rem}
.alcohol-box__txt strong{font-family:var(--display); font-size:clamp(1.4rem,4vw,2rem); font-weight:700; line-height:1.05}
.alcohol-box__tag{color:rgba(243,234,220,.6); font-size:14px}
.alcohol-box__cta{margin-top:.5rem; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ottone)}
/* sheen: riflesso scintillante su TUTTA la card all'hover */
.alcohol-box .sheen{position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.06) 44%, rgba(255,255,255,.30) 50%, rgba(255,255,255,.06) 56%, transparent 66%);
  background-size:260% 100%; background-repeat:no-repeat; background-position:150% 0; mix-blend-mode:screen; opacity:0}
.alcohol-box:hover .sheen{opacity:.95; animation:alcoholSheen .9s ease}
@keyframes alcoholSheen{from{background-position:150% 0} to{background-position:-40% 0}}
@media (prefers-reduced-motion:reduce){ .alcohol-box .sheen{display:none} .alcohol-box:hover{transform:none} }

/* Pagina mocktail (variante analcolica semplificata, senza animazione) */
.mock-scheda{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,4rem); align-items:start; margin-top:1rem}
.mock-ings{list-style:none; margin:0; padding:0; display:grid; gap:.7rem; font-family:var(--mono); font-size:14px}
.mock-ings li > a, .mock-ings li{display:flex; align-items:center; gap:.7rem; color:inherit; text-decoration:none}
.mock-ings li > a:hover{color:var(--ottone)}
.mock-ings i{width:12px; height:12px; border-radius:50%; flex:none}
.mock-ings span{flex:1}
.mock-ings b{color:rgba(243,234,220,.7); font-weight:500}
@media (max-width:720px){ .mock-scheda{grid-template-columns:1fr; gap:2.4rem} }

/* --- Voto a stelle (rating cocktail 1..N) --- */
.rating{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .9rem;margin:1rem 0 0}
.rating-stars{display:inline-flex;gap:.08rem}
.rating-star{background:none;border:0;padding:0 .03em;margin:0;cursor:pointer;font-size:1.45rem;line-height:1;color:rgba(255,255,255,.22);transition:color .12s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}
.rating-star.is-on{color:var(--ottone,#d9a441)}
.rating-star:hover{transform:scale(1.12)}
.rating-star:focus-visible{outline:2px solid var(--ottone,#d9a441);outline-offset:2px;border-radius:3px}
.rating-info{margin:0;font-size:.92rem;color:rgba(255,255,255,.68);font-family:var(--mono,ui-monospace,monospace)}
.rating-avg{color:var(--ottone,#d9a441);font-size:1.12rem;font-weight:600}
.rating-scale{opacity:.6}
.rating-empty{opacity:.85}
.rating-mine{color:var(--ottone,#d9a441)}
.rating.is-sending{opacity:.6;pointer-events:none}
@media(max-width:520px){.rating-star{font-size:1.3rem}}

/* Variante "a blocco" (più visibile): nella scheda, prima dell'immagine */
.rating--block{flex-direction:column;align-items:center;text-align:center;gap:.55rem;max-width:440px;margin:1.7rem auto .2rem;padding:1.15rem 1.25rem;border:1px solid rgba(243,234,220,.16);border-radius:14px;background:rgba(243,234,220,.035)}
.rating--block .rating-star{font-size:1.9rem;padding:0 .05em}
.rating--block .rating-info{font-size:1rem}
.rating-prompt{margin:0;font-family:var(--display,Georgia,serif);font-size:1.12rem;color:var(--carta,#f3eadc)}
@media(max-width:520px){.rating--block .rating-star{font-size:1.6rem}}

/* Anteprima "sto scegliendo un nuovo voto": colore diverso dall'oro del voto attuale */
.rating-star.is-hover{color:#fff4d6;text-shadow:0 0 7px rgba(255,244,214,.45)}

/* Riepilogo voti read-only in hero-meta (solo lettura, niente click) */
.rating-ro{display:inline-flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.rating-ro-stars{display:inline-flex;letter-spacing:-.5px}
.ro-star{font-size:.82rem;line-height:1;color:rgba(255,255,255,.2)}
.ro-star.is-on{color:var(--ottone,#d9a441)}
.rating-ro b{color:var(--ottone,#d9a441)}

/* CTA "Accedi" dentro il box votazione */
.rating-login{display:inline-block;margin-top:.2rem;font-size:.86rem;color:var(--ottone,#d9a441);text-decoration:none;border-bottom:1px dotted color-mix(in srgb,var(--ottone,#d9a441) 60%,transparent);padding-bottom:1px}
.rating-login:hover{border-bottom-style:solid}

/* CTA account nel box votazione: invito al profilo/classifica personale */
.rating-cta{display:flex;align-items:center;gap:.7rem;text-align:left;margin-top:.85rem;padding:.7rem .85rem;border:1px solid color-mix(in srgb,var(--ottone,#d9a441) 32%,transparent);border-radius:12px;background:color-mix(in srgb,var(--ottone,#d9a441) 8%,transparent)}
.rating-cta-ico{flex:none;color:var(--ottone,#d9a441);font-size:1.35rem;line-height:1}
.rating-cta-txt{margin:0;font-size:.82rem;line-height:1.45;color:rgba(243,234,220,.82)}
.rating-cta-txt b{color:var(--carta,#f3eadc);font-family:var(--display,Georgia,serif);font-weight:600}
.rating-cta-btn{flex:none;background:var(--ottone,#d9a441);color:#11140c;text-decoration:none;font-weight:600;font-size:.85rem;padding:.55rem 1rem;border-radius:9px;white-space:nowrap}
.rating-cta-btn:hover{filter:brightness(1.07)}
@media(max-width:480px){.rating-cta{flex-wrap:wrap}.rating-cta-btn{width:100%;text-align:center}}

/* Voti in hero-meta: solo media + numero (niente stelline, che andavano a capo) */
.hm-votes .hm-votes-val{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;margin-bottom:0;text-transform:none;letter-spacing:normal;font-size:13px;color:rgba(243,234,220,.85)}
.hm-votes .hm-votes-val .ro-star{display:inline;font-size:.9rem;margin:0}
.hm-votes .hm-votes-val b{color:var(--ottone,#d9a441)}

/* Box rating spostato dopo l'immagine */
.rating-after{margin:1.6rem auto}

/* Profilo di gusto (barrette 0-5) — in fondo alla scheda, prima dell'immagine */
.taste{margin:1.8rem 0 .2rem;max-width:440px;padding-top:1.4rem;border-top:1px solid rgba(243,234,220,.1)}
.taste-bars{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.taste-bars li{display:grid;grid-template-columns:4.6rem 1fr 2.4rem;align-items:center;gap:.7rem}
.taste-lbl{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,234,220,.6)}
.taste-track{height:7px;border-radius:4px;background:rgba(243,234,220,.1);overflow:hidden}
.taste-fill{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--ottone,#d9a441) 70%,transparent),var(--ottone,#d9a441))}
.taste-val{font-family:var(--mono,monospace);font-size:12px;color:var(--carta,#f3eadc);text-align:right;font-variant-numeric:tabular-nums}
.taste-val span{color:rgba(243,234,220,.4)}
.taste-note{margin:.75rem 0 0;font-size:.9rem;color:rgba(243,234,220,.72);line-height:1.5;font-style:italic}