/* ==========================================================================
   links.css — SMART-LINK "Crowd Builds Rough" · Alessandro Raciti
   Stile HyperFollow/Linktree, ma livello award (Awwwards SOTD).
   Concept: neon-jungle / cyberpunk-organico, direttamente dalla cover.
   CYAN(#19e3e0) -> VIOLA(#b14cff) -> MAGENTA(#ff3db0), fondo profondo #070a0c.

   IMPORTANTE: questa pagina NON carica base.css. Carica solo fonts.css +
   questo file. Quindi qui dentro definisco TUTTO: reset, layout, pulsanti,
   colori brand. Le variabili palette --c-from/--c-via/--c-to/--c-bg sono
   iniettate inline su :root; --lp-cover è iniettata su body.linkpage.
   I font self-hosted (Unbounded, Syne, Inter, JetBrains Mono, Space Grotesk,
   Fraunces) sono già dichiarati globalmente in fonts.css → li uso PER NOME.

   ZERO risorse esterne: niente @import/@font-face/url() remoti. Texture solo
   via gradienti, box-shadow e un SVG data-uri inline (grana). Mobile-first
   360→1440, nessun overflow-x. AA, focus visibile, tap target ≥48px,
   prefers-reduced-motion rispettato in coda.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) TOKEN — derivo dalla palette iniettata una scala completa per la pagina.
   Scoping su .linkpage: questo file è dedicato e non confligge con altro.
   -------------------------------------------------------------------------- */
