/* ═══════════════════════════════════════════════════════════
   3DPrismaPrint — Tema liquido / cosmico (biglietto da visita)
═══════════════════════════════════════════════════════════ */

:root {
  --prisma-deep:   #0c0618;
  --prisma-night:  #140a24;
  --prisma-violet: #1a0f32;
  --prisma-purple: #7c3aed;
  --prisma-magenta:#db2777;
  --prisma-cyan:   #3bc4f2;
  --prisma-orange: #c8511a;
  --prisma-gold:   #f5c842;
  --prisma-pink:   #e879f9;
  --purple:        #7c3aed;
  --purple-lt:     #ede5ff;
  --liquid-mesh:
    radial-gradient(ellipse 80% 60% at 12% 18%, rgba(219,39,119,.22) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 88% 12%, rgba(59,196,242,.18) 0%, transparent 52%),
    radial-gradient(ellipse 65% 50% at 72% 82%, rgba(200,81,26,.2) 0%, transparent 50%),
    radial-gradient(ellipse 60% 45% at 8% 78%, rgba(124,58,237,.24) 0%, transparent 48%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(245,200,66,.08) 0%, transparent 60%);
}

[data-theme="dark"] {
  --bg:       #0c0618;
  --bg2:      #140a24;
  --surface:  rgba(26, 16, 42, 0.92);
  --surface2: rgba(34, 20, 54, 0.88);
  --border:   rgba(124, 58, 237, 0.28);
  --text:     #f8f4ff;
  --text2:    #c8bdd8;
  --text3:    #8a7da0;
  --accent:   #e8731e;
  --accent2:  #f09040;
  --accent-lt:rgba(124, 58, 237, 0.18);
  --gold:     #f5c842;
  --gold-lt:  rgba(245, 200, 66, 0.12);
  --purple-lt:#2e1a50;
  --sh:       0 8px 32px rgba(0, 0, 0, 0.45);
  --sh-lg:    0 20px 60px rgba(124, 58, 237, 0.18);
}

[data-theme="light"] {
  --bg:       #f3eef8;
  --bg2:      #e8e0f4;
  --surface:  rgba(255, 252, 248, 0.94);
  --surface2: rgba(248, 244, 255, 0.9);
  --border:   rgba(124, 58, 237, 0.2);
  --purple-lt:#ede5ff;
}

html.prisma-themed body {
  background-color: var(--bg) !important;
  background-image: var(--liquid-mesh) !important;
  background-attachment: fixed !important;
}

#prisma-liquid-bg {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: screen;
}

[data-theme="light"] #prisma-liquid-bg {
  opacity: 0.2;
  mix-blend-mode: multiply;
}

/* ══ SCENA COSMICA — pattern geometrico leggero ══ */
#prisma-scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.prisma-stars {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 58% 18%, rgba(59,196,242,.55), transparent),
    radial-gradient(1px 1px at 82% 70%, rgba(219,39,119,.45), transparent),
    radial-gradient(1px 1px at 28% 78%, rgba(124,58,237,.4), transparent);
  background-size: 100% 100%;
}

/* Griglia esagoni + linee — discreta */
.prisma-geo {
  position: absolute;
  inset: -6%;
  opacity: 0.16;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='78' viewBox='0 0 90 78'%3E%3Cpath d='M45 3 L81 24 L81 54 L45 75 L9 54 L9 24 Z' fill='none' stroke='%237c3aed' stroke-width='.55' opacity='.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cpath d='M20 40 L140 28 M30 120 L130 108' fill='none' stroke='%233bc4f2' stroke-width='.4' opacity='.22'/%3E%3C/svg%3E");
  background-size: 90px 78px, 160px 160px;
  background-position: 0 0, 30px 20px;
  animation: prismaGeoDrift 72s linear infinite;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%);
}

[data-theme="light"] .prisma-geo {
  opacity: 0.12;
}

.prisma-geo-shape {
  position: absolute;
  fill: none;
  stroke-width: 1;
  opacity: 0.22;
  filter: drop-shadow(0 0 6px currentColor);
  animation: prismaShapePulse 14s ease-in-out infinite;
}

