/* ==========================================================================
   Salone Lamponi — landing
   ========================================================================== */

/* ---------- Font ---------- */
@font-face {
  font-family: "Erica One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/erica-one-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Erica One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/erica-one-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-variable-latin.woff2") format("woff2");
}

/* ---------- Token ---------- */
:root {
  --red: #FF0745;
  --white: #FFFFFF;

  /* Scala derivata dal layout di riferimento 1920×1080:
     1 unità = 1px del mockup, ridimensionata sul lato più vincolante */
  --u: min(100vw / 1920, 100vh / 1080);

  --logo-h:      calc(540 * var(--u));
  --gap-logo:    calc(100 * var(--u));
  --date-size:   calc(59 * var(--u));
  --gap-date:    calc(62 * var(--u));
  --contact-size: calc(32 * var(--u));
}
@supports (height: 100svh) {
  :root { --u: min(100vw / 1920, 100svh / 1080); }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--red);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--red);
  color: var(--white);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; }

a {
  color: inherit;
  text-decoration: none;
}
a:hover { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .06em; }
a:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  text-align: center;
}

.hero__logo {
  height: var(--logo-h);
  width: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
}

.hero__date {
  margin: var(--gap-logo) 0 0;
  font-family: "Erica One", "Archivo Black", Impact, sans-serif;
  font-weight: 400;
  font-size: var(--date-size);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__contacts {
  margin: var(--gap-date) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .2em .45em;
  font-style: normal;
  font-size: var(--contact-size);
  font-weight: 500;
  line-height: 1.2;
}

.hero__contacts a {
  display: inline-flex;
  align-items: center;
  gap: .22em;
}

.hero__ig {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

/* ---------- Mobile / portrait ----------
   In verticale il riferimento 16:9 renderebbe tutto troppo piccolo:
   si passa a misure guidate dalla larghezza. */
@media (max-aspect-ratio: 1/1) {
  :root {
    --logo-h:       min(72vw, 46svh);
    --gap-logo:     clamp(28px, 6svh, 64px);
    --date-size:    clamp(26px, 8.6vw, 64px);
    --gap-date:     clamp(20px, 4svh, 44px);
    --contact-size: clamp(16px, 4.6vw, 28px);
  }
}

@media (max-aspect-ratio: 1/1) and (max-width: 520px) {
  .hero__contacts {
    flex-direction: column;
    gap: .55em;
  }
  .hero__sep { display: none; }
}

/* Schermi molto bassi in orizzontale (es. telefono ruotato) */
@media (min-aspect-ratio: 1/1) and (max-height: 480px) {
  :root {
    --u: min(100vw / 1920, 100svh / 900);
  }
}

/* ---------- Ingresso ---------- */
.js .hero > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.js .hero > .hero__date     { transition-delay: .15s; }
.js .hero > .hero__contacts { transition-delay: .3s; }
.js.is-ready .hero > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .hero > * { opacity: 1; transform: none; transition: none; }
}