/*
  /$$$$$$  /$$   /$$ /$$      /$$  /$$$$$$  /$$$$$$$$ /$$$$$$$$ /$$   /$$
 /$$__  $$| $$  | $$| $$$    /$$$ /$$__  $$|__  $$__/| $$_____/| $$  / $$
| $$  \ $$| $$  | $$| $$$$  /$$$$| $$  \ $$   | $$   | $$      |  $$/ $$/
| $$$$$$$$| $$  | $$| $$ $$/$$ $$| $$$$$$$$   | $$   | $$$$$    \  $$$$/ 
| $$__  $$| $$  | $$| $$  $$$| $$| $$__  $$   | $$   | $$__/     >$$  $$ 
| $$  | $$| $$  | $$| $$\  $ | $$| $$  | $$   | $$   | $$       /$$/\  $$
| $$  | $$|  $$$$$$/| $$ \/  | $$| $$  | $$   | $$   | $$$$$$$$| $$  \ $$
|__/  |__/ \______/ |__/     |__/|__/  |__/   |__/   |________/|__/  |__/

                                  a u m a t e x
   ===========================================================

   Project: Uncovered Rome
   File: variables.css
   Created: 2025-10-23
   -----------------------------------------------------------
   PURPOSE:
   Raccoglie i token globali di design (colori, timing, ombre, movimenti)
   così che ogni foglio di stile erediti valori coerenti e aggiornabili
   da un'unica sorgente.

   ===========================================================
*/

/* Palette cromatica e token base */
:root {

  --colore-1: #c89f65;

  --colore-2: #ffffff;

  --colore-3: #333333;

  --colore-4: #a8814e;

  --colore-5: #000000;

  --colore-6: #b3864f;

  --colore-7: #1a1a1a;

  --border-radius-xs: 0px;
  --border-radius-s: 0px;
  --border-radius-m: 0px;
  --border-radius-l: 0px;
  --border-radius-xl: 0px;

}

/* Alias di comodità */
:root { --gold: var(--colore-1); }

/* Preset animazioni, ombre e dinamiche generali */
:root {

  --fx-duration-xxs: 90ms;
  --fx-duration-xs: 140ms;
  --fx-duration-s: 200ms;
  --fx-duration-m: 300ms;
  --fx-duration-l: 450ms;
  --fx-duration-xl: 700ms;
  --fx-duration-xxl: 1100ms;

  --fx-delay-0: 0ms;
  --fx-delay-1: 60ms;
  --fx-delay-2: 120ms;
  --fx-delay-3: 180ms;
  --fx-delay-4: 240ms;

  --fx-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --fx-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --fx-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --fx-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --fx-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --fx-transition-base: transform var(--fx-duration-s) var(--fx-ease-standard),
                        box-shadow var(--fx-duration-s) var(--fx-ease-standard),
                        background-color var(--fx-duration-s) var(--fx-ease-standard),
                        color var(--fx-duration-s) var(--fx-ease-standard),
                        opacity var(--fx-duration-s) var(--fx-ease-standard);
  --fx-transition-fast: transform var(--fx-duration-xs) var(--fx-ease-standard),
                        opacity var(--fx-duration-xs) var(--fx-ease-standard);
  --fx-transition-slow: transform var(--fx-duration-l) var(--fx-ease-emphasized),
                        opacity var(--fx-duration-l) var(--fx-ease-emphasized);

  --fx-perspective: 1000px;
  --fx-tilt: 2.5deg;
  --fx-pop-scale: 1.01;
  --fx-press-scale: 0.99;
  --fx-parallax-translate: 12px;

  --radius-xs: 0px;
  --radius-s: 0px;
  --radius-m: 0px;
  --radius-l: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
  --radius-full: 0px;

  --color-accent: var(--colore-1, #c89f65);
  --shadow-color: 0 0 0;
  --shadow-1: 0 0 0 rgba(0,0,0,0);
  --shadow-2: 0 0 0 rgba(0,0,0,0);
  --shadow-3: 0 0 0 rgba(0,0,0,0);
  --shadow-4: 0 0 0 rgba(0,0,0,0);
  --shadow-5: 0 0 0 rgba(0,0,0,0);

  --glow-gold: 0 0 0 rgba(200, 159, 101, 0);
  --glow-gold-strong: 0 0 0 rgba(200, 159, 101, 0);
  --ring-size: 2px;
  --ring-color: rgba(200, 159, 101, .65);

  --blur-s: 4px;
  --blur-m: 8px;
  --blur-l: 16px;
  --backdrop-blur-s: saturate(120%) blur(var(--blur-s));
  --backdrop-blur-m: saturate(140%) blur(var(--blur-m));

  --z-base: 1;
  --z-floating: 10;
  --z-sticky: 100;
  --z-modal: 1000;
  --z-toast: 1100;

  --anim-fade-in: fade-in var(--fx-duration-m) var(--fx-ease-standard) both;
  --anim-fade-up: fade-up var(--fx-duration-m) var(--fx-ease-entrance) both;
  --anim-fade-down: fade-down var(--fx-duration-m) var(--fx-ease-entrance) both;
  --anim-slide-left: slide-left var(--fx-duration-m) var(--fx-ease-entrance) both;
  --anim-slide-right: slide-right var(--fx-duration-m) var(--fx-ease-entrance) both;
  --anim-pop: pop-in var(--fx-duration-s) var(--fx-ease-bounce) both;
  --anim-shimmer: shimmer var(--fx-duration-xl) linear infinite;
  --anim-glow: glow-pulse var(--fx-duration-l) var(--fx-ease-standard) infinite;
  --anim-underline: underline-sweep var(--fx-duration-s) var(--fx-ease-standard) both;
  --anim-float: float var(--fx-duration-xl) ease-in-out infinite;
  --anim-rise: rise var(--fx-duration-l) var(--fx-ease-entrance) both;
  --anim-tilt: tilt-wobble var(--fx-duration-xl) ease-in-out infinite;
  --anim-ripple: ripple var(--fx-duration-l) var(--fx-ease-standard) both;
  --anim-skeleton: skeleton var(--fx-duration-l) ease-in-out infinite;
}

@media (prefers-color-scheme: dark) {
  :root {
    --shadow-1: 0 0 0 rgba(0,0,0,0);
    --shadow-2: 0 0 0 rgba(0,0,0,0);
    --shadow-3: 0 0 0 rgba(0,0,0,0);
    --shadow-4: 0 0 0 rgba(0,0,0,0);
    --glow-gold-strong: 0 0 0 rgba(200, 159, 101, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fx-duration-xxs: 0ms; --fx-duration-xs: 0ms; --fx-duration-s: 0ms;
    --fx-duration-m: 0ms; --fx-duration-l: 0ms; --fx-duration-xl: 0ms; --fx-duration-xxl: 0ms;
  }
}

@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }

@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 16px, 0) }
  to   { opacity: 1; transform: translate3d(0, 0, 0) }
}

