/* ========================================================================== */
/* ===================== START ECONOMY SECTION — SEND THIS =================== */
/* ========================================================================== */

.section__content--economy {
  position: relative;
  width: min(100%, 1580px);
  height: 100%;
  margin: 0 auto;
  padding:
    clamp(82px, 7vh, 108px)
    clamp(22px, 2vw, 34px)
    clamp(82px, 7vh, 108px);
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  transform: none;
  box-sizing: border-box;
}

.economy-explanation-card {
  --economy-main-rgb: 116, 255, 120;
  --economy-secondary-rgb: 221, 114, 255;

  position: relative;
  width: min(35vw, 560px);
  min-width: 420px;
  height: 100%;
  margin-left: calc(25% - min(17.5vw, 280px));
  padding: clamp(18px, 1.5vw, 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(16px, 1.3vw, 22px);

  border-radius: clamp(20px, 1.6vw, 30px);
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(7,12,25,0.94), rgba(4,8,17,0.96)),
    radial-gradient(circle at 72% 18%, rgba(var(--economy-main-rgb), 0.16), transparent 34%),
    radial-gradient(circle at 12% 84%, rgba(var(--economy-secondary-rgb), 0.12), transparent 34%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.025),
    0 0 24px rgba(0,0,0,0.22),
    0 0 58px rgba(var(--economy-main-rgb), 0.12);
  overflow: hidden;
  isolation: isolate;
}

.economy-explanation-card::before,
.economy-explanation-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.economy-explanation-card::before {
  inset: 0;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.07) 0%,
      rgba(255,255,255,0.02) 18%,
      transparent 36%,
      transparent 68%,
      rgba(255,255,255,0.035) 100%);
}

/* bordo originale su ::after (conic @property animato = main thread): DISATTIVATO,
   sostituito dall'elemento .economy-explanation-card__border in COMPOSITOR (sotto). */
.economy-explanation-card::after { display: none; }

/* Bordo neon COMPOSITOR della card spiegazione (elemento iniettato via JS).
   Conic FISSO; a ruotare è il layer ::before via transform (compositor); pulse di sola
   opacità. La mask statica ritaglia l'anello; drop-shadow STATICO (non animato). */
.economy-explanation-card__border {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  padding: 1.5px;
  overflow: hidden;
  -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;
  filter:
    drop-shadow(0 0 6px rgba(var(--economy-main-rgb), 0.36))
    drop-shadow(0 0 14px rgba(var(--economy-secondary-rgb), 0.22));
  animation: economyBorderPulse 4s ease-in-out infinite;   /* opacity → compositor */
}
.economy-explanation-card__border::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400%;
  height: 400%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, transparent 34deg,
    rgba(var(--economy-main-rgb), 0.95) 64deg,
    rgba(255,255,255,0.98) 78deg,
    rgba(var(--economy-secondary-rgb), 0.90) 96deg,
    transparent 126deg, transparent 214deg,
    rgba(var(--economy-main-rgb), 0.95) 244deg,
    rgba(255,255,255,0.98) 258deg,
    rgba(var(--economy-secondary-rgb), 0.90) 276deg,
    transparent 306deg, transparent 360deg
  );
  transform: translate(-50%, -50%) rotate(0deg);
  animation: economyExplBorderSpin 4s linear infinite;
  will-change: transform;
}
@keyframes economyExplBorderSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.economy-explanation-card__scan {
  position: absolute;
  inset: -24% -28%;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  background:
    linear-gradient(
      92deg,
      transparent 0%,
      transparent 40%,
      rgba(255,255,255,0.04) 47%,
      rgba(var(--economy-main-rgb), 0.18) 50%,
      rgba(255,255,255,0.08) 53%,
      transparent 60%,
      transparent 100%
    );
  filter: blur(14px);
  mix-blend-mode: screen;
}

.economy-explanation-card.is-switching .economy-explanation-card__scan {
  animation: economyCardScan 720ms cubic-bezier(.16,.84,.22,1) 1;
}

.economy-explanation-card__head,
.economy-explanation-card__body,
.economy-explanation-card__controls {
  position: relative;
  z-index: 2;
}

