/* ── Variabili ── */
:root {
  --color-bg: #420d1d;
  --color-text: #ffffff;

  /* Logo e spaziatura — si adattano allo schermo */
  --logo-width: clamp(200px, 78vw, 360px);
  --spacing-logo-text: clamp(56px, 12vw, 30px);
  --text-size: clamp(12px, 3.2vw, 18px);
  --letter-spacing: 0.12em;

  /* Padding con safe area (iPhone notch, barra home) */
  --page-padding-x: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  --page-padding-y: max(24px, env(safe-area-inset-top), env(safe-area-inset-bottom));
}

/* Reset minimo */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout centrato */
.landing {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--page-padding-y) var(--page-padding-x);
}

.landing__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  text-align: center;
}

/* Logo — invisibile ma occupa spazio fin dall'inizio */
.landing__logo {
  width: var(--logo-width);
  max-width: 100%;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.landing__logo--hidden {
  visibility: hidden;
}

.landing__logo.is-visible {
  visibility: visible;
}

/* COMING SOON — Futura Bold */
.landing__text {
  margin-top: var(--spacing-logo-text);
  max-width: 100%;
  font-family: "Futura", "Futura PT", "Century Gothic", sans-serif;
  font-weight: 700;
  font-size: var(--text-size);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  line-height: 1.2;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* ── Smartphone piccoli (iPhone SE, etc.) ── */
@media (max-width: 374px) {
  :root {
    --logo-width: clamp(170px, 82vw, 280px);
    --spacing-logo-text: clamp(48px, 14vw, 72px);
    --text-size: clamp(11px, 3.5vw, 14px);
    --letter-spacing: 0.1em;
  }
}

/* ── Smartphone standard ── */
@media (min-width: 375px) and (max-width: 480px) {
  :root {
    --logo-width: clamp(190px, 80vw, 320px);
    --spacing-logo-text: clamp(52px, 13vw, 96px);
  }
}

/* ── Landscape su mobile ── */
@media (max-height: 500px) and (orientation: landscape) {
  .landing {
    align-items: center;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  :root {
    --logo-width: clamp(140px, 40vw, 260px);
    --spacing-logo-text: clamp(24px, 6vw, 48px);
    --text-size: clamp(11px, 2.5vw, 14px);
  }
}

/* ── Tablet ── */
@media (min-width: 768px) {
  :root {
    --logo-width: clamp(260px, 50vw, 360px);
    --spacing-logo-text: clamp(72px, 10vw, 140px);
    --text-size: clamp(14px, 2vw, 18px);
  }

  .landing__content {
    max-width: 480px;
  }
}

/* ── Desktop grande ── */
@media (min-width: 1200px) {
  :root {
    --logo-width: 360px;
    --spacing-logo-text: 140px;
    --text-size: 18px;
  }
}

/* ── Accessibilità: riduce animazioni se richiesto dal sistema ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}