/* ============================================================================
   ASCOM — Visual Layer V2  (PREMIUM / AI-FIRST 2026)
   ----------------------------------------------------------------------------
   Caricato IN AGGIUNTA a style.css solo quando la versione "Nuova" è attiva.
   Vincoli: colori, logo, testi, contenuti, immagini, icone, struttura, SEO e
   funzionalità INVARIATI. Qui agiamo solo su: CSS3, motion, microinterazioni,
   effetti visuali, gerarchia, spaziature, tipografia (stesso font Inter),
   hover, scroll, transizioni. Tutto GPU-accelerated (transform/opacity).
   Ogni regola è scoped sotto .v2 (body) per isolamento totale dalla v1.
   ============================================================================ */

/* --- Token estesi (riusano la palette brand esistente) -------------------- */
.v2 {
  --ease-out-soft:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);

  --reveal-dist: 34px;
  --reveal-time: 0.85s;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --glow-orange: 0 0 0 1px rgba(234,137,39,0.25), 0 18px 50px -12px rgba(234,137,39,0.45);
  --shadow-soft: 0 10px 30px -12px rgba(10,10,10,0.18);
  --shadow-float: 0 26px 60px -18px rgba(10,10,10,0.30);

  --grad-orange: linear-gradient(135deg, #f3a23f 0%, var(--brand-orange) 55%, var(--brand-orange-hover) 100%);

  --glass-bg: rgba(10,10,10,0.55);
  --glass-border: rgba(255,255,255,0.10);
}

/* --- Rendering tipografico più nitido --------------------------------------*/
.v2 body,
body.v2 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.v2 h1, .v2 h2, .v2 h3 { letter-spacing: 0.3px; }
.v2 .lead { line-height: 1.75; }

/* Selezione testo a tema brand */
.v2 ::selection { background: rgba(234,137,39,0.28); color: var(--black); }

/* ============================================================================
   SCROLL-DRIVEN PROGRESS BAR (top) — scroll-timeline nativa con fallback JS
   ============================================================================ */
.v2 .scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 2000;
  background: linear-gradient(90deg, var(--brand-orange), #ffd9a8, var(--brand-orange-hover));
  box-shadow: 0 0 12px rgba(234,137,39,0.6);
  pointer-events: none;
  will-change: transform;
}
@supports (animation-timeline: scroll()) {
  .v2 .scroll-progress {
    animation: v2-progress linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes v2-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ============================================================================
   REVEAL SYSTEM — attivo solo con JS (.v2-js) → nessun rischio no-JS / SEO
   ============================================================================ */
.v2-js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-dist), 0);
  transition:
    opacity var(--reveal-time) var(--ease-out-soft),
    transform var(--reveal-time) var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.v2-js [data-reveal="left"]  { transform: translate3d(calc(var(--reveal-dist) * -1.4), 0, 0); }
.v2-js [data-reveal="right"] { transform: translate3d(calc(var(--reveal-dist) *  1.4), 0, 0); }
.v2-js [data-reveal="zoom"]  { transform: scale(0.92); }
.v2-js [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
/* Rilascia will-change a fine animazione */
.v2-js [data-reveal].is-visible { will-change: auto; }

/* ============================================================================
   NAVBAR — glassmorphism dinamico + underline animata
   ============================================================================ */
.v2 #mainNav {
  background: rgba(10,10,10,0.72) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background var(--transition-base), box-shadow var(--transition-base),
              padding var(--transition-base), border-color var(--transition-base);
}
.v2 #mainNav.scrolled {
  background: rgba(10,10,10,0.88) !important;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6);
  padding: 0.45rem 0;
  border-bottom-color: rgba(234,137,39,0.25);
}
.v2 #mainNav .navbar-logo {
  transition: transform var(--transition-base);
}
.v2 #mainNav.scrolled .navbar-logo { transform: scale(0.92); }

.v2 #mainNav .nav-link { position: relative; }
.v2 #mainNav .nav-link::after {
  content: '';
  position: absolute;
  left: 1rem; right: 1rem;
  bottom: 0.25rem;
  height: 2px;
  background: var(--brand-orange);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--transition-base) var(--ease-out-soft);
  border-radius: 2px;
}
.v2 #mainNav .nav-link:hover::after,
.v2 #mainNav .nav-link.active::after { transform: scaleX(1); }
.v2 #mainNav .dropdown-menu {
  border-radius: var(--radius-sm);
  overflow: hidden;
  animation: v2-drop 0.28s var(--ease-out-soft) both;
}
@keyframes v2-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================================
   HERO — entrata animata, gradient overlay elegante, glow, parallax leggero
   ============================================================================ */
