/**
 * Ember Storm
 * Brace, cenere e scintille generate localmente su Canvas. Il CSS mantiene
 * alone e riflesso perimetrale separati dal contenuto del modulo.
 */

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

.eqev-effect--ember-storm .eqev-showcase__effect-layer::before,
.eqev-effect--ember-storm .eqev-showcase__effect-layer::after,
.eqev-effect--ember-storm .eqev-showcase__card-frame::before {
  display: none !important;
}

.eqev-ember-canvas,
.eqev-ember-haze,
.eqev-ember-card-halo,
.eqev-ember-card-ring {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.eqev-ember-canvas {
  z-index: 2;
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  transition: opacity .45s ease;
}

.eqev-ember-haze {
  z-index: 1;
  inset: -6%;
  width: 112%;
  height: 112%;
  background:
    radial-gradient(ellipse at 22% 82%, color-mix(in srgb, var(--eqev-effect-a, #ff5b22) 56%, transparent), transparent 47%),
    radial-gradient(ellipse at 77% 72%, color-mix(in srgb, var(--eqev-effect-b, #ffbf45) 48%, transparent), transparent 44%),
    linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--eqev-effect-a, #ff5b22) 18%, transparent));
  filter: blur(clamp(24px, 4vw, 58px));
  mix-blend-mode: screen;
  opacity: calc(.08 + var(--eqev-effect-strength, .55) * .22);
  transform: translate3d(0, 2%, 0) scale(1.02);
  animation: eqevEmberHaze var(--eqev-effect-duration, 22s) ease-in-out infinite alternate;
  animation-play-state: paused;
}

.eqev-showcase__background.is-active.eqev-effect--ember-storm:is(.eqev-effect-scope--both, .eqev-effect-scope--background) .eqev-showcase__effect-layer {
  opacity: 1;
}

.eqev-showcase__background.is-active .eqev-ember-canvas,
.eqev-showcase__slide.is-active .eqev-ember-canvas {
  opacity: calc(.58 + var(--eqev-effect-strength, .55) * .4);
}

.eqev-showcase__background.is-active .eqev-ember-haze {
  animation-play-state: running;
}

.eqev-showcase__slide.is-active.eqev-effect--ember-storm:is(.eqev-effect-scope--both, .eqev-effect-scope--card) .eqev-showcase__card-glass {
  inset: -22px;
  display: block;
  overflow: visible;
  opacity: 1;
  contain: layout style;
}

.eqev-ember-card-halo {
  z-index: 0;
  inset: 3%;
  width: 94%;
  height: 94%;
  border-radius: calc(var(--eqev-radius, 40px) + 16px);
  background:
    radial-gradient(ellipse at 18% 88%, color-mix(in srgb, var(--eqev-effect-a, #ff5b22) 50%, transparent), transparent 56%),
    radial-gradient(ellipse at 86% 12%, color-mix(in srgb, var(--eqev-effect-b, #ffbf45) 42%, transparent), transparent 54%);
  filter: blur(clamp(13px, 2vw, 24px));
  mix-blend-mode: screen;
  opacity: calc(.12 + var(--eqev-effect-strength, .55) * .3);
  animation: eqevEmberCardBreath var(--eqev-effect-duration-alt, 16s) ease-in-out infinite alternate;
  animation-play-state: paused;
}

.eqev-ember-card-ring {
  z-index: 1;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  box-sizing: border-box;
  padding: clamp(1px, calc(1px + var(--eqev-effect-strength, .55) * 1.4px), 3px);
  border-radius: calc(var(--eqev-radius, 40px) + 7px);
  background: conic-gradient(
    from var(--eqev-ember-angle),
    transparent 0 19%,
    color-mix(in srgb, var(--eqev-effect-a, #ff5b22) 76%, transparent) 24%,
    color-mix(in srgb, var(--eqev-effect-b, #ffbf45) 92%, white) 29%,
    transparent 35% 70%,
    color-mix(in srgb, var(--eqev-effect-a, #ff5b22) 62%, transparent) 77%,
    transparent 84% 100%
  );
  -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;
  opacity: calc(.42 + var(--eqev-effect-strength, .55) * .42);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--eqev-effect-a, #ff5b22) 38%, transparent));
  animation: eqevEmberRing var(--eqev-effect-duration-alt, 16s) linear infinite;
  animation-play-state: paused;
}

.eqev-showcase__slide.is-active .eqev-ember-card-halo,
.eqev-showcase__slide.is-active .eqev-ember-card-ring {
  animation-play-state: running;
}

.eqev-showcase--effects-paused .eqev-ember-haze,
.eqev-showcase--effects-paused .eqev-ember-card-halo,
.eqev-showcase--effects-paused .eqev-ember-card-ring,
.eqev-showcase--ember-out .eqev-ember-haze,
.eqev-showcase--ember-out .eqev-ember-card-halo,
.eqev-showcase--ember-out .eqev-ember-card-ring {
  animation-play-state: paused !important;
}

.eqev-showcase[data-ember-quality="lite"] .eqev-ember-haze,
.eqev-showcase[data-ember-quality="static"] .eqev-ember-haze,
.eqev-showcase[data-ember-quality="static-pending"] .eqev-ember-haze {
  filter: none;
  opacity: calc(.06 + var(--eqev-effect-strength, .55) * .13);
}

.eqev-showcase[data-ember-quality="lite"] .eqev-ember-card-halo,
.eqev-showcase[data-ember-quality="static"] .eqev-ember-card-halo,
.eqev-showcase[data-ember-quality="static-pending"] .eqev-ember-card-halo {
  filter: none;
}

.eqev-showcase:is([data-ember-quality="static"], [data-ember-quality="static-pending"]) .eqev-ember-haze,
.eqev-showcase:is([data-ember-quality="static"], [data-ember-quality="static-pending"]) .eqev-ember-card-halo,
.eqev-showcase:is([data-ember-quality="static"], [data-ember-quality="static-pending"]) .eqev-ember-card-ring {
  animation: none !important;
}

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

@keyframes eqevEmberHaze {
  0% { transform: translate3d(-2%, 3%, 0) scale(1.01); opacity: calc(.07 + var(--eqev-effect-strength, .55) * .18); }
  52% { transform: translate3d(2%, -1%, 0) scale(1.06); }
  100% { transform: translate3d(1%, 2%, 0) scale(1.03); opacity: calc(.11 + var(--eqev-effect-strength, .55) * .24); }
}

@keyframes eqevEmberCardBreath {
  from { transform: translate3d(-2px, 3px, 0) scale(.99); opacity: calc(.1 + var(--eqev-effect-strength, .55) * .24); }
  to { transform: translate3d(3px, -2px, 0) scale(1.025); opacity: calc(.17 + var(--eqev-effect-strength, .55) * .34); }
}

@keyframes eqevEmberRing {
  to { --eqev-ember-angle: 360deg; }
}

@media (max-width: 820px), (pointer: coarse) {
  .eqev-showcase__slide.is-active.eqev-effect--ember-storm:is(.eqev-effect-scope--both, .eqev-effect-scope--card) .eqev-showcase__card-glass {
    inset: -14px;
  }
  .eqev-ember-card-ring { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); }
  .eqev-ember-haze { inset: 0; width: 100%; height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .eqev-ember-haze,
  .eqev-ember-card-halo,
  .eqev-ember-card-ring {
    animation: none !important;
  }
}