.economy-explanation-card__head {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

.economy-explanation-card__kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45em 0.95em 0.38em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.035);
  font-family: "Orbitron", sans-serif;
  font-size: clamp(0.56rem, 0.48vw + 0.12vh, 0.82rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.economy-explanation-card__title {
  margin: 0;
  font-family: "Space Age", "Orbitron", sans-serif;
  font-size: clamp(1.55rem, 1.45vw + 1vh, 2.9rem);
  line-height: 0.92;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #eef6ff;
  color: #74ff78;
  filter: brightness(1.18);
  text-shadow:
    0 0 6px rgba(116,255,120,0.92),
    0 0 14px rgba(116,255,120,0.82),
    0 0 28px rgba(116,255,120,0.58),
    0 0 52px rgba(116,255,120,0.34);
  }

.economy-explanation-card__body {
  min-height: 0;
  padding: clamp(20px, 1.5vw, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(16px, 1.2vw, 22px);
  border: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.018)),
    radial-gradient(circle at 50% 50%, rgba(var(--economy-main-rgb), 0.09), transparent 62%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  overflow: hidden;
}

.economy-explanation-text {
  width: 100%;
  max-height: 100%;
  margin: 0;
  padding: clamp(8px, 0.8vw, 14px);
  text-align: center;

  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(0.92rem, 0.68vw + 0.48vh, 1.34rem);
  line-height: 1.28;
  letter-spacing: 0.025em;

  color: rgba(238,244,255,0.96);
  text-shadow:
    0 0 3px rgba(255,255,255,0.16),
    0 0 12px rgba(var(--economy-main-rgb), 0.12);

  overflow: hidden;
  box-sizing: border-box;
}

.economy-explanation-text.is-fading-out {
  animation: economyTextFadeOut 260ms ease forwards;
}

.economy-explanation-word {
  display: inline-block;
  white-space: normal;
  opacity: 0;
  filter: blur(7px) brightness(1.55);
  transform: translateX(var(--economy-word-offset, 0px)) scale(1.04);
  animation: economyWordExpandIn 520ms cubic-bezier(.16,.84,.22,1) forwards;
  animation-delay: var(--economy-word-delay, 0ms);
}

.economy-explanation-word.is-hot {
  color: #ffffff;
  text-shadow:
    0 0 5px rgba(255,255,255,0.78),
    0 0 12px rgba(var(--economy-main-rgb), 0.85),
    0 0 22px rgba(var(--economy-main-rgb), 0.56),
    0 0 34px rgba(var(--economy-secondary-rgb), 0.32);
}

.economy-explanation-card__controls {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 16px;
}

.economy-explanation-btn {
  position: relative;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    radial-gradient(circle at 50% 50%, rgba(var(--economy-main-rgb), 0.15), transparent 70%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 0 14px rgba(0,0,0,0.18);
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    opacity 180ms ease;
}

.economy-explanation-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--economy-main-rgb), 0.46);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 14px rgba(var(--economy-main-rgb), 0.24),
    0 0 24px rgba(var(--economy-secondary-rgb), 0.12);
}

.economy-explanation-btn:active {
  transform: translateY(0) scale(0.96);
}

.economy-explanation-btn span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  border-top: 2px solid #eef6ff;
  border-right: 2px solid #eef6ff;
  transform-origin: center;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,0.38))
    drop-shadow(0 0 9px rgba(var(--economy-main-rgb), 0.32));
}

.economy-explanation-btn--prev span {
  transform: translate(-35%, -50%) rotate(-135deg);
}

.economy-explanation-btn--next span {
  transform: translate(-65%, -50%) rotate(45deg);
}

.economy-explanation-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.economy-explanation-dots span {
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  opacity: 0.65;
  transition:
    background 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease,
    opacity 220ms ease;
}

.economy-explanation-dots span.is-active {
  opacity: 1;
  transform: scaleX(1.08);
  background: linear-gradient(90deg, rgb(var(--economy-secondary-rgb)), rgb(var(--economy-main-rgb)));
  box-shadow:
    0 0 6px rgba(var(--economy-secondary-rgb), 0.28),
    0 0 12px rgba(var(--economy-main-rgb), 0.20);
}

/* Intro card disattivata in CSS: ora è guidata dal JS (slide + spinta orbita).
   #economy.is-active .economy-explanation-card { animation: ... } */

