/* ==========================================================================
   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%); } }

/* ---------- Rispetto per chi disattiva le animazioni ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before, .text-gradient { animation: none; }
  .ssm-reveal { opacity: 1; transform: none; }
  * { transition-duration: .01ms !important; }
}