.linkpage {
  /* fondo scena: nero-verde "sottobosco" più ricco del bg piatto */
  --lp-abyss: #04070a;
  --lp-floor: #070d12;
  --lp-mist:  #0a1620;

  /* neon di servizio (dalla palette) */
  --lp-cyan:    var(--c-from, #19e3e0);
  --lp-violet:  var(--c-via,  #b14cff);
  --lp-magenta: var(--c-to,   #ff3db0);
  --lp-bg:      var(--c-bg,   #070a0c);
  --lp-grad: linear-gradient(118deg, var(--lp-cyan), var(--lp-violet) 52%, var(--lp-magenta));

  --lp-cyan-soft:    rgba(25, 227, 224, 0.55);
  --lp-violet-soft:  rgba(177, 76, 255, 0.50);
  --lp-magenta-soft: rgba(255, 61, 176, 0.55);

  /* inchiostro: AA garantito su fondo scuro */
  --lp-ink:     #eef6f9;
  --lp-ink-dim: #aac3cf;
  --lp-line:    rgba(160, 224, 255, 0.16);

  /* vetro liquido per la card e i pulsanti */
  --lp-glass:      linear-gradient(158deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.022));
  --lp-glass-line: rgba(186, 238, 255, 0.20);
  --lp-card-bg:    linear-gradient(165deg, rgba(10, 22, 30, 0.80), rgba(4, 9, 15, 0.76));

  /* ---- accenti brand (definiti qui: la pagina è standalone) ---- */
  --b-spotify:      #1db954;
  --b-appleMusic:   #fa57c1;
  --b-amazonMusic:  #25d1da;
  --b-youtubeMusic: #ff3b30;
  --b-youtube:      #ff0000;

  /* tipografia */
  --lp-display: "Unbounded", "Bricolage Grotesque", system-ui, sans-serif;
  --lp-alt:     "Syne", "Space Grotesk", system-ui, sans-serif;
  --lp-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lp-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --lp-serif:   "Fraunces", Georgia, serif;

  /* ritmo / forma */
  --lp-radius:  20px;
  --lp-radius-lg: 28px;
  --lp-pill:    999px;
  --lp-dur:     0.4s;
  --lp-ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --lp-cardw:   clamp(20rem, 92vw, 27rem);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   1) RESET locale (no base.css qui) — minimale, robusto, mobile-first.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.linkpage {
  margin: 0;
  min-height: 100svh;
  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: var(--lp-sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.06rem);
  line-height: 1.6;
  font-feature-settings: "ss01" 1, "cv01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.linkpage img,
.linkpage svg { display: block; max-width: 100%; }
.linkpage a { color: inherit; text-decoration: none; }
.linkpage h1, .linkpage p { margin: 0; }
.linkpage nav[role="list"] { margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   2) STAGE — il guscio a piena pagina che centra la card.
   -------------------------------------------------------------------------- */
.lp {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 3vw, 1.5rem);
  padding: clamp(1.1rem, 5vw, 3rem) clamp(1rem, 5vw, 2rem);
  /* fondo scena dietro al layer cover: pozze di luce più contenute (minimale) */
  background:
    radial-gradient(52vmax 44vmax at 14% 6%, rgba(25, 227, 224, 0.18), transparent 62%),
    radial-gradient(48vmax 42vmax at 88% 16%, rgba(255, 61, 176, 0.16), transparent 64%),
    radial-gradient(64vmax 56vmax at 50% 112%, rgba(177, 76, 255, 0.16), transparent 62%),
    linear-gradient(180deg, var(--lp-floor), var(--lp-abyss) 60%, #02050a);
}

/* --------------------------------------------------------------------------
   3) BACKGROUND — la cover sfocata/scurita riempie lo schermo + overlay neon
   + grana organica. .lp__bg è il layer dedicato; aggiungo profondità con ::after.
   -------------------------------------------------------------------------- */
.lp__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* background-image impostata inline su .lp__bg: l'url() si risolve relativa al
     documento (corretta sia in sottocartella sia in radice), non al foglio di stile. */
  background-size: cover;
  background-position: center;
  /* la cover diventa atmosfera: sfocata, scura, spinta verso il neon */
  filter: blur(46px) saturate(1.4) brightness(0.46) contrast(1.06);
  transform: scale(1.16);
  opacity: 0.9;
  animation: lpDrift 13s ease-in-out infinite;
  will-change: transform;
}

/* overlay neon + vignettatura + grana: fonde la cover col fondo scena */
.lp__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(120% 90% at 50% 8%, transparent 34%, rgba(3, 6, 11, 0.66) 76%, rgba(2, 4, 8, 0.94) 100%),
    radial-gradient(82% 70% at 12% 4%, rgba(25, 227, 224, 0.11), transparent 58%),
    radial-gradient(82% 70% at 90% 10%, rgba(255, 61, 176, 0.11), transparent 58%),
    radial-gradient(90% 80% at 50% 116%, rgba(177, 76, 255, 0.14), transparent 62%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 220px 220px;
  mix-blend-mode: normal;
  opacity: 1;
}

/* striscia di nebbia bioluminescente che sale dal basso dietro la card */
.lp::before {
  content: "";
  position: absolute;
  inset: auto -10% -12% -10%;
  height: 64%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 100% at 28% 100%, rgba(25, 227, 224, 0.22), transparent 72%),
    radial-gradient(56% 100% at 74% 100%, rgba(177, 76, 255, 0.2), transparent 74%);
  filter: blur(26px);
  opacity: 0.7;
  animation: lpMist 10s ease-in-out infinite;
  will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   4) CARD — vetro liquido raffinato, alone neon perimetrale, filo di luce.
   -------------------------------------------------------------------------- */
.lp__card {
  position: relative;
  z-index: 1;
  width: var(--lp-cardw);
  max-width: 100%;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(0.85rem, 2.4vw, 1.15rem);
  padding: clamp(1.5rem, 5.5vw, 2.6rem) clamp(1.2rem, 5vw, 2.1rem) clamp(1.3rem, 4vw, 2rem);
  border-radius: var(--lp-radius-lg);
  background: var(--lp-card-bg);
  border: 1px solid var(--lp-glass-line);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 44px 120px -44px rgba(0, 0, 0, 0.92);
  animation: lpRise 0.9s var(--lp-ease) both;
}

/* filo di luce neon lungo il bordo superiore della card */
.lp__card::before {
  content: "";
  position: absolute;
  inset: 0 18% auto 18%;
  height: 1px;
  background: var(--lp-grad);
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   5) COVER — rim-glow neon, cornice di vetro, micro tilt all'hover.
   -------------------------------------------------------------------------- */
.lp__cover {
  width: clamp(11rem, 56vw, 15rem);
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(190, 240, 255, 0.24);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 26px 70px -22px rgba(0, 0, 0, 0.88),
    0 0 30px -14px var(--lp-cyan-soft);
  transition: transform var(--lp-dur) var(--lp-ease), box-shadow var(--lp-dur) var(--lp-ease);
}
.lp__cover:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 26px 70px -22px rgba(0, 0, 0, 0.92),
    0 0 22px -16px var(--lp-cyan-soft);
}

/* --------------------------------------------------------------------------
   6) TIPOGRAFIA — gerarchia ricca, distintiva, NON monotona.
   eyebrow mono (HUD) · titolo display Unbounded bianco sottile · artista Syne tracked ·
   CTA in maiuscoletto serif/alt. Scala modulare e tracking curati.
   -------------------------------------------------------------------------- */

/* eyebrow tecnico: tipo release, HUD mono in tinta cyan */
.lp__type {
  margin-top: 0.25rem;
  font-family: var(--lp-mono);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;            /* compensa il tracking per restare centrato */
  text-transform: uppercase;
  color: var(--lp-cyan);
  text-shadow: 0 0 8px rgba(25, 227, 224, 0.28);
}
/* due trattini-luce ai lati dell'eyebrow per un dettaglio editoriale */
.lp__type {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.lp__type::before,
.lp__type::after {
  content: "";
  width: clamp(1.1rem, 6vw, 2rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lp-cyan-soft));
  opacity: 0.9;
}
.lp__type::after { transform: scaleX(-1); }

/* TITOLO: display Unbounded, ora BIANCO e più sottile — minimale, pulito.
   Niente gradiente clip/neon: solo un'ombra scura tenue per la leggibilità
   sul vetro della card. Grande e d'impatto, ma leggero. */
.lp__title {
  font-family: var(--lp-display);
  font-weight: 300;
  font-size: clamp(2.05rem, 9.4vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  text-wrap: balance;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(2, 5, 9, 0.55);
}

/* artista: incisione luminosa, Syne spaziato, sopra una sottile linea */
.lp__artist {
  font-family: var(--lp-alt);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: #dcf0f6;
  text-shadow: 0 0 10px rgba(25, 227, 224, 0.14);
}

/* CTA "Ascolta ora su" — accento editoriale serif italic, non un'altra all-caps */
.lp__cta {
  margin-top: 0.5rem;
  font-family: var(--lp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.98rem;
  letter-spacing: 0.005em;
  color: var(--lp-ink-dim);
}

/* --------------------------------------------------------------------------
   7) PULSANTI PIATTAFORMA — grandi, a piena larghezza, tap target ≥48px,
   accento per brand, icona allineata, valore/azione chiari. Micro-interazioni.
   Layout: [icona] [label centrata otticamente] [chevron che scorre].
   -------------------------------------------------------------------------- */
.lp__links {
  width: 100%;
  display: grid;
  gap: clamp(0.55rem, 1.8vw, 0.72rem);
  margin-top: 0.5rem;
}

.platforms__btn {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 2rem 1fr 1.25rem;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 58px;               /* tap target ampio, ben oltre 48px */
  padding: 0.85rem 1.15rem;
  border-radius: var(--lp-radius);
  border: 1px solid var(--lp-glass-line);
  background: var(--lp-glass);
  color: var(--lp-ink);
  font-family: var(--lp-sans);
  font-weight: 650;
  font-size: 1rem;
  text-align: left;
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 26px -18px rgba(0, 0, 0, 0.9);
  transition:
    transform var(--lp-dur) var(--lp-ease),
    border-color var(--lp-dur) var(--lp-ease),
    box-shadow var(--lp-dur) var(--lp-ease),
    background var(--lp-dur) var(--lp-ease);
  /* default accent se per qualche motivo manca data-platform */
  --accent: var(--lp-cyan);
}

/* alone di brand che si accende dietro al pulsante all'hover (layer dedicato) */
.platforms__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(110deg,
    color-mix(in srgb, var(--accent) 22%, transparent),
    transparent 58%);
  opacity: 0;
  transition: opacity var(--lp-dur) var(--lp-ease);
}

/* chevron "→" che scorre: dettaglio di gusto, costruito in CSS (3ª colonna) */
.platforms__btn::after {
  content: "";
  grid-column: 3;
  justify-self: end;
  width: 9px;
  height: 9px;
  margin-right: 2px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translateX(-2px);
  color: var(--lp-ink-dim);
  opacity: 0.55;
  transition: transform var(--lp-dur) var(--lp-ease),
    color var(--lp-dur) var(--lp-ease), opacity var(--lp-dur) var(--lp-ease);
}

/* icona: pastiglia in tinta brand, glow sottile */
.platforms__icon {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 38%, transparent));
  transition: transform var(--lp-dur) var(--lp-ease);
}

