/* ========================================================================== */
/* ===================== START ASSETS SECTION — SEND THIS ==================== */
/* ========================================================================== */
/*
  Esta sección sobrescribe y organiza TODO lo relativo a ASSETS:
  - showcase general
  - sistema de rarezas
  - HUD central
  - navegación de rarezas
  - holograma / proyección
  - animaciones
  - responsive

  Si en el futuro necesitas mandarme solo esta parte, envíame desde:
  START ASSETS SECTION — SEND THIS
  hasta:
  END ASSETS SECTION — SEND THIS
*/

/* ==================== ASSETS LAYOUT ==================== */

.section__content--assets {
  width: min(100%, 1420px);
  transform: none;
}

.assets-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(380px, 0.92fr) minmax(260px, 1fr);
  align-items: center;
  gap: clamp(18px, 2.8vw, 42px);
  min-height: min(72vh, 780px);
  width: 100%;
  overflow: visible;
  
}

/* ==================== RARITY COLOR SYSTEM ==================== */

.assets-showcase[data-rarity="1"] {
  --rarity-main: #d0d0d0;
  --rarity-secondary: #8a8a8a;
  --rarity-main-rgb: 208, 208, 208;
  --rarity-secondary-rgb: 138, 138, 138;
}

.assets-showcase[data-rarity="2"] {
  --rarity-main: #4cff9a;
  --rarity-secondary: #1f7a4d;
  --rarity-main-rgb: 76, 255, 154;
  --rarity-secondary-rgb: 31, 122, 77;
}

.assets-showcase[data-rarity="3"] {
  --rarity-main: #59b8ff;
  --rarity-secondary: #2b5f9e;
  --rarity-main-rgb: 89, 184, 255;
  --rarity-secondary-rgb: 43, 95, 158;
}

.assets-showcase[data-rarity="4"] {
  --rarity-main: #b46bff;
  --rarity-secondary: #5a2b9e;
  --rarity-main-rgb: 180, 107, 255;
  --rarity-secondary-rgb: 90, 43, 158;
}

.assets-showcase[data-rarity="5"] {
  --rarity-main: #ff8a2b;
  --rarity-secondary: #9e4a1a;
  --rarity-main-rgb: 255, 138, 43;
  --rarity-secondary-rgb: 158, 74, 26;
}

.assets-showcase[data-rarity="6"] {
  --rarity-main: #ff2bbf;
  --rarity-secondary: #9e1a6f;
  --rarity-main-rgb: 255, 43, 191;
  --rarity-secondary-rgb: 158, 26, 111;
}

.assets-showcase::before {
  content: "";
  position: absolute;
  inset: 14% 18% 18%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.045), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(var(--rarity-main-rgb), 0.14), transparent 58%);
  filter: blur(32px);
  pointer-events: none;
}

/* ==================== HUD CENTRAL ==================== */

.assets-hud-card {
  position: relative;
  z-index: 3;
  padding: clamp(24px, 2.2vw, 34px);
  border: 1px solid rgba(122,176,255,0.2);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(10,16,32,0.84), rgba(5,9,18,0.92)),
    radial-gradient(circle at 50% 0%, rgba(var(--rarity-main-rgb), 0.18), transparent 42%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 0 24px rgba(19,34,68,0.45),
    0 0 44px rgba(var(--rarity-main-rgb), 0.18);
  backdrop-filter: none;
  overflow: visible;
}

#assets .assets-hud-card {
  opacity: 0;
}

.assets-rarity-nav,
.assets-rarity-head,
.assets-title {
  overflow: visible;
}

.assets-hud-card::before,
.assets-hud-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

.assets-hud-card::before {
  /* rimosso il fascio luminoso verticale (sopra→sotto) sul lato sinistro della card;
     resta solo la lieve luce superiore. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 22%);
  mix-blend-mode: screen;
}

.assets-hud-card::after {
  inset: 10px;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 18px;
}

/* ===== ASSETS — ALWAYS ACTIVE RARITY ANIMATED BORDER ===== */

.assets-hud-card {
  isolation: isolate;
  border-color: rgba(var(--rarity-main-rgb), 0.24);

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 0 0 1px rgba(var(--rarity-main-rgb), 0.08) inset,
    0 0 24px rgba(19,34,68,0.45),
    0 0 44px rgba(var(--rarity-main-rgb), 0.18);

  transition:
    border-color 700ms ease,
    box-shadow 700ms ease,
    background 700ms ease;
}

.assets-hud-card::after {
  inset: 0;
  z-index: 6;
  padding: 1.5px;
  opacity: 1;

  border: none;
  border-radius: inherit;

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

      transparent 0deg,
      transparent 34deg,

      rgba(var(--rarity-main-rgb), 0.96) 64deg,
      rgba(255,255,255,0.98) 78deg,
      rgba(var(--rarity-secondary-rgb), 0.90) 96deg,

      transparent 126deg,
      transparent 214deg,

      rgba(var(--rarity-main-rgb), 0.96) 244deg,
      rgba(255,255,255,0.98) 258deg,
      rgba(var(--rarity-secondary-rgb), 0.90) 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 6px rgba(var(--rarity-main-rgb), 0.36))
    drop-shadow(0 0 14px rgba(var(--rarity-secondary-rgb), 0.22));

  animation:
    assetsBorderRotate 8s linear infinite,
    assetsBorderPulse 4s ease-in-out infinite;

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

@keyframes assetsBorderRotate {
  0% {
    --assets-border-angle: 0deg;
  }

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

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

  50% {
    opacity: 1;
  }
}

.assets-hud-frame {
  position: absolute;
  left: 18px;
  right: 18px;
  height: 14px;
  pointer-events: none;
  overflow: visible;
}

.assets-hud-frame--top {
  top: 14px;
  height: 14px;
  border: none;
  position: absolute;
  /* la luce che rimbalza resta entro i limiti della barra/cornice interna */
  overflow: hidden;
  border-radius: 999px;
}

.assets-hud-frame--top::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(var(--rarity-main-rgb), 0.18) 10%,
      rgba(var(--rarity-main-rgb), 0.75) 25%,
      rgba(255,255,255,0.92) 50%,
      rgba(var(--rarity-main-rgb), 0.75) 75%,
      rgba(var(--rarity-main-rgb), 0.18) 90%,
      transparent 100%
    );
  box-shadow:
    0 0 5px rgba(var(--rarity-main-rgb), 0.28),
    0 0 10px rgba(var(--rarity-main-rgb), 0.16);
}

.assets-hud-frame--top::after {
  content: "";
  position: absolute;
  left: 14%;
  top: 50%;
  width: 72px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(var(--rarity-main-rgb), 0.5),
      rgba(255,255,255,0.82),
      rgba(var(--rarity-main-rgb), 0.5)
    );
  box-shadow:
    0 0 5px rgba(var(--rarity-main-rgb), 0.32);
  /* luce che rimbalza da un lato all'altro (come su mobile) */
  animation: assetsBarEnergy 2.8s ease-in-out infinite alternate;
}

.assets-hud-frame--bottom {
  bottom: 14px;
  height: 14px;
  border: none;
  position: absolute;
  overflow: hidden;
  border-radius: 999px;
}

.assets-hud-frame--bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(var(--rarity-secondary-rgb), 0.16) 10%,
      rgba(var(--rarity-secondary-rgb), 0.68) 25%,
      rgba(255,255,255,0.68) 50%,
      rgba(var(--rarity-secondary-rgb), 0.68) 75%,
      rgba(var(--rarity-secondary-rgb), 0.16) 90%,
      transparent 100%
    );
  box-shadow:
    0 0 5px rgba(var(--rarity-secondary-rgb), 0.22),
    0 0 10px rgba(var(--rarity-secondary-rgb), 0.12);
}

.assets-hud-frame--bottom::after {
  content: "";
  position: absolute;
  left: 86%;
  top: 50%;
  width: 60px;
  height: 6px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(var(--rarity-secondary-rgb), 0.42),
      rgba(255,255,255,0.64),
      rgba(var(--rarity-secondary-rgb), 0.42)
    );
  box-shadow:
    0 0 4px rgba(var(--rarity-secondary-rgb), 0.26);
  /* sfasata rispetto alla barra superiore */
  animation: assetsBarEnergy 3.5s ease-in-out infinite alternate;
  animation-delay: -1.6s;
}

.assets-title {
  position: relative;
  margin: 0;
  max-width: 100%;
  width: 100%;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  text-align: center;
  font-family: "Space Age", "Orbitron", sans-serif;
  font-size: clamp(1.18rem, 2vw, 2.15rem);
  line-height: 0.9;
  letter-spacing: 0.07em;
  /* neon SEMPRE attivo (niente più dipendenza dall'hover) */
  color: rgba(var(--rarity-main-rgb), 0.95);
  transition: color 180ms ease, text-shadow 180ms ease;
  text-shadow:
    0 0 6px rgba(var(--rarity-main-rgb), 0.72),
    0 0 12px rgba(var(--rarity-main-rgb), 0.58),
    0 0 22px rgba(var(--rarity-main-rgb), 0.42),
    0 0 34px rgba(var(--rarity-secondary-rgb), 0.32);
}

/* desktop: il numero va a capo sotto "RARITY" (come prima col <br>) */
.assets-rarity-num { display: block; }

