/* ================================================================
   OCULANDIA NEXUS THEME — pelle 4D per le pagine interne.
   Caricato DOPO style.css: sovrascrive l'aspetto, non tocca il markup
   (Supabase, i18n, PWA e form continuano a funzionare invariati).
   Animazioni solo transform/opacity (GPU-composited).
   ================================================================ */
:root {
  --nx-green: #00ff66;
  --nx-red:   #ff2e4d;
  --nx-white: #f2f5ff;
  --nx-ink:   #030309;
  --nx-glass: rgba(255,255,255,.05);
  --nx-stroke: rgba(255,255,255,.13);
  --nx-ease:  cubic-bezier(.22, 1, .36, 1);
}

html { background: var(--nx-ink); }
body {
  background: transparent !important;
  color: var(--nx-white);
}

/* sfondo 4D: canvas iniettato da nexus-theme.js + glow statici + vignetta */
#nexus-bg { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 8% 0%, rgba(0,255,102,.09), transparent 65%),
    radial-gradient(ellipse 60% 40% at 95% 8%, rgba(255,46,77,.08), transparent 65%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, transparent 52%, rgba(2,2,10,.55) 100%);
}

/* ---------- navigazione ---------- */
.top-nav {
  background: rgba(4,4,14,.55) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--nx-stroke);
}
.top-nav a { color: var(--nx-white); transition: color .3s, text-shadow .3s; }
.top-nav a:hover, .top-nav a[aria-current] {
  color: var(--nx-green);
  text-shadow: 0 0 14px rgba(0,255,102,.6);
}
.nav-bottom {
  background: rgba(4,4,14,.7) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-top: 1px solid var(--nx-stroke);
}
.nav-bottom .nav-item[aria-current], .nav-bottom .nav-item:hover { color: var(--nx-green) !important; }

/* ---------- tipografia sezioni (stile archivio) ---------- */
.kicker {
  color: var(--nx-green) !important;
  letter-spacing: .42em !important;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(0,255,102,.4);
}
.section-title, h1.section-title, h2.section-title {
  background: linear-gradient(100deg, var(--nx-white) 20%, var(--nx-green) 62%, var(--nx-red) 98%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(0,255,102,.22));
}
.section-sub { color: rgba(242,245,255,.62) !important; }

/* ---------- pannelli olografici ---------- */
.card-glass, .card, .setup-grid > *, .event-card, .deal-card, .news-card, .prose {
  background: linear-gradient(150deg, rgba(0,255,102,.07), rgba(4,4,14,.62) 45%, rgba(255,46,77,.06)) !important;
  border: 1px solid rgba(0,255,102,.22) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 0 30px rgba(0,255,102,.07), inset 0 0 22px rgba(255,255,255,.02);
  border-radius: 14px;
}
.prose { padding: 1.1rem 1.3rem; }
details.card-glass summary { color: var(--nx-green); }

/* ---------- bottoni: pillole magnetiche neon ---------- */
.btn {
  border-radius: 999px !important;
  letter-spacing: .18em; text-transform: uppercase; font-size: .78rem;
  transition: transform .35s var(--nx-ease), box-shadow .35s, border-color .35s;
  will-change: transform;
  position: relative;
}
.btn-primary {
  background: linear-gradient(135deg, rgba(0,255,102,.16), rgba(255,46,77,.12)) !important;
  border: 1px solid rgba(0,255,102,.45) !important;
  color: var(--nx-white) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-primary:hover { box-shadow: 0 0 26px rgba(0,255,102,.4), 0 0 60px rgba(255,46,77,.22); transform: translateY(-2px); }
.btn-secondary {
  background: var(--nx-glass) !important;
  border: 1px solid var(--nx-stroke) !important;
  color: var(--nx-white) !important;
}
.btn-secondary:hover { border-color: rgba(0,255,102,.5); color: var(--nx-green) !important; transform: translateY(-2px); }

/* ---------- form ---------- */
input, select, textarea {
  background: rgba(4,4,14,.6) !important;
  border: 1px solid var(--nx-stroke) !important;
  color: var(--nx-white) !important;
  border-radius: 10px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(0,255,102,.55) !important;
  box-shadow: 0 0 18px rgba(0,255,102,.18);
}
.field label { color: rgba(242,245,255,.55); letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; }

/* ---------- footer / varie ---------- */
footer { background: rgba(4,4,14,.6) !important; border-top: 1px solid var(--nx-stroke); }
a { transition: color .25s; }
::selection { background: rgba(0,255,102,.3); }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--nx-ink); }
::-webkit-scrollbar-thumb { background: rgba(0,255,102,.35); border-radius: 2px; }

/* ---------- reveal-on-scroll (classi iniettate da nexus-theme.js) ---------- */
.nx-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--nx-ease), transform .8s var(--nx-ease); will-change: transform; }
.nx-reveal.nx-in { opacity: 1; transform: none; }