@keyframes economyCardIntro {
  0% {
    opacity: 0;
    transform: translateY(56px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes economyCardScan {
  0% {
    opacity: 0;
    transform: translateX(-36%) rotate(10deg);
  }
  18% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translateX(36%) rotate(10deg);
  }
}

@keyframes economyBorderRotate {
  0% {
    --economy-border-angle: 0deg;
  }

  100% {
    --economy-border-angle: 360deg;
  }
}

@keyframes economyBorderPulse {
  0%, 100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}

@keyframes economyTextFadeOut {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.985);
  }
}

@keyframes economyWordExpandIn {
  0% {
    opacity: 0;
    filter: blur(8px) brightness(1.75);
    transform: translateX(var(--economy-word-offset, 0px)) scale(1.06);
  }
  56% {
    opacity: 1;
    filter: blur(1px) brightness(1.28);
  }
  100% {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: translateX(0) scale(1);
  }
}

/* ==================== ECONOMY ORBIT SYSTEM ==================== */

.economy-orbit-system {
  position: absolute;

  left: calc(25% + min(17.5vw, 280px) + clamp(28px, 3vw, 48px));
  right: clamp(64px, 5vw, 92px);

  top: 50%;
  height: min(62vh, 620px);

  transform: translateY(-50%);
  perspective: 1200px;
  transform-style: preserve-3d;
  z-index: 2;

  overflow: visible;
}

.economy-flow-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
  /* Nascosto finché le sfere non sono in posizione; il JS lo porta a 1 (fade-in). */
  opacity: 0;
  transition: opacity 600ms ease;
}

/* RAGGI DI ENERGIA ELETTRICA — neon blu, non tratteggiati.
   Linea chiara con alone neon multiplo + flicker "elettrico"; la forma a scossa
   (wobble) è data dal JS che perturba i punti di controllo del path. */
/* Raggi: di default TUTTI visibili; in hover restano solo i connessi (.is-focus-line),
   gli altri vengono nascosti (.is-muted-line). */
.economy-flow-line {
  fill: none;
  stroke: rgba(210, 255, 216, 0.9);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 3px rgba(150,245,170,0.8))
    drop-shadow(0 0 7px rgba(80,225,125,0.6))
    drop-shadow(0 0 14px rgba(35,190,100,0.4));
  opacity: 0.6;
}

.economy-flow-line--core {
  stroke-width: 2.1;
}

@keyframes economyArcFlicker {
  0%, 100% { opacity: 0.95; }
  20% { opacity: 0.68; }
  45% { opacity: 1; }
  65% { opacity: 0.82; }
  85% { opacity: 1; }
}

.economy-orbit-rings {
  position: absolute;
  inset: 4%;
  z-index: 0;
  transform-style: preserve-3d;
  transform: rotateX(62deg) rotateZ(-8deg);
  pointer-events: none;
}

.economy-orbit-rings span {
  position: absolute;
  inset: var(--ring-inset, 0);
  border-radius: 50%;
  border: 1px solid rgba(116,255,120,0.20);
  box-shadow:
    0 0 14px rgba(70,230,120,0.14),
    inset 0 0 18px rgba(70,230,120,0.08);
  animation: economyRingSpin var(--ring-speed, 18s) linear infinite;
}

.economy-orbit-rings span:nth-child(1) {
  --ring-inset: 0%;
  --ring-speed: 24s;
}

.economy-orbit-rings span:nth-child(2) {
  --ring-inset: 10%;
  --ring-speed: 19s;
  border-color: rgba(150,255,170,0.22);
}

.economy-orbit-rings span:nth-child(3) {
  --ring-inset: 20%;
  --ring-speed: 15s;
  border-color: rgba(90,235,150,0.18);
}

.economy-orbit-rings span:nth-child(4) {
  --ring-inset: 30%;
  --ring-speed: 11s;
  border-color: rgba(80,220,130,0.20);
}

/* SFERE DI ENERGIA — base condivisa core/mini (scala di verde, --card-rgb per sfera).
   Icona bianca al centro; raggi/filamenti mobili dentro la sfera su ::before. */
.economy-core-card,
.economy-mini-card {
  --card-rgb: 116, 255, 120;
  position: absolute;
  transform-style: preserve-3d;
  border: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(240,255,242,0.55) 0%,
      rgba(var(--card-rgb), 0.28) 38%,
      rgba(5,24,13,0.88) 73%,
      rgba(2,10,6,0.97) 100%);
  /* glow alleggerito: tolto il layer più ampio (72px, costoso in compositing) e
     ridotte le intensità → meno carico GPU desktop; il look "energia" resta dato
     soprattutto dal gradiente radiale traslucido del background. */
  box-shadow:
    0 0 14px rgba(var(--card-rgb), 0.55),
    0 0 28px rgba(var(--card-rgb), 0.22),
    inset 0 0 14px rgba(var(--card-rgb), 0.34),
    inset 0 0 4px rgba(235,255,238,0.55);
  isolation: isolate;
  animation: economyBlob 7s ease-in-out infinite;
}