/* ❌ eliminamos el glitch visual pero mantenemos la estructura */
.assets-title::before,
.assets-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  white-space: pre-line;
}

/* (Hover neon rimosso: l'effetto è ora sempre attivo sul .assets-title base.) */

/* ❌ desactivamos completamente el efecto glitch en hover */
.assets-hud-card:hover .assets-title::before,
.assets-hud-card:hover .assets-title::after {
  opacity: 0;
  transform: none;
  clip-path: none;
}

.assets-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.assets-stat-card {
  position: relative;
  min-height: clamp(78px, 10vh, 108px);
  padding: 14px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
    radial-gradient(circle at 100% 0%, rgba(var(--rarity-main-rgb), 0.14), transparent 46%);
  overflow: hidden;
}

.assets-stat-card::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--rarity-main-rgb), 0.42), transparent);
}

.assets-stat-label {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  text-align: center;
  font-family: "Orbitron", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: rgba(148,195,255,0.92);
}

.assets-stat-value {
  position: relative;
  
  display: block;
  width: 100%;

  text-align: center;

  font-family: "Space Age", "Orbitron", sans-serif;
  /*font-size: clamp(1.08rem, 1.65vw, 1.48rem);*/
  font-size: clamp(0.7rem, 2.6vw + 0.55vh, 1.18rem);
  line-height: 1.05;
  white-space: nowrap;
  margin: 0 !important;

  color: rgba(var(--rarity-main-rgb), 0.96);

  text-shadow:
    0 0 2px rgba(0,0,0,1),
    0 0 6px rgba(var(--rarity-main-rgb), 0.42),
    0 0 12px rgba(var(--rarity-main-rgb), 0.22);

  filter:
    brightness(1.02)
    saturate(1.05);

  animation:
    assetsStatValueNeonPulse 3.4s ease-in-out infinite;

  transition:
    color 320ms ease,
    text-shadow 320ms ease,
    filter 320ms ease;
}

.assets-stat-value.is-rarity-switch {
  animation:
    assetsStatValueRaritySwitch 320ms cubic-bezier(.22,1,.36,1) 1,
    assetsStatValueNeonPulse 3.4s ease-in-out infinite 320ms;
}

@keyframes assetsStatValueRaritySwitch {
  0% {
    opacity: 1;

    filter:
      blur(0)
      brightness(1.12)
      saturate(1.18);

    transform:
      translateY(0)
      scale(1);

    text-shadow:
      0 0 4px rgba(255,255,255,0.78),
      0 0 12px rgba(var(--rarity-main-rgb), 0.82),
      0 0 24px rgba(var(--rarity-main-rgb), 0.56),
      0 0 40px rgba(var(--rarity-secondary-rgb), 0.34);
  }

  45% {
    opacity: 0;

    filter:
      blur(10px)
      brightness(1.8)
      saturate(1.5);

    transform:
      translateY(-4px)
      scale(1.04);

    text-shadow:
      0 0 10px rgba(255,255,255,1),
      0 0 22px rgba(var(--rarity-main-rgb), 1),
      0 0 44px rgba(var(--rarity-main-rgb), 0.82),
      0 0 72px rgba(var(--rarity-secondary-rgb), 0.62);
  }

  100% {
    opacity: 1;

    filter:
      blur(0)
      brightness(1.12)
      saturate(1.18);

    transform:
      translateY(0)
      scale(1);

    text-shadow:
      0 0 4px rgba(255,255,255,0.78),
      0 0 12px rgba(var(--rarity-main-rgb), 0.82),
      0 0 24px rgba(var(--rarity-main-rgb), 0.56),
      0 0 40px rgba(var(--rarity-secondary-rgb), 0.34);
  }
}

.assets-stat-card:hover .assets-stat-value {
  filter:
    brightness(1.08)
    saturate(1.12);

  text-shadow:
    0 0 2px rgba(0,0,0,1),
    0 0 8px rgba(var(--rarity-main-rgb), 0.58),
    0 0 16px rgba(var(--rarity-secondary-rgb), 0.24);
}

@keyframes assetsStatValueNeonPulse {
  0%, 100% {
    opacity: 0.96;

    text-shadow:
      0 0 2px rgba(0,0,0,0.95),
      0 0 7px rgba(var(--rarity-main-rgb), 0.42),
      0 0 14px rgba(var(--rarity-main-rgb), 0.24);
  }

  50% {
    opacity: 1;

    text-shadow:
      0 0 2px rgba(0,0,0,0.95),
      0 0 9px rgba(var(--rarity-main-rgb), 0.54),
      0 0 18px rgba(var(--rarity-secondary-rgb), 0.26);
  }
}

.assets-stat-note {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: center;
  font-size: 0.94rem;
  color: rgba(204,220,248,0.7);
}

.assets-description {
  margin: 22px 0 0;
  font-size: clamp(0.96rem, 1.08vw, 1.06rem);
  line-height: 1.58;
  color: rgba(223,231,245,0.88);
}

/* ==================== RARITY NAV ==================== */

.assets-rarity-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  padding: 0 88px;
  overflow: visible;
}

.assets-rarity-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.assets-rarity-btn {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% + 50px));
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  z-index: 20;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    radial-gradient(circle at 50% 50%, rgba(var(--rarity-main-rgb), 0.12), 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;
}

.assets-rarity-btn--prev { left: 0; }
.assets-rarity-btn--next { right: 0; }

.assets-rarity-btn:hover {
  transform: translateY(calc(-50% + 50px));
  border-color: rgba(255,255,255,0.22);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 14px rgba(var(--rarity-main-rgb), 0.16),
    0 0 20px rgba(var(--rarity-secondary-rgb), 0.12);
}

.assets-rarity-btn:active {
  transform: translateY(calc(-50% + 50px));
}

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

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

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

.assets-rarity-indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  pointer-events: none;
}

.assets-rarity-indicators span {
  width: 30px;
  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);
  transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
  opacity: 0.65;
}

.assets-rarity-indicators span.is-active {
  opacity: 1;
  transform: scaleX(1.08);
  background: linear-gradient(90deg, var(--rarity-secondary), var(--rarity-main));
  box-shadow:
    0 0 6px rgba(var(--rarity-secondary-rgb), 0.22),
    0 0 10px rgba(var(--rarity-main-rgb), 0.16);
}

#assets.is-active .assets-hud-card {
  animation: assetsHudIntro 1.6s cubic-bezier(0.16, 1, 0.3, 1) both 0.12s;
}

/* ==================== SWITCH FX ==================== */

.assets-showcase.is-rarity-switching .assets-hud-card {
  animation: assetsHudPulseSwitch 560ms ease;
}

.assets-rarity-head .assets-title.is-title-switch-out {
  animation: assetsRarityTitleOut 180ms ease forwards;
}

.assets-rarity-head .assets-title.is-title-switch-in {
  animation: assetsRarityTitleIn 380ms cubic-bezier(.16,.84,.22,1) forwards;
}

/* ==================== ASSETS KEYFRAMES ==================== */