@keyframes fade-down {
  from { opacity: 0; transform: translate3d(0, -16px, 0) }
  to   { opacity: 1; transform: translate3d(0, 0, 0) }
}

@keyframes slide-left {
  from { opacity: 0; transform: translate3d(16px, 0, 0) }
  to   { opacity: 1; transform: translate3d(0, 0, 0) }
}

@keyframes slide-right {
  from { opacity: 0; transform: translate3d(-16px, 0, 0) }
  to   { opacity: 1; transform: translate3d(0, 0, 0) }
}

@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.92) }
  60%  { opacity: 1; transform: scale(1.04) }
  100% { transform: scale(1) }
}

@keyframes shimmer {
  0% { background-position: -200% 0 }
  100% { background-position: 200% 0 }
}

@keyframes glow-pulse {
  0%,100% { box-shadow: var(--glow-gold) }
  50% { box-shadow: var(--glow-gold-strong) }
}

@keyframes underline-sweep {
  0%   { background-size: 0% 2px }
  100% { background-size: 100% 2px }
}

@keyframes float {
  0%   { transform: translateY(0) }
  50%  { transform: translateY(-6px) }
  100% { transform: translateY(0) }
}

@keyframes rise {
  0% { opacity: 0; filter: blur(6px); transform: translate3d(0, 18px, 0) }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) }
}

@keyframes tilt-wobble {
  0% { transform: rotate3d(0,0,1, 0deg) }
  25% { transform: rotate3d(0,0,1, var(--fx-tilt)) }
  75% { transform: rotate3d(0,0,1, calc(var(--fx-tilt) * -1)) }
  100% { transform: rotate3d(0,0,1, 0deg) }
}

@keyframes ripple {
  from { box-shadow: 0 0 0 0 rgba(200,159,101,.35) }
  to   { box-shadow: 0 0 0 14px rgba(200,159,101,0) }
}

@keyframes skeleton {
  0% { opacity: .6 }
  50% { opacity: .85 }
  100% { opacity: .6 }
}

.fx-transition { transition: var(--fx-transition-base); }

.elev-1 { box-shadow: var(--shadow-1); }
.elev-2 { box-shadow: var(--shadow-2); }
.elev-3 { box-shadow: var(--shadow-3); }
.elev-4 { box-shadow: var(--shadow-4); }
.elev-5 { box-shadow: var(--shadow-5); }

.fx-interactive {
  transition: var(--fx-transition-base);
  will-change: transform, box-shadow;
}
.fx-interactive:hover { transform: translateY(-1px) scale(var(--fx-pop-scale)); }
.fx-interactive:active { transform: translateY(0) scale(var(--fx-press-scale)); }
.fx-interactive:focus-visible {
  outline: none;
  box-shadow: var(--glow-gold-strong), 0 0 0 var(--ring-size) var(--ring-color);
}

.fx-shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: var(--anim-shimmer);
}

.fx-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size var(--fx-duration-s) var(--fx-ease-standard);
}
.fx-underline:hover { background-size: 100% 2px; }

.fx-float { animation: var(--anim-float); }

.fx-rise { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(6px); }
.fx-rise.is-visible { animation: var(--anim-rise); }
:root {