/* ==========================================================================
   Server Security Manager — rifiniture grafiche (caricato dopo il CSS del sito)
   Si può modificare direttamente su IONOS senza rifare la build.
   ========================================================================== */

:root {
  --ssm-cyan: oklch(0.78 0.16 200);
  --ssm-violet: oklch(0.72 0.17 300);
  --ssm-gold: oklch(0.82 0.15 85);
  --ssm-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

::selection { background: oklch(0.78 0.16 200 / 35%); color: #fff; }

/* Scrollbar */
html { scrollbar-width: thin; scrollbar-color: oklch(0.78 0.16 200 / 45%) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ssm-cyan), var(--ssm-violet));
  border-radius: 999px; border: 2px solid oklch(0.16 0.035 264);
}

/* ---------- Sfondo aurora + griglia leggera ---------- */
body { position: relative; overflow-x: hidden; }
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 32% at 18% 12%, oklch(0.78 0.16 200 / 16%), transparent 70%),
    radial-gradient(34% 30% at 84% 20%, oklch(0.72 0.17 300 / 14%), transparent 70%),
    radial-gradient(40% 34% at 60% 88%, oklch(0.7 0.14 230 / 12%), transparent 70%);
  animation: ssm-aurora 26s ease-in-out infinite alternate;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(oklch(0.98 0.02 220 / 3.5%) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.98 0.02 220 / 3.5%) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 100%);
}
@keyframes ssm-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, 3%, 0) scale(1.06); }
  100% { transform: translate3d(-3%, -2%, 0) scale(1.03); }
}
/* le pagine hanno un wrapper con sfondo pieno: lo rendiamo trasparente per mostrare l'aurora */
#root > div > .min-h-screen.bg-background,
#root .min-h-screen.bg-background { background-color: transparent; }

/* ---------- Titoli con gradiente animato ---------- */
.text-gradient {
  background-size: 220% 100%;
  animation: ssm-shine 7s linear infinite;
}
@keyframes ssm-shine { to { background-position: 220% 0; } }

/* ---------- Header ---------- */
header { transition: background-color .3s var(--ssm-ease), box-shadow .3s var(--ssm-ease), border-color .3s; }
header.ssm-scrolled {
  box-shadow: 0 10px 40px -18px oklch(0 0 0 / 70%), 0 1px 0 oklch(0.78 0.16 200 / 18%);
}
header a, header button { transition: color .2s, background-color .2s, transform .2s var(--ssm-ease); }

/* ---------- Card: lift + bordo luminoso + spotlight che segue il mouse ---------- */
[class*="rounded-2xl"][class*="border"],
[class*="rounded-xl"][class*="border"][class*="bg-card"] {
  position: relative;
  transition: transform .35s var(--ssm-ease), box-shadow .35s var(--ssm-ease), border-color .35s;
}
[class*="rounded-2xl"][class*="border"]::after,
[class*="rounded-xl"][class*="border"][class*="bg-card"]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), oklch(0.78 0.16 200 / 13%), transparent 55%);
}
@media (hover: hover) {
  [class*="rounded-2xl"][class*="border"]:hover,
  [class*="rounded-xl"][class*="border"][class*="bg-card"]:hover {
    transform: translateY(-4px);
    border-color: oklch(0.78 0.16 200 / 40%);
    box-shadow: 0 24px 60px -28px oklch(0.78 0.16 200 / 45%), 0 0 0 1px oklch(0.78 0.16 200 / 12%);
  }
  [class*="rounded-2xl"][class*="border"]:hover::after,
  [class*="rounded-xl"][class*="border"][class*="bg-card"]:hover::after { opacity: 1; }
}
/* le card VIP restano dorate */
[class*="border-vip"]:hover { border-color: oklch(0.82 0.15 85 / 55%) !important; box-shadow: 0 24px 60px -28px oklch(0.82 0.15 85 / 40%); }
/* i form non devono "saltare" mentre si scrive */
form [class*="rounded-2xl"]:hover, section:has(form) > [class*="rounded-2xl"]:hover { transform: none; }

/* ---------- Pulsanti ---------- */
a[class*="rounded-md"], button[class*="rounded-md"] { transition: transform .2s var(--ssm-ease), box-shadow .25s, filter .25s, background-color .2s, border-color .2s; }
@media (hover: hover) {
  a[class*="rounded-md"]:hover, button[class*="rounded-md"]:not(:disabled):hover { transform: translateY(-2px); }
  [class*="gradient-accent"]:hover, [class*="bg-primary"]:hover { filter: brightness(1.08); box-shadow: 0 12px 34px -10px oklch(0.78 0.16 200 / 60%); }
}
a[class*="rounded-md"]:active, button[class*="rounded-md"]:active { transform: translateY(0) scale(.98); }

