/* ═══════════════════════════════════════════════════════════════════════════
   ADO Legal — wow-experience.css  ·  Release ?v=20260607b  ·  Round 5
   ───────────────────────────────────────────────────────────────────────────
   Layer "Wow Experience" sopra wow-round.css (R-Wow + R4).
   Caricato DOPO wow-round.css per cascade naturale.

   Filosofia: il sito deve sembrare straordinario, ma l'utente deve usarlo
   senza accorgersi della complessità tecnica.

   Regole assolute:
     - Ogni decorativo: pointer-events: none
     - Hover SOLO @media (hover: hover) and (pointer: fine)
     - Tap target ≥ 44px mobile garantito
     - Tab order + focus-visible mai compromessi
     - Reduced motion blanket rispettato
     - Zero nuovo JS

   Pseudo-elements selezionati per evitare conflitti con wow-round:
     OCCUPATI da R-Wow/R4 (non toccati qui):
       .btn-accent::before, .when-card::after, .lawyer-editorial-photo::*,
       footer::before/::after, .section--monument::after, .section--ruled::after,
       .editorial-hero-bg::*, .home-hero-bg::*
     LIBERI usati qui:
       .editorial-hero::before/::after (genitore, non figlio bg)
       .home-hero::before/::after
       .page-header-outer::before/::after
       .btn-accent::after (in aggiunta al ::before R-Wow)
       .hero-cta::after, .home-cta-primary::after
       .intake-submit::before/::after (target nuovo)
       [aria-current="page"]::after (target nuovo)

   Sezioni:
     §X1  Hero vignettatura + cornice cinematografica
     §X2  Hero entrance — animazione più scenica
     §X3  CTA doppia luce (bianco R-Wow + oro R5)
     §X4  Card premium alive (translateY + shadow + border-color)
     §X5  Nav active indicator (aria-current)
     §X6  Form intake premium (.intake-submit + .intake-field)
     §X7  Section transitions cinematografiche
     §X8  Insights cards editoriali
     §X9  Closing scene CTA finale enhanced
     §X10 Lawyer photo cornice avanzata (solo box-shadow)
     §X11 Hero title spotlight viewport
     §X12 Mobile riduzione effetti
     §X13 Reduced motion + Accessibility safety net
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   §X1  HERO VIGNETTATURA + CORNICE CINEMATOGRAFICA
   ───────────────────────────────────────────────────────────────────────────
   Aggiunge ai contenitori hero (NON ai loro .bg) una vignettatura sottile
   ai bordi + cornice oro tenue al limite della section. Pseudo del genitore,
   non confligge con i pseudo di .editorial-hero-bg (R-Wow §W1).
   ═══════════════════════════════════════════════════════════════════════════ */

.editorial-hero,
.home-hero,
.page-header-outer {
  /* isolation è già impostata in wow-round per .editorial-hero e .page-header-outer;
     ridichiarata qui per .home-hero per sicurezza */
  isolation: isolate;
}

/* Vignettatura cinematografica — più scura nei 4 angoli */
.editorial-hero::before,
.home-hero::before,
.page-header-outer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(10, 8, 6, 0.32) 100%
  );
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
}

/* Cornice oro tenue — appena percepibile al bordo inferiore della hero */
.editorial-hero::after,
.home-hero::after,
.page-header-outer::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 164, 92, 0.38) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 3;
}