/* Glow di plasma soffuso dentro la sfera (le "linee" sono state sostituite dalle
   particelle interne in orbita ovale, vedi .economy-inner-particles). */
.economy-core-card::before,
.economy-mini-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  /* niente mix-blend-mode: screen (costoso, ×10 sfere) → trasparenza semplice,
     alpha leggermente alzata per compensare. */
  background: radial-gradient(circle at 50% 46%, rgba(var(--card-rgb), 0.42), transparent 72%);
  animation: economyGlowPulse 3.4s ease-in-out infinite;
}

@keyframes economyGlowPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.95; }
}

/* Particelle interne: tante, in orbita OVALE oraria, tutte diverse e a velocità diverse */
.economy-inner-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;          /* le particelle restano dentro la sfera (anche mentre ondeggia) */
  pointer-events: none;
}

.economy-inner-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ip-size, 2px);
  height: var(--ip-size, 2px);
  margin: calc(var(--ip-size, 2px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, #f2fff4 0%, rgba(var(--card-rgb), 0.95) 55%, rgba(var(--card-rgb), 0) 78%);
  box-shadow: 0 0 4px rgba(var(--card-rgb), 0.9);
  opacity: 0.9;
  animation: economyInnerOrbit var(--ip-dur, 7s) linear infinite;
  animation-delay: var(--ip-delay, 0s);
}

/* orbita ovale (oraria): scaleY squash + tilt + rotazione animata + raggio */
@keyframes economyInnerOrbit {
  from { transform: rotate(var(--ip-tilt, 0deg)) scaleY(var(--ip-oval, 0.6)) rotate(0deg) translateX(var(--ip-r, 18px)); }
  to   { transform: rotate(var(--ip-tilt, 0deg)) scaleY(var(--ip-oval, 0.6)) rotate(360deg) translateX(var(--ip-r, 18px)); }
}

.economy-core-card::after,
.economy-mini-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;

  padding: 1.5px;
  border-radius: inherit;

  opacity: 0;

  background:
    conic-gradient(
      from var(--economy-border-angle, 0deg),

      transparent 0deg,
      transparent 34deg,

      rgba(var(--card-rgb), 0.96) 64deg,
      rgba(255,255,255,0.98) 78deg,
      rgba(var(--card-rgb), 0.86) 96deg,

      transparent 126deg,
      transparent 214deg,

      rgba(var(--card-rgb), 0.96) 244deg,
      rgba(255,255,255,0.98) 258deg,
      rgba(var(--card-rgb), 0.86) 276deg,

      transparent 306deg,
      transparent 360deg
    );

  -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;

  filter:
    drop-shadow(0 0 5px rgba(var(--card-rgb), 0.36))
    drop-shadow(0 0 12px rgba(var(--card-rgb), 0.22));

  transition:
    opacity 520ms ease,
    filter 520ms ease;
}

.economy-core-card.is-focus-active::after,
.economy-mini-card.is-focus-active::after,
.economy-core-card.is-focus-connected::after,
.economy-mini-card.is-focus-connected::after {
  opacity: 1;

  animation:
    economyBorderRotate 4.8s linear infinite,
    economyBorderPulse 2.4s ease-in-out infinite;
}

@keyframes economyBorderPulse {
  0%, 100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}

.economy-core-card {
  --card-rgb: 116, 255, 120;

  left: 50%;
  top: 50%;
  width: clamp(132px, 9.6vw, 168px);
  height: clamp(132px, 9.6vw, 168px);

  padding: clamp(10px, 0.9vw, 14px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.25vw, 4px);

  z-index: 80;

  transform:
    translate(-50%, -50%)
    rotateX(10deg)
    rotateY(-8deg)
    translateZ(90px);

  animation:
    economyCoreFloat 4.8s ease-in-out infinite,
    economyBlob 8.5s ease-in-out infinite;
}