/* ---------- rail di avanzamento lettura ---------- */
.nx-rail {
  position: fixed; right: clamp(.6rem, 1.6vw, 1.2rem); top: 50%; z-index: 50;
  width: 2px; height: 30vh; transform: translateY(-50%);
  background: rgba(255,255,255,.08); pointer-events: none;
}
.nx-rail span {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--nx-green), var(--nx-white), var(--nx-red));
  transform-origin: top; transform: scaleY(0); will-change: transform;
}

/* ---------- cursore custom (solo desktop) ---------- */
.nx-cursor {
  position: fixed; left: 0; top: 0; z-index: 90;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border: 1px solid rgba(0,255,102,.5); border-radius: 50%;
  pointer-events: none;
  transform: translate3d(-100px,-100px,0);
  transition: width .25s var(--nx-ease), height .25s var(--nx-ease), border-color .25s;
  will-change: transform;
}
.nx-cursor.hot { width: 48px; height: 48px; margin: -24px 0 0 -24px; border-color: var(--nx-red); }
@media (pointer: coarse) { .nx-cursor, .nx-rail { display: none; } }

/* ================================================================
   V2 "VIVO" — tilt 3D, titoli pulsanti, warp di pagina, ticker live
   ================================================================ */

/* ---------- tilt 3D + riflesso sulle card (classi iniettate) ---------- */
.nx-tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .35s var(--nx-ease);
  will-change: transform;
}
.nx-tilt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(242,245,255,.09), transparent 65%);
}
.nx-tilt:hover::after { opacity: 1; }
.nx-tilt:hover { transition: none; }

/* ---------- titoli vivi: pulsazione neon (come il logo del Nexus) ---------- */
@keyframes nx-breathe {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(0,255,102,.16)); opacity: .92; }
  50%      { filter: drop-shadow(0 0 26px rgba(0,255,102,.38)); opacity: 1; }
}
.nx-alive { animation: nx-breathe 3.6s ease-in-out infinite; }

/* ---------- transizione warp tra pagine ---------- */
.nx-warp {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(0,255,102,.05) 0 1px, transparent 1px 90px),
    radial-gradient(ellipse at 50% 42%, rgba(3,3,9,.4), #030309 78%);
  opacity: 1;
  transition: opacity .55s var(--nx-ease);
}
.nx-warp.nx-warp-done { opacity: 0; }
.nx-warp.nx-warp-out { opacity: 1; transition: opacity .22s ease-in; }

/* ---------- ticker live ---------- */
.nx-ticker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center;
  height: 36px; overflow: hidden;
  background: rgba(4,4,14,.72);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-top: 1px solid rgba(0,255,102,.22);
  box-shadow: 0 -8px 30px rgba(0,0,0,.35);
}
.nx-ticker-track {
  display: inline-flex; align-items: center; gap: 2rem;
  white-space: nowrap; padding-left: 100vw;
  animation: nx-scroll linear infinite;
  will-change: transform;
}
.nx-ticker:hover .nx-ticker-track { animation-play-state: paused; }
@keyframes nx-scroll { to { transform: translateX(-50%); } }
.nx-ticker a {
  color: rgba(242,245,255,.82); text-decoration: none;
  font-size: .74rem; letter-spacing: .06em;
  transition: color .25s, text-shadow .25s;
}
.nx-ticker a:hover { color: var(--nx-green); text-shadow: 0 0 12px rgba(0,255,102,.5); }
.nx-tsep { color: var(--nx-red); font-size: .5rem; }
.nx-ticker-x {
  position: sticky; right: 0; margin-left: auto; flex: 0 0 auto;
  width: 36px; height: 36px; border: none; cursor: pointer;
  background: linear-gradient(to right, transparent, rgba(4,4,14,.9) 40%);
  color: rgba(242,245,255,.6); font-size: 1rem; line-height: 1;
}
.nx-ticker-x:hover { color: var(--nx-green); }
body { scroll-padding-bottom: 40px; }
@media (max-width: 760px) {
  .nx-ticker { bottom: 58px; }          /* sopra la nav-bottom mobile */
}

/* ---------- V5.4: ARIA — spaziature generose (feedback: "troppo incollato") ---------- */
.grid { gap: 1.4rem !important; }
.social-card { padding: 1.35rem 1rem !important; }
.social-card .label { margin-top: .55rem; }
.social-card .handle { margin-top: .15rem; opacity: .75; }
.section .section-title { margin-bottom: .7rem; }
.section .grid + .section-title, .section h2.section-title { margin-top: 2.2rem; }

@media (prefers-reduced-motion: reduce) {
  .nx-reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
  .nx-alive { animation: none; }
  .nx-ticker-track { animation: none; padding-left: 1rem; }
  .nx-warp { display: none; }
  .nx-tilt { transition: none; }
}


/* === V6.1 — MODALITÀ EMBED (pagina dentro il Lettore Olografico) === */
.nexus-embed .site-header, .nexus-embed .site-footer, .nexus-embed #install-banner { display: none !important; }
.nexus-embed body { padding-top: 0 !important; }
.nexus-embed main { padding-top: .5rem !important; }


/* V6.7 — tap target: chiusura ticker ≥44px su touch */
@media (pointer: coarse) { .nx-ticker-x { width: 44px; height: 44px; } }