@keyframes assetsHudIntro {
  0% {
    opacity: 0;
    transform: translateY(64px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* MOBILE: la card testi entra dall'ALTO verso il basso (override nel blocco @media).
   Resta sotto al box del nome pagina perché ha z-index inferiore (titolo = 20001). */
@keyframes assetsHudIntroDown {
  0%   { opacity: 0; transform: translateY(-56px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes assetsRarityTitleOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes assetsRarityTitleIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Fade del testo descrizione (sincronizzato col titolo) al cambio rarità */
.assets-description.is-text-out {
  animation: assetsRarityTitleOut 180ms ease forwards;
}
.assets-description.is-text-in {
  animation: assetsRarityTitleIn 380ms ease forwards;
}

@keyframes assetsHudPulseSwitch {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.03) inset,
      0 0 24px rgba(19,34,68,0.45),
      0 0 44px rgba(var(--rarity-main-rgb), 0.18);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.05) inset,
      0 0 32px rgba(var(--rarity-main-rgb), 0.14),
      0 0 58px rgba(var(--rarity-secondary-rgb), 0.12);
  }
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1180px) {
  .section__content--assets {
    transform: none;
  }

  .assets-showcase {
    grid-template-columns: minmax(220px, 1fr) minmax(340px, 0.95fr) minmax(220px, 1fr);
    gap: 20px;
  }
}

@media (max-width: 980px) {
  .assets-showcase {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: auto;
    padding-block: 40px 24px;
  }

  .assets-hud-card {
    order: 1;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .assets-showcase {
    gap: 18px;
    padding-top: 24px;
  }

  .assets-hud-card {
    padding: 24px 18px;
    border-radius: 20px;
  }

  .assets-title {
    font-size: clamp(1.18rem, 7vw, 1.72rem);
    letter-spacing: 0.06em;
  }

  .assets-stats-grid {
    grid-template-columns: 1fr;
  }

  .assets-stat-card {
    min-height: auto;
  }

  .assets-rarity-nav {
    padding: 0 60px;
    margin-bottom: 18px;
  }

  .assets-rarity-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .assets-rarity-btn span {
    width: 11px;
    height: 11px;
  }

  .assets-rarity-indicators span {
    width: 22px;
  }
}

.assets-rarity-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 18px 0; /* espacio entre botones y stats */
}

/* Switch MINER/SPACESHIP: nascosto su desktop, usato solo su mobile */
.assets-switch { display: none; }

/* ==========================================================================
   MOBILE (≤768px) — ASSETS: card (testi + frecce) nel 50% superiore; sotto uno
   switch MINER/SPACESHIP e una sola immagine alla volta (50% inferiore). Niente
   scroll: testi della card compatti, una riga per container.
   ========================================================================== */
@media (max-width: 768px) {
  /* ASSETS su mobile NON deve scrollare: il contenuto è dimensionato per stare
     nel viewport (card 50% + switch + parallax). Sovrascrive il modello
     scrollabile globale di sections.css per questa sola sezione. */
  #assets.section.is-active {
    overflow: hidden !important;
    align-items: stretch !important;
    touch-action: none;   /* niente pan/scroll col dito sulla sezione */
  }

  .section__content--assets {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    /* overflow VISIBLE: la metà inferiore della base (centrata 5% sotto il bordo della
       card) deve poter sporgere sotto la card senza essere tagliata. Il clamp anti-scroll
       resta `#assets.is-active { overflow:hidden }` al bordo sezione (= viewport), quindi
       niente scroll ma la base si vede intera fin sopra la cornice della pagina. */
    overflow: visible;
    /* padding alto = appena sotto al box del titolo (alto 16vw) con ~8px di gap, così
       la card testi sale fin quasi al titolo e ha più spazio interno; padding basso
       ridotto perché su mobile i pulsanti HUD in basso sono nascosti → spazio per la
       card parallax (resta comunque sopra i corner-box dell'angolo). */
    padding: calc(16vw - 8px) 12px clamp(26px, 4vh, 42px);
  }
  
  .assets-showcase {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
    align-items: stretch;
    /* gap RIDOTTI (card testi ↔ switcher ↔ card parallax) → più spazio sotto la card
       parallax per la base, che non viene tagliata. */
    gap: clamp(3px, 0.8vh, 7px);
    width: 100%;
    height: 98%;
    min-height: 0 !important;
    padding: 0 !important;
    perspective: 1400px;   /* per il flip Y del cambio miner/spaceship */
  }
  .assets-showcase::before { display: none; }

  /* la card testi entra dall'ALTO verso il basso (non dal basso), restando SOTTO al
     contenitore del nome pagina (z-index titolo = 20001 > z della card nel sectionsStage) */
  #assets.is-active .assets-hud-card {
    animation: assetsHudIntroDown 1s cubic-bezier(0.16, 1, 0.3, 1) both 0.12s;
  }

  /* ---- CARD: parte superiore (ridotta da 50% → 44% per dare più spazio sotto e
     ingrandire la card parallax mantenendo le proporzioni) ---- */
  .assets-hud-card {
    order: 0 !important;
    flex: 0 0 43%;
    height: 43%;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    /* padding alto/basso: lascia spazio tra le barre luminose (top/bottom) e il
       contenuto; scala con l'altezza schermo (min 30px per non toccare le barre). */
    padding: clamp(22px, 3.6vh, 34px) 14px clamp(22px, 3.8vh, 36px) !important;
    border-radius: 16px;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(6px, 1.4vh, 12px);   /* spazio tra header, statistiche e descrizione */
  }
  /* riga luminosa che percorre il bordo del container PIÙ ESTERNO (la card) */
  .assets-hud-card::after {
    inset: 0 !important;
    border: none !important;
    border-radius: inherit;
    padding: 2px;
    /* DUE linee come in versione desktop (due segmenti luminosi a ~180° l'uno dall'altro) */
    background:
      conic-gradient(
        from var(--assets-border-angle, 0deg),
        transparent 0deg,
        transparent 34deg,
        rgba(var(--rarity-main-rgb), 0.92) 64deg,
        #ffffff 78deg,
        rgba(var(--rarity-secondary-rgb), 0.88) 96deg,
        transparent 126deg,
        transparent 214deg,
        rgba(var(--rarity-main-rgb), 0.92) 244deg,
        #ffffff 258deg,
        rgba(var(--rarity-secondary-rgb), 0.88) 276deg,
        transparent 306deg,
        transparent 360deg
      ) !important;
    -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 4px rgba(var(--rarity-main-rgb), 0.6))
      drop-shadow(0 0 8px rgba(var(--rarity-main-rgb), 0.4));
    animation: assetsBorderTravel 3.2s linear infinite;
  }
  /* mentre una card parallax è ingrandita (fullscreen mobile) la riga luminosa che
     percorre il bordo della card descrizioni NON deve esserci; alla chiusura
     (body senza .assets-fs-open) l'animazione riparte da sé */
  body.assets-fs-open .assets-hud-card::after {
    animation: none !important;
    opacity: 0 !important;
  }

  /* barre più vicine al bordo su mobile → serve meno clearance, più spazio ai testi */
  .assets-hud-frame--top { top: 8px !important; height: 10px !important; }
  .assets-hud-frame--bottom { bottom: 8px !important; height: 10px !important; }

  /* barre sup/inf: invece del punto luminoso fisso al centro, l'energia si muove
     avanti e indietro rimbalzando da un lato all'altro (top e bottom sfasati). */
  .assets-hud-frame--top::after,
  .assets-hud-frame--bottom::after {
    width: 64px !important;
    animation: assetsBarEnergy 2.6s ease-in-out infinite alternate;
  }
  .assets-hud-frame--bottom::after {
    width: 56px !important;
    animation-duration: 3.3s;
    animation-delay: -1.4s;
  }

  /* frecce: posizionate rispetto alla CARD, alla stessa altezza del titolo RARITY
     (la head è il primo blocco; il suo titolo cade ~al 17% della card) → niente
     sovrapposizione con i riquadri statistiche. */
  .assets-rarity-nav {
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .assets-rarity-head {
    position: relative;
    margin: 0 !important;
  }
  .assets-rarity-btn,
  .assets-rarity-btn:hover,
  .assets-rarity-btn:active {
    position: absolute !important;
    /* centro freccia = padding-top + gap(nav→header) + metà header → segue il
       padding responsivo e resta allineato al titolo a ogni dimensione schermo */
    top: calc(clamp(22px, 3.6vh, 34px) + clamp(6px, 1.4vh, 12px) + 13px) !important;
    transform: translateY(-50%) !important;
    width: clamp(30px, 5vh, 40px) !important;   /* più piccole su schermi bassi */
    height: clamp(30px, 5vh, 40px) !important;
    border-radius: 11px !important;
  }
  .assets-rarity-btn--prev { left: 6px !important; right: auto !important; }
  .assets-rarity-btn--next { right: 6px !important; left: auto !important; }
  .assets-rarity-btn span { width: 11px !important; height: 11px !important; }
  /* RARITY + numero: sempre accesi col colore della rarità (cambia solo con le
     frecce, NON quando si preme lo switch). NB: il colore visibile del testo è
     dato da -webkit-text-fill-color (default currentColor) → va impostato anche
     quello, altrimenti il color non si vede. */
  .assets-title,
  .assets-hud-card:hover .assets-title {
    font-size: clamp(0.95rem, 4vw + 0.6vh, 1.65rem) !important;
    line-height: 0.92 !important;
    transition: none !important;
    color: rgba(var(--rarity-main-rgb), 0.98) !important;
    -webkit-text-fill-color: rgba(var(--rarity-main-rgb), 0.98) !important;
    text-shadow:
      0 0 6px rgba(var(--rarity-main-rgb), 0.75),
      0 0 14px rgba(var(--rarity-main-rgb), 0.55),
      0 0 26px rgba(var(--rarity-secondary-rgb), 0.35) !important;
    white-space: nowrap !important;
  }
  /* mobile: "RARITY" e numero sulla STESSA riga */
  .assets-rarity-num { display: inline !important; margin-left: 0.28em; }
  .assets-rarity-indicators { margin: 4px 0 0 !important; }

  /* stat card: container ingranditi che riempiono lo spazio liberato, testi più
     grandi (etichetta sopra, valore sotto, centrati). */
  .assets-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: clamp(7px, 1.4vh, 12px) !important;   /* spazio tra le card */
    margin-top: clamp(9px, 1.8vh, 16px) !important; /* separazione frecce/header ↔ card */
    flex: 1 1 auto !important;       /* cresce per riempire lo spazio sotto l'header */
    min-height: 0 !important;        /* può ridursi su schermi bassi (niente overflow) */
    align-content: stretch !important;
  }
  .assets-stat-card {
    min-height: 0 !important;
    height: auto !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: clamp(4px, 1vh, 8px) clamp(6px, 2vw, 10px) !important;
    gap: 2px !important;
    overflow: hidden !important;
  }
  .assets-stat-label {
    font-size: clamp(0.42rem, 1.8vw + 0.3vh, 0.74rem) !important;
    letter-spacing: 0.04em !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    margin: 0 !important;
    min-width: 0;
  }
  .assets-stat-value {
    font-size: clamp(0.7rem, 2.6vw + 0.55vh, 1.18rem) !important;
    line-height: 1.05 !important;
    white-space: nowrap;
    margin: 0 !important;
  }
  .assets-stat-note { display: none !important; }

  .assets-description {
    font-size: clamp(0.64rem, 2.6vw + 0.4vh, 0.94rem) !important;
    line-height: 1.34 !important;
    margin-top: 0 !important;
    flex: 0 0 auto !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  
    overflow: hidden;
    /* testo bianco con alone neon del colore della rarità */
    color: rgba(255,255,255,0.95) !important;
    text-shadow:
      0 0 6px rgba(var(--rarity-main-rgb), 0.7),
      0 0 12px rgba(var(--rarity-main-rgb), 0.4) !important;
  }

  /* ---- SWITCH MINER / SPACESHIP ---- */
  .assets-switch {
    order: 1 !important;
    display: inline-flex !important;
    align-self: center;
    position: relative;
    padding: 3px;
    border: 1px solid rgba(var(--rarity-main-rgb), 0.45);
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    box-shadow: 0 0 14px rgba(var(--rarity-main-rgb), 0.18);
    margin-top: 2vh;
    margin-bottom: 2vh;
  }
  .assets-switch-btn {
    position: relative;
    z-index: 2;
    border: none;
    background: transparent;
    padding: 6px 18px;
    border-radius: 999px;
    font-family: "Orbitron", sans-serif;
    font-size: clamp(0.55rem, 2.7vw, 0.74rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(230,238,255,0.66);
    cursor: pointer;
    transition: color 200ms ease, background 220ms ease, box-shadow 220ms ease;
  }
  /* alone direttamente sul pulsante attivo → ha la dimensione del testo (con il
     padding) e non si sovrappone all'altro testo */
  .assets-switch-btn.is-active {
    color: #fff;
    background: linear-gradient(180deg, rgba(var(--rarity-main-rgb), 0.45), rgba(var(--rarity-main-rgb), 0.18));
    box-shadow: 0 0 12px rgba(var(--rarity-main-rgb), 0.45), inset 0 0 0 1px rgba(var(--rarity-main-rgb), 0.5);
    text-shadow: 0 0 8px rgba(var(--rarity-main-rgb), 0.95);
  }
  /* thumb a larghezza fissa non più usato */
  .assets-switch-thumb { display: none !important; }

  /* ---- IMMAGINE: 50% inferiore, una alla volta ---- */
  .parallax-card,
  .parallax-miner,
  .parallax-ship {
    order: 2 !important;
    /* occupa la parte inferiore: cresce per riempire lo spazio sotto la card,
       mantiene le proporzioni (aspect-ratio) e resta CENTRATA orizzontalmente */
    flex: 1 1 auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 572 / 781 !important;
    align-self: center !important;   /* centrata rispetto alla card descrizioni sopra */
    margin: 0 auto !important;
    padding: 0 !important;
    /* nessun transform forzato: lascia spazio alle animazioni (vortice) e al
       transform di fullscreen (is-fullscreen) */
    position: relative;              /* per lo z-index sopra l'immagine base */
    z-index: 2;                      /* a riposo la card sta SOPRA la base */
  }

  /* ---- IMMAGINE "BASE" sotto la card parallax (a riposo) ----
     È sibling delle card nello showcase → resta FERMA quando la card va in fullscreen.
     Regola con le variabili:
       --pbase-w       larghezza dell'immagine (default 86% dello showcase)
       --pbase-bottom  distanza dal fondo (alzala per far entrare più "dietro" la card,
                       ~10% di sovrapposizione, abbassala per meno) */
  .assets-showcase { position: relative; }
  /* immagini "base" (2 layer per il crossfade) — posizionate via JS (left/top/width/
     transform inline) col centro verticale sul bordo inferiore della card parallax. */
  .parallax-base {
    display: block;
    position: absolute;
    z-index: 1;                      /* DIETRO la card parallax (z-index 2) */
    height: auto;                    /* proporzioni mantenute (larghezza la dà il JS) */
    pointer-events: none;
    object-fit: contain;
    opacity: 0;                      /* il crossfade lo fa il JS (Web Animations API) */

  }

  /* card parallax: leggero "galleggiamento" su/giù a riposo (solo translate, niente
     scala → le immagini non si ingrandiscono/rimpiccioliscono). Spento in focus/
     fullscreen (lì il transform è gestito da JS) e quando un'altra card è in focus. */
  .parallax-card { animation: assetsCardFloat 3.8s ease-in-out infinite; }
  .parallax-card.is-touch-focus,
  .parallax-card.is-fullscreen,
  .assets-showcase:has(.parallax-card.is-touch-focus) .parallax-card {
    animation: none;
  }

  /* X di chiusura: in alto a destra della card, visibile solo quando è in focus */
  .parallax-card-close {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 60;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(var(--rarity-main-rgb), 0.6);
    background: rgba(4, 8, 16, 0.72);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(var(--rarity-main-rgb), 0.35);
    -webkit-tap-highlight-color: transparent;
  }
  .parallax-card.is-touch-focus .parallax-card-close,
  .parallax-card.is-fullscreen .parallax-card-close {
    display: flex;
  }

  .assets-showcase[data-assets-view="spaceship"] .parallax-miner { display: none !important; }
  .assets-showcase[data-assets-view="miner"] .parallax-ship { display: none !important; }

  .parallax-card__stars {
    gap: clamp(3px, 1.4vw, 8px) !important;   /* equidistanti, indipendenti dal n° stelle */
  }
  .parallax-star {
    text-shadow:
      0 0 4px rgba(255,255,255,.9),
      0 0 12px var(--rarity-glow-strong) !important;
  }
  .parallax-card.is-touch-focus .parallax-star:nth-child(1) {
  animation: starEntrance 860ms cubic-bezier(.13, .9, .26, 1) 0ms both !important;
  }
  .parallax-card.is-touch-focus .parallax-star:nth-child(2) {
    animation: starEntrance 860ms cubic-bezier(.13, .9, .26, 1) 0ms both !important;
  }
  .parallax-card.is-touch-focus .parallax-star:nth-child(3) {
    animation: starEntrance 860ms cubic-bezier(.13, .9, .26, 1) 0ms both !important;
  }
  .parallax-card.is-touch-focus .parallax-star:nth-child(4) {
    animation: starEntrance 860ms cubic-bezier(.13, .9, .26, 1) 0ms both !important;
  }
  .parallax-card.is-touch-focus .parallax-star:nth-child(5) {
    animation: starEntrance 860ms cubic-bezier(.13, .9, .26, 1) 0ms both !important;
  }
  .parallax-card.is-touch-focus .parallax-star:nth-child(6) {
    animation: starEntrance 860ms cubic-bezier(.13, .9, .26, 1) 0ms both !important;
  }
  
}

/* energia che rimbalza lungo le barre sup/inf della card (mobile) */
@keyframes assetsBarEnergy {
  0%   { left: 14%; }
  100% { left: 86%; }
}

/* riga luminosa che percorre il bordo esterno della card (mobile).
   --assets-border-angle è già registrato come @property in variables.css → l'angolo
   interpola in modo fluido. */
@keyframes assetsBorderTravel {
  to { --assets-border-angle: 360deg; }
}

/*========================= PARALLAX STYLES ===================*/

@font-face {
  font-family: "SpaceAge";
  /* il file è in modifiche/fonts/ → percorso relativo al file css (../fonts/) */
  src:
    url("../fonts/space-age.ttf") format("truetype"),
    url("../fonts/space age.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* NB: rimossi i reset globali (`*`, `html/body`, `.page`, `.hero-section`,
   `.cards-grid`) provenienti dal demo standalone del parallax: alteravano font,
   sfondo e scroll dell'INTERO sito e non sono usati qui (il markup usa
   `.assets-showcase`, non `.cards-grid`). */

/* immagine "base" sotto la card parallax: SOLO mobile (su desktop nascosta). Su mobile
   è gestita dal blocco @media (display:block, posizione via JS). */
@media (min-width: 769px) { .parallax-base { display: none; } }

/* CARTA GENERAL */
.parallax-card {
  position: relative;
  /* Desktop: la card riempie la larghezza della colonna e l'altezza deriva
     dall'aspect-ratio → proporzioni SEMPRE rispettate (niente distorsione del frame).
     Centrata verticalmente accanto alla card centrale. */
  width: 100%;
  height: auto;
  margin: 0 auto;
  aspect-ratio: 572 / 781;

  /* perspective ALTA: riduce la magnificazione prospettica dei translateZ (texture
     GPU scalata = sfocatura). Mantiene il senso di profondità senza ingrandire/sfocare. */
  perspective: 2600px;
  transform-style: preserve-3d;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;  /* niente rettangolo azzurro al tap */
  outline: none;

  transition:
    opacity 280ms ease,
    filter 280ms ease,
    transform 280ms ease;
}

/* DESKTOP (layout 3 colonne, ≥981px): la card parallax a RIPOSO ha SEMPRE la stessa
   altezza della card testi centrale (l'altezza è impostata da JS = syncParallaxToTextCard,
   la larghezza segue le proporzioni; centrata nella colonna). In HOVER l'INTERA card si
   ingrandisce, oltre agli effetti parallax interni. */
@media (min-width: 981px) {
  .parallax-card {
    justify-self: center;   /* centrata nella colonna quando la larghezza < traccia */
  }
  .parallax-card.is-touch-focus {
    transform: scale(1.06); /* ingrandimento dell'intera card in hover (transition già definita) */
  }
}

/* Nessun highlight/selezione su tutti gli strati interni della card (tap mobile) */
.parallax-card,
.parallax-card * {
  -webkit-tap-highlight-color: transparent;
}

/* X di chiusura focus: nascosta di default (compare solo su mobile in focus) */
.parallax-card-close {
  display: none;
}

/* COLORES POR RAREZA */
.parallax-card[data-rarity="1"] {
  --rarity-color: #7ef9ff;
  --rarity-core: #ffffff;
  --rarity-glow-strong: rgba(126, 249, 255, 1);
  --rarity-glow-soft: rgba(126, 249, 255, 0.5);
  --rarity-panel-dark: rgba(3, 22, 30, 0.92);
}

.parallax-card[data-rarity="2"] {
  --rarity-color: #8fff6d;
  --rarity-core: #ffffff;
  --rarity-glow-strong: rgba(143, 255, 109, 1);
  --rarity-glow-soft: rgba(143, 255, 109, 0.5);
  --rarity-panel-dark: rgba(5, 24, 13, 0.92);
}

.parallax-card[data-rarity="3"] {
  --rarity-color: #58a6ff;
  --rarity-core: #ffffff;
  --rarity-glow-strong: rgba(88, 166, 255, 1);
  --rarity-glow-soft: rgba(88, 166, 255, 0.52);
  --rarity-panel-dark: rgba(4, 13, 32, 0.92);
}

.parallax-card[data-rarity="4"] {
  --rarity-color: #b878ff;
  --rarity-core: #ffffff;
  --rarity-glow-strong: rgba(184, 120, 255, 1);
  --rarity-glow-soft: rgba(184, 120, 255, 0.52);
  --rarity-panel-dark: rgba(21, 8, 34, 0.92);
}

.parallax-card[data-rarity="5"] {
  --rarity-color: #ffd56a;
  --rarity-core: #ffffff;
  --rarity-glow-strong: rgba(255, 213, 106, 1);
  --rarity-glow-soft: rgba(255, 213, 106, 0.54);
  --rarity-panel-dark: rgba(32, 23, 5, 0.92);
}

.parallax-card[data-rarity="6"] {
  --rarity-color: #ff5ccc;
  --rarity-core: #ffffff;
  --rarity-glow-strong: rgba(255, 92, 204, 1);
  --rarity-glow-soft: rgba(255, 92, 204, 0.56);
  --rarity-panel-dark: rgba(34, 5, 26, 0.92);
}

/* CONTENEDOR INTERNO */
.parallax-card__inner {
  position: relative;
  width: 100%;
  height: 100%;

  width: 100%;
  height: 100%;

  overflow: visible;
  transform-style: preserve-3d;

  border-radius: 2.2%;

  transform:
    translateZ(var(--card-z, 0px))
    scale(var(--card-scale, 1))
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));

  transition:
    transform 180ms ease-out,
    filter 260ms ease;

  box-shadow: none;
}

