/**
 * Motore visuale dello showcase.
 *
 * Il CSS definisce compositing e fallback; la geometria realmente liquida
 * viene generata da showcase-liquid-glass.js soltanto per la slide attiva.
 */

.eqev-showcase__effect-layer {
  position: absolute;
  inset: -3%;
  z-index: 1;
  display: block;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
  opacity: 0;
  contain: layout paint style;
  clip-path: inset(0);
  transition: opacity .55s ease;
}

.eqev-showcase__background.is-active:is(.eqev-effect-scope--both, .eqev-effect-scope--background) .eqev-showcase__effect-layer {
  opacity: calc(.52 + var(--eqev-effect-strength, .55) * .42);
}

.eqev-liquid-scene {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.eqev-liquid-scene--background,
.eqev-liquid-scene--card {
  overflow: hidden;
  clip-path: inset(0);
}

.eqev-liquid-ribbon__source {
  opacity: calc(.52 + var(--eqev-effect-strength, .55) * .34);
  transform-origin: center;
}

.eqev-liquid-ribbon__veil {
  opacity: calc(.13 + var(--eqev-effect-strength, .55) * .2);
  mix-blend-mode: screen;
}

.eqev-liquid-ribbon__rim {
  stroke-width: calc(1.1px + var(--eqev-effect-strength, .55) * 1.8px);
  opacity: calc(.55 + var(--eqev-effect-strength, .55) * .35);
  filter: drop-shadow(0 8px 13px color-mix(in srgb, var(--eqev-effect-a, #79cff2) 32%, transparent));
}

.eqev-liquid-ribbon__highlight {
  stroke-width: calc(.8px + var(--eqev-effect-strength, .55) * 1.1px);
  stroke-linecap: round;
  stroke-dasharray: 12 44 84 32;
  opacity: calc(.42 + var(--eqev-effect-strength, .55) * .42);
  mix-blend-mode: screen;
}

.eqev-liquid-glow {
  filter: blur(clamp(42px, 5vw, 84px));
  mix-blend-mode: screen;
}

/*
 * Fallback visibile anche senza SVG/JS: due nastri ampi e mossi.
 * Scompare non appena il motore ha costruito la scena reale.
 */
.eqev-showcase__effect-layer::before,
.eqev-showcase__effect-layer::after {
  content: "";
  position: absolute;
  width: 120%;
  height: clamp(110px, 13vw, 220px);
  left: -10%;
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: 50%;
  background:
    linear-gradient(108deg, transparent 3%, rgba(255,255,255,.35) 35%, transparent 62%),
    linear-gradient(90deg, color-mix(in srgb, var(--eqev-effect-a) 38%, transparent), transparent 48%, color-mix(in srgb, var(--eqev-effect-b) 38%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 16px 45px color-mix(in srgb, var(--eqev-effect-a) 24%, transparent);
  opacity: calc(.18 + var(--eqev-effect-strength, .55) * .24);
  transform-origin: center;
  animation: eqevLiquidFallback var(--eqev-effect-duration, 30s) ease-in-out infinite alternate;
  animation-play-state: paused;
}

.eqev-showcase__effect-layer::before { top: 12%; transform: rotate(13deg); }
.eqev-showcase__effect-layer::after {
  bottom: 10%;
  transform: rotate(-16deg);
  animation-direction: alternate-reverse;
}

.eqev-showcase__effect-layer.is-liquid-ready::before,
.eqev-showcase__effect-layer.is-liquid-ready::after {
  display: none;
}

/* Membrana organica separata: il contenuto del modulo resta sempre stabile. */
.eqev-showcase__card-glass {
  position: absolute;
  inset: -25px;
  z-index: 0;
  display: none;
  overflow: hidden;
  overflow: clip;
  contain: layout paint style;
  clip-path: inset(0);
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}

.eqev-showcase__slide.is-active.eqev-effect--liquid-glass:is(.eqev-effect-scope--both, .eqev-effect-scope--card) .eqev-showcase__card-glass {
  display: block;
  opacity: calc(.54 + var(--eqev-effect-strength, .55) * .43);
}

.eqev-liquid-card__aura {
  opacity: calc(.12 + var(--eqev-effect-strength, .55) * .2);
}

.eqev-liquid-card__membrane {
  stroke-width: calc(1.2px + var(--eqev-effect-strength, .55) * 1.7px);
  opacity: calc(.42 + var(--eqev-effect-strength, .55) * .38);
  filter: drop-shadow(0 12px 22px color-mix(in srgb, var(--eqev-effect-b, #f39a61) 24%, transparent));
}

.eqev-liquid-card__highlight {
  stroke-width: calc(.9px + var(--eqev-effect-strength, .55) * 1px);
  stroke-linecap: round;
  stroke-dasharray: 22 68 94 44;
  opacity: calc(.48 + var(--eqev-effect-strength, .55) * .38);
  mix-blend-mode: screen;
}

/*
 * Fallback della cornice prima dell'inizializzazione JS. Rimane ampio e
 * chiaramente visibile, ma non sposta né deforma il modulo.
 */
.eqev-showcase__slide.eqev-effect--liquid-glass:is(.eqev-effect-scope--both, .eqev-effect-scope--card) .eqev-showcase__card-frame::before {
  content: "";
  position: absolute;
  inset: -9px;
  z-index: 0;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: calc(var(--eqev-radius) + 12px);
  background:
    radial-gradient(70% 46% at 5% 3%, color-mix(in srgb, var(--eqev-effect-a) 65%, transparent), transparent 72%),
    radial-gradient(68% 48% at 96% 98%, color-mix(in srgb, var(--eqev-effect-b) 65%, transparent), transparent 72%);
  box-shadow: 0 10px 38px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.82);
  opacity: calc(.3 + var(--eqev-effect-strength, .55) * .4);
  animation: eqevLiquidFallbackCard var(--eqev-effect-duration, 30s) ease-in-out infinite alternate;
  animation-play-state: paused;
  pointer-events: none;
}

.eqev-showcase__background.is-active .eqev-showcase__effect-layer::before,
.eqev-showcase__background.is-active .eqev-showcase__effect-layer::after,
.eqev-showcase__slide.is-active .eqev-showcase__card-frame::before {
  animation-play-state: running;
}

.eqev-showcase--liquid-ready .eqev-showcase__slide .eqev-showcase__card-frame::before {
  display: none;
}

.eqev-showcase--effects-paused .eqev-showcase__effect-layer::before,
.eqev-showcase--effects-paused .eqev-showcase__effect-layer::after,
.eqev-showcase--effects-paused .eqev-showcase__card-frame::before {
  animation-play-state: paused !important;
}

@keyframes eqevLiquidFallback {
  0% { translate: -7% -4%; scale: .96 1; border-radius: 46% 54% 42% 58%; }
  50% { translate: 3% 9%; scale: 1.03 1.12; border-radius: 57% 43% 55% 45%; }
  100% { translate: 9% -1%; scale: 1 .96; border-radius: 43% 57% 61% 39%; }
}

@keyframes eqevLiquidFallbackCard {
  0% { transform: translate3d(-3px, -2px, 0) scale(.99); border-radius: 36px 49px 43px 52px; }
  50% { transform: translate3d(4px, 3px, 0) scale(1.015); border-radius: 51px 39px 54px 42px; }
  100% { transform: translate3d(-1px, 5px, 0) scale(1.006); border-radius: 44px 54px 37px 48px; }
}

@media (max-width: 820px) {
  .eqev-showcase__effect-layer { inset: -2%; }
  .eqev-showcase__card-glass { inset: -20px; }
}

@media (max-width: 600px) {
  .eqev-showcase__effect-layer { inset: 0; }
  .eqev-showcase__card-glass { inset: -15px; }
  .eqev-liquid-ribbon__rim { stroke-width: calc(1px + var(--eqev-effect-strength, .55) * 1.35px); }
  .eqev-liquid-glow { filter: blur(46px); }
}

/*
 * I profili mobili conservano geometria, rifrazione primaria e highlight,
 * evitando blur e ombre estese che costringono la GPU a ricomporre l'intera
 * viewport. I glow SVG hanno già una sfumatura radiale interna.
 */
.eqev-showcase:is([data-liquid-quality="mobile"], [data-liquid-quality="mobile-lite"], [data-liquid-quality="mobile-safe"], [data-liquid-quality="static"]) .eqev-showcase__effect-layer {
  contain: strict;
}

.eqev-showcase:is([data-liquid-quality="mobile"], [data-liquid-quality="mobile-lite"], [data-liquid-quality="mobile-safe"], [data-liquid-quality="static"]) .eqev-liquid-glow {
  filter: none;
}

.eqev-showcase[data-liquid-quality="mobile"] .eqev-liquid-ribbon__rim {
  filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--eqev-effect-a, #79cff2) 24%, transparent));
}

.eqev-showcase[data-liquid-quality="mobile"] .eqev-liquid-card__membrane {
  filter: drop-shadow(0 4px 7px color-mix(in srgb, var(--eqev-effect-b, #f39a61) 18%, transparent));
}

.eqev-showcase:is([data-liquid-quality="mobile-lite"], [data-liquid-quality="mobile-safe"], [data-liquid-quality="static"]) .eqev-liquid-ribbon__rim,
.eqev-showcase:is([data-liquid-quality="mobile-lite"], [data-liquid-quality="mobile-safe"], [data-liquid-quality="static"]) .eqev-liquid-card__membrane {
  filter: none;
}

.eqev-showcase:is([data-liquid-quality="mobile-lite"], [data-liquid-quality="mobile-safe"]) .eqev-liquid-ribbon__veil {
  opacity: calc(.16 + var(--eqev-effect-strength, .55) * .16);
}

.eqev-showcase[data-liquid-quality="disabled"] .eqev-showcase__effect-layer,
.eqev-showcase[data-liquid-quality="disabled"] .eqev-showcase__card-glass,
.eqev-showcase[data-liquid-quality="disabled"] .eqev-showcase__card-frame::before {
  display: none !important;
  opacity: 0 !important;
}

.eqev-showcase--benchmarking .eqev-showcase__effect-layer,
.eqev-showcase--benchmarking .eqev-showcase__card-glass {
  transition-duration: .8s;
}

@media (max-width: 820px), (pointer: coarse) {
  .eqev-showcase__background[data-effect-mobile-mode="benchmark"] .eqev-showcase__effect-layer::before,
  .eqev-showcase__background[data-effect-mobile-mode="benchmark"] .eqev-showcase__effect-layer::after,
  .eqev-showcase__background[data-effect-mobile-mode="static"] .eqev-showcase__effect-layer::before,
  .eqev-showcase__background[data-effect-mobile-mode="static"] .eqev-showcase__effect-layer::after,
  .eqev-showcase__slide[data-effect-mobile-mode="benchmark"] .eqev-showcase__card-frame::before,
  .eqev-showcase__slide[data-effect-mobile-mode="static"] .eqev-showcase__card-frame::before {
    animation-play-state: paused;
  }

  .eqev-showcase__background[data-effect-mobile-mode="disabled"] .eqev-showcase__effect-layer,
  .eqev-showcase__slide[data-effect-mobile-mode="disabled"] .eqev-showcase__card-glass,
  .eqev-showcase__slide[data-effect-mobile-mode="disabled"] .eqev-showcase__card-frame::before {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eqev-showcase__effect-layer::before,
  .eqev-showcase__effect-layer::after,
  .eqev-showcase__card-frame::before {
    animation: none !important;
  }
}