.platforms__label {
  grid-column: 2;
  letter-spacing: 0.005em;
  /* leggero spostamento ottico per bilanciare l'icona a sinistra */
}

/* mappa accenti brand */
.platforms__btn[data-platform="spotify"]      { --accent: var(--b-spotify); }
.platforms__btn[data-platform="appleMusic"]   { --accent: var(--b-appleMusic); }
.platforms__btn[data-platform="amazonMusic"]  { --accent: var(--b-amazonMusic); }
.platforms__btn[data-platform="youtubeMusic"] { --accent: var(--b-youtubeMusic); }
.platforms__btn[data-platform="youtube"]      { --accent: var(--b-youtube); }

/* HOVER / FOCUS: il pulsante si "accende" del colore brand */
.platforms__btn:hover,
.platforms__btn:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent),
    0 10px 26px -20px rgba(0, 0, 0, 0.6);
}
.platforms__btn:hover::before,
.platforms__btn:focus-visible::before { opacity: 1; }

.platforms__btn:hover::after,
.platforms__btn:focus-visible::after {
  color: #fff;
  opacity: 1;
  transform: rotate(45deg) translateX(1px);
}
.platforms__btn:hover .platforms__icon,
.platforms__btn:focus-visible .platforms__icon {
  transform: scale(1.08);
}