/* Focus ben visibile da tastiera */
:focus-visible { outline: 2px solid var(--ssm-cyan); outline-offset: 3px; border-radius: 6px; }

/* ---------- Comparsa graduale (attivata da index.js) ---------- */
.ssm-reveal { opacity: 0; transform: translateY(26px); }
.ssm-reveal.ssm-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ssm-ease), transform .8s var(--ssm-ease);
  transition-delay: var(--ssm-delay, 0ms);
}
/* dopo la comparsa i transform delle card tornano a gestire l'hover */
.ssm-reveal.ssm-in.ssm-done { transition-delay: 0ms; transition-duration: .35s; }

/* ---------- Barra di avanzamento e "torna su" ---------- */
#ssm-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 100;
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
  background: linear-gradient(90deg, var(--ssm-cyan), var(--ssm-violet));
  box-shadow: 0 0 12px oklch(0.78 0.16 200 / 70%);
}
#ssm-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid oklch(0.78 0.16 200 / 35%);
  background: oklch(0.21 0.04 264 / 80%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--ssm-cyan); cursor: pointer; display: grid; place-items: center;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .3s, transform .3s var(--ssm-ease), box-shadow .3s;
}
#ssm-top.ssm-show { opacity: 1; transform: none; pointer-events: auto; }
#ssm-top:hover { box-shadow: 0 10px 30px -8px oklch(0.78 0.16 200 / 60%); transform: translateY(-3px); }
#ssm-top svg { width: 20px; height: 20px; }

/* ---------- Immagini (banner) ---------- */
img { image-rendering: auto; }
main img[class*="rounded"] { transition: transform .6s var(--ssm-ease), box-shadow .6s; }
@media (hover: hover) { main img[class*="rounded"]:hover { transform: scale(1.015); box-shadow: 0 30px 80px -30px oklch(0.78 0.16 200 / 45%); } }


/* ---------- Scritte animate (solo CSS: nessuna modifica al testo, sicuro con React) ---------- */
h1 { animation: ssm-title-in 1s var(--ssm-ease) both; }
@keyframes ssm-title-in {
  from { opacity: 0; transform: translateY(14px); filter: blur(8px); letter-spacing: .04em; }
  to   { opacity: 1; transform: none; filter: blur(0); letter-spacing: inherit; }
}
main h1 + p, main h1 ~ p:first-of-type { animation: ssm-fade-up .9s .25s var(--ssm-ease) both; }
@keyframes ssm-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* linea sotto i titoli di sezione che si disegna alla comparsa */
section h2 { position: relative; padding-bottom: .35em; }
section h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, oklch(0.78 0.16 200), oklch(0.7 0.2 290), transparent);
  transition: width 1s .2s var(--ssm-ease);
}
section h2.ssm-in::after, section h2.ssm-done::after { width: min(7rem, 40%); }
.text-center section h2::after, section h2.text-center::after, section .text-center h2::after { left: 50%; transform: translateX(-50%); }

/* emoji e icone nelle schede: galleggiano piano */
[class*="rounded-2xl"][class*="border"] .text-2xl:first-child,
[class*="rounded-2xl"][class*="border"] svg:first-child { animation: ssm-float 4.5s ease-in-out infinite; }
@keyframes ssm-float { 50% { transform: translateY(-3px); } }

/* schede: riflesso che attraversa al passaggio del mouse + inclinazione 3D */
@media (hover: hover) {
  [class*="rounded-2xl"][class*="border"].ssm-tilt:hover {
    transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(-4px);
  }
  [class*="rounded-2xl"][class*="border"]::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden;
    background: linear-gradient(115deg, transparent 35%, oklch(1 0 0 / 7%) 50%, transparent 65%);
    background-size: 250% 100%; background-position: 130% 0; opacity: 0;
  }
  [class*="rounded-2xl"][class*="border"]:hover::before { opacity: 1; animation: ssm-sweep 1.1s var(--ssm-ease) 1; }
}
@keyframes ssm-sweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* badge e pillole: respiro leggero */
main [class*="rounded-full"][class*="border"][class*="text-xs"] { animation: ssm-pulse 3.6s ease-in-out infinite; }
@keyframes ssm-pulse { 50% { box-shadow: 0 0 0 5px oklch(0.78 0.16 200 / 10%); } }

