/* =====================================================================
   THE BOTTLE — foglio di stile
   Ricostruito dal CSS pubblicato da Webflow (classi e valori invariati),
   senza le parti legate ai mood. Le classi hanno gli stessi nomi del
   Designer, così il confronto con il progetto Webflow resta immediato.
   ===================================================================== */

/* ---------- Font ---------- */

@font-face {
  font-family: Cormorantgaramond;
  src: url("https://cdn.prod.website-files.com/69a06a38479364fc15f801d0/6a02f84b23400fd9b739f480_CormorantGaramond-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* ---------- Variabili (dalle variabili Webflow) ---------- */

:root {
  --font--family-2: Cormorantgaramond, Georgia, sans-serif;
  --font--family: Montserrat, sans-serif;
  --color--blu-light: #63e3e5;
  --color--white: #fff;
  --color--gold: #bb9f71;
  --blu-dark: #0c2e38;
  --text-dark: #1f4747;          /* testo dentro i bottoni (ex "blissfull text") */
  --h1--size: 2.2rem;
  --h1--height: 2.4rem;
  --h2--size: 1.2rem;
  --h2--height: 1.8rem;
  --font--size-payoff: 1.2rem;
  --font--height-payoff: 1.7rem;
  --button--text-size: .9rem;
  --button--text-height: 1.2rem;
  --font--size-footer: .9rem;
  --font--height-footer: 1.2rem;
  --font--size: 1rem;
  --font--height: 1rem;
  --logo--width: 16rem;

  /* Sfondo e onde: devono restare coerenti con js/waves.js */
  --bg-image: url("https://cdn.prod.website-files.com/69a06a38479364fc15f801d0/69a1a78c3d93bb9ee5c18e71_BG.avif");
  --bg-fallback: #0e6f9f;
  --wave-front: #003e61;
}

/* ---------- Base (sottoinsieme del reset di Webflow) ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  color: #333;
  justify-content: center;
  align-items: center;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  display: flex;
  background: transparent;
}

/* Fondo della pagina: il blu dell'onda in primo piano. È quello che si
   vede nell'intro, sotto al mare che scende dall'alto, e si raccorda
   senza stacchi con la prima onda. L'acqua azzurra (BG.avif) sta invece
   su .state_wrapper: scende insieme alle onde, come un'unica scena. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--wave-front);
}

img { max-width: 100%; vertical-align: middle; display: inline-block; border: 0; }

a { background-color: transparent; color: var(--color--white); text-decoration: underline; }

p { margin-top: 0; margin-bottom: 10px; }

button, input, textarea { color: inherit; font: inherit; margin: 0; }

label { margin-bottom: 5px; font-weight: bold; display: block; }

h1 {
  width: auto;
  height: auto;
  font-family: var(--font--family-2);
  font-style: italic;
  color: var(--color--blu-light);
  font-size: var(--h1--size);
  line-height: var(--h1--height);
  text-align: center;
  margin: 0;
  font-weight: 500;
  position: relative;
}

h2 {
  font-family: var(--font--family);
  color: var(--color--white);
  font-size: var(--h2--size);
  line-height: var(--h2--height);
  text-align: center;
  margin: 0;
  font-weight: 400;
}

.w-inline-block { max-width: 100%; display: inline-block; }

.w-input {
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857;
  color: #333;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  display: block;
}
.w-input:focus { border-color: #3898ec; outline: 0; }
textarea.w-input { height: auto; resize: vertical; }

.w-form { margin: 0 0 15px; }
.w-form-done { text-align: center; padding: 20px; display: none; }
.w-form-fail { background-color: #ffdede; margin-top: 10px; padding: 10px; display: none; }

.w-background-video { color: #fff; height: 500px; position: relative; overflow: hidden; }
.w-background-video > video {
  object-fit: cover;
  z-index: -100;
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  inset: -100%;
}

/* Il bordo inferiore del video sfuma nel blu dell'onda in primo piano,
   che è anche il fondo della pagina: mentre il mare scende dall'alto non
   c'è nessuno stacco. (Su Webflow il video diventava trasparente; qui
   avrebbe lasciato intravedere lo sfondo azzurro sopra la prima onda.) */
.waves-blissful-bottle::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 70%, var(--wave-front) 100%);
  pointer-events: none;
}