.parallax-card.is-touch-focus {
  z-index: 40;
  opacity: 1;

  /* La CARD non cresce né si sposta (prima non lo faceva): l'ingrandimento è solo
     del SOGGETTO (che pop avanti) mentre lo SFONDO recede → profondità parallax.
     Tutto via dimensione di layout (vedi regole bg/subject sotto) = NITIDO.
     NIENTE filter (rasterizzava il contenuto = blur). */
}

.parallax-card.is-touch-focus .parallax-card__inner {
  /* niente transform:scale e niente translateZ (la magnificazione prospettica del
     translateZ scalava la texture in cache = SFOCATO). L'ingrandimento è solo la
     larghezza reale; il tilt (rotateX/Y) resta e a riposo è nitido. */
  --card-z: 0px;
  --card-scale: 1;

  box-shadow: none;
  /* NIENTE filter drop-shadow qui: rasterizzava il contenuto (immagini) → sfocatura.
     L'ombra/alone arriva da .parallax-card::before. */
}

/* Cuando hay una carta en hover, las demás se apagan suavemente */
.assets-showcase:has(.parallax-card.is-touch-focus) .parallax-card:not(.is-touch-focus) {
  opacity: 0.42;

  filter:
    grayscale(0.45)
    brightness(0.58)
    saturate(0.62)
    blur(0.35px);

  transform:
    scale(0.965);
}