.prisma-geo-shape--a { left: 4%; top: 20%; width: min(110px, 14vw); color: #7c3aed; stroke: #7c3aed; animation-delay: -1s; }
.prisma-geo-shape--b { right: 6%; top: 14%; width: min(80px, 11vw); color: #3bc4f2; stroke: #3bc4f2; animation-delay: -4s; }
.prisma-geo-shape--c { left: 12%; bottom: 18%; width: min(95px, 12vw); color: #c8511a; stroke: #c8511a; animation-delay: -7s; }
.prisma-geo-shape--d,
.prisma-geo-shape--e { display: none; }

@keyframes prismaGeoDrift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-45px, -39px, 0); }
}

@keyframes prismaShapePulse {
  0%, 100% { opacity: 0.14; transform: scale(1); }
  50% { opacity: 0.28; transform: scale(1.02); }
}

/* PNG deco legacy — nascoste se presenti */
.prisma-deco,
.prisma-drips-top,
.prisma-paint-drip {
  display: none !important;
}

#nav-root { z-index: 10050; }
#prisma-cur { z-index: 100000; }
.sug-fab, .wa-fab, .sug-overlay { z-index: 9998 !important; }

@media (max-width: 700px) {
  #prisma-liquid-bg { opacity: 0.18; }
  .prisma-geo { opacity: 0.1; }
  .prisma-geo-shape { display: none; }
}

/* Nav sempre sopra tutto — NON usare body > * che copre il menu */
#nav-root {
  position: relative;
  z-index: 10050;
  pointer-events: none;
}
#nav-root .navbar,
#nav-root .hamburger,
#nav-root .nav-actions,
#nav-root .nav-logo,
#nav-root .mob-menu,
#nav-root .mob-overlay {
  pointer-events: auto !important;
}
/* Menu mobile: cliccabile SOLO quando aperto (altrimenti blocca tutta la pagina) */
#nav-root .mobile-menu {
  z-index: 10060 !important;
  pointer-events: none !important;
}
#nav-root .mobile-menu.open,
#nav-root .mobile-menu.open .mobile-menu-content,
#nav-root .mobile-menu.open .mob-link {
  pointer-events: auto !important;
}
.navbar {
  z-index: 10070 !important;
}

/* Menu hamburger su tablet/telefoni (più voci in nav) */
@media (max-width: 980px) {
  #nav-root .nav-links {
    display: none !important;
  }
  #nav-root .nav-cta {
    display: none !important;
  }
  #nav-root .navbar {
    padding: 0 12px !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  #nav-root .nav-logo {
    min-width: 0;
    flex: 1 1 auto;
  }
  #nav-root .nav-logo-text {
    font-size: 15px !important;
  }
  #nav-root .nav-actions {
    gap: 6px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    max-width: none !important;
  }
  /* WhatsApp già c'è come FAB: togli dalla navbar mobile */
  #nav-root .wa-nav-btn:not(.wa-fab) {
    display: none !important;
  }
  #nav-root .wa-nav-label {
    display: none !important;
  }
  #nav-root .lang-switch {
    transform: scale(0.92);
    transform-origin: right center;
  }
  #nav-root .hamburger {
    display: flex !important;
    position: relative !important;
    z-index: 10080 !important;
    flex-shrink: 0 !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    order: 99;
  }
  #nav-root .mobile-menu-content {
    padding: 88px 24px 40px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #nav-root .mob-link {
    font-size: clamp(1.55rem, 7vw, 2.4rem) !important;
    padding: 10px 0 !important;
  }
}

/* Banner desktop / mobile */
.banner-bg-desk { display: block; }
.banner-bg-mob { display: none; }
@media (max-width: 700px) {
  .banner-bg-desk { display: none !important; }
  .banner-bg-mob { display: block !important; }
}

/* ── Navbar vetro ── */
.navbar {
  background: rgba(12, 6, 24, 0.82) !important;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid rgba(124, 58, 237, 0.35) !important;
  box-shadow: 0 4px 30px rgba(124, 58, 237, 0.12);
}

