/* ============================================================
   DESTO — STILE GENERALE (site.css)
   Contiene: font, variabili, reset, animazioni base, spacers
============================================================ */


/* ============================================================
   FONT LOCALE
============================================================ */
@font-face {
  font-family: 'Chopard';
  src: url('../fonts/Chopard-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   VARIABILI GLOBALI
============================================================ */
:root {
  --primary: #EBDBD0;      /* Colore sabbia (testi) */
  --secondary: #722327;    /* Rosso DESTO (sfondi) */
  --hover-light: #8b3b3f;  /* Variante chiara del rosso */
  --blue-color: #356D93;   /* Blu DESTO */

  /* Font principale */
  --font-main: 'Cormorant', serif;

  /* Variabili per la pagina menu */
  --mp-height: 930px;
  --mp-red-w: 66.666%;
  --mp-sand-w: 33.333%;
  --mp-sand-h: 65%;
  --mp-blue-h: 35%;
}


/* ============================================================
   RESET / BASE
============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background-color: var(--secondary);
  color: var(--primary);
  font-family: var(--font-main);

  overflow-x: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;

  cursor: url("../logo/desto_cursor.png") 4 2, pointer;

  image-rendering: crisp-edges;
  -webkit-font-smoothing: antialiased;
}

/* Mantieni il cursore personalizzato */
a,
button,
img,
svg {
  cursor: inherit;
}


/* ============================================================
   ANIMAZIONE STANDARD fadeIn
============================================================ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   SPACERS (DIVISORI VERTICALI)
============================================================ */
.spacer {
  width: 100%;
  height: 20px;
  clear: both;
  background: transparent;
}

.spacer_medium {
  width: 100%;
  height: 45px;
  clear: both;
  background: transparent;
}

.spacer_big {
  width: 100%;
  height: 70px;
  clear: both;
  background: transparent;
}


/* ============================================================
   ANIMAZIONI SLIDE (usate da index.js)
============================================================ */
.slide-left {
  transform: translateX(-60px);
  opacity: 0;
}

.slide-right {
  transform: translateX(60px);
  opacity: 0;
}


/* ============================================================
   FIX PRESTAZIONI / RENDERING
============================================================ */
img {
  display: block;
  vertical-align: middle;
}

header,
footer {
  transform: translateZ(0); /* GPU acceleration */
  will-change: transform;
}


/* ============================================================
   ANIMAZIONI GLOBALI slide-in
============================================================ */
.animate {
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.animate.slide-in {
  opacity: 1;
  transform: translateX(0) !important;
}

/* ============================================================
   LINK GLOBALI — STILE DESTO
   ============================================================ */

a,
.section a,
.policy-section a,
.menupage-hero a {
    color: var(--primary) !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

a:hover,
.section a:hover,
.policy-section a:hover,
.menupage-hero a:hover {
    color: var(--hover-light) !important;
}