/* feedback tattile al tap (mobile) */
.platforms__btn:active {
  transform: translateY(0) scale(0.99);
  transition-duration: 0.08s;
}

/* stato "non disponibile" se mai presente nel markup */
.platforms__btn[data-empty="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* messaggio "in arrivo": targhetta tratteggiata neon coerente */
.platforms__pending {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.75rem 1.1rem;
  border-radius: var(--lp-pill);
  border: 1px dashed var(--lp-cyan-soft);
  background: linear-gradient(160deg, rgba(25, 227, 224, 0.07), rgba(177, 76, 255, 0.06));
  color: #cfe7ef;
  font-family: var(--lp-mono);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: 0 0 12px rgba(25, 227, 224, 0.25);
}

/* --------------------------------------------------------------------------
   8) FOOTER della card — discreto, mono, link con micro-glow.
   -------------------------------------------------------------------------- */
.lp__foot {
  margin-top: 1.5rem;
  padding-top: 1.05rem;
  width: 100%;
  border-top: 1px solid var(--lp-line);
  font-family: var(--lp-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--lp-ink-dim);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: center;
}
.lp__foot-artist {
  color: var(--lp-ink);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.74rem;
}
.lp__foot-note { opacity: 0.72; }
/* blocco "powered by" fuori dalla card, su un piano più basso: centrato, in colonna, con separatore */
.lp__powered {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.5;
  transition: opacity 0.25s ease;
}
.lp__powered:hover { opacity: 0.82; }
.lp__powered-sep {
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lp-glass-line), transparent);
}
.lp__powered .powered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
  color: var(--lp-ink-dim);
  text-decoration: none;
}
.lp__powered .powered__label {
  font-family: var(--lp-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
}
.lp__powered .powered__name { font-weight: 700; color: var(--lp-ink); letter-spacing: 0.04em; font-size: 0.78rem; }
.lp__powered .powered__logo { height: 16px; width: auto; display: block; }
.lp__foot a {
  color: var(--lp-ink-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--lp-dur) var(--lp-ease),
    border-color var(--lp-dur) var(--lp-ease),
    text-shadow var(--lp-dur) var(--lp-ease);
}
.lp__foot a:hover,
.lp__foot a:focus-visible {
  color: #8ff7f4;
  border-bottom-color: var(--lp-cyan-soft);
  text-shadow: 0 0 12px var(--lp-cyan-soft);
}

/* --------------------------------------------------------------------------
   9) FOCUS VISIBILE — coerente col neon, ben percepibile (a11y AA).
   -------------------------------------------------------------------------- */
.linkpage :focus-visible {
  outline: 2px solid var(--lp-cyan);
  outline-offset: 3px;
  border-radius: 12px;
}
/* sui pulsanti l'anello brand è già nel box-shadow di :focus-visible:
   tolgo l'outline di default per non raddoppiare, ma resta evidentissimo */
.platforms__btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 75%, #fff 10%);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   10) KEYFRAMES — micro-atmosfera lenta. Spenti da reduced-motion (sez. 12).
   -------------------------------------------------------------------------- */
@keyframes lpRise {
  0%   { opacity: 0; transform: translateY(14px) scale(0.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lpDrift {
  0%   { transform: scale(1.14) translate(0%, 0%); }
  25%  { transform: scale(1.2) translate(-3.5%, 2%); }
  50%  { transform: scale(1.25) translate(3.5%, -2.5%); }
  75%  { transform: scale(1.2) translate(2.5%, 3%); }
  100% { transform: scale(1.14) translate(0%, 0%); }
}
@keyframes lpMist {
  0%   { transform: translate(-10%, 3%) scale(1); opacity: 0.45; }
  50%  { transform: translate(10%, -5%) scale(1.22); opacity: 0.85; }
  100% { transform: translate(-10%, 3%) scale(1); opacity: 0.45; }
}

/* --------------------------------------------------------------------------
   11) RESPONSIVE — mobile-first già fatto; qui affino tablet/desktop.
   La pagina si apre soprattutto da mobile: su desktop resta centrata,
   leggermente più ampia e ariosa, con cover un filo più grande.
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .linkpage { --lp-cardw: 25rem; }
  .lp__cover { width: clamp(13rem, 30vw, 16rem); }
}

@media (min-width: 1024px) {
  .lp { padding: 3rem; }
  .linkpage { --lp-cardw: 26rem; }
  .lp__card {
    padding: 2.6rem 2.2rem 2rem;
    gap: 1.2rem;
  }
  /* su desktop ampio i pulsanti restano comodi ma non enormi */
  .platforms__btn { min-height: 60px; font-size: 1.02rem; }
}

/* schermi minuscoli (≤360): comprimo senza mai generare overflow-x */
@media (max-width: 360px) {
  .lp { padding: 0.9rem; }
  .lp__card { padding: 1.35rem 1rem 1.2rem; border-radius: 22px; }
  .platforms__btn { gap: 0.6rem; padding-inline: 0.95rem; }
  .lp__type { letter-spacing: 0.3em; }
}

/* su display ad alta densità la grana SVG sarebbe troppo marcata: la calmo */
@media (min-resolution: 2dppx) {
  .lp__bg::after { opacity: 0.92; }
}

/* --------------------------------------------------------------------------
   12) MOTION — rispetto totale di prefers-reduced-motion.
   Spengo TUTTE le mie animazioni e fisso stati statici leggibili.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .linkpage *,
  .linkpage *::before,
  .linkpage *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .lp__bg,
  .lp::before,
  .lp__card {
    animation: none !important;
  }
  /* stati statici neutri */
  .lp__bg {
    transform: scale(1.18);
    filter: blur(46px) saturate(1.4) brightness(0.42) contrast(1.06);
  }
  .lp__card { opacity: 1; transform: none; }
}