.navbar .nav-logo-text,
.navbar .nav-links a {
  color: #e8e0f4 !important;
}

.navbar .nav-links a:hover,
.navbar .nav-links a.active {
  color: #fff !important;
}

[data-theme="light"] .navbar .nav-logo-text,
[data-theme="light"] .navbar .nav-links a {
  color: #2a1a3e !important;
}

[data-theme="light"] .navbar {
  background: rgba(255, 252, 248, 0.82) !important;
  border-bottom-color: rgba(200, 81, 26, 0.25) !important;
}

.navbar.scrolled {
  background: rgba(12, 6, 24, 0.9) !important;
}

[data-theme="light"] .navbar.scrolled {
  background: rgba(255, 252, 248, 0.95) !important;
}

/* ── Striscia arcobaleno liquida ── */
.sep-strip {
  background: linear-gradient(
    90deg,
    var(--prisma-orange) 0%,
    var(--prisma-gold) 18%,
    var(--prisma-magenta) 38%,
    var(--prisma-purple) 58%,
    var(--prisma-cyan) 78%,
    var(--prisma-orange) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: prismaStripFlow 8s linear infinite;
  height: 5px !important;
  box-shadow: 0 0 18px rgba(219, 39, 119, 0.35);
}

@keyframes prismaStripFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── Hero pagine interne ── */
.page-hero {
  background:
    linear-gradient(155deg, rgba(12,6,24,.94) 0%, rgba(26,15,50,.88) 45%, rgba(15,8,32,.92) 100%),
    var(--liquid-mesh) !important;
  border-bottom: 1px solid rgba(124, 58, 237, 0.3) !important;
}

[data-theme="light"] .page-hero {
  background:
    linear-gradient(155deg, rgba(26,15,50,.92) 0%, rgba(45,27,78,.85) 50%, rgba(20,10,36,.9) 100%),
    var(--liquid-mesh) !important;
}

.page-hero > .page-hero-copy,
.page-hero > div:not(.deco-wrap) {
  background: rgba(255, 252, 248, 0.96) !important;
  border: 1px solid rgba(245, 200, 66, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.12),
    0 24px 56px rgba(124, 58, 237, 0.22),
    0 8px 24px rgba(219, 39, 119, 0.12) !important;
}

[data-theme="dark"] .page-hero > .page-hero-copy,
[data-theme="dark"] .page-hero > div:not(.deco-wrap) {
  background: rgba(22, 14, 38, 0.94) !important;
  border-color: rgba(124, 58, 237, 0.35) !important;
  box-shadow:
    0 0 0 1px rgba(59, 196, 242, 0.1),
    0 24px 56px rgba(0, 0, 0, 0.45),
    0 8px 32px rgba(124, 58, 237, 0.2) !important;
}

.page-hero .section-label {
  color: var(--prisma-gold) !important;
}

.page-hero .section-title,
.page-hero h1 {
  background: linear-gradient(135deg, #fff 0%, var(--prisma-gold) 45%, var(--prisma-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .page-hero .section-title,
[data-theme="light"] .page-hero h1 {
  background: linear-gradient(135deg, #1c1815 0%, var(--prisma-orange) 50%, var(--prisma-purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Home hero ── */
.hero {
  background: var(--prisma-deep) !important;
}

.hero-card {
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(124, 58, 237, 0.35),
    0 0 60px rgba(219, 39, 119, 0.15) !important;
}

.hero-card::before {
  background: linear-gradient(90deg, var(--prisma-orange), var(--prisma-gold), var(--prisma-magenta), var(--prisma-cyan), var(--prisma-orange)) !important;
  background-size: 200% 100% !important;
  animation: prismaStripFlow 6s linear infinite;
}

.hero-card-overlay {
  background: transparent !important;
}

.hero-card-content {
  background: transparent !important;
}

/* Card che girano (commissione) — più coperte */
.flip-card-front,
.flip-card-back {
  background: #1a1028 !important;
}

.flip-card-front img,
.flip-card-back img {
  opacity: 1 !important;
}

/* Le nostre specialità + social */
.srv-card,
.soc-card {
  background: rgba(24, 15, 40, 0.96) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.srv-card:hover,
.soc-card:hover {
  background: rgba(32, 20, 52, 0.98) !important;
}

.srv-card p {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* ── Sezioni scure ── */
.section-dark {
  background:
    linear-gradient(180deg, #0c0618 0%, #1a0f32 42%, #140a24 100%),
    var(--liquid-mesh) !important;
}

.section-warm,
.about-sec,
.rev-sec {
  background-color: transparent !important;
}

/* ── Card vetro colorate ── */
.g-card,
.feat-card,
.news-card,
.shop-card,
.shop-prod,
.wiki-card,
.art-card,
.srv-card,
.rev-card,
.soc-card,
.flip-card-wrap .flip-card {
  border-color: rgba(124, 58, 237, 0.22) !important;
  box-shadow: var(--sh), 0 0 0 1px rgba(59, 196, 242, 0.06) !important;
}

[data-theme="dark"] .g-card,
[data-theme="dark"] .feat-card,
[data-theme="dark"] .news-card,
[data-theme="dark"] .shop-card {
  background: rgba(26, 16, 42, 0.88) !important;
}

.g-card:hover,
.feat-card:hover,
.news-card:hover {
  box-shadow: 0 16px 48px rgba(124, 58, 237, 0.28), 0 0 0 1px rgba(219, 39, 119, 0.25) !important;
}

/* Card esclusive — bordo rainbow rotante (conic) */
@property --prisma-ex-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.g-card.is-exclusive {
  --prisma-ex-angle: 0deg;
  border: 2px solid transparent !important;
  border-color: transparent !important;
  background:
    linear-gradient(rgba(26, 16, 42, 0.96), rgba(26, 16, 42, 0.96)) padding-box,
    conic-gradient(
      from var(--prisma-ex-angle),
      #c8511a,
      #f5c842,
      #db2777,
      #7c3aed,
      #3bc4f2,
      #c8511a
    ) border-box !important;
  animation: prismaExclusiveSpin 3s linear infinite !important;
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.28), 0 0 18px rgba(219, 39, 119, 0.18) !important;
}
[data-theme="light"] .g-card.is-exclusive {
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(
      from var(--prisma-ex-angle),
      #c8511a,
      #f5c842,
      #db2777,
      #7c3aed,
      #3bc4f2,
      #c8511a
    ) border-box !important;
}
.g-card.is-exclusive:hover {
  box-shadow: 0 16px 48px rgba(124, 58, 237, 0.4), 0 0 26px rgba(245, 200, 66, 0.25) !important;
  transform: translateY(-2px);
}
@keyframes prismaExclusiveSpin {
  to { --prisma-ex-angle: 360deg; }
}

/* ── Bottoni e CTA ── */
.nav-cta,
.slide-cta,
.filter-btn.active,
.sug-fab,
.sug-item a {
  background: linear-gradient(135deg, var(--prisma-orange), var(--prisma-magenta), var(--prisma-purple)) !important;
  background-size: 200% 200% !important;
  box-shadow: 0 8px 28px rgba(219, 39, 119, 0.35) !important;
}

.nav-cta:hover,
.slide-cta:hover {
  background-position: 100% 50% !important;
  box-shadow: 0 12px 36px rgba(124, 58, 237, 0.45) !important;
}

/* ── Footer ── */
.site-footer {
  background:
    linear-gradient(180deg, transparent 0%, rgba(12, 6, 24, 0.95) 24%, #0c0618 100%) !important;
  border-top: 1px solid rgba(124, 58, 237, 0.25) !important;
}

[data-theme="light"] .site-footer {
  background:
    linear-gradient(180deg, transparent 0%, rgba(26, 15, 50, 0.92) 20%, #1a0f32 100%) !important;
  color: #f0ebe4;
}

[data-theme="light"] .site-footer,
[data-theme="light"] .site-footer a,
[data-theme="light"] .site-footer p,
[data-theme="light"] .site-footer h4 {
  color: #f0ebe4 !important;
}