/* Campo energético detrás de la carta */
.parallax-card::before {
  content: "";
  position: absolute;
  inset: -8%;

  z-index: -2;
  pointer-events: none;

  /* glow "campo energetico" dietro la card: SOLO in hover/ingrandita. A riposo è spento
     (sta a translateZ(-80px) DIETRO la card → a riposo è occluso e nel flip sbucava ai
     lati come due aloni). L'illuminazione a riposo la dà invece il drop-shadow del frame
     (.parallax-layer--frame), che sta sopra e segue la forma della cornice. */
  opacity: 0;
  border-radius: 4%;

  background:
    radial-gradient(
      ellipse at center,
      var(--rarity-glow-soft) 0%,
      rgba(255, 255, 255, 0.12) 18%,
      transparent 62%
    );

  filter: blur(22px);

  transform:
    scale(0.72)
    translateZ(-80px);

  transition:
    opacity 360ms ease,
    transform 520ms cubic-bezier(.16, .84, .22, 1);
}

.parallax-card.is-touch-focus::before {
  opacity: 0.86;

  transform:
    scale(1)
    translateZ(-80px);

  animation: cardEnergyBreath 2.2s ease-in-out 420ms infinite;
}

/* Patina luminosa che scorre la carta in diagonale (angolo alto-sx → basso-dx).
   Usa background-position (la banda è "ritagliata" dal box dell'elemento) così la
   luce NON esce mai dai limiti della card. Posizionata sull'area artwork (dentro la
   cornice) e leggermente sollevata in Z per scorrere sopra l'immagine. */
/* La vecchia patina-nuvola su .parallax-card::after veniva renderizzata SOPRA la
   cornice: ::after sta sul wrapper esterno (z-index 6) mentre il frame (z-index 10)
   è DENTRO .parallax-card__inner, che — avendo transform ma z-index auto — crea un
   contesto di impilamento "schiacciato" a livello 0 → l'::after a z-index 6 finiva
   sopra tutto l'inner (cornice inclusa). Disattivata: l'intro è ora su
   .parallax-card__inner::before (vedi sotto), DENTRO il contesto dell'inner e sotto
   la cornice. */
.parallax-card::after { display: none; }

/* Luminescenza di INIZIO animazione — come nel progetto sorgente \parallax: banda di
   luce diagonale (135°) che attraversa la card da alto-sx a basso-dx. NON segue il
   mouse (animazione one-shot all'attivazione), resta DENTRO i bordi (inset + overflow
   hidden, scorre via background-position) e SOTTO la cornice (è su __inner, z-index 6
   < frame z-index 10). */
.parallax-card__inner::before {
  content: "";
  position: absolute;
  inset: 3.3%;

  z-index: 6;            /* dentro il contesto di __inner: sopra bg/soggetto, SOTTO il frame (10) */
  pointer-events: none;

  opacity: 0;
  border-radius: 1%;
  overflow: hidden;

  /* banda diagonale luminosa (core bianco + alone colore rarità) come nel sorgente */
  background:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 30%,
      var(--rarity-glow-soft) 44%,
      rgba(255, 255, 255, 0.92) 50%,
      var(--rarity-glow-strong) 56%,
      transparent 70%,
      transparent 100%
    );
  background-repeat: no-repeat;
  background-size: 250% 250%;
  background-position: 0% 0%;

  mix-blend-mode: screen;
  filter: blur(2px);

  transition: opacity 220ms ease;
}

/* la banda appare UNA SOLA VOLTA all'attivazione (intro) e svanisce; non si ripete
   e non riparte ad ogni movimento del mouse */
.parallax-card.is-touch-focus .parallax-card__inner::before {
  animation: cardOuterSweep 1.3s ease-out both;
}

/* MÁSCARA INTERIOR */
.parallax-card__mask {
  position: absolute;

  top: 3.15%;
  right: 3.35%;
  bottom: 3.15%;
  left: 3.35%;

  overflow: hidden;
  border-radius: 0.8%;

  background: #000;

  transform-style: preserve-3d;
  z-index: 1;

  transition:
    box-shadow 280ms ease;
}

.parallax-card.is-touch-focus .parallax-card__mask {
  box-shadow:
    inset 0 0 18px rgba(255,255,255,0.06),
    inset 0 0 26px var(--rarity-glow-soft);
}

/* CAPAS */
.parallax-layer {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  /* NIENTE will-change: transform → altrimenti il browser tiene una texture in
     cache alla risoluzione base e, quando i layer scalano (hover/fullscreen),
     restano SFOCATI. Senza, vengono ri-rasterizzati nitidi alla dimensione reale. */
}

/* FONDO — dimensione via layout (width/height), NON transform:scale (nitido).
   A RIPOSO è grande (126%); in focus RECEDE a 114% → mentre il soggetto cresce, lo
   sfondo si allontana = effetto profondità parallax. Tutto in layout = sempre nitido. */
