/* ============================================================================
   MHE Intelligence — FUTURE layer (round 3).
   Carica DOPO polish.css. Look futuristico 2026: liquid glass, 3D, neon, particles.
   Additivo. Disattivabile rimuovendo il <link>.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   F1. Liquid Glass (iOS 26-style) per header e nav
   NOTA: NON sovrascrivere `position` della bottom-nav (resta fixed da app.css).
   ---------------------------------------------------------------------------- */
.bottom-nav,
.app-header,
header.app-header {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42)),
    rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(26px) saturate(190%) brightness(1.05);
  -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(255, 255, 255, 0.32),
    0 8px 28px rgba(15, 23, 42, 0.08),
    0 24px 60px rgba(15, 23, 42, 0.08);
}

:root[data-appearance="dark"] .bottom-nav,
:root[data-appearance="dark"] .app-header,
:root[data-appearance="dark"] header.app-header {
  background:
    linear-gradient(135deg, rgba(20, 20, 32, 0.72), rgba(20, 20, 32, 0.5)),
    rgba(20, 20, 32, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02),
    0 8px 28px rgba(0, 0, 0, 0.5),
    0 24px 60px rgba(0, 0, 0, 0.4);
}

/* ----------------------------------------------------------------------------
   F2. 3D tilt parallax — perspective sulle aree con card cliccabili
   ---------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .card,
  .calendar-card {
    transform-style: preserve-3d;
    transition:
      transform 0.4s var(--ease-out-quart),
      box-shadow 0.4s var(--ease-out-quart);
    will-change: transform;
  }
  /* Le coordinate --tilt-x/--tilt-y arrivano da ui-future.js */
  .card[data-tilt]:hover,
  .calendar-card[data-tilt]:hover {
    transform:
      perspective(900px)
      rotateX(calc(var(--tilt-y, 0) * -6deg))
      rotateY(calc(var(--tilt-x, 0) * 6deg))
      translateZ(0);
  }
}

/* ----------------------------------------------------------------------------
   F3. Magnetic FAB — il bottone si sposta verso il cursore (gestito da JS).
   Qui solo la transizione fluida.
   ---------------------------------------------------------------------------- */
.ai-fab {
  transition:
    transform 0.2s var(--ease-spring),
    box-shadow 0.3s var(--ease-out-quart);
}

/* Quando JS setta --mag-x/--mag-y, il FAB si sposta */
.ai-fab[data-magnetic] {
  transform: translate(var(--mag-x, 0), var(--mag-y, 0));
}

/* ----------------------------------------------------------------------------
   F4. Particle starfield canvas — fisso dietro tutto sotto l'aurora
   ---------------------------------------------------------------------------- */
.mhe-starfield {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: screen;
}

:root[data-appearance="dark"] .mhe-starfield {
  opacity: 0.9;
}

/* ----------------------------------------------------------------------------
   F5. Conic gradient border animato su card "hero" / brand
   Applica con classe `.hero-border` o `[data-hero]`
   ---------------------------------------------------------------------------- */
.hero-border,
[data-hero] {
  position: relative;
  isolation: isolate;
}

