/* ==========================================================
   Studio Caprioli — pagina "Sito in costruzione"
   Grafica ripresa dalla lettera per il 35° anniversario
   ========================================================== */

/* ---------- Font: Bai Jamjuree (OFL), ospitato in locale ---------- */
@font-face {
  font-family: "Bai Jamjuree";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/text-300.woff2") format("woff2");
}
@font-face {
  font-family: "Bai Jamjuree";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/text-400.woff2") format("woff2");
}
@font-face {
  font-family: "Bai Jamjuree";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/text-500.woff2") format("woff2");
}
@font-face {
  font-family: "Bai Jamjuree";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/text-600.woff2") format("woff2");
}

/* ---------- Token ---------- */
:root {
  --wine: #620c27;          /* bordeaux del logo */
  --wine-soft: rgba(98, 12, 39, .07);
  --ink: #1c1719;           /* testo principale (nero caldo, come la lettera) */
  --text: #4a4245;
  --muted: #857b7e;
  --line: rgba(28, 23, 25, .09);
  --bg: #fefcf6;            /* crema della lettera */
  --card: rgba(255, 255, 255, .72);

  --font: "Bai Jamjuree", "Helvetica Neue", Arial, sans-serif;

  /* Momento in cui compaiono testi e contatti: le lettere del logo
     si fermano intorno ai 3,5 s, mentre i numeri del 35° continuano a girare. */
  --reveal-delay: 3s;
}

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

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

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

a { color: inherit; }

.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;
}

/* ---------- Filigrana alloro + 35° ---------- */
/* il contenitore taglia la filigrana ai bordi dello schermo senza creare scroll orizzontale */
.backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(720px, 118vw, 1240px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: .04;
  pointer-events: none;
  user-select: none;
  animation: watermark-in 2.4s ease .4s both;
}

@keyframes watermark-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.97); }
  to   { opacity: .04; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- Layout ---------- */
.page {
  flex: 1;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.brand,
.status,
.footer {
  position: relative;
  z-index: 1;
}

/* ---------- Logo ---------- */
.brand { width: 100%; }

.brand__logo {
  display: block;
  width: min(100%, 560px);
  height: auto;
  margin: 0 auto;
}
svg.brand__logo { aspect-ratio: 1040 / 400; }

/* con JavaScript attivo l'<img> resta nascosto finché non viene sostituito dall'SVG in linea */
.js:not(.logo-img) img.brand__logo { visibility: hidden; }

/* ---------- Stato "sito in costruzione" ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  margin: clamp(20px, 4vh, 36px) 0 0;
  padding: 4px 12px 4px 10px;
  border: 1px solid rgba(98, 12, 39, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wine);
}

.pulse {
  position: relative;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wine);
}
.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--wine);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  from { transform: scale(1);   opacity: .8; }
  to   { transform: scale(3.2); opacity: 0; }
}

/* ---------- Footer ---------- */
.footer {
  width: 100%;
  padding: 16px 20px clamp(32px, 5vh, 48px);
  text-align: center;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--muted);
}

.footer p { margin: 0 auto; max-width: 900px; }
.footer p + p { margin-top: 4px; }

.footer__phones {
  font-size: .9rem;
  color: var(--text);
}
.footer__phones a {
  color: inherit;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.footer__phones a:hover,
.footer__phones a:focus-visible { color: var(--wine); }

.footer__legal { margin-top: 6px !important; }

.sep { margin: 0 8px; }

/* ---------- Comparsa dei contenuti ---------- */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  animation: reveal 1s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: var(--reveal-delay);
}
.footer.reveal { animation-delay: calc(var(--reveal-delay) + .3s); }

@keyframes reveal {
  to { opacity: 1; transform: none; }
}


/* ---------- Accessibilità: movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .watermark {
    animation: none;
  }
  .reveal { opacity: 1; transform: none; }
  .pulse::after { animation: none; }
}