.parallax-layer--bg {
  left: 50%;
  bottom: 0;

  width: 126%;
  height: 126%;

  object-fit: cover;
  object-position: center bottom;

  transform:
    translate3d(calc(-50% + var(--bg-x, 0px)), var(--bg-y, 0px), 0);

  transition:
    width 420ms cubic-bezier(.2, .8, .2, 1),
    height 420ms cubic-bezier(.2, .8, .2, 1),
    transform 420ms cubic-bezier(.2, .8, .2, 1),
    filter 420ms ease;

  z-index: 1;
}

.parallax-card.is-touch-focus .parallax-layer--bg {
  /* lo sfondo recede (più piccolo) → profondità; niente scale/filter (resta nitido) */
  width: 114%;
  height: 114%;
  transform:
    translate3d(calc(-50% + var(--bg-x, 0px)), var(--bg-y, 0px), 0);
}

/* CONTENEDOR DEL PERSONAJE/NAVE — BASE PARA MINERS */
.parallax-subject-wrap {
  position: absolute;
  left: 50%;
  bottom: -1%;

  width: 84%;
  height: 82%;

  transform:
    translate3d(calc(-50% + var(--subject-x, 0px)), var(--subject-y, 0px), 0)
    rotateX(var(--subject-rx, 0deg))
    rotateY(var(--subject-ry, 0deg))
    scale(1);

  transform-origin: center bottom;

  transition:
    width 420ms cubic-bezier(.2, .8, .2, 1),
    height 420ms cubic-bezier(.2, .8, .2, 1),
    transform 420ms cubic-bezier(.2, .8, .2, 1);

  z-index: 2;
  pointer-events: none;
  transform-style: preserve-3d;
}

.parallax-card.is-touch-focus .parallax-subject-wrap {
  /* il soggetto CRESCE (via layout = nitido) → pop in avanti; niente scale/translateZ */
  width: 98%;
  height: 96%;
  transform:
    translate3d(calc(-50% + var(--subject-x, 0px)), var(--subject-y, 0px), 0)
    rotateX(var(--subject-rx, 0deg))
    rotateY(var(--subject-ry, 0deg))
    scale(1);
}

/* R2 MINER — TAMAÑO INTERMEDIO */
.cards-grid .parallax-card:nth-child(2) .parallax-subject-wrap {
  width: 77.7%;
  height: 75.85%;
}

/* SPACESHIPS — CENTRADAS Y TAMAÑO AJUSTADO */
.parallax-card[data-card-type="spaceship"] .parallax-subject-wrap {
  left: 50%;
  top: 50%;
  bottom: auto;

  width: 80%;
  height: 50.5%;

  /* niente translateZ (sfocava): centrata 2D */
  transform:
    translate3d(
      calc(-50% + var(--subject-x, 0px)),
      calc(-50% + var(--subject-y, 0px)),
      0
    )
    rotateX(var(--subject-rx, 0deg))
    rotateY(var(--subject-ry, 0deg))
    scale(1);

  transform-origin: center center;

  transition:
    width 420ms cubic-bezier(.2, .8, .2, 1),
    height 420ms cubic-bezier(.2, .8, .2, 1),
    transform 420ms cubic-bezier(.2, .8, .2, 1);
}

.parallax-card[data-card-type="spaceship"].is-touch-focus .parallax-subject-wrap {
  /* la nave CRESCE (layout = nitido) → pop avanti; niente scale/translateZ */
  width: 92%;
  height: 58%;
  transform:
    translate3d(
      calc(-50% + var(--subject-x, 0px)),
      calc(-50% + var(--subject-y, 0px)),
      0
    )
    rotateX(var(--subject-rx, 0deg))
    rotateY(var(--subject-ry, 0deg))
    scale(1);
}

/* SUJETO REAL — LIMPIO */
.parallax-layer--subject {
  position: absolute;
  left: 50%;
  bottom: 0;

  width: 100%;
  height: auto;

  transform:
    translate3d(-50%, 0, 0)
    scale(1);

  transform-origin: center bottom;

  transition:
    transform 420ms cubic-bezier(.2, .8, .2, 1);

  z-index: 2;
}

.parallax-card.is-touch-focus .parallax-layer--subject {
  /* niente translateZ e niente filter (rasterizzavano/sfocavano il soggetto) */
  transform:
    translate3d(-50%, 0, 0)
    scale(1);
}

/* SPACESHIP REAL — CENTRADA */
.parallax-layer--spaceship {
  top: 50%;
  bottom: auto;

  transform:
    translate3d(-50%, -50%, 0)
    scale(1);

  transform-origin: center center;
}

.parallax-card.is-touch-focus .parallax-layer--spaceship {
  transform:
    translate3d(-50%, -50%, 0)
    scale(1);
}

/* MARCO */
.parallax-layer--frame {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: fill;

  /* niente translateZ: la cornice resta davanti via z-index */
  transform:
    translate3d(var(--frame-x, 0px), var(--frame-y, 0px), 0)
    scale(1);

  transition:
    transform 420ms cubic-bezier(.2, .8, .2, 1),
    filter 280ms ease;

  z-index: 10;

  /* glow del colore della rarità attorno+dentro la cornice, presente ANCHE a riposo
     (stesso drop-shadow del focus). Il frame è un PNG sottile → il glow segue la sua
     forma; sta sopra (z-index 10) quindi non è mai occluso, a differenza del ::before. */
  filter:
    drop-shadow(0 0 2.5px var(--rarity-glow-strong))
    drop-shadow(0 0 6px var(--rarity-glow-soft))
    drop-shadow(0 0 11px var(--rarity-glow-soft));
}

.parallax-card.is-touch-focus .parallax-layer--frame {
  /* niente translateZ; SOLO drop-shadow neon attorno al bordo (la cornice è un PNG
     sottile → il glow segue la sua forma e si muove con la card; niente brightness/
     contrast che alterano, niente sfocatura del soggetto/sfondo). */
  transform:
    translate3d(var(--frame-x, 0px), var(--frame-y, 0px), 0)
    scale(1);
  /* glow esteso a METÀ rispetto a prima (5/12/22 → 2.5/6/11): alone più contenuto */
  filter:
    drop-shadow(0 0 2.5px var(--rarity-glow-strong))
    drop-shadow(0 0 6px var(--rarity-glow-soft))
    drop-shadow(0 0 11px var(--rarity-glow-soft));
}

/* ===== ESTRELLAS DE RAREZA ===== */
.parallax-card__stars {
  position: absolute;
  top: 7.6%;
  left: 50%;

  display: flex;
  align-items: center;
  justify-content: center;
  /* gap FISSO (no %): equidistante e identico con 2/3/4/5/6 stelle */
  gap: clamp(3px, 0.6vw, 9px);

  /* la fila è ampia quanto serve ma MAI oltre l'82% della card → l'halo
     (largo quanto la fila) resta entro i limiti della card */
  width: max-content;
  max-width: 82%;
  pointer-events: none;

  z-index: 11;
  overflow: visible;

  transform:
    translate3d(
      calc(-50% + var(--frame-x, 0px)),
      var(--frame-y, 0px),
      126px
    );
}

.parallax-card__stars::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;

  /* largo quanto la fila stelle (≤82% card) → l'halo non sborda dalla card */
  width: 100%;
  height: 34px;
  border-radius: 999px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.46) 0%,
      var(--rarity-glow-strong) 18%,
      var(--rarity-glow-soft) 44%,
      transparent 76%
    );

  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  filter: blur(12px);

  z-index: -1;
}

.parallax-card__stars::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;

  width: 116%;
  height: 24px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 10%,
      rgba(255, 255, 255, 1) 48%,
      rgba(255, 255, 255, 1) 52%,
      transparent 90%,
      transparent 100%
    );

  opacity: 0;
  filter: blur(6px);

  transform: translate(-50%, -50%) translateX(-120%);
  z-index: 2;
}

.parallax-card.is-touch-focus .parallax-card__stars::before {
  animation: crownHaloIn 900ms cubic-bezier(.16, .84, .32, 1) both;
}

.parallax-card.is-touch-focus .parallax-card__stars::after {
  animation: crownSweep 940ms cubic-bezier(.18, .88, .34, 1) 120ms both;
}

.parallax-star {
  position: relative;
  display: inline-block;

  /* 1.5× più grandi (le stelle compaiono solo in hover/fullscreen) */
  font-size: clamp(25px, 2.2vw, 40px);
  line-height: 1;
  color: var(--rarity-core);

  opacity: 0;
  filter: blur(9px);

  transform:
    translateY(22px)
    scale(0.1)
    rotateX(88deg)
    rotateZ(-18deg);

  -webkit-text-stroke: 1px var(--rarity-color);

  text-shadow:
    0 0 0 rgba(255,255,255,0),
    0 0 0 var(--rarity-glow-strong),
    0 0 0 var(--rarity-glow-soft);
}

.parallax-card.is-touch-focus .parallax-star:nth-child(1) {
  animation: starEntrance 860ms cubic-bezier(.13, .9, .26, 1) 0ms both, starPulse 1.9s ease-in-out 900ms infinite;
}

.parallax-card.is-touch-focus .parallax-star:nth-child(2) {
  animation: starEntrance 860ms cubic-bezier(.13, .9, .26, 1) 65ms both, starPulse 1.9s ease-in-out 965ms infinite;
}