/* Home hero (prima <section> con video) — classe aggiunta dal JS */
.v2 .hero-v2 { position: relative; }
.v2 .hero-v2::after {
  /* Overlay gradiente + alone luminoso discreto, sopra il video, sotto al testo */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 18% 50%, rgba(234,137,39,0.18), transparent 60%),
    linear-gradient(90deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.35) 55%, rgba(10,10,10,0.10) 100%);
}
.v2 .hero-v2 > div:last-child { z-index: 2 !important; }

/* Parallax leggero sul media del hero */
.v2 .hero-v2 video,
.v2 .hero-v2 img.v2-parallax {
  will-change: transform;
  transform: translate3d(0,0,0) scale(1.08);
}

/* Entrata in stagger degli elementi del hero (gestita via classi dal JS) */
.v2-js .hero-v2 h1,
.v2-js .hero-v2 p,
.v2-js .hero-v2 .d-flex {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  animation: v2-hero-in 1s var(--ease-out-soft) forwards;
}
.v2-js .hero-v2 h1      { animation-delay: 0.15s; }
.v2-js .hero-v2 p:nth-of-type(1) { animation-delay: 0.32s; }
.v2-js .hero-v2 p:nth-of-type(2) { animation-delay: 0.46s; }
.v2-js .hero-v2 .d-flex { animation-delay: 0.62s; }
@keyframes v2-hero-in { to { opacity: 1; transform: translate3d(0,0,0); } }

/* Page hero (sottopagine) — sfondo dinamico + griglia tech discreta */
.v2 .page-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 140% at 50% -20%, #232323 0%, var(--dark-gray) 45%, var(--black) 100%);
}
.v2 .page-hero::before {
  content: '';
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 75%);
  z-index: 0;
}
.v2 .page-hero::after {
  content: '';
  position: absolute;
  width: 60vmax; height: 60vmax;
  left: 50%; top: -25vmax;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(234,137,39,0.16), transparent 60%);
  z-index: 0;
  pointer-events: none;
}
.v2 .page-hero .container { position: relative; z-index: 1; }

/* ============================================================================
   BUTTONS — hover premium, shimmer, ripple (ripple span iniettato dal JS)
   ============================================================================ */
.v2 .btn-primary,
.v2 .btn-outline-light {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  isolation: isolate;
  transition: transform var(--transition-base) var(--ease-out-back),
              box-shadow var(--transition-base),
              background var(--transition-base), color var(--transition-base);
}
.v2 .btn-primary {
  background: linear-gradient(135deg, #f3a23f 0%, var(--brand-orange) 55%, var(--brand-orange-hover) 100%);
  box-shadow: 0 8px 22px -10px rgba(234,137,39,0.7);
}
.v2 .btn-primary::before {
  /* shimmer che attraversa il bottone all'hover */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out-soft);
}
.v2 .btn-primary:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: var(--glow-orange);
}
.v2 .btn-primary:hover::before { transform: translateX(120%); }
.v2 .btn-primary:active { transform: translateY(-1px) scale(0.99); }

.v2 .btn-outline-light {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.v2 .btn-outline-light:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 16px 40px -16px rgba(255,255,255,0.4);
}

/* Ripple */
.v2 .v2-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,0.45);
  pointer-events: none;
  animation: v2-ripple 0.65s var(--ease-out-soft);
  z-index: 0;
}
@keyframes v2-ripple { to { transform: scale(2.6); opacity: 0; } }

/* Link "Scopri di più" — freccia con micro-movimento più fluido */
.v2 .card-link::after { transition: transform var(--transition-base) var(--ease-out-back); }
.v2 .card-link:hover::after { transform: translateX(6px); }

/* ============================================================================
   CARDS — elevazione, ombre dinamiche, scale, border glow soft, image zoom
   ============================================================================ */
.v2 .card-service {
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  border-left: 0;
  position: relative;
  transition: transform 0.5s var(--ease-out-soft), box-shadow 0.5s var(--ease-out-soft);
}
.v2 .card-service .card-img-wrapper {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}
.v2 .card-service::after {
  /* sottile bordo luminoso che appare in hover */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  padding: 1px;
  background: linear-gradient(135deg, rgba(234,137,39,0.9), rgba(234,137,39,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out-soft);
  pointer-events: none;
}
.v2 .card-service:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow-float);
  border-left: 0;
}
.v2 .card-service:hover::after { opacity: 1; }
.v2 .card-service:hover .card-img-wrapper img { transform: scale(1.08); }
.v2 .card-service .card-img-wrapper img { transition: transform 0.7s var(--ease-out-soft); }