.economy-core-card__icon {
  position: relative;
  z-index: 2;
  width: 80%;
  height: 80%;
  object-fit: contain;
  filter:
    brightness(1.35)
    drop-shadow(0 0 4px rgba(240,255,242,0.95))
    drop-shadow(0 0 11px rgba(116,255,140,0.85));
}

/* Core: testi come label che appaiono in hover/focus (sfera = solo icona, come il riferimento) */
.economy-core-card h3,
.economy-core-card p {
  position: absolute;
  left: 50%;
  width: max-content;
  max-width: 200px;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.economy-core-card h3 {
  top: calc(100% + 8px);
  font-family: "Space Age", "Orbitron", sans-serif;
  font-size: clamp(0.6rem, 0.7vw, 0.82rem);
  line-height: 1.05;
  letter-spacing: 0.05em;
  color: #eaf6ff;
  text-shadow: 0 0 6px rgba(0,0,0,0.7), 0 0 14px rgba(116,255,120,0.75);
}

.economy-core-card p {
  top: calc(100% + 26px);
  font-family: "Orbitron", sans-serif;
  font-size: clamp(0.5rem, 0.56vw, 0.66rem);
  line-height: 1;
  font-weight: 800;
  color: rgba(210,235,255,0.95);
  text-shadow: 0 0 6px rgba(0,0,0,0.7);
}

.economy-core-card:hover h3,
.economy-core-card:hover p,
.economy-core-card.is-focus-active h3,
.economy-core-card.is-focus-active p,
.economy-core-card.is-focus-connected h3,
.economy-core-card.is-focus-connected p {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.economy-mini-card {
  width: clamp(58px, 4.8vw, 82px);
  height: clamp(58px, 4.8vw, 82px);
  padding: clamp(8px, 0.65vw, 11px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.24vw, 5px);

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
  will-change: transform;
  z-index: 100;

  transition: transform 420ms cubic-bezier(.22,1,.36,1);
}

.economy-mini-card__icon {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter:
    brightness(1.4)
    drop-shadow(0 0 3px rgba(240,255,242,0.95))
    drop-shadow(0 0 8px rgba(116,255,140,0.9));
}

/* Label: nascosta di default, appare leggibile in hover/focus sotto la sfera */
.economy-mini-card h4 {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;

  width: max-content;
  max-width: 130px;
  margin: 0;

  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  pointer-events: none;

  text-align: center;
  text-transform: uppercase;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(0.42rem, 0.5vw, 0.62rem);
  line-height: 1.1;
  letter-spacing: 0.05em;
  color: rgba(244,248,255,0.98);
  text-shadow:
    0 0 5px rgba(0,0,0,0.7),
    0 0 12px rgba(var(--card-rgb), 0.55);

  transition: opacity 220ms ease, transform 220ms ease;
}

/* label visibili via CLASSE (focus): vale anche su touch, e si nascondono quando
   le classi vengono rimosse (es. auto-chiusura a 3s). */
.economy-mini-card.is-focus-active h4,
.economy-mini-card.is-focus-connected h4 {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* hover solo su desktop: su touch il :hover "appiccicoso" terrebbe la label visibile
   anche dopo la perdita del focus. */
@media (hover: hover) and (pointer: fine) {
  .economy-mini-card:hover h4 {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Sfere orbitanti: ognuna una sfumatura di verde diversa + fase di ondeggiamento diversa */
.economy-mini-card--games      { --card-rgb: 120, 255, 150; animation-delay: -0.6s; }
.economy-mini-card--marketing  { --card-rgb: 56, 220, 132; animation-delay: -1.8s; }
.economy-mini-card--referrals  { --card-rgb: 168, 255, 110; animation-delay: -3.1s; }
.economy-mini-card--users      { --card-rgb: 80, 235, 180; animation-delay: -4.4s; }
.economy-mini-card--token      { --card-rgb: 205, 255, 130; animation-delay: -2.4s; }
.economy-mini-card--internal   { --card-rgb: 64, 210, 150; animation-delay: -5.2s; }
.economy-mini-card--p2e        { --card-rgb: 138, 255, 96; animation-delay: -3.8s; }
.economy-mini-card--publicity  { --card-rgb: 96, 240, 140; animation-delay: -1.1s; }

/* Intro orbita disattivata in CSS: ora è guidata dal JS (centro schermo → spinta).
   #economy.is-active .economy-orbit-system { animation: ... } */

@keyframes economyOrbitIntro {
  0% {
    opacity: 0;
    transform: translateY(-48%) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

@keyframes economyRingSpin {
  0% {
    transform: rotateZ(0deg);
    opacity: 0.68;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotateZ(360deg);
    opacity: 0.68;
  }
}

@keyframes economyCoreFloat {
  0%, 100% {
    transform:
      translate(-50%, -50%)
      rotateX(10deg)
      rotateY(-8deg)
      translateZ(90px)
      translateY(0);
  }
  50% {
    transform:
      translate(-50%, -50%)
      rotateX(12deg)
      rotateY(-4deg)
      translateZ(112px)
      translateY(-8px);
  }
}

@media (max-width: 1220px) {
  .economy-explanation-card {
    width: min(42vw, 560px);
    min-width: 360px;
    margin-left: 0;
  }

  .economy-orbit-system {
    right: 18px;
    height: 68vh;
  }

  .economy-mini-card {
    width: clamp(52px, 4.5vw, 74px);
    height: clamp(52px, 4.5vw, 74px);
  }
}

@media (max-width: 860px) {
  .section__content--economy {
    justify-content: center;
  }

  .economy-explanation-card {
    width: min(100%, 620px);
    min-width: 0;
    margin-left: 0;
  }

  .economy-orbit-system {
    display: none;
  }
}
.economy-flow-svg {
  z-index: 2;
}

.economy-orbit-rings {
  z-index: 1;
}

.economy-core-card,
.economy-mini-card {
  z-index: 5;
}

.economy-flow-line {
  stroke-width: 1.8;
}

.economy-flow-line--core {
  stroke-width: 2.3;
}
/* ==================== ECONOMY PERFORMANCE LIGHTENING ==================== */
/* Solo afecta a Economy: aislamos repintados y empujamos las tarjetas al compositor. */
#economy .section__content--economy {
  contain: layout style;
}

#economy .economy-explanation-card {
  contain: layout paint style;
}

#economy .economy-orbit-system {
  contain: layout style;
}

#economy .economy-core-card,
#economy .economy-mini-card,
#economy .economy-flow-svg {
  backface-visibility: hidden;
}

#economy:not(.is-active) .economy-orbit-rings span,
#economy:not(.is-active) .economy-core-card,
#economy:not(.is-active) .economy-mini-card {
  animation-play-state: paused;
}

.economy-orbit-system.is-economy-focus .economy-mini-card,
.economy-orbit-system.is-economy-focus .economy-core-card {
  transition:
    opacity 220ms ease,
    filter 220ms ease,
    transform 220ms ease;
}

.economy-mini-card.is-focus-active {
  filter: brightness(1.25) saturate(1.18) !important;
}

.economy-mini-card.is-focus-connected,
.economy-core-card.is-focus-connected {
  opacity: 1;
  filter: brightness(1.08) saturate(1.08);
}

.economy-mini-card.is-focus-muted,
.economy-core-card.is-focus-muted {
  opacity: 0.28;
  filter: blur(4px) brightness(0.55) saturate(0.7);
}

.economy-flow-line {
  transition:
    opacity 220ms ease,
    stroke-width 220ms ease,
    filter 220ms ease;
}

.economy-flow-line.is-focus-line {
  opacity: 1 !important;
  stroke: rgba(235,255,238,0.98) !important;
  stroke-width: 2.4 !important;
  filter:
    drop-shadow(0 0 5px rgba(200,255,210,1))
    drop-shadow(0 0 12px rgba(95,235,135,0.95))
    drop-shadow(0 0 22px rgba(40,200,110,0.65)) !important;
  animation: economyArcFlicker 0.9s steps(6, end) infinite;
}

/* Tutti gli altri raggi restano invisibili durante l'hover */
.economy-flow-line.is-muted-line {
  opacity: 0 !important;
}

/* Microsfere di plasma che scorrono lungo il raggio (direzione from -> to) */
.economy-flow-pulse {
  fill: rgba(238,255,240,0.98);
  opacity: 0;
  filter:
    drop-shadow(0 0 4px rgba(200,255,210,1))
    drop-shadow(0 0 9px rgba(95,235,135,0.95));
}

/* ===================== SFERE / HALO / PARTICELLE ===================== */

/* Pulsazione glow delle sfere (su ::before, non sul transform) */
/* Rotazione + pulsazione dei filamenti interni della sfera (raggi mobili) */
/* CORE: halo concentrici che si espandono e svaniscono */
.economy-core-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  border: 1px solid rgba(116,255,120,0.55);
  box-shadow:
    0 0 18px rgba(70,230,120,0.5),
    inset 0 0 14px rgba(116,255,120,0.30);
  transform: translate(-50%, -50%) scale(1);
  animation: economyHaloPulse 3.6s ease-out infinite;
}
.economy-core-halo:nth-child(2) { animation-delay: 1.2s; }
.economy-core-halo:nth-child(3) { animation-delay: 2.4s; }

@keyframes economyHaloPulse {
  0%   { opacity: 0.6;  transform: translate(-50%, -50%) scale(0.9); }
  70%  { opacity: 0.12; }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.8); }
}