.parallax-card.is-touch-focus .parallax-star:nth-child(3) {
  animation: starEntrance 860ms cubic-bezier(.13, .9, .26, 1) 130ms both, starPulse 1.9s ease-in-out 1030ms infinite;
}

.parallax-card.is-touch-focus .parallax-star:nth-child(4) {
  animation: starEntrance 860ms cubic-bezier(.13, .9, .26, 1) 195ms both, starPulse 1.9s ease-in-out 1095ms infinite;
}

.parallax-card.is-touch-focus .parallax-star:nth-child(5) {
  animation: starEntrance 860ms cubic-bezier(.13, .9, .26, 1) 260ms both, starPulse 1.9s ease-in-out 1160ms infinite;
}

.parallax-card.is-touch-focus .parallax-star:nth-child(6) {
  animation: starEntrance 860ms cubic-bezier(.13, .9, .26, 1) 325ms both, starPulse 1.9s ease-in-out 1225ms infinite;
}

/* ===== LABEL INFERIOR — HUD PREMIUM LEGIBLE ===== */
.parallax-card__label {
  position: absolute;
  left: 50%;
  bottom: 6.7%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* contenitore 2× più grande (la label compare solo in hover/fullscreen) */
  min-width: clamp(148px, 13.6vw, 236px);
  min-height: clamp(68px, 5.5vw, 100px);

  padding:
    clamp(8px, 0.76vw, 14px)
    clamp(20px, 1.8vw, 32px)
    clamp(10px, 0.92vw, 16px);

  pointer-events: none;

  z-index: 11;

  opacity: 0;

  transform:
    translate3d(
      calc(-50% + var(--frame-x, 0px)),
      calc(14px + var(--frame-y, 0px)),
      126px
    )
    scale(0.82);

  filter: blur(8px);

  font-family: "SpaceAge", "Orbitron", Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;

  isolation: isolate;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.035) 18%,
      var(--rarity-panel-dark) 44%,
      rgba(1, 4, 10, 0.98) 100%
    );

  border-top: 1px solid var(--rarity-glow-strong);
  border-bottom: 1px solid var(--rarity-glow-strong);
  border-left: 1px solid rgba(255,255,255,0.18);
  border-right: 1px solid rgba(255,255,255,0.18);

  clip-path:
    polygon(
      8% 0%,
      92% 0%,
      100% 24%,
      100% 76%,
      92% 100%,
      8% 100%,
      0% 76%,
      0% 24%
    );

  box-shadow:
    inset 0 0 10px rgba(255,255,255,0.08),
    inset 0 0 18px var(--rarity-glow-soft),
    0 0 8px rgba(0,0,0,0.95),
    0 0 14px var(--rarity-glow-soft),
    0 0 28px rgba(0,0,0,0.86);
}

.parallax-card.is-touch-focus .parallax-card__label {
  animation: labelPowerIn 820ms cubic-bezier(.14, .88, .28, 1) 170ms both;
}

.parallax-card__label::before {
  content: "";
  position: absolute;
  inset: 3px;

  z-index: -2;

  clip-path:
    polygon(
      8% 0%,
      92% 0%,
      100% 24%,
      100% 76%,
      92% 100%,
      8% 100%,
      0% 76%,
      0% 24%
    );

  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.20), transparent 34%),
    radial-gradient(circle at 50% 100%, var(--rarity-glow-soft), transparent 44%),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.02) 18%,
      rgba(0,0,0,0.62) 50%,
      rgba(255,255,255,0.02) 82%,
      rgba(255,255,255,0.06) 100%
    );
}

.parallax-card__label::after {
  content: "";
  position: absolute;
  inset: 0;

  z-index: 3;

  clip-path:
    polygon(
      8% 0%,
      92% 0%,
      100% 24%,
      100% 76%,
      92% 100%,
      8% 100%,
      0% 76%,
      0% 24%
    );

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 22%,
      rgba(255,255,255,0.0) 34%,
      rgba(255,255,255,0.72) 48%,
      rgba(255,255,255,0.0) 62%,
      transparent 100%
    );

  opacity: 0;
  transform: translateX(-120%);
  mix-blend-mode: screen;
}

.parallax-card.is-touch-focus .parallax-card__label::after {
  animation: labelScan 1150ms cubic-bezier(.18, .82, .26, 1) 360ms both;
}

.parallax-card__label-type {
  position: relative;
  z-index: 2;
  display: block;

  /* 2× più grande */
  font-size: clamp(16px, 1.24vw, 24px);
  line-height: 0.95;

  color: #ffffff;

  text-shadow:
    0 0 2px rgba(0,0,0,1),
    0 0 5px rgba(255,255,255,0.95),
    0 0 12px var(--rarity-glow-strong),
    0 0 26px var(--rarity-glow-soft);
}

/* RAREZA — MÁS CONTRASTE */
.parallax-card__label-rarity {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 2× più grande */
  margin-top: clamp(6px, 0.56vw, 10px);
  padding:
    clamp(4px, 0.36vw, 8px)
    clamp(16px, 1.16vw, 24px)
    clamp(4px, 0.4vw, 8px);

  min-width: clamp(60px, 4.3vw, 90px);

  font-size: clamp(26px, 2.04vw, 40px);
  line-height: 1;

  color: #ffffff;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.04) 24%,
      rgba(0,0,0,0.96) 58%,
      rgba(0,0,0,0.98) 100%
    );

  border: 1px solid var(--rarity-glow-strong);
  border-radius: 999px;

  -webkit-text-stroke: 0.65px var(--rarity-color);

  box-shadow:
    inset 0 0 5px rgba(255,255,255,0.16),
    inset 0 0 12px rgba(0,0,0,0.88),
    0 0 4px rgba(0,0,0,1),
    0 0 9px var(--rarity-glow-strong),
    0 0 22px var(--rarity-glow-soft);

  text-shadow:
    0 0 3px rgba(0,0,0,1),
    0 0 6px rgba(0,0,0,1),
    0 0 5px rgba(255,255,255,1),
    0 0 12px var(--rarity-glow-strong),
    0 0 28px var(--rarity-glow-strong),
    0 0 48px var(--rarity-glow-soft);
}

.parallax-card__label-rarity::before {
  content: "";
  position: absolute;
  inset: 2px;

  border-radius: inherit;

  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.28), transparent 42%),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0.12) 50%,
      transparent 100%
    );

  opacity: 0.7;
  pointer-events: none;
}

.parallax-card__label-rarity::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;

  width: 80%;
  height: 1px;

  transform: translateX(-50%);

  background: var(--rarity-glow-strong);

  box-shadow:
    0 0 6px var(--rarity-glow-strong),
    0 0 14px var(--rarity-glow-soft);

  opacity: 0.95;
}

/* ANIMACIONES */
@keyframes starEntrance {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform:
      translateY(22px)
      scale(0.1)
      rotateX(88deg)
      rotateZ(-18deg);
    text-shadow:
      0 0 0 rgba(255,255,255,0),
      0 0 0 var(--rarity-glow-strong),
      0 0 0 var(--rarity-glow-soft);
  }

  28% {
    opacity: 1;
    filter: blur(0);
    transform:
      translateY(-12px)
      scale(1.62)
      rotateX(0deg)
      rotateZ(8deg);
    text-shadow:
      0 0 8px rgba(255,255,255,1),
      0 0 18px var(--rarity-glow-strong),
      0 0 38px var(--rarity-glow-strong),
      0 0 68px var(--rarity-glow-soft);
  }

  52% {
    opacity: 1;
    filter: blur(0);
    transform:
      translateY(5px)
      scale(0.86)
      rotateX(0deg)
      rotateZ(-4deg);
  }

  74% {
    opacity: 1;
    filter: blur(0);
    transform:
      translateY(-2px)
      scale(1.08)
      rotateX(0deg)
      rotateZ(1deg);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform:
      translateY(0)
      scale(1)
      rotateX(0deg)
      rotateZ(0deg);
    text-shadow:
      0 0 5px rgba(255,255,255,1),
      0 0 14px var(--rarity-glow-strong),
      0 0 34px var(--rarity-glow-strong),
      0 0 58px var(--rarity-glow-soft);
  }
}

@keyframes starPulse {
  0%, 100% {
    text-shadow:
      0 0 5px rgba(255,255,255,1),
      0 0 14px var(--rarity-glow-strong),
      0 0 34px var(--rarity-glow-strong),
      0 0 58px var(--rarity-glow-soft);
    transform: translateY(0) scale(1);
  }

  50% {
    text-shadow:
      0 0 8px rgba(255,255,255,1),
      0 0 20px var(--rarity-glow-strong),
      0 0 44px var(--rarity-glow-strong),
      0 0 76px var(--rarity-glow-soft);
    transform: translateY(-1px) scale(1.08);
  }
}

@keyframes crownHaloIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18);
    filter: blur(18px);
  }

  42% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.18);
    filter: blur(12px);
  }

  100% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(12px);
  }
}

@keyframes crownSweep {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateX(-120%);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateX(120%);
  }
}