/* Finché js/app.js non ha impostato lo stato iniziale dell'intro, la
   scena resta nascosta: evita di vedere per un attimo il mare già al
   suo posto prima che l'animazione lo faccia scendere. */
html:not(.ready) .state_wrapper,
html:not(.ready) .footer_container { visibility: hidden; }

/* ---------- Struttura ---------- */

.section {
  width: 100%;
  height: 100vh;
  min-height: 600px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
  overflow: hidden;
}

.state_wrapper {
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  background: var(--bg-fallback) var(--bg-image) center / cover no-repeat;
}

.content_container {
  flex-flow: column;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  inset: 0%;
  overflow: hidden;
}

.layer_transition {
  z-index: 1000;
  background-color: var(--blu-dark);
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  inset: 0%;
}

.space { width: 100%; height: 1rem; position: relative; }
.space._2 { height: 2rem; }

/* ---------- Intro ---------- */

.logo_container {
  z-index: 1;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 600px;
  display: none;
  position: absolute;
  inset: 0%;
}

.logo { z-index: 3; position: relative; inset: 0%; color: #4affff; }

/* Logo disegnato come maschera sull'SVG, così prende il colore del testo */
.logo-mark {
  width: 253px;
  max-width: 100%;
  aspect-ratio: 253 / 94;
  background-color: currentColor;
  -webkit-mask: url("https://cdn.prod.website-files.com/69a06a38479364fc15f801d0/69a573fefa053d7ce6c09e6e_theBottle_logo.svg") center / contain no-repeat;
  mask: url("https://cdn.prod.website-files.com/69a06a38479364fc15f801d0/69a573fefa053d7ce6c09e6e_theBottle_logo.svg") center / contain no-repeat;
}

.payoff {
  font-family: var(--font--family);
  color: var(--color--white);
  font-size: var(--font--size-payoff);
  line-height: var(--font--height-payoff);
  text-align: center;
  font-weight: 400;
}

/* ---------- Header e footer ---------- */

.header_container {
  z-index: 999;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 2rem 0;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.logo_small { z-index: 3; width: 9rem; position: relative; color: var(--color--blu-light); }
.logo_small .logo-mark { width: 100%; }

.footer_container {
  z-index: 999;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem 1.5rem;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.content_footer {
  border-radius: 1rem;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  padding: .8rem;
  display: flex;
}

.text_footer {
  font-family: var(--font--family);
  color: var(--color--white);
  font-size: var(--font--size-footer);
  line-height: var(--font--height-footer);
}

.text_footer.number {
  color: var(--color--blu-light);
  margin-right: .5rem;
  font-weight: 500;
  position: relative;
}

.button_icon {
  z-index: 1;
  pointer-events: none;
  width: 1.3rem;
  height: 1.3rem;
  color: var(--color--white);
  margin-right: .5rem;
  position: relative;
}

/* ---------- Bottoni ---------- */

.button_wrapper {
  z-index: 2;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.button {
  z-index: 1;
  border: 0;
  background-color: var(--color--blu-light);
  width: auto;
  font-family: var(--font--family);
  color: var(--blu-dark);
  font-size: var(--button--text-size);
  line-height: var(--button--text-height);
  text-align: left;
  border-radius: 16px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: .8rem 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .3s;
  display: flex;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.button:active { background-color: var(--blu-dark); }

.button.submit { display: block; -webkit-appearance: none; appearance: none; }

.svg-icon {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--text-dark);
  margin-right: .5rem;
}

.button_text {
  width: auto;
  color: var(--text-dark);
  white-space: nowrap;
  flex: 0 auto;
  position: relative;
}

.vertical_line {
  opacity: 0;
  width: .1rem;
  height: 100%;
  background-color: #ffffff80;
  margin-left: .2rem;
  margin-right: .2rem;
  position: relative;
}

.vertical_line.author { margin-left: .4rem; margin-right: .4rem; }

/* Bottoni che si allargano al passaggio del mouse (era nel custom code head) */

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}

.button {
  justify-content: flex-start;
  padding-left: 0.9rem;
  padding-right: 0.9rem;
  white-space: nowrap;
}

.button .svg-icon {
  flex: 0 0 auto;
  margin-right: 0;
  transition: margin-right 450ms cubic-bezier(.22,.61,.36,1);
}

.button .button_text {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(1rem);
  transition:
    max-width 450ms cubic-bezier(.22,.61,.36,1),
    opacity   260ms ease 80ms,
    transform 450ms cubic-bezier(.22,.61,.36,1);
}

.button:hover .svg-icon,
.button:focus-visible .svg-icon { margin-right: 0.5rem; }

.button:hover .button_text,
.button:focus-visible .button_text {
  max-width: 24rem;
  opacity: 1;
  transform: translateX(0);
}

@supports (interpolate-size: allow-keywords) {
  .button .button_text {
    max-width: none;
    width: 0;
    transition:
      width     450ms cubic-bezier(.22,.61,.36,1),
      opacity   260ms ease 80ms,
      transform 450ms cubic-bezier(.22,.61,.36,1);
  }
  .button:hover .button_text,
  .button:focus-visible .button_text { width: auto; }
}

/* Il bottone di invio del form ha solo testo: sempre largo */
.button.submit { padding-left: 1rem; padding-right: 1rem; }

@media (hover: none) {
  .button .button_text {
    max-width: 24rem;
    width: auto;
    opacity: 1;
    transform: none;
  }
  .button .svg-icon { margin-right: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .button .button_text,
  .button .svg-icon { transition-duration: 1ms !important; }
}

/* ---------- Mare ---------- */

.waves {
  z-index: 0;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  inset: 0 0% 0%;
}

/* Copre la riga di mezzo pixel che può restare sotto il canvas mentre il
   mare scende dall'alto (il canvas è disegnato a 720px e poi scalato). */
.waves::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 6px);
  height: 14px;
  background: var(--wave-front);
  pointer-events: none;
}

.code-embed { width: 100%; height: 100%; margin-bottom: 0; position: relative; }

.tb-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  pointer-events: none;
  z-index: 0;
}

.bottle_waves {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  inset: 0%;
}

.waves-blissful-bottle {
  z-index: 1;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: absolute;
  inset: 0%;
}

/* ---------- Stati ---------- */

.empty_state {
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.empty_waves-allert {
  z-index: 1;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0% 2rem;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.through_state {
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  display: flex;
  position: absolute;
  inset: 0%;
}

.open_bottle-allert {
  z-index: 3;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 50%;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  position: absolute;
  inset: 0%;
}

.dowload_allert { display: none; position: absolute; bottom: 21rem; }

.text-span {
  font-family: var(--font--family);
  color: var(--color--blu-light);
  font-weight: 600;
}

.text-span.mood-text,
.text-span-4,
.text-span-6 {
  font-family: var(--font--family-2);
  font-style: italic;
  color: var(--color--blu-light);
  font-size: var(--h1--size);
  line-height: var(--h1--height);
  font-weight: 500;
}

/* ---------- Bottiglia ---------- */

.bottle_composition {
  z-index: 2;
  pointer-events: none;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: none;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.cap { z-index: 0; width: 3.3rem; position: relative; top: 1.3rem; }

.bottle_big-wrapper {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.bottle_big {
  z-index: 0;
  mix-blend-mode: luminosity;
  width: 9rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  inset: auto 0% 1.5rem;
}

.loading_icon {
  z-index: 1;
  mix-blend-mode: overlay;
  width: 3.5rem;
  margin-left: auto;
  margin-right: auto;
  display: none;
  position: absolute;
  inset: 0%;
}

/* ---------- Messaggio ---------- */

.through {
  z-index: 2;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: visible;
}

.author_wrapper { padding-top: 1.5rem; display: flex; position: relative; }

.thought-text-standard {
  font-family: var(--font--family);
  color: var(--color--white);
  font-size: var(--font--size);
  line-height: var(--font--height);
  text-align: center;
  white-space: nowrap;
  font-weight: 500;
}

.thought-author {
  font-family: var(--font--family);
  color: var(--color--white);
  text-align: center;
  margin-left: .3rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1rem;
}

.through_wrapper {
  border-top: 1px solid var(--color--blu-light);
  background-color: #00000026;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1.5rem;
  display: flex;
}

.text_report {
  z-index: 1;
  font-family: var(--font--family);
  color: #fff;
  font-size: .8rem;
  line-height: 1rem;
  white-space: nowrap;
  margin-bottom: 0;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  position: relative;
  text-underline-offset: 3px;
  max-height: 3px;
}

.link { margin-left: .2rem; cursor: pointer; }
.bold-text { font-weight: 500; }

/* ---------- Popup ---------- */

.popup_wrapper {
  z-index: 1000;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  inset: 0%;
}

.popup,
.popup_report {
  z-index: 1;
  background-color: var(--blu-dark);
  border-radius: 20px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  display: none;
  position: absolute;
  inset: auto 0%;
}

.popup { padding: 4rem 2rem; }
.popup_report { padding: 2rem; }

.popup_wrapper-bg {
  z-index: 0;
  opacity: .8;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

/* ---------- Form ---------- */

.form_container {
  z-index: 1;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
}

.form-block {
  width: 80%;
  max-width: 1000px;
  color: var(--color--blu-light);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  display: flex;
}

.form {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.form_allert {
  font-family: var(--font--family);
  color: var(--color--white);
  font-size: var(--font--size-payoff);
  line-height: var(--font--height-payoff);
  text-align: center;
  font-weight: 400;
}

.field-label {
  font-family: var(--font--family);
  color: var(--color--white);
  text-align: center;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1rem;
}

.field-label.char { font-size: .8rem; font-weight: 400; line-height: 1.3rem; }

.text-field,
.text_area {
  border-style: solid none none;
  border-width: 1px;
  border-color: var(--color--blu-light) #4bffff66 #4bffff66;
  width: 100%;
  font-family: var(--font--family);
  color: var(--color--blu-light);
  font-size: var(--font--size-payoff);
  line-height: var(--font--height-payoff);
  text-align: center;
  background-color: #00000026;
  border-radius: .7rem;
  margin-top: .5rem;
}

.text-field { height: 3rem; margin-bottom: 0; padding: .8rem; }
.text_area { min-height: 142px; margin-bottom: 2rem; padding: 1rem; }

.text-field:focus, .text_area:focus { border-top-color: var(--color--blu-light); }
.text-field::placeholder, .text_area::placeholder { color: #4bffff66; }

.success-message { background-color: transparent; padding: 0; }

.success_wrapper {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

/* =====================================================================
   Tablet
   ===================================================================== */

@media screen and (max-width: 991px) {
  :root {
    --h1--height: 2.6rem;
    --font--size-payoff: 1rem;
    --font--height-payoff: 1.4rem;
    --button--text-height: 1rem;
    --font--size-footer: .8rem;
    --font--height-footer: 1rem;
    --logo--width: 13rem;
  }

  .section {
    height: 100svh;
    min-height: 100svh;
  }

  .footer_container { padding: 0 1rem 1rem; }
  .logo_small { width: 7rem; }
  .text-field { height: 2rem; margin-bottom: 1rem; }
  .text_area { margin-bottom: 1rem; }
  .form-block { width: 90%; }

  .through { width: 90%; height: 100%; }
  .thought-author { font-size: .9rem; }
  .thought-text-standard { font-size: .9rem; }

  .state_wrapper { height: 100svh; overflow: scroll; }

  .through_wrapper { padding-top: 1rem; padding-bottom: 1rem; }
}

/* =====================================================================
   Mobile orizzontale
   ===================================================================== */

@media screen and (max-width: 767px) {
  .section {
    height: auto;
    min-height: 100svh;
  }
}

/* =====================================================================
   Mobile verticale
   ===================================================================== */

@media screen and (max-width: 479px) {
  .section { height: 100svh; min-height: 100svh; }

  .waves { justify-content: flex-start; align-items: flex-start; }

  .empty_waves-allert { padding-left: 1.5rem; padding-right: 1.5rem; }

  .footer_container {
    justify-content: center;
    padding: 0 .8rem .8rem;
  }

  .open_bottle-allert { padding-left: 1.5rem; padding-right: 1.5rem; }

  .content_footer { justify-content: center; position: relative; }

  .form_container { padding-top: 2rem; }

  .through {
    width: 95%;
    padding-left: .5rem;
    padding-right: .5rem;
    overflow: hidden;
  }

  .button_wrapper { flex-flow: column; margin-left: 0; margin-right: 0; }

  .vertical_line { width: 100%; height: .1rem; margin: .2rem 0; display: block; }

  .button { text-align: center; width: 100%; }
  .button.submit { width: 100%; }

  .button_icon { margin-bottom: .3rem; }

  .popup, .popup_report { width: 90%; }

  .header_container { flex-flow: column-reverse; }

  .through_wrapper {
    max-height: 30vh;
    position: relative;
    overflow: scroll;
  }
}