/* Contenuto hero sempre sopra vignettatura */
.editorial-hero-copy,
.home-hero-content,
.page-header-shell {
  position: relative;
  z-index: 4;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §X2  HERO ENTRANCE — animazione più scenica (cinema-like)
   ───────────────────────────────────────────────────────────────────────────
   R-Wow §W2 ha già adoHeroRise. Qui aggiungo una nuova keyframe più ampia
   sulla META' (eyebrow + title) e mantengo lead/CTA come R-Wow.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes adoHeroSceneIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.985);
    filter: blur(1px);
  }
  60% {
    opacity: 0.9;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* La hero entrance più scenica si applica SOLO all'eyebrow + h1 della home,
     per non confliggere con adoHeroRise di R-Wow (che è su tutti i child) */
  .home-meta,
  .home-title {
    animation: adoHeroSceneIn 880ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .home-title {
    animation-delay: 100ms;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §X3  CTA DOPPIA LUCE — bianca (R-Wow ::before) + oro (R5 ::after)
   ───────────────────────────────────────────────────────────────────────────
   Brief richiede: linear-gradient(120°, transparent, white .22, gold .20, transparent).
   Implemento la luce ORO come ::after (mentre R-Wow ha già la luce bianca su ::before)
   per ottenere la doppia luce richiesta.
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-accent,
.hero-cta,
.home-cta-primary,
.intake-submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Garanzia: contenuto button sopra entrambe le luci */
.btn-accent > *,
.hero-cta > *,
.home-cta-primary > *,
.intake-submit > * {
  position: relative;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .btn-accent::after,
  .hero-cta::after,
  .home-cta-primary::after,
  .intake-submit::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      120deg,
      transparent 36%,
      rgba(201, 164, 92, 0.32) 50%,
      transparent 64%
    );
    transform: translateX(-130%);
    transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 1;
    /* Ritardo rispetto alla luce bianca R-Wow per effetto "doppia onda" */
    transition-delay: 80ms;
  }

  .btn-accent:hover::after,
  .hero-cta:hover::after,
  .home-cta-primary:hover::after,
  .intake-submit:hover::after,
  .btn-accent:focus-visible::after,
  .hero-cta:focus-visible::after,
  .home-cta-primary:focus-visible::after,
  .intake-submit:focus-visible::after {
    transform: translateX(130%);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §X4  CARD "PREMIUM ALIVE" — translateY + shadow + border al hover
   ───────────────────────────────────────────────────────────────────────────
   R2 ha linea oro ::before, R-Wow ha luce diagonale ::after.
   Qui aggiungo: translateY(-5px), box-shadow profonda, border-color oro.
   Solo su (hover: hover): mobile resta piatto per leggibilità.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
  .when-card,
  .insight-item,
  .diff-item,
  .scenari article,
  .lawyer-editorial {
    transition:
      transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 240ms ease;
  }

  .when-card:hover,
  .insight-item:hover,
  .diff-item:hover,
  .scenari article:hover,
  .lawyer-editorial:hover {
    transform: translateY(-5px);
    box-shadow:
      0 24px 70px rgba(10, 8, 6, 0.22),
      0 0 0 1px rgba(201, 164, 92, 0.20);
  }

  /* Border-color oro solo se la card ha già un border */
  .when-card:hover,
  .diff-item:hover {
    border-color: rgba(201, 164, 92, 0.42);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §X5  NAV ACTIVE INDICATOR
   ───────────────────────────────────────────────────────────────────────────
   nav.js setta automaticamente aria-current="page" sul link della pagina
   corrente. Qui aggiungo un underline oro permanente per indicare l'active.
   ═══════════════════════════════════════════════════════════════════════════ */

ado-nav a[aria-current="page"],
.menu-panel a[aria-current="page"] {
  position: relative;
}

ado-nav a[aria-current="page"]::after,
.menu-panel a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 164, 92, 0.78) 20%,
    rgba(201, 164, 92, 0.78) 80%,
    transparent 100%
  );
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §X6  FORM INTAKE PREMIUM
   ───────────────────────────────────────────────────────────────────────────
   Target: .intake-field (input/textarea), .intake-submit (button).
   Focus state più premium: ring oro + leggera elevazione.
   Submit button: doppia luce (già coperta in §X3 sopra) + shadow al hover.
   ═══════════════════════════════════════════════════════════════════════════ */

.intake-field {
  transition:
    border-color 240ms ease,
    box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 240ms ease;
}

.intake-field:focus,
.intake-field:focus-visible {
  border-color: rgba(201, 164, 92, 0.58);
  box-shadow:
    0 0 0 3px rgba(201, 164, 92, 0.16),
    0 4px 16px rgba(10, 8, 6, 0.08);
  outline: none;
}

/* intake-submit: shadow + box-shadow al hover desktop */
@media (hover: hover) and (pointer: fine) {
  .intake-submit {
    transition:
      transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 320ms ease,
      border-color 240ms ease;
  }

  .intake-submit:hover {
    transform: translateY(-2px);
    box-shadow:
      0 12px 32px rgba(10, 8, 6, 0.28),
      0 0 0 1px rgba(201, 164, 92, 0.32);
  }
}

/* Mobile: tap target 44px garantito + no animation hover */
@media (max-width: 700px) {
  .intake-submit {
    min-height: 48px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §X7  SECTION TRANSITIONS — passaggio cinematografico tra sezioni
   ───────────────────────────────────────────────────────────────────────────
   Tra una .section--surface (chiara) e una .section--ruled (avorio con border-top),
   creo un velo di transizione che sfuma le due. Selettori con :has() per
   targettare solo i passaggi reali.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Velo di passaggio sopra il border-top di .section--ruled */
.section--ruled:not(:first-child) {
  position: relative;
}

.section--ruled:not(:first-child) > *:first-child {
  position: relative;
  z-index: 1;
}

/* Section--surface seguita da section--ruled: aggiunge fade bottom */
.section--surface + .section--ruled::before {
  content: '';
  position: absolute;
  top: -32px;
  left: 0;
  right: 0;
  height: 32px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(244, 239, 230, 0.42) 100%
  );
  pointer-events: none;
  z-index: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §X8  INSIGHTS CARDS — editoriali avanzati
   ───────────────────────────────────────────────────────────────────────────
   R-Wow §P10 ha già letter-spacing su .insight-meta/.insight-kicker al hover.
   Qui aggiungo: title-color shift + barra oro alla base.
   ═══════════════════════════════════════════════════════════════════════════ */

.insight-item {
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .insight-item .insight-title {
    transition: color 280ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .insight-item:hover .insight-title {
    transform: translateX(2px);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §X9  CLOSING SCENE CTA FINALE — enhancement
   ───────────────────────────────────────────────────────────────────────────
   R-Wow §P6 ha già: background velato + separator + box-shadow hover.
   Qui aggiungo: bordo oro sottile permanente + radial light bottom + spacing
   verticale aumentato.
   ═══════════════════════════════════════════════════════════════════════════ */

.cta-section {
  border-bottom: 1px solid rgba(201, 164, 92, 0.14);
}

/* Radial light dal basso (oltre R4 §P6 che è dall'alto) */
.cta-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(201, 164, 92, 0.045) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.cta-section > * {
  position: relative;
  z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §X10  LAWYER PHOTO — cornice luminosa avanzata (solo box-shadow)
   ───────────────────────────────────────────────────────────────────────────
   Pseudo già occupati da R-Wow §W8 (::after) e R4 §P7 (::before).
   Qui aggiungo SOLO box-shadow + filter via :hover sul container,
   nessun pseudo nuovo.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
  .lawyer-editorial {
    transition: filter 320ms ease;
  }

  .lawyer-editorial:hover {
    filter: contrast(1.04) saturate(1.06);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §X11  HERO TITLE — spotlight viewport entrance
   ───────────────────────────────────────────────────────────────────────────
   Aggiunge text-shadow tenue dietro al titolo hero per effetto "spotlight".
   Solo sui titoli grandi delle hero (.page-title, .home-title).
   ═══════════════════════════════════════════════════════════════════════════ */

.page-title,
.home-title,
.editorial-hero-copy h1 {
  text-shadow: 0 1px 24px rgba(201, 164, 92, 0.06);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §X12  MOBILE — riduzione effetti pesanti
   ───────────────────────────────────────────────────────────────────────────
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  /* Vignettatura hero più tenue su mobile (touch ≠ cinema) */
  .editorial-hero::before,
  .home-hero::before,
  .page-header-outer::before {
    background: radial-gradient(
      ellipse at center,
      transparent 60%,
      rgba(10, 8, 6, 0.18) 100%
    );
  }

  /* Cornice oro hero leggermente meno larga */
  .editorial-hero::after,
  .home-hero::after,
  .page-header-outer::after {
    left: 14%;
    right: 14%;
  }

  /* Insight title traslazione disattivata (no hover persistente touch) */
  .insight-item:hover .insight-title {
    transform: none;
  }

  /* Closing scene radial bottom ridotto */
  .cta-section::after {
    height: 30%;
    opacity: 0.6;
  }

  /* Section transition velo: spento (no hover, no scroll cinematico mobile) */
  .section--surface + .section--ruled::before {
    display: none;
  }

  /* Text-shadow titoli ridotto */
  .page-title,
  .home-title,
  .editorial-hero-copy h1 {
    text-shadow: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §X13  REDUCED MOTION + ACCESSIBILITY SAFETY NET
   ───────────────────────────────────────────────────────────────────────────
   Blanket override per utenti con prefers-reduced-motion. Garantisce focus
   ring sempre visibile e tap target rinforzati.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  /* Disattivo TUTTE le animazioni/transizioni introdotte in wow-experience */
  .editorial-hero::before,
  .home-hero::before,
  .page-header-outer::before,
  .editorial-hero::after,
  .home-hero::after,
  .page-header-outer::after,
  .btn-accent::after,
  .hero-cta::after,
  .home-cta-primary::after,
  .intake-submit::after,
  .when-card,
  .insight-item,
  .diff-item,
  .scenari article,
  .lawyer-editorial,
  .intake-field,
  .intake-submit,
  .insight-item .insight-title {
    transition: none !important;
    animation: none !important;
  }

  /* Hero scene-in disattivato */
  .home-meta,
  .home-title {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* Card hover effects neutralizzati ma stato base resta visibile */
  .when-card:hover,
  .insight-item:hover,
  .diff-item:hover,
  .scenari article:hover,
  .lawyer-editorial:hover {
    transform: none !important;
  }
}

/* Focus-visible rinforzato per accessibilità (oltre R2 outline gold) */
.intake-field:focus-visible,
.intake-submit:focus-visible,
.btn-accent:focus-visible,
.hero-cta:focus-visible,
.home-cta-primary:focus-visible {
  outline: 2px solid rgba(201, 164, 92, 0.78);
  outline-offset: 3px;
}

/* Tap target safety net: garanzia 44px su tutti gli interattivi mobile */
@media (max-width: 700px) and (pointer: coarse) {
  .btn-accent,
  .hero-cta,
  .home-cta-primary,
  .home-cta-secondary,
  .intake-submit,
  ado-nav a,
  ado-nav button,
  .menu-panel a {
    min-height: 44px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FINE wow-experience.css  ·  Release ?v=20260607b
   ═══════════════════════════════════════════════════════════════════════════ */