/* Feature item — glass leggero + accent animato */
.v2 .feature-item {
  border-radius: var(--radius-md);
  border-left: 4px solid transparent;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out-soft), box-shadow 0.45s var(--ease-out-soft),
              border-color 0.45s var(--ease-out-soft);
}
.v2 .feature-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(var(--brand-orange), var(--brand-orange-hover));
  transform: scaleY(0);
  transform-origin: 0 0;
  transition: transform 0.5s var(--ease-out-soft);
}
.v2 .feature-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-float);
}
.v2 .feature-item:hover::before { transform: scaleY(1); }

/* Competence card */
.v2 .competence-card {
  border-radius: var(--radius-md);
  border-top: 0;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--ease-out-soft), box-shadow 0.5s var(--ease-out-soft);
}
.v2 .competence-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-hover));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--ease-out-soft);
}
.v2 .competence-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-float); }
.v2 .competence-card:hover::before { transform: scaleX(1); }
.v2 .competence-card .competence-icon {
  transition: transform 0.5s var(--ease-out-back);
}
.v2 .competence-card:hover .competence-icon { transform: translateY(-3px) scale(1.08) rotate(-3deg); }
.v2 .competence-list li {
  transition: color var(--transition-base), padding-left var(--transition-base);
}
.v2 .competence-card:hover .competence-list li { color: var(--dark-gray); }

/* Staff card */
.v2 .staff-card {
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.45s var(--ease-out-soft), box-shadow 0.45s var(--ease-out-soft), border-color 0.45s;
}
.v2 .staff-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-float); }

/* Contact info block */
.v2 .contact-info {
  border-radius: var(--radius-md);
  border-left: 4px solid var(--brand-orange);
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease-out-soft), box-shadow 0.4s;
}
.v2 .contact-info:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }

/* ============================================================================
   STATS — barra arancio con texture, count-up animato, pop in entrata
   ============================================================================ */
.v2 .section-stats {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 160% at 20% 0%, rgba(255,255,255,0.18), transparent 50%),
    linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-hover) 100%);
}
.v2 .section-stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.5;
  pointer-events: none;
}
.v2 .section-stats .stat-number {
  text-shadow: 0 8px 30px rgba(0,0,0,0.25);
  transition: transform 0.6s var(--ease-out-back);
}
.v2-js .section-stats .stat-number { display: inline-block; }
.v2 .section-stats [class*="col"]:hover .stat-number { transform: scale(1.06); }

/* ============================================================================
   SEZIONI — separatori moderni, sfondi dinamici discreti, gradienti
   ============================================================================ */
.v2 .section-features {
  position: relative;
  background:
    radial-gradient(90% 60% at 85% 0%, rgba(234,137,39,0.06), transparent 55%),
    var(--light-gray);
}
/* Separatore "aurora" sottile in cima alle sezioni chiare alternate */
.v2 .section-padding,
.v2 .section-features,
.v2 .section-clients { position: relative; }

/* Heading di sezione: piccola riga accent sotto gli h2 centrati */
.v2 .text-center > h2 { position: relative; display: inline-block; padding-bottom: 0.6rem; }
.v2 .text-center > h2::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 56px; height: 3px;
  transform: translateX(-50%) scaleX(1);
  transform-origin: 50% 50%;
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-hover));
  border-radius: 3px;
  transition: transform 0.7s var(--ease-out-soft) 0.2s;
}
/* Con JS la riga parte contratta e si espande quando l'heading entra in viewport */
.v2-js .text-center > h2::after { transform: translateX(-50%) scaleX(0); }
.v2-js .text-center.is-visible > h2::after { transform: translateX(-50%) scaleX(1); }

/* Glass panel su intro centrate (col-lg-9 .text-center) */
.v2 .section-padding .row.justify-content-center .text-center .lead { color: var(--text-gray); }

/* Immagine "Chi siamo" / about con cornice premium */
.v2 .section-padding img.img-fluid {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  transition: transform 0.6s var(--ease-out-soft);
}
.v2 .section-padding img.img-fluid:hover { transform: translateY(-6px) scale(1.01); }

/* Expertise figure — render scuri */
.v2 .expertise-figure {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  position: relative;
}
.v2 .expertise-figure::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, transparent 55%, rgba(234,137,39,0.18));
  opacity: 0;
  transition: opacity 0.5s var(--ease-out-soft);
}
.v2 .expertise-figure:hover::after { opacity: 1; }
.v2 .expertise-figure img { transition: transform 0.8s var(--ease-out-soft); }
.v2 .expertise-figure:hover img { transform: scale(1.05); }

/* ============================================================================
   PROCESS TIMELINE — connettori animati, numeri con glow
   ============================================================================ */