@keyframes labelPowerIn {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform:
      translate3d(
        calc(-50% + var(--frame-x, 0px)),
        calc(18px + var(--frame-y, 0px)),
        126px
      )
      scale(0.72);
    letter-spacing: 0.28em;
  }

  42% {
    opacity: 1;
    filter: blur(0);
    transform:
      translate3d(
        calc(-50% + var(--frame-x, 0px)),
        calc(-5px + var(--frame-y, 0px)),
        126px
      )
      scale(1.12);
    letter-spacing: 0.16em;
  }

  68% {
    opacity: 1;
    transform:
      translate3d(
        calc(-50% + var(--frame-x, 0px)),
        calc(2px + var(--frame-y, 0px)),
        126px
      )
      scale(0.96);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform:
      translate3d(
        calc(-50% + var(--frame-x, 0px)),
        var(--frame-y, 0px),
        126px
      )
      scale(1);
    letter-spacing: 0.12em;
  }
}

@keyframes labelScan {
  0% {
    opacity: 0;
    transform: translateX(-130%);
  }

  20% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translateX(130%);
  }
}

@keyframes cardEnergyBreath {
  0%, 100% {
    opacity: 0.72;
    filter: blur(22px);
    transform:
      scale(1)
      translateZ(-80px);
  }

  50% {
    opacity: 0.96;
    filter: blur(28px);
    transform:
      scale(1.055)
      translateZ(-80px);
  }
}

@keyframes cardOuterSweep {
  0% {
    opacity: 0;
    background-position: 0% 0%;     /* angolo superiore sinistro */

  }

  25% {
    opacity: 0.9;
  }

  75% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    background-position: 100% 100%; /* angolo inferiore destro */

  }
}

/* BRILLO INTERIOR SUTIL */
.parallax-card__inner::after {
  content: "";
  position: absolute;

  top: 3.15%;
  right: 3.35%;
  bottom: 3.15%;
  left: 3.35%;

  z-index: 4;
  pointer-events: none;
  border-radius: 0.8%;

  /* brillo morbido che illumina TUTTA la card (alone ampio fino all'85% → nessun
     bordo netto/spigolo), seguendo dolcemente il cursore */
  background:
    radial-gradient(
      circle at var(--shine-x, 50%) var(--shine-y, 50%),
      rgba(255, 255, 255, 0.20) 0%,
      rgba(190, 225, 255, 0.10) 30%,
      rgba(190, 225, 255, 0.04) 55%,
      transparent 85%
    );

  opacity: 0;
  mix-blend-mode: screen;

  transition: opacity 260ms ease;
}

.parallax-card.is-touch-focus .parallax-card__inner::after {
  opacity: 1;
}

/* NB: rimossi i due blocchi demo `@media (max-width:1100px)` e
   `@media (max-width:680px)` del parallax standalone: ridefinivano `.cards-grid`,
   `.page`, `.hero-section` (inesistenti qui) e soprattutto `html,body {overflow:auto}`
   che riattivava lo scroll di pagina su mobile. Il responsive del parallax è gestito
   nel blocco `@media (max-width:768px)` di questa sezione. */

/* ==========================================================================
   CAMBIO RARITÀ — transizione "vortice": la card esce ruotando/rimpicciolendo
   verso il proprio lato (miner→sinistra, ship→destra) sfumando; la nuova entra
   formandosi dal vortice (rotazione + scala da un punto) in dissolvenza.
   ========================================================================== */
/* Card "fantasma" (clone con il vecchio contenuto) che esce dritta lateralmente
   sfumando: miner→sinistra, ship→destra. Niente rotazione né scala. */
.parallax-card.is-card-ghost {
  position: absolute !important;
  z-index: 30;
  margin: 0 !important;
  pointer-events: none;
}
.parallax-card.is-card-ghost.is-slide-out-left {
  animation: assetsCardSlideOutLeft 460ms ease forwards;
}
.parallax-card.is-card-ghost.is-slide-out-right {
  animation: assetsCardSlideOutRight 460ms ease forwards;
}
/* galleggiamento a riposo della card parallax (mobile) — solo translateY, infinito, ease */
@keyframes assetsCardFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes assetsCardSlideOutLeft {
  0%   { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-125%); opacity: 0; }
}
@keyframes assetsCardSlideOutRight {
  0%   { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(125%); opacity: 0; }
}

/* USCITA MOBILE: la card vecchia (la card REALE, non un clone) rimpicciolisce SUL
   POSTO perdendo opacità (esatto inverso dell'entrata assetsCardGrowIn) → poi entra
   la nuova. Niente clone: il clone della parallax-card collassava a 0×0 (invisibile). */
.parallax-card.is-shrink-out {
  transform-origin: center center;
  animation: assetsCardShrinkOut 320ms cubic-bezier(.5, .02, .75, .3) forwards;
}
@keyframes assetsCardShrinkOut {
  0%   { transform: scale(1);    opacity: 1; }
  45%  { opacity: 1; }
  100% { transform: scale(0.05); opacity: 0; }
}

/* Card reale entrante: nascosta finché non parte, poi cresce da un puntino al
   centro della sua posizione finale aumentando l'opacità. */
/* nascosta SUBITO (niente transizione opacity, altrimenti la card sfumerebbe in
   posizione lasciando un "alone fermo" mentre il clone esce) */
.parallax-card.is-card-pending { opacity: 0 !important; transition: none !important; }
.parallax-card.is-card-in {
  transform-origin: center center;
  animation: assetsCardGrowIn 460ms cubic-bezier(.16, .84, .32, 1) both;
}
@keyframes assetsCardGrowIn {
  0%   { transform: scale(0.05); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* FLIP miner/spaceship (mobile): la carta ruota sull'asse verticale (Y); a metà
   (90°, di taglio) si scambia la carta mostrata → sembra che dietro ci sia l'altra. */
.parallax-card.is-flip-out {
  animation: assetsCardFlipOut 260ms ease-in both;
  backface-visibility: hidden;
}
.parallax-card.is-flip-in {
  animation: assetsCardFlipIn 300ms ease-out both;
  backface-visibility: hidden;
}
@keyframes assetsCardFlipOut {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(90deg); }
}
@keyframes assetsCardFlipIn {
  0%   { transform: rotateY(-90deg); }
  100% { transform: rotateY(0deg); }
}

/* ==========================================================================
   MOBILE — FULLSCREEN FOCUS + HINT DITO
   Al tap la card si sposta al centro ingrandendosi a quasi-schermo (transform,
   transizione ease); dietro un backdrop sfocato/scurito; X in alto a destra per
   tornare (riduzione ease). A fine ingrandimento compare per 3s un dito con
   movimenti concentrici, poi sfuma.
   ========================================================================== */

/* Backdrop e hint nascosti di default (desktop non li mostra mai) */
.assets-fs-backdrop,
.assets-fs-hint { display: none; }

@media (max-width: 768px) {
  /* card a tutto schermo: dimensioni REALI (var --fs-w/--fs-h) centrate con
     position:fixed+margin:auto → a riposo l'immagine è renderizzata a piena
     risoluzione (NITIDA). L'animazione di apertura/chiusura è un FLIP (transform
     gestito da JS, che a fine torna a 'none' → niente upscale sfocato). */
  .parallax-card.is-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    margin: auto !important;
    z-index: 200 !important;
    width: var(--fs-w, 80vw) !important;
    height: var(--fs-h, auto) !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    transform-origin: center center;
    transition: transform 540ms ease;
  }

  /* mentre è aperto il fullscreen, i contenitori non devono clippare la card */
  body.assets-fs-open #assets.section.is-active,
  body.assets-fs-open .section__content--assets,
  body.assets-fs-open .assets-showcase {
    overflow: visible !important;
  }

  /* backdrop sfocato + leggermente scurito dietro la card */
  .assets-fs-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(2, 5, 12, 0.45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 420ms ease;
  }
  body.assets-fs-open .assets-fs-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* hint dito: centrato sopra la card, sfuma in/out */
  .assets-fs-hint {
    display: block;
    position: fixed;
    left: 50%;
    top: 58%;
    z-index: 210;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 500ms ease;
  }
  .assets-fs-hint.is-visible { opacity: 1; }

  /* dito che orbita (movimenti concentrici) */
  .assets-fs-hint__finger {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
  }
  .assets-fs-hint.is-visible .assets-fs-hint__finger {
    animation: assetsHintOrbit 1.8s ease-in-out infinite;
  }

  /* onde concentriche che si espandono dal punto del dito */
  .assets-fs-hint__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.85);
    box-shadow: 0 0 10px rgba(126,249,255,0.6);
    opacity: 0;
    transform: scale(0.4);
  }
  .assets-fs-hint.is-visible .assets-fs-hint__ring {
    animation: assetsHintRipple 1.8s ease-out infinite;
  }
  .assets-fs-hint.is-visible .assets-fs-hint__ring:nth-child(2) { animation-delay: 0.6s; }
  .assets-fs-hint.is-visible .assets-fs-hint__ring:nth-child(3) { animation-delay: 1.2s; }
}

@keyframes assetsHintOrbit {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(11px, -8px); }
  50%  { transform: translate(0, -14px); }
  75%  { transform: translate(-11px, -8px); }
  100% { transform: translate(0, 0); }
}

@keyframes assetsHintRipple {
  0%   { opacity: 0.9; transform: scale(0.4); }
  70%  { opacity: 0; transform: scale(2.6); }
  100% { opacity: 0; transform: scale(2.6); }
}

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