/* ==========================================================================
   Wendy's Italia — teaser "Sarà un sito coi fiocchi."
   Il layout desktop è costruito sul mockup (656 × 369 px): --u = 1 px del
   mockup, espresso in vw, così tutte le proporzioni restano quelle del mockup.
   ========================================================================== */

/* GT Walsheim — famiglia completa (pesi + oblique) */

@font-face {
  font-family: "GT Walsheim";
  src: url("../fonts/gt-walsheim/GT-Walsheim-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Walsheim";
  src: url("../fonts/gt-walsheim/GT-Walsheim-Thin-Oblique.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "GT Walsheim";
  src: url("../fonts/gt-walsheim/GT-Walsheim-Ultra-Light.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Walsheim";
  src: url("../fonts/gt-walsheim/GT-Walsheim-Ultra-Light-Oblique.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "GT Walsheim";
  src: url("../fonts/gt-walsheim/GT-Walsheim-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Walsheim";
  src: url("../fonts/gt-walsheim/GT-Walsheim-Light-Oblique.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "GT Walsheim";
  src: url("../fonts/gt-walsheim/GT-Walsheim-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Walsheim";
  src: url("../fonts/gt-walsheim/GT-Walsheim-Regular-Oblique.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "GT Walsheim";
  src: url("../fonts/gt-walsheim/GT-Walsheim-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Walsheim";
  src: url("../fonts/gt-walsheim/GT-Walsheim-Medium-Oblique.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "GT Walsheim";
  src: url("../fonts/gt-walsheim/GT-Walsheim-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Walsheim";
  src: url("../fonts/gt-walsheim/GT-Walsheim-Bold-Oblique.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "GT Walsheim";
  src: url("../fonts/gt-walsheim/GT-Walsheim-Ultra-Bold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Walsheim";
  src: url("../fonts/gt-walsheim/GT-Walsheim-Ultra-Bold-Oblique.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "GT Walsheim";
  src: url("../fonts/gt-walsheim/GT-Walsheim-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Walsheim";
  src: url("../fonts/gt-walsheim/GT-Walsheim-Black-Oblique.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Colori ufficiali (dagli SVG) */
  --c-wave: #029CD4;        /* onda.svg */
  --c-brand-red: #CE1126;   /* cameo / logo */
  --c-brand-blue: #00A3DD;  /* cameo / logo */
  --c-brown: #493533;       /* cameo / logo */
  --c-braid-red: #DD052B;   /* treccia-dx.svg */
  --c-band-red: #CD2028;    /* fascia (indicato dal cliente) */
  --c-band-white: #FFF9F8;  /* testo sulla fascia (indicato dal cliente) */
  --c-white: #fff;

  /* Assegnazioni */
  --c-headline: var(--c-brand-blue);
  --c-band: var(--c-band-red);
  --c-band-text: var(--c-band-white);

  /* Font */
  --ff-brand: "GT Walsheim", system-ui, sans-serif;
  --fw-headline: 900;
  --fs-headline-stretch: 100%;
  --fvs-band: "DRKM" 0;
  --hl-tracking: -0.025em;  /* spaziatura più stretta, come nel mockup */
  --hl-stroke: 0.022em;     /* ingrossa leggermente il Black (900 è il massimo del font) */
  --band-tilt: -1.6deg;     /* inclinazione in più della fascia rispetto all'azzurro */

  /* Unità mockup: 1 px del mockup desktop (656 px) */
  --u: calc(100vw / 656);

  /* Onda: altezza visibile della fascia (porzione inferiore del file) */
  --wave-h: calc(var(--u) * 108);
  --wave-w: 100vw;          /* larghezza dell'onda (altezza automatica) */
  --wave-x: 0px;            /* spostamento orizzontale dell'onda */

  /* Cameo: larghezza del disegno reale (bbox 459.86 × 425.43 nel viewBox 792 × 612) */
  --cameo-w: calc(var(--u) * 132);
  --cameo-right: calc(var(--u) * 49.2);
  --cameo-cut: 0.08;        /* frazione dell'altezza del disegno tagliata dal bordo superiore */

  /* Headline */
  --hero-h: calc(var(--u) * 369);
  /* Se lo schermo è più alto del 16:9 del mockup, headline e treccia
     scendono di metà dello spazio in più (onda e cameo restano in alto). */
  --shift: max(0px, (100svh - var(--hero-h)) / 2);

  --hl-size: calc(var(--u) * 27);
  --hl-left: calc(var(--u) * 34);
  --hl-top: calc(var(--u) * 229.6 + var(--shift));
  --hl-rotate: -12.2deg;

  /* Logo: posizione e dimensione legate alla headline */
  --logo-h: calc(var(--hl-size) * 0.78);
  --logo-left: calc(var(--hl-left) + var(--hl-size) * 3.42);
  --logo-top: calc(var(--hl-top) + var(--hl-size) * 1.9);

  /* Treccia: larghezza del file intero (viewBox 1551.74 × 713.46) */
  --braid-w: calc(var(--u) * 339.8);
  /* la fine della treccia (bordo piatto in alto a destra nel file, x > ~1380)
     resta sempre fuori dal bordo destro */
  --braid-left: calc(var(--u) * 354);
  --braid-top: calc(var(--u) * 152 + var(--shift));
  --braid-bottom: auto;
}

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

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

body {
  margin: 0;
  background: var(--c-white);
  font-family: var(--ff-brand);
  overflow-x: clip;
}

img { display: block; max-width: none; }

/* --------------------------------------------------------------------------
   Hero (stage)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  width: 100%;
  min-height: max(var(--hero-h), 100svh);
  overflow: hidden;
  isolation: isolate;
}

/* Onda: ancorata in basso nel contenitore, parte superiore tagliata.
   Larghezza --wave-w, altezza automatica: il rapporto 1440 : 631.367
   non viene mai alterato. */
.hero__wave {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--wave-h);
  overflow: hidden;
  z-index: 2;
}

.hero__wave > img {
  position: absolute;
  left: var(--wave-x);
  bottom: 0;
  width: var(--wave-w);
  height: auto;
  aspect-ratio: 1440 / 631.367;
}

/* Maschera = stesso file dell'onda, stessa dimensione e posizione:
   il cameo resta visibile solo dentro la fascia azzurra. */
.hero__wave-mask {
  position: absolute;
  inset: 0;
  /* contenuto di assets/onda.svg incorporato: le maschere da file esterno
     non vengono caricate aprendo la pagina da file:// (senza server) */
  --wave-mask: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio=%22none%22%20overflow=%22visible%22%20style=%22display:%20block%3B%22%20width=%221440%22%20height=%22631.367%22%20viewBox=%220%200%201440%20631.367%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%20%3Cg%20id=%22wave-bg%22%3E%20%3Cpath%20d=%22M1440%200V618.279C1405.18%20620.21%201371.61%20621.353%201339.35%20621.862C1308.59%20622.319%201279.05%20622.217%201250.75%20621.658C1213.93%20620.921%201179.25%20619.371%201146.83%20617.287C1115.1%20615.28%201085.54%20612.739%201058.25%20609.943C1027.26%20606.741%20999.219%20603.235%20974.286%20599.728C967.535%20598.787%20960.876%20597.822%20954.332%20596.831C922.625%20592.104%20893.269%20587.022%20865.733%20581.787C828.081%20574.62%20793.863%20567.149%20761.811%20559.805C730.611%20552.664%20701.462%20545.65%20673.235%20539.17C637.957%20531.089%20604.061%20523.872%20569.313%20518.307C540.786%20513.733%20511.684%20510.277%20480.737%20508.396C455.252%20506.821%20428.5%20506.312%20399.812%20507.126C392.07%20507.354%20384.396%20507.659%20376.815%20508.04C346.077%20509.616%20316.513%20512.564%20288.217%20516.579C251.348%20521.788%20216.623%20528.777%20184.295%20536.807C152.358%20544.736%20122.748%20553.681%2095.7189%20562.956C58.8508%20575.586%2026.7294%20588.775%200%20600.77V0H1440Z%22%20fill=%22%23029CD4%22/%3E%20%3C/g%3E%20%3Cdefs%3E%20%3Cfilter%20id=%22filter0_d_0_6%22%20x=%220%22%20y=%220%22%20width=%221440%22%20height=%22631.367%22%20filterUnits=%22userSpaceOnUse%22%20color-interpolation-filters=%22sRGB%22%3E%20%3CfeFlood%20flood-opacity=%220%22%20result=%22BackgroundImageFix%22/%3E%20%3CfeColorMatrix%20in=%22SourceAlpha%22%20type=%22matrix%22%20values=%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result=%22hardAlpha%22/%3E%20%3CfeOffset%20dy=%229.21703%22/%3E%20%3CfeComposite%20in2=%22hardAlpha%22%20operator=%22out%22/%3E%20%3CfeColorMatrix%20type=%22matrix%22%20values=%220%200%200%200%200.00728972%200%200%200%200%200.568598%200%200%200%200%200.77271%200%200%200%201%200%22/%3E%20%3CfeBlend%20mode=%22normal%22%20in2=%22BackgroundImageFix%22%20result=%22effect1_dropShadow_0_6%22/%3E%20%3CfeBlend%20mode=%22normal%22%20in=%22SourceGraphic%22%20in2=%22effect1_dropShadow_0_6%22%20result=%22shape%22/%3E%20%3C/filter%3E%20%3C/defs%3E%20%3C/svg%3E");
  -webkit-mask: var(--wave-mask) no-repeat var(--wave-x) 100% / var(--wave-w) auto;
          mask: var(--wave-mask) no-repeat var(--wave-x) 100% / var(--wave-w) auto;
}

/* Cameo (versione con contorno bianco, viewBox 475.85 × 433.43 = disegno pieno).
   --s è la scala per unità del disegno; l'anello resta della stessa misura e
   nella stessa posizione del cameo originale. Tagliato in alto dal bordo pagina
   e in basso dalla curva dell'onda (maschera). La ® resta sopra la curva. */
.hero__cameo {
  --s: calc(var(--cameo-w) / 459.86);
  position: absolute;
  right: calc(var(--cameo-right) - var(--s) * 8.55);
  top: calc(var(--s) * -425.43 * var(--cameo-cut));
  width: calc(var(--s) * 475.85);
  height: calc(var(--s) * 433.43);
}

.hero__cameo img {
  width: 100%;
  height: 100%;
}

/* Treccia: esce dal bordo destro (tagliata dall'overflow della hero) */
.hero__braid {
  position: absolute;
  left: var(--braid-left);
  top: var(--braid-top);
  bottom: var(--braid-bottom);
  width: var(--braid-w);
  z-index: 1;
}

.hero__braid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1551.74 / 713.46;
}

/* --------------------------------------------------------------------------
   Headline
   -------------------------------------------------------------------------- */
.hero__copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.headline-wrap {
  position: absolute;
  left: var(--hl-left);
  top: var(--hl-top);
  font-size: var(--hl-size);
  font-weight: var(--fw-headline);
  font-stretch: var(--fs-headline-stretch);
  line-height: 1;
  letter-spacing: var(--hl-tracking);
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-text-stroke: var(--hl-stroke) currentColor;
  paint-order: stroke fill;
  transform: rotate(var(--hl-rotate));
  transform-origin: 0 0;
}

/* L'origine della rotazione coincide con l'angolo alto-sinistro della fascia */
.headline {
  position: relative;
  margin: 0;
  font: inherit;
}

/* Tutte le righe sono centrate sull'asse della fascia (larghezza 8.6em) */
.headline__blue {
  position: absolute;
  left: 0;
  width: 9.8em;
  text-align: center;
  bottom: calc(100% + 0.09em); /* la fascia copre ~8 px (a 1440) in più della riga sopra */
  display: block;
  color: var(--c-headline);
  line-height: 0.81;
}

.headline__line { display: block; }

/* Testo della fascia a 1.1em: le misure sono espresse in em della headline.
   La fascia ruota ancora un po' in senso antiorario attorno al suo angolo
   alto-sinistro e copre di poco la parte bassa di "UN'ESPERIENZA". */
.headline__band {
  position: relative;
  z-index: 1;
  display: block;
  transform: rotate(var(--band-tilt));
  transform-origin: 0 0;
  width: calc(9.8em / 1.1);
  height: calc(1.43em / 1.1);
  background: var(--c-band);
  text-align: center;
  color: var(--c-band-text);
  font-size: 1.1em;
  font-variation-settings: var(--fvs-band);
  line-height: calc(1.43em / 1.1);
}

/* Data sotto la fascia, centrata */
.headline__date {
  width: calc(8.6em / 0.62);
  margin: calc(0.2em / 0.62) 0 0;
  text-align: center;
  color: var(--c-headline);
  font-size: 0.62em;
  line-height: 1;
  /* parallela alla fascia: stessa rotazione, stesso centro */
  transform: rotate(var(--band-tilt));
  transform-origin: 0 calc(-1.63em / 0.62);
}

.hero__logo {
  position: absolute;
  left: var(--logo-left);
  top: var(--logo-top);
  height: var(--logo-h);
  width: auto;
  aspect-ratio: 467.01 / 131.05;
}

/* --------------------------------------------------------------------------
   Tablet e mobile (portrait): stessi elementi, impaginati in verticale.
   Onda e cameo in alto, headline al centro, treccia ancorata in basso.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) and (orientation: portrait), (max-width: 767px) {
  :root {
    --u: calc(100vw / 390);
    --hero-h: max(100svh, calc(var(--u) * 600));
    --shift: 0px;

    --wave-h: calc(var(--u) * 126);
    /* Onda più larga dello schermo (proporzioni invariate) così la curva resta
       leggibile; la fascia è più alta per tenere la ® sopra la curva. */
    --wave-w: 170vw;
    --wave-x: -18vw;

    --cameo-w: calc(var(--u) * 150);
    --cameo-right: calc(var(--u) * 18);

    --hl-size: calc(var(--u) * 34);
    --hl-left: calc(var(--u) * 20);
    --hl-top: calc(var(--hero-h) / 2 - var(--u) * 22);

    --braid-w: calc(var(--u) * 470);
    --braid-left: calc(var(--u) * 46);
    --braid-top: auto;
    --braid-bottom: calc(var(--u) * 22);
  }

  .hero { min-height: var(--hero-h); }

  /* Mobile: headline su 3 righe centrate, più grande */
  .hl-w { display: block; }
  .headline__blue { width: 9em; }
  .headline__band { width: calc(9em / 1.1); }

}

/* Tablet portrait: unità più piccola, così la composizione sta in 1024 px */
@media (min-width: 600px) and (max-width: 1023px) and (orientation: portrait) {
  :root {
    --u: calc(100vw / 470);
    --hl-left: calc(var(--u) * 76);
    --cameo-right: calc(var(--u) * 40);
    --braid-left: calc(var(--u) * 110);
    --wave-h: calc(var(--u) * 132);
  }
}

/* Desktop: cameo un po' più in alto (taglio superiore maggiore). */
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  :root {
    --cameo-cut: 0.14;
  }
}


/* --------------------------------------------------------------------------
   Footer legale
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 4;
  background: var(--c-white);
  color: var(--c-brown);
  text-align: center;
  padding: 22px 24px 26px;
  line-height: 1.4;
}

.site-footer__name {
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(12px, 1.2vw, 15px);
}

.site-footer__info {
  margin: 0.4em auto 0;
  max-width: 70ch;
  font-weight: 400;
  color: color-mix(in srgb, var(--c-brown) 70%, #fff);
  font-size: clamp(11px, 1vw, 13px);
}