.v2 .process-step {
  border-top: 2px solid rgba(0,0,0,0.08);
  transition: border-color 0.4s;
}
.v2 .process-step::before {
  content: '';
  position: absolute;
  top: -2px; left: 0;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-hover));
  transition: width 0.8s var(--ease-out-soft);
}
.v2-js .process-step.is-visible::before { width: 100%; }
.v2 .process-step .step-num {
  border-radius: 12px;
  box-shadow: 0 10px 24px -10px rgba(234,137,39,0.8);
  transition: transform 0.5s var(--ease-out-back);
}
.v2 .process-step:hover .step-num { transform: translateY(-4px) rotate(-4deg) scale(1.06); }

/* ============================================================================
   CLIENTI — loghi con reveal grayscale→colore più fluido
   ============================================================================ */
.v2 .client-logos img {
  transition: filter 0.5s var(--ease-out-soft), opacity 0.5s var(--ease-out-soft),
              transform 0.5s var(--ease-out-back);
}
.v2 .client-logos img:hover { transform: translateY(-6px) scale(1.06); }

/* ============================================================================
   TESTIMONIAL / CTA — gradienti profondi, glow, separatori
   ============================================================================ */
.v2 .section-testimonial,
.v2 .section-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #161616 0%, var(--black) 60%, #0d0d0d 100%);
}
.v2 .section-cta::before,
.v2 .section-testimonial::before {
  content: '';
  position: absolute;
  width: 70vmax; height: 70vmax;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(234,137,39,0.14), transparent 60%);
  pointer-events: none;
  animation: v2-breathe 8s var(--ease-in-out-soft) infinite alternate;
}
@keyframes v2-breathe {
  from { transform: translate(-50%,-50%) scale(0.9); opacity: 0.6; }
  to   { transform: translate(-50%,-50%) scale(1.15); opacity: 1; }
}
.v2 .section-cta .container { position: relative; z-index: 1; }

/* ============================================================================
   FORM — focus premium, transizioni morbide
   ============================================================================ */
.v2 .form-control {
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.v2 .form-control:focus {
  box-shadow: 0 0 0 0.22rem rgba(234,137,39,0.22), 0 8px 24px -14px rgba(234,137,39,0.6);
  transform: translateY(-1px);
}
.v2 .alert { border-radius: var(--radius-md); }

/* Map embed */
.v2 .map-embed {
  border-radius: var(--radius-md);
  border-left: 4px solid var(--brand-orange);
  box-shadow: var(--shadow-soft);
}

/* ============================================================================
   FOOTER — rifinitura, link con micro-interazione
   ============================================================================ */
.v2 footer { position: relative; }
.v2 footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(234,137,39,0.5), transparent);
}
.v2 footer a.footer-link { transition: color var(--transition-fast), padding-left var(--transition-fast); }
.v2 footer a.footer-link:hover { padding-left: 4px; }

/* ============================================================================
   GALLERY (project) — radius + zoom morbido
   ============================================================================ */
.v2 .project-gallery img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: transform 0.6s var(--ease-out-soft), box-shadow 0.6s;
}
.v2 .project-gallery img:hover { transform: translateY(-6px) scale(1.03); box-shadow: var(--shadow-float); }

/* ============================================================================
   STAGGER — i grid di elementi ripetuti entrano in sequenza (delay via JS)
   ============================================================================ */
/* (i delay sono assegnati inline da main-v2.js tramite --reveal-delay) */

/* ============================================================================
   ACCESSIBILITÀ — rispetta prefers-reduced-motion
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .v2 *,
  .v2 *::before,
  .v2 *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .v2-js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .v2-js .hero-v2 h1,
  .v2-js .hero-v2 p,
  .v2-js .hero-v2 .d-flex { opacity: 1 !important; transform: none !important; animation: none !important; }
  .v2 .section-cta::before,
  .v2 .section-testimonial::before { animation: none !important; }
}

/* ============================================================================
   FINE-TUNING RESPONSIVE
   ============================================================================ */
@media (max-width: 991.98px) {
  .v2 #mainNav {
    background: rgba(10,10,10,0.92) !important;
  }
  .v2 .hero-v2::after {
    background:
      radial-gradient(90% 60% at 50% 30%, rgba(234,137,39,0.16), transparent 60%),
      linear-gradient(180deg, rgba(10,10,10,0.55), rgba(10,10,10,0.75));
  }
}
@media (max-width: 767.98px) {
  .v2 { --reveal-dist: 22px; --reveal-time: 0.7s; }
  .v2 .card-service:hover,
  .v2 .feature-item:hover,
  .v2 .competence-card:hover { transform: translateY(-6px); }
}