/* testo dei blocchi creati dal webmaster: entra con un leggero scorrimento */
.ssm-reveal p, .ssm-reveal li { transition: opacity .6s, transform .6s var(--ssm-ease); }


/* ---------- Colori animati su TUTTE le scritte ---------- */
/* Titoli: gradiente ampio e vivace */
main :is(h1, h2, h3, h4, h5, h6) {
  background-image: linear-gradient(100deg, oklch(0.97 0.01 220) 0%, oklch(0.85 0.13 200) 28%, oklch(0.8 0.15 290) 50%, oklch(0.85 0.13 200) 72%, oklch(0.97 0.01 220) 100%);
  background-size: 240% 100%;
}
/* Testi, etichette, piccoli e grandi: stessa idea ma con toni più chiari per restare leggibili */
main :is(p, li, span, label, small, strong, em, figcaption, summary, dt, dd, td, th, blockquote, a:not([class*="bg-"])),
header nav a, footer :is(p, li, span, a) {
  background-image: linear-gradient(100deg, oklch(0.84 0.03 230) 0%, oklch(0.9 0.09 205) 30%, oklch(0.88 0.09 285) 55%, oklch(0.9 0.09 205) 80%, oklch(0.84 0.03 230) 100%);
  background-size: 300% 100%;
}
main :is(h1, h2, h3, h4, h5, h6, p, li, span, label, small, strong, em, figcaption, summary, dt, dd, td, th, blockquote, a:not([class*="bg-"])),
header nav a, footer :is(p, li, span, a) {
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ssm-flow 10s ease-in-out infinite alternate;
}
/* sfasamento: non tutto si muove insieme */
main :is(p, li, span, label, small):nth-child(2n) { animation-duration: 13s; animation-delay: -4s; }
main :is(p, li, span, label, small):nth-child(3n) { animation-duration: 16s; animation-delay: -9s; }
main :is(h1, h2, h3, h4):nth-of-type(2n) { animation-duration: 12s; animation-delay: -5s; }
@keyframes ssm-flow { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* Eccezioni: pulsanti e riquadri colorati, messaggi di errore/stato, campi di testo
   (qui si ripristina solo il colore del testo: gli sfondi dei pulsanti non si toccano) */
button, a[class*="bg-"], [class*="text-destructive"], [class*="text-red"], [class*="text-green"], [class*="text-emerald"],
[class*="text-amber"], [class*="text-yellow"], input, textarea, select, option {
  -webkit-text-fill-color: currentColor !important; animation: none !important;
}
button *, a[class*="bg-"] *, [class*="bg-primary"] *, [class*="bg-gradient"] *, [class*="from-"] *, [class*="text-destructive"] *,
[class*="text-red"] *, [class*="text-green"] *, [class*="text-emerald"] *, .sr-only {
  background-image: none !important; -webkit-text-fill-color: currentColor !important; animation: none !important;
}
/* i titoli già colorati dal sito (gradiente proprio) restano com'erano */
main .text-gradient { animation: ssm-shine 7s linear infinite; }
/* le card VIP mantengono il loro oro */
main [class*="amber"] :is(h3, p, span), main [class*="yellow"] :is(h3, p, span) {
  background-image: linear-gradient(100deg, oklch(0.9 0.12 90), oklch(0.8 0.15 70), oklch(0.92 0.1 95)) !important; -webkit-text-fill-color: transparent !important;
}

/* Testo normale: si schiarisce e prende una sfumatura al passaggio sulla scheda */
main p, main li { transition: color .4s ease; }
/* Link: la sottolineatura colorata scorre */
main a:not([class*="bg-"]):not([class*="border"]) { transition: color .25s; }
main a:not([class*="bg-"]):not([class*="border"]):hover { color: oklch(0.85 0.13 200); }
/* Etichette in evidenza (badge, voci di menu attive) */
header nav a.active, header nav a[class~="font-medium"] { color: oklch(0.85 0.13 200); }

/* ---------- Rispetto per chi disattiva le animazioni ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before, .text-gradient, main *, header nav a, footer *, h1, h1 + p, main h1 ~ p, [class*="rounded"] svg, [class*="rounded-full"] { animation: none !important; }
  .ssm-reveal { opacity: 1; transform: none; }
  * { transition-duration: .01ms !important; }
}