/* CORE: microparticelle orbitanti (generate da setupEconomyCoreParticles) */
.economy-core-particles {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 6;
  pointer-events: none;
}
.economy-core-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--p-size, 3px);
  height: var(--p-size, 3px);
  margin: calc(var(--p-size, 3px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, #eafff0 0%, rgba(var(--card-rgb, 116,255,120),0.95) 45%, rgba(var(--card-rgb, 116,255,120),0) 72%);
  box-shadow: 0 0 6px rgba(var(--card-rgb, 116,255,120),0.95);
  opacity: 0.85;
  transform: rotate(var(--p-angle, 0deg)) translateX(var(--p-radius, 70px));
  animation: economyParticleOrbit var(--p-speed, 9s) linear infinite;
  animation-delay: var(--p-delay, 0s);
}
@keyframes economyParticleOrbit {
  from { transform: rotate(var(--p-angle, 0deg)) translateX(var(--p-radius, 70px)); }
  to   { transform: rotate(calc(var(--p-angle, 0deg) + 360deg)) translateX(var(--p-radius, 70px)); }
}

/* In hover: le sfere non connesse (muted) nascondono le proprie particelle
   (es. il core non connesso non mostra le sue particelle). */
.economy-core-card.is-focus-muted .economy-core-particles,
.economy-mini-card.is-focus-muted .economy-core-particles {
  opacity: 0;
}

/* Circonferenza che ondeggia come un liquido vivo */
@keyframes economyBlob {
  0%   { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  20%  { border-radius: 58% 42% 53% 47% / 44% 58% 42% 56%; }
  40%  { border-radius: 44% 56% 59% 41% / 57% 44% 56% 43%; }
  60%  { border-radius: 55% 45% 43% 57% / 47% 55% 45% 54%; }
  80%  { border-radius: 45% 55% 56% 44% / 56% 43% 57% 44%; }
  100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
}

/* ========================================================================== */
/* ====================== END ECONOMY SECTION — SEND THIS ==================== */
/* ========================================================================== */

/* ==========================================================================
   MOBILE (≤768px) — ECONOMY: card a piena larghezza (orbita già nascosta <860)
   + scroll interno al testo della spiegazione per le slide più lunghe.
   ========================================================================== */
@media (max-width: 768px) {
  /* Layout verticale: spiegazione sopra (~50%), orbita sotto (~50%). Niente scroll
     di pagina: lo scroll è solo interno al testo della spiegazione. */
  .section__content--economy {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    height: 100%;
    padding: clamp(56px, 8.5vh, 78px) 12px clamp(22px, 4vh, 36px);
  }

  .economy-explanation-card {
    position: relative;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex: 0 0 48%;
    height: 48% !important;
    min-height: 0 !important;
  }
  .economy-explanation-card__body {
    overflow: hidden;
  }
  .economy-explanation-text {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 100%;
  }

  /* Card spiegazione: kicker/titolo/pulsanti più piccoli → più spazio per la
     textbox; testo più piccolo (più parole per riga) e area di tocco maggiore. */
  .economy-explanation-card__head { gap: 5px !important; }
  .economy-explanation-card__kicker {
    font-size: clamp(0.4rem, 2vw, 0.58rem) !important;
    padding: 0.28em 0.7em 0.22em !important;
  }
  .economy-explanation-card__title {
    font-size: clamp(0.95rem, 5vw, 1.45rem) !important;
    text-shadow: 0 0 5px rgba(116,255,120,0.9), 0 0 12px rgba(116,255,120,0.6) !important;
  }
  .economy-explanation-card__body { padding: 7px !important; }
  .economy-explanation-text {
    font-size: clamp(0.6rem, 3vw, 0.86rem) !important;
    line-height: 1.36 !important;
    letter-spacing: 0.01em !important;
    padding: 10px 12px !important;     /* area di tocco maggiore per lo scroll */
    text-align: left !important;       /* più parole leggibili per riga */
  }
  .economy-explanation-card__controls {
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
    gap: 10px !important;
  }
  .economy-explanation-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
  }

  /* Label nomi sfere: backdrop scuro + ombra sottostante per contrasto/leggibilità;
     se finirebbe sotto un'altra sfera viene spostata SOPRA (is-label-up, da JS). */
  .economy-mini-card h4 {
    background: rgba(2, 8, 5, 0.6) !important;
    padding: 2px 7px !important;
    border-radius: 8px !important;
    max-width: 150px !important;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.6) !important;
    z-index: 40 !important;
  }
  .economy-mini-card.is-focus-active { z-index: 200 !important; }
  .economy-mini-card.is-label-up h4 {
    top: auto !important;
    bottom: calc(100% + 7px) !important;
    transform: translateX(-50%) translateY(-4px);
  }
  .economy-mini-card.is-label-up.is-focus-active h4,
  .economy-mini-card.is-label-up.is-focus-connected h4 {
    transform: translateX(-50%) translateY(0);
  }

  /* Orbita: visibile nel 50% inferiore (era display:none sotto 860px) */
  .economy-orbit-system {
    display: block !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    flex: 1 1 50%;
    margin: 0 !important;
  }

  /* Messaggio temporizzato "TAP TO DISCOVER" tra card e orbita */
  .economy-touch-hint {
    display: block !important;
    position: absolute;
    left: 50%;
    top: auto;
    bottom: 12vh;                 /* parte bassa dello schermo (sopra i controlli) */
    transform: translateX(-50%);
    z-index: 30;
    padding: 0.5em 1.1em;
    border-radius: 999px;
    border: 1px solid rgba(116,255,120,0.5);
    background: linear-gradient(180deg, rgba(8,16,12,0.82), rgba(8,16,12,0.6));
    font-family: "Orbitron", sans-serif;
    font-size: clamp(0.6rem, 3.2vw, 0.84rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #cfffce;
    text-shadow: 0 0 6px rgba(116,255,120,0.9), 0 0 16px rgba(40,255,98,0.55);
    box-shadow: 0 0 18px rgba(116,255,120,0.25);
    pointer-events: none;
    opacity: 0;
    transition: opacity 360ms ease;
  }
  .economy-touch-hint.is-visible {
    opacity: 1;
  }
}

/* Desktop (e oltre 768px): la scritta non deve mai vedersi */
.economy-touch-hint {
  display: none;
}

/* ==========================================================================
   PERFORMANCE mobile — economy: riduce i costi di disegno per frame.
   - niente morphing del border-radius (ridipingeva sfera + ombre a ogni frame)
   - glow interno statico (il mix-blend-mode pulsante è costoso ×10 sfere)
   Le particelle (transform) restano animate e fluide.
   ========================================================================== */
@media (max-width: 768px) {
  .economy-core-card,
  .economy-mini-card {
    animation: none !important;
    border-radius: 50% !important;
  }
  /* core centrale -15% su mobile */
  .economy-core-card {
    width: 75px !important; /* 112px */
    height: 75px !important;/* 112px */
  }
  /* sfere intoro -15% su mobile */
  .economy-mini-card {
    width: 35px !important; 
    height: 35px !important;
  }
  .economy-mini-card__icon {
  width: 90% !important;
  height: 90% !important;
  }
  
  .economy-core-card::before,
  .economy-mini-card::before {
    animation: none !important;
    opacity: 0.8 !important;
  }

  /* Flow line: un solo drop-shadow invece di 3 → il filtro SVG viene ricalcolato
     a ogni cambio di path; con 1 livello il costo GPU per frame crolla. Il bagliore
     resta percepibile. */
  .economy-flow-line {
    filter: drop-shadow(0 0 4px rgba(80, 225, 125, 0.7)) !important;
  }
  .economy-flow-line.is-focus-line {
    filter: drop-shadow(0 0 6px rgba(95, 235, 135, 0.95)) !important;
  }
  .economy-flow-pulse {
    filter: drop-shadow(0 0 4px rgba(150, 245, 170, 0.9)) !important;
  }
}