/* ==========================================================
   IoNoleggioFacile – EFFETTI GRAFICI ("lux")
   Effetti di movimento eleganti, solo su transform / opacity / filter
   (eccezione approvata: il tratto delle icone e degli anelli).
   REGOLE:
   • tutto vale solo con la classe .lux-js su <html>, che aggiunge lux.js:
     senza JavaScript la pagina è identica all'originale;
   • con "movimento ridotto" lux.js non parte: tutto statico e visibile;
   • il catalogo (#offerte, .offer, .offers) è escluso ovunque.
   Per togliere tutto: cancellare le righe di effetti.css ed effetti.js nelle pagine.
   ========================================================== */

:root { --lux-ease: cubic-bezier(.22, .8, .24, 1); }

/* ---------- Barra di avanzamento lettura ---------- */
.lux-progress {
  position: fixed; left: 0; top: 0; z-index: 90; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--turquoise), var(--yellow));
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* ---------- Header ---------- */
.lux-js .header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
  background: linear-gradient(rgba(15, 53, 73, .12), rgba(15, 53, 73, 0));
  opacity: 0; transition: opacity .35s ease;
}
.lux-js.lux-scrolled .header::after { opacity: 1; }
.lux-js .brand-mark, .lux-js .brand-logo { transform-origin: 0 50%; transition: transform .35s var(--lux-ease); }
.lux-js.lux-scrolled .header .brand-mark, .lux-js.lux-scrolled .header .brand-logo { transform: scale(.9); }
@media (min-width: 1081px) {
  .lux-js .nav a { position: relative; }
  .lux-js .nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
    background: var(--turquoise); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--lux-ease);
  }
  .lux-js .nav a:hover::after, .lux-js .nav a.lux-active::after { transform: scaleX(1); }
  .lux-js .nav a.lux-active { color: var(--teal); }
}

/* ---------- Hero ---------- */
/* luce turchese che "respira" dietro il blu */
.lux-js .hero::before {
  content: ""; position: absolute; left: -15%; top: -35%; width: 80%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(115, 210, 210, .32), rgba(115, 210, 210, 0));
  animation: lux-respiro 10s ease-in-out infinite alternate;
}
.lux-js .hero.lux-fuori::before { animation-play-state: paused; }
@keyframes lux-respiro { from { opacity: .55; transform: scale(.92); } to { opacity: 1; transform: scale(1.08); } }


