/* Video fragranze Detersivo Lavatrice — layer HTML sopra i teli WebGL.
   Le posizioni animate sono scritte da app.js (render(frame)); qui solo layout e stile. */

@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-tight-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-tight-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --ink: #073E45;
  --paper: #F6F5F1;
  --muted: #5C6E6F;
  --turq: #00abb8;
  --warm: #FFE9B0;
  --mono: "IBM Plex Mono", monospace;
  --sans: "Inter Tight", "Inter", system-ui, sans-serif;
  --gutter: 6%;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); }

.vf {
  position: relative; width: 100%; height: 100vh; height: 100svh; min-height: 420px;
  overflow: hidden; isolation: isolate; background: var(--paper);
  font-family: var(--sans); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.vf-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 90% 4%, rgba(255, 233, 176, .95) 0, rgba(255, 233, 176, .5) 16%, rgba(255, 233, 176, 0) 46%),
    linear-gradient(180deg, #FBF6EA 0%, var(--paper) 60%);
}
.vf-gl, .vf-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vf-layer { position: absolute; inset: 0; pointer-events: none; }

/* Flaconi: altezza base impostata da JS, posizione via transform */
.vf-bottle {
  position: absolute; left: 0; top: 0; width: auto; max-width: none;
  transform-origin: 50% 100%; will-change: transform, opacity; opacity: 0;
  filter: drop-shadow(0 1.6vh 1.8vh rgba(0, 0, 0, .28));
}

/* Testi delle scene fragranza */
.vf-text {
  position: absolute; left: var(--gutter); top: 29%; width: 42%;
  color: #fff; opacity: 0; will-change: transform, opacity;
}
.vf-prod, .vf-label, .vf-name { margin: 0; overflow: hidden; }
.vf-prod span, .vf-label span, .vf-name span { display: block; will-change: transform; }
.vf-prod {
  font-weight: 600; font-size: clamp(22px, min(2.6vw, 4.6vh), 46px); line-height: 1.05;
  letter-spacing: -.01em; color: #fff; padding-bottom: .35em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 0 18px rgba(0, 0, 0, .25);
}
.vf-label {
  font-family: var(--mono); font-size: clamp(14px, 1.3vw, 19px);
  text-transform: uppercase; letter-spacing: .08em; color: #fff;
  padding-bottom: .3em; text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 0 18px rgba(0, 0, 0, .3);
}
.vf-name {
  font-weight: 600; font-size: clamp(52px, min(8vw, 15vh), 140px);
  line-height: 1; letter-spacing: -.025em; color: var(--accent-f, #fff);
  padding-bottom: .14em; text-shadow: 0 2px 22px rgba(0, 0, 0, .22);
}
.vf-badge {
  font-size: clamp(10px, .95vw, 15px);
  width: 6.4em; height: 6.4em; border-radius: 50%;
  background: #FFE11A; border: 3px solid #1D1D1B; color: #1D1D1B;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin-bottom: 2.4vh; transform: scale(0) rotate(-10deg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.vf-badge b { font-size: 2.7em; line-height: .9; font-weight: 600; letter-spacing: -.02em; }
.vf-badge span { font-size: .85em; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

/* Blocco titolo (apertura e chiusura) */
.vf-title { position: absolute; left: var(--gutter); bottom: 24%; width: 28%; will-change: opacity; }
.vf-title-logo { display: block; width: min(220px, 100%); height: auto; margin: 0 0 2vh -1%; }
.vf-title h1 {
  margin: 0; font-weight: 600; font-size: clamp(34px, min(4.8vw, 8.5vh), 80px);
  line-height: 1; letter-spacing: -.02em; color: var(--ink);
}
.vf-title-list {
  margin: 1.8vh 0 0; font-family: var(--mono); font-size: clamp(12px, 1vw, 15px);
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.vf-title-sub { margin: .9vh 0 0; font-size: clamp(15px, 1.25vw, 19px); color: var(--ink); }

/* Logo d'angolo: il contorno bianco dell'SVG lo stacca da tutti i fondi, l'ombra dal retino */
.vf-corner {
  position: absolute; left: var(--gutter); top: 5%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3)); will-change: opacity;
}
.vf-corner img { display: block; width: clamp(72px, 6.4vw, 104px); height: auto; }

.vf-cta {
  position: absolute; left: var(--gutter); bottom: 9%;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px;
  padding: .85em 1.3em; border-radius: 10px; background: #fff; color: var(--ink);
  font-weight: 600; font-size: clamp(15px, 1.1vw, 17px); text-decoration: none;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.vf-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .22); }
.vf-cta:focus-visible, .vf-pause:focus-visible, .vf-full:focus-visible { outline: 3px solid var(--turq); outline-offset: 3px; }

.vf-pause, .vf-full {
  position: absolute; right: 3%; bottom: 4%; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .88); color: var(--ink); fill: currentColor;
  display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
}
.vf-full { right: calc(3% + 54px); }
.vf-full[hidden] { display: none; }
.vf-full .i-close, .vf-full[aria-pressed="true"] .i-open { display: none; }
.vf-full[aria-pressed="true"] .i-close { display: block; }
.vf-pause .i-play { display: none; }
.vf-pause[aria-pressed="true"] .i-play { display: block; }
.vf-pause[aria-pressed="true"] .i-pause { display: none; }

.vf-debug {
  position: absolute; left: 50%; top: 2%; transform: translateX(-50%); z-index: 10;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px;
  background: rgba(0, 0, 0, .7); color: #fff; font: 13px/1 var(--mono);
}
.vf-debug[hidden] { display: none; }
.vf-debug input { width: min(46vw, 420px); }
.vf-debug output { min-width: 21ch; }

/* Senza WebGL: fermo immagine della chiusura, niente pulsante pausa */
.vf.no-gl .vf-pause, .vf.no-gl .vf-full { display: none; }

/* Verticale (telefono): flacone sopra, testi sotto, CTA a tutta larghezza */
@media (max-aspect-ratio: 9/10) {
  :root { --gutter: 7%; }
  .vf-text { right: var(--gutter); width: auto; top: 62%; }
  .vf-badge { position: absolute; right: 0; top: -1vh; margin: 0; font-size: 10px; }
  .vf-prod { font-size: clamp(18px, 5.4vw, 26px); }
  .vf-name { font-size: clamp(44px, 13vw, 72px); }
  .vf-title { right: var(--gutter); width: auto; top: 64.5%; bottom: auto; }
  .vf-title-logo { width: min(160px, 42vw); margin-bottom: 1vh; }
  .vf-title h1 br { display: none; }
  .vf-title h1 { font-size: clamp(30px, 8.6vw, 44px); }
  .vf-title-list { margin-top: 1.2vh; }
  .vf-corner { left: 5%; top: 3%; }
  .vf-cta { right: var(--gutter); bottom: 4%; }
  .vf-pause, .vf-full { top: 2.5%; bottom: auto; right: 5%; }
  .vf-full { right: calc(5% + 54px); }
}