.hero-border::before,
[data-hero]::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--angle, 0deg),
    var(--mhe),
    var(--accent),
    color-mix(in srgb, var(--mhe) 60%, #ec4899),
    var(--mhe)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: mhe-conic-rotate 7s linear infinite;
  pointer-events: none;
  z-index: -1;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes mhe-conic-rotate {
  to { --angle: 360deg; }
}

/* Fallback senza @property (Firefox): ruota tutto l'elemento */
@supports not (background: conic-gradient(from 0deg, red)) {
  .hero-border::before,
  [data-hero]::before {
    animation: none;
  }
}

/* ----------------------------------------------------------------------------
   F6. Stagger animate-in per liste
   Aggiungere classe `.stagger-in` su un container i cui figli devono entrare
   uno dopo l'altro con micro-delay.
   ---------------------------------------------------------------------------- */
@keyframes mhe-stagger-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.stagger-in > * {
  animation: mhe-stagger-rise 0.5s var(--ease-out-quart) both;
}
.stagger-in > *:nth-child(1) { animation-delay: 0.02s; }
.stagger-in > *:nth-child(2) { animation-delay: 0.06s; }
.stagger-in > *:nth-child(3) { animation-delay: 0.10s; }
.stagger-in > *:nth-child(4) { animation-delay: 0.14s; }
.stagger-in > *:nth-child(5) { animation-delay: 0.18s; }
.stagger-in > *:nth-child(6) { animation-delay: 0.22s; }
.stagger-in > *:nth-child(7) { animation-delay: 0.26s; }
.stagger-in > *:nth-child(8) { animation-delay: 0.30s; }
.stagger-in > *:nth-child(n+9) { animation-delay: 0.34s; }

/* Auto-applica stagger anche su DayList (lista del giorno) e CRM list */
#day-list,
#crm-list,
.day-list,
.crm-list {
  /* l'auto-stagger viene attivato da JS tramite classe .stagger-in dinamica */
}

/* ----------------------------------------------------------------------------
   F7. Cinematic logo intro (la prima volta che si entra nell'app)
   Si attiva da JS aggiungendo `body.mhe-intro-play`
   ---------------------------------------------------------------------------- */
@keyframes mhe-logo-materialize {
  0% {
    opacity: 0;
    transform: scale(0.55);
    filter: blur(28px) brightness(1.4);
  }
  60% {
    opacity: 1;
    filter: blur(0) brightness(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) brightness(1);
  }
}

body.mhe-intro-play .app-brand-logo,
body.mhe-intro-play .brand-logo,
body.mhe-intro-play .logo-mark,
body.mhe-intro-play #app-brand-logo,
body.mhe-intro-play img[src*="logo-mark"],
body.mhe-intro-play img[src*="pwa-app-icon"] {
  animation:
    mhe-logo-materialize 1.2s var(--ease-spring) both,
    mhe-breathe 5.5s ease-in-out infinite 1.4s;
}

@keyframes mhe-intro-fade {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

body.mhe-intro-play .app-header,
body.mhe-intro-play header.app-header,
body.mhe-intro-play .bottom-nav,
body.mhe-intro-play .tab-content {
  animation: mhe-intro-fade 0.8s var(--ease-out-quart) both 0.5s;
}

/* ----------------------------------------------------------------------------
   F8. Particle burst al click sui pulsanti primari (canvas globale ui-future.js)
   ---------------------------------------------------------------------------- */
.mhe-burst-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
}

/* ----------------------------------------------------------------------------
   F9. Dark mode premium: vetri neri lucidi con bordi neon
   ---------------------------------------------------------------------------- */
:root[data-appearance="dark"] {
  --bg: #0a0a13;
  --card: rgba(20, 20, 32, 0.78);
  --surface: rgba(28, 28, 42, 0.72);
  --text: #f0f0f7;
  --muted: #8e8ea0;
  --border: rgba(255, 255, 255, 0.08);
}

:root[data-appearance="dark"] body {
  background:
    radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--mhe) 18%, transparent), transparent 52%),
    radial-gradient(800px 500px at 100% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 50%),
    #0a0a13;
}

:root[data-appearance="dark"] .card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    var(--card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 12px 40px rgba(0, 0, 0, 0.4);
}

:root[data-appearance="dark"] .btn-primary {
  background: linear-gradient(135deg, var(--mhe), color-mix(in srgb, var(--mhe) 78%, var(--accent)));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px color-mix(in srgb, var(--mhe) 35%, transparent),
    0 0 28px color-mix(in srgb, var(--mhe) 45%, transparent),
    0 8px 24px rgba(0, 0, 0, 0.4);
}

:root[data-appearance="dark"] .btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px color-mix(in srgb, var(--mhe) 55%, transparent),
    0 0 36px color-mix(in srgb, var(--mhe) 65%, transparent),
    0 0 80px color-mix(in srgb, var(--mhe) 35%, transparent),
    0 12px 32px rgba(0, 0, 0, 0.5);
}

:root[data-appearance="dark"] .cal-cell.today {
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--mhe) 60%, transparent),
    0 0 18px color-mix(in srgb, var(--mhe) 25%, transparent);
}

/* ----------------------------------------------------------------------------
   F10. Animated underline neon per link e tab text
   ---------------------------------------------------------------------------- */
.bottom-nav .nav-btn.active span,
.tab-link.active,
a.is-active {
  position: relative;
}

/* ----------------------------------------------------------------------------
   F11. Toast: glass-card più premium con bordo luminoso
   ---------------------------------------------------------------------------- */
#toast,
.toast {
  background:
    linear-gradient(135deg, rgba(20, 20, 32, 0.92), rgba(30, 30, 50, 0.92));
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--mhe) 40%, rgba(255, 255, 255, 0.1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 0 32px color-mix(in srgb, var(--mhe) 30%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ----------------------------------------------------------------------------
   F12. Splash screen: respiro grafico più cinematic
   ---------------------------------------------------------------------------- */
.app-splash {
  background:
    radial-gradient(800px 500px at 50% 30%, color-mix(in srgb, var(--mhe) 25%, transparent), transparent 60%),
    radial-gradient(600px 400px at 50% 70%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%),
    var(--bg);
}

.app-splash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0, transparent 30%, rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
}