/* titolo riga per riga */
.lux-riga { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.lux-riga > span { display: inline-block; animation: lux-riga 1s var(--lux-ease) both; }
.lux-riga:nth-child(2) > span { animation-delay: .14s; }
.lux-riga:nth-child(3) > span { animation-delay: .28s; }
@keyframes lux-riga { from { transform: translateY(105%); opacity: 0; } }
.lux-js .hero-copy .eyebrow, .lux-js .hero-copy .lead, .lux-js .hero-points, .lux-js .hero-price {
  animation: lux-sale .9s var(--lux-ease) both;
}
.lux-js .hero-copy .eyebrow { animation-delay: 0s; }
.lux-js .hero-copy .lead { animation-delay: .35s; }
.lux-js .hero-points { animation-delay: .45s; }
.lux-js .hero-price { animation-delay: .55s; }
.lux-js .hero-form { animation: lux-sale 1s var(--lux-ease) .25s both; }
@keyframes lux-sale { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }

/* riflesso sulla bolla gialla del prezzo (solo hero) */
.lux-js .hero-price .price-bubble { position: relative; overflow: hidden; }
.lux-js .hero-price .price-bubble::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .65) 50%, rgba(255, 255, 255, 0) 60%);
  transform: translateX(-110%); animation: lux-riflesso 1.4s var(--lux-ease) 1.3s both;
}
.lux-js .hero-price:hover .price-bubble::after { animation: lux-riflesso-2 1.1s var(--lux-ease); }
@keyframes lux-riflesso { to { transform: translateX(110%); } }
@keyframes lux-riflesso-2 { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

/* ---------- Pulsanti gialli: riflesso al passaggio (esclusi quelli del catalogo) ---------- */
.lux-js .btn-yellow:not(#offerte .btn-yellow):not(.offer .btn-yellow) { position: relative; overflow: hidden; isolation: isolate; }
.lux-js .btn-yellow:not(#offerte .btn-yellow):not(.offer .btn-yellow)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0) 65%);
  transform: translateX(-120%);
}
.lux-js .btn-yellow:not(#offerte .btn-yellow):not(.offer .btn-yellow):hover::after { transform: translateX(120%); transition: transform .8s var(--lux-ease); }
/* pulsanti "magnetici" (si avvicinano appena al cursore) */
.lux-js .lux-magnete { translate: var(--lux-bx, 0) var(--lux-by, 0); transition: translate .4s var(--lux-ease), transform .15s, box-shadow .15s; }

/* ---------- Comparsa delle sezioni: movimento + da sfocato a nitido, sfalsata ---------- */
.lux-js .reveal:where(:not(#offerte *, .offer)) {
  transform: translateY(28px); filter: blur(8px);
  transition: opacity .9s var(--lux-ease), transform .9s var(--lux-ease), filter .9s var(--lux-ease);
  transition-delay: var(--lux-ritardo, 0s);
}
.lux-js .reveal.in:where(:not(#offerte *, .offer)) { transform: none; filter: none; }
/* comparsa di elementi in più (numeri, chiusura finale) */
.lux-js .lux-appare { animation: none; opacity: 0; transform: translateY(20px); filter: blur(6px);
  transition: opacity .9s var(--lux-ease), transform .9s var(--lux-ease), filter .9s var(--lux-ease); transition-delay: var(--lux-ritardo, 0s); }
.lux-js .lux-appare.lux-visto { opacity: 1; transform: none; filter: none; }

/* ---------- Numeri di fiducia ---------- */
.lux-js .trust strong { font-variant-numeric: tabular-nums; }

/* ---------- Servizi inclusi ---------- */
.lux-js .incl { position: relative; overflow: hidden; isolation: isolate; }
.lux-js .incl::before {   /* luce che segue il mouse */
  content: ""; position: absolute; left: 0; top: 0; width: 320px; height: 320px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(115, 210, 210, .22), rgba(115, 210, 210, 0));
  translate: calc(var(--lux-x, -400px) - 160px) calc(var(--lux-y, -400px) - 160px);
  opacity: 0; transition: opacity .4s ease;
}
.lux-js .incl:hover::before { opacity: 1; }
.lux-js .incl.in:hover { border-color: rgba(115, 210, 210, .55); }
/* icone che si disegnano */
.lux-js .lux-traccia :is(path, circle, rect, ellipse, line, polyline) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.lux-js .lux-traccia.lux-disegna :is(path, circle, rect, ellipse, line, polyline) {
  stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--lux-ease) var(--lux-ritardo, 0s);
}

/* ---------- Vantaggi ---------- */
.lux-js .benefit { position: relative; }
.lux-js .benefit::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .35s ease;
}
.lux-js .benefit.in { transition: opacity .9s var(--lux-ease), transform .45s var(--lux-ease), filter .9s var(--lux-ease); transition-delay: var(--lux-ritardo, 0s); }
.lux-js .benefit.in:hover { transform: translateY(-6px); }
.lux-js .benefit:hover::after { opacity: 1; }
.lux-js .benefit .num { position: relative; }
.lux-anello { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); rotate: -90deg; pointer-events: none; overflow: visible; }
.lux-anello circle { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lux-js .benefit.in .lux-anello circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--lux-ease) calc(var(--lux-ritardo, 0s) + .35s); }

/* ---------- Per chi ---------- */
/* inclinazione 3D solo mentre il mouse è sulla scheda (a riposo il testo resta perfettamente nitido) */
.lux-js .aud.in { transition: opacity .9s var(--lux-ease), transform .5s var(--lux-ease), filter .9s var(--lux-ease); transition-delay: var(--lux-ritardo, 0s); }
.lux-js .aud.in.lux-inclina { transform: perspective(900px) rotateX(var(--lux-rx, 0deg)) rotateY(var(--lux-ry, 0deg)); }
/* bordo con gradiente che gira (una volta all'ingresso, poi solo al passaggio del mouse) */
.lux-bordo {
  position: absolute; inset: -2px; border-radius: inherit; padding: 2px; overflow: hidden; pointer-events: none;
  -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 exclude, linear-gradient(#000 0 0);
}
.lux-bordo span {
  position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0deg, var(--turquoise), var(--teal), var(--yellow), var(--turquoise), var(--teal), var(--turquoise));
}
/* le tre schede sono uguali: nessuna evidenziata a riposo */
.lux-js .aud.featured { background: transparent; border-color: var(--blue-10); box-shadow: none; }
.lux-js .aud { transition: background .35s ease, box-shadow .35s ease; }
.lux-js .aud:hover { background: var(--white); box-shadow: var(--shadow); }
/* il bordo a gradiente compare solo sulla scheda sotto il mouse */
.lux-bordo { opacity: 0; transition: opacity .4s ease; }
.lux-js .aud:hover .lux-bordo { opacity: 1; }
.lux-js .aud:hover .lux-bordo span { animation: lux-giro 7s linear infinite; }
/* pulsanti uguali (contorno blu); diventano gialli al passaggio sulla scheda */
.lux-js .aud .btn { background: transparent; color: var(--blue); border-color: var(--blue); box-shadow: none;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .15s; }
.lux-js .aud:hover .btn { background: var(--yellow); border-color: var(--yellow); box-shadow: 0 6px 18px rgba(255, 220, 70, .45); }
@keyframes lux-giro { to { transform: rotate(360deg); } }

/* ---------- FAQ: apertura e chiusura morbide ---------- */
.lux-js .faq summary::after { transition: transform .35s var(--lux-ease), background .2s; }
.lux-js .faq details[open]:not(.lux-chiude) summary::after { transform: translateY(-50%) rotate(180deg); }
.lux-js .faq details[open] > :not(summary) { animation: lux-faq .45s var(--lux-ease) both; }
.lux-js .faq details.lux-chiude > :not(summary) { animation: lux-faq-chiudi .25s ease both; }
@keyframes lux-faq { from { opacity: 0; transform: translateY(-8px); filter: blur(3px); } }
@keyframes lux-faq-chiudi { to { opacity: 0; transform: translateY(-6px); } }
.lux-js .faq summary { transition: color .2s; }
.lux-js .faq summary:hover { color: var(--teal); }

/* ---------- Modulo preventivo: micro-interazioni ---------- */
.lux-js #quizForm .step.is-active { animation: lux-step .5s var(--lux-ease) both; }
@keyframes lux-step { from { opacity: 0; transform: translateX(16px); filter: blur(4px); } }
.lux-js #quizForm .choice { position: relative; }
.lux-js #quizForm .choice::after {
  content: "✓"; position: absolute; right: 8px; top: 8px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; font-weight: 700; background: var(--teal); color: var(--white);
  transform: scale(0); opacity: 0; transition: transform .35s var(--lux-ease), opacity .2s;
}
.lux-js #quizForm .choice.is-selected::after { transform: scale(1); opacity: 1; }
.lux-js #quizForm .choice svg { transition: transform .35s var(--lux-ease); }
.lux-js #quizForm .choice:hover svg, .lux-js #quizForm .choice.is-selected svg { transform: scale(1.1); }
.lux-js #quizForm .chip { transition: transform .2s var(--lux-ease), background .2s, border-color .2s, color .2s; }
.lux-js #quizForm .chip:active { transform: scale(.95); }
.lux-js #quizForm .chip.lux-pop { animation: lux-pop .35s var(--lux-ease); }
@keyframes lux-pop { 50% { transform: scale(1.07); } }
.lux-js #quizForm [data-next] { transition: transform .15s, box-shadow .3s, opacity .3s; }
.lux-js #quizForm [data-next]:not(.lux-pronto) { opacity: .75; }
.lux-js #quizForm [data-next].lux-pronto { box-shadow: 0 0 0 4px rgba(115, 210, 210, .35); }
.lux-js #quizForm .progress span { background: linear-gradient(90deg, var(--turquoise), var(--teal)); }
.lux-js .step-done.is-active .done-icon { animation: lux-fatto .7s var(--lux-ease) both; }
@keyframes lux-fatto { from { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } }


/* ---------- Accessibilità: selezione da tastiera ben visibile ---------- */
.lux-js :is(a, button, summary, input, select):focus-visible:not(#offerte *):not(.offer *) {
  outline: 3px solid var(--turquoise); outline-offset: 3px;
}

/* ---------- Sicurezza: movimento ridotto = tutto fermo e visibile ---------- */
@media (prefers-reduced-motion: reduce) {
  .lux-js *, .lux-js *::before, .lux-js *::after { animation: none !important; transition: none !important; }
  .lux-js .reveal, .lux-js .lux-appare { opacity: 1 !important; transform: none !important; filter: none !important; }
  .lux-js .lux-traccia :is(path, circle, rect, ellipse, line, polyline), .lux-anello circle { stroke-dashoffset: 0 !important; }
  .lux-progress { display: none; }
}