:root {
  --accent: #ef1643;
  --ink: #05030a;
  --paper: #eee9ee;
  --muted: #837b87;
  --accent-readable: color-mix(in srgb, var(--accent) 80%, #fff);
  --progress: 0;
  --stats-progress: 0;
  --aura: 0;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 280px;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
}
button, a { color: inherit; font: inherit; }
button { cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

.detail-loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #030207;
  transition: opacity .7s ease, visibility .7s ease;
}
.detail-loader::before,
.detail-loader::after {
  content: "";
  position: absolute;
  width: min(62vw, 540px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 120px color-mix(in srgb, var(--accent) 16%, transparent);
  animation: loader-ring 2.2s ease-in-out infinite alternate;
}
.detail-loader::after { width: min(39vw, 340px); opacity: .45; animation-delay: -.8s; }
.detail-loader i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 30px var(--accent);
}
.detail-loader span {
  position: absolute;
  margin-top: 76px;
  color: #87808a;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .44em;
  text-transform: uppercase;
}
.is-ready .detail-loader { opacity: 0; visibility: hidden; }
@keyframes loader-ring { to { opacity: .34; transform: scale(.9) rotate(8deg); } }

.detail-header {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  right: 0;
  min-height: 82px;
  padding: max(18px, env(safe-area-inset-top)) max(5vw, env(safe-area-inset-right)) 12px max(5vw, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(#05030a 0, rgba(5, 3, 10, .67) 48%, transparent 100%);
}
.detail-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.detail-brand i {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 19px var(--accent);
}
.detail-brand span {
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .34em;
}
.detail-nav { display: flex; align-items: center; gap: clamp(20px, 2.3vw, 38px); }
.detail-nav a,
.detail-nav button {
  min-height: 38px;
  padding: 0;
  border: 0;
  background: none;
  color: #78717c;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .27em;
  text-decoration: none;
  transition: color .25s ease;
}
.detail-nav a:hover,
.detail-nav button:hover,
.detail-nav a:focus-visible,
.detail-nav button:focus-visible { color: #fff; }
.detail-counter {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #655e69;
  font-size: 7px;
  letter-spacing: .22em;
}
.detail-counter span { color: #b7b0b9; }
.detail-counter > i { width: clamp(32px, 5vw, 80px); height: 1px; background: #39323c; }
.detail-counter b { min-width: 18px; color: var(--accent-readable); }
.detail-counter em { font-style: normal; }
.detail-menu { display: none; position: relative; width: 44px; height: 44px; border: 0; background: none; }
.detail-menu span { position: absolute; right: 0; top: 18px; width: 22px; height: 1px; background: #aaa3ad; }
.detail-menu span:last-child { top: 25px; width: 14px; }

.character-story {
  position: relative;
  height: calc(var(--story-steps) * 100vh);
  height: calc(var(--story-steps) * 100svh);
}
.character-stage {
  --pan-x: 0px;
  --pan-y: 0px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--accent) 16%, #160d1b), #05030a 65%);
}
.character-stage::before,
.character-stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.character-stage::before {
  inset: 0;
  opacity: calc(.08 + var(--progress) * .22);
  background: linear-gradient(105deg, transparent 27%, color-mix(in srgb, var(--accent) 24%, transparent) 50%, transparent 72%);
  mix-blend-mode: screen;
}
.character-stage::after {
  left: -10%;
  right: -10%;
  top: 49%;
  height: 1px;
  opacity: var(--aura);
  background: color-mix(in srgb, var(--accent) 76%, #fff 10%);
  box-shadow: 0 0 13px var(--accent), 0 0 62px var(--accent);
  transform: rotate(-1.5deg);
}

.character-frame {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  background: #05030a;
  transform: scale(var(--frame-shell-scale, 1));
  transform-origin: 50% var(--focus-y, 40%);
  will-change: opacity, transform, filter;
}
.character-frame:first-child { opacity: 1; }
.character-frame img { position: absolute; display: block; }
.frame-visual {
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  object-position: var(--focus-x, 50%) var(--focus-y, 40%);
  filter: saturate(.92) contrast(1.1) brightness(.72);
  transform: translate3d(var(--pan-x), var(--pan-y), 0) scale(var(--frame-scale, 1.03));
  transform-origin: 50% var(--focus-y, 40%);
  will-change: transform, filter;
}
.character-frame::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,2,7,.82) 0, rgba(3,2,7,.28) 28%, transparent 47%, rgba(3,2,7,.16) 72%, rgba(3,2,7,.7) 100%),
    linear-gradient(0deg, #05030a 0, rgba(5,3,10,.18) 28%, transparent 65%, rgba(5,3,10,.42) 100%);
  pointer-events: none;
}
.character-frame.is-missing img { display: none; }
.character-frame.is-missing::after {
  content: "IMMAGINE IN PREPARAZIONE";
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  color: var(--accent-readable);
  font-size: 8px;
  letter-spacing: .28em;
  transform: translate(-50%, -50%);
}

.detail-aura,
.detail-vignette,
.detail-grain { position: absolute; inset: 0; pointer-events: none; }
.detail-aura {
  z-index: 3;
  opacity: var(--aura);
  background: radial-gradient(circle at 50% 45%, transparent 0 12%, color-mix(in srgb, var(--accent) 25%, transparent) 36%, transparent 66%);
  mix-blend-mode: screen;
}
.detail-aura i,
.detail-aura b {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 38%;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent);
  transform: rotate(24deg);
}
.detail-aura b { top: 63%; opacity: .45; transform: rotate(-18deg); }
.detail-vignette {
  z-index: 4;
  background:
    radial-gradient(circle at 50% 44%, transparent 24%, rgba(4,2,8,.18) 55%, #040208 100%),
    linear-gradient(90deg, #05030a 0, transparent 18%, transparent 82%, #05030a 100%);
}
.detail-grain {
  z-index: 30;
  opacity: .075;
  background:
    repeating-radial-gradient(circle at 20% 30%, transparent 0 1px, rgba(255,255,255,.12) 1px 1.5px, transparent 1.5px 4px),
    repeating-linear-gradient(117deg, transparent 0 5px, rgba(255,255,255,.035) 5px 6px);
  background-size: 83px 79px, 67px 71px;
  mix-blend-mode: soft-light;
}

.evolution-scene {
  position: absolute;
  z-index: 10;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.evolution-scene:first-of-type { opacity: 1; }
.evolution-copy {
  position: absolute;
  left: 7vw;
  top: 46%;
  width: min(470px, 34vw);
  transform: translateY(-50%);
}
.scene-right .evolution-copy { left: auto; right: 7vw; text-align: right; }
.scene-right .evolution-copy h2,
.scene-right .evolution-copy blockquote { margin-left: auto; }
.scene-index {
  margin: 0 0 14px;
  color: var(--accent-readable);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .36em;
  text-transform: uppercase;
}
.evolution-copy h1 {
  margin: 10px 0 18px;
  max-width: 9ch;
  color: #ede8ed;
  font: 800 clamp(4.4rem, 8.4vw, 9rem)/.78 Arial, Helvetica, sans-serif;
  letter-spacing: -.085em;
  text-transform: uppercase;
  text-wrap: balance;
}
.evolution-copy h2 {
  margin: 0 0 16px;
  max-width: 9.5ch;
  color: var(--paper);
  font: 400 clamp(3rem, 6vw, 7.3rem)/.83 Georgia, "Times New Roman", serif;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.scene-intro .evolution-copy {
  left: 50%;
  top: 58%;
  width: min(92vw, 1120px);
  text-align: center;
  transform: translate(-50%, -50%);
}
.scene-intro .evolution-copy h1 { max-width: none; margin-inline: auto; font-size: clamp(4.5rem, 10vw, 11rem); }
.scene-intro .evolution-copy h2 { max-width: none; margin: 18px auto 10px; color: var(--accent); font-size: clamp(1.5rem, 3vw, 3.2rem); }
.scene-lead {
  max-width: 590px;
  margin: 18px auto 0;
  color: #a69ea9;
  font: italic clamp(12px, 1vw, 16px)/1.6 Georgia, serif;
}
.evolution-copy blockquote {
  max-width: 390px;
  margin: 0;
  color: #aaa2ad;
  font: italic clamp(12px, 1.05vw, 16px)/1.62 Georgia, serif;
}
.scene-intro blockquote { display: none; }

.power-stats { width: min(100%, 370px); margin: 25px 0 0; padding: 0; list-style: none; }
.scene-right .power-stats { margin-left: auto; }
.power-stats li { margin-top: 11px; }
.power-stats li > span { display: flex; justify-content: space-between; color: #817985; font-size: 7px; letter-spacing: .24em; text-transform: uppercase; }
.power-stats strong { color: var(--accent-readable); }
.power-stats li > i { display: block; height: 1px; margin-top: 7px; overflow: hidden; background: #37303a; }
.power-stats li > i em { display: block; width: calc(var(--score) * 1% * var(--stats-progress)); height: 100%; background: var(--accent); box-shadow: 0 0 13px var(--accent); }
.back-home {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 330px);
  min-height: 49px;
  margin-top: 24px;
  padding: 0 18px;
  border: 1px solid #3a323d;
  color: #d8d1d8;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .25em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color .25s ease, background .25s ease;
}
.back-home:hover,
.back-home:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.back-home i { color: var(--accent); font-size: 17px; font-style: normal; }

.evolution-track {
  position: absolute;
  z-index: 20;
  right: max(3.2vw, env(safe-area-inset-right));
  bottom: max(5.5vh, env(safe-area-inset-bottom));
  max-width: 62vw;
}
.evolution-track ol { display: flex; gap: clamp(5px, .8vw, 12px); margin: 0; padding: 0; list-style: none; }
.evolution-track li { display: flex; align-items: center; gap: 8px; color: #69616d; font-size: 7px; letter-spacing: .18em; text-transform: uppercase; }
.evolution-track li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.evolution-track li i { width: clamp(8px, 1.2vw, 19px); height: 1px; background: #39323b; transition: width .25s ease, background .25s ease, box-shadow .25s ease; }
.evolution-track li.is-current i { width: clamp(20px, 2.6vw, 42px); background: var(--accent); box-shadow: 0 0 12px var(--accent); }

.detail-rail { position: absolute; z-index: 40; color: #5f5764; font-size: 7px; letter-spacing: .2em; pointer-events: none; }
.detail-rail--left { left: 2.4vw; top: 35%; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.detail-rail--left i { width: 1px; height: 45px; background: #332c36; }
.detail-rail--right { right: 2.1vw; top: 34%; display: flex; align-items: center; gap: 14px; writing-mode: vertical-rl; }
.detail-rail--right i { width: 1px; height: 70px; background: #3a303c; }
.detail-rail--right b { color: var(--accent); }
.detail-scroll {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: max(3vh, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #706974;
  font-size: 7px;
  letter-spacing: .3em;
  transform: translateX(-50%);
}
.detail-scroll i { width: 1px; height: 27px; background: linear-gradient(var(--accent), transparent); }
.detail-cursor {
  position: fixed;
  z-index: 200;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--accent) 68%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 14%, transparent);
  transform: translate(-100px, -100px);
  pointer-events: none;
  transition: width .2s ease, height .2s ease;
}
.detail-cursor span { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); }
.no-script { position: fixed; z-index: 300; inset: auto 20px 20px; padding: 14px; background: #160d15; color: #fff; text-align: center; }

@media (max-width: 900px) {
  .detail-header { min-height: calc(66px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
  .detail-brand span { display: none; }
  .detail-counter { margin-left: auto; }
  .detail-menu { display: block; }
  .detail-nav {
    position: fixed;
    inset: calc(66px + env(safe-area-inset-top)) 0 auto;
    display: none;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
    border-bottom: 1px solid #28202b;
    background: rgba(5,3,10,.97);
  }
  .menu-open .detail-nav { display: flex; }
  .detail-nav a,
  .detail-nav button { min-height: 42px; }
  .frame-visual { inset: -3%; width: 106%; height: 106%; object-position: 50% var(--focus-y, 40%); }
  .character-frame::before {
    background: linear-gradient(0deg, #05030a 0, rgba(5,3,10,.83) 10%, rgba(5,3,10,.1) 42%, rgba(5,3,10,.2) 72%, #05030a 100%);
  }
  .evolution-copy,
  .scene-right .evolution-copy {
    left: max(24px, env(safe-area-inset-left));
    right: max(24px, env(safe-area-inset-right));
    top: auto;
    bottom: max(74px, calc(58px + env(safe-area-inset-bottom)));
    width: auto;
    text-align: left;
    transform: none;
  }
  .scene-right .evolution-copy h2,
  .scene-right .evolution-copy blockquote,
  .scene-right .power-stats { margin-left: 0; }
  .scene-intro .evolution-copy { left: 20px; right: 20px; top: auto; bottom: calc(8svh + env(safe-area-inset-bottom)); width: auto; transform: none; }
  .scene-intro .evolution-copy h1 { font-size: clamp(4rem, 17vw, 7rem); }
  .scene-intro .evolution-copy h2 { margin-top: 12px; font-size: clamp(1.3rem, 6vw, 2.5rem); }
  .scene-lead { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 12px; font-size: 11px; }
  .evolution-copy h2 { max-width: 11ch; margin-bottom: 10px; font-size: clamp(2.8rem, 12vw, 5rem); }
  .evolution-copy blockquote { max-width: 290px; font-size: 11px; }
  .power-stats { width: min(100%, 330px); margin-top: 16px; }
  .power-stats li { margin-top: 7px; }
  .back-home { min-height: 43px; margin-top: 12px; }
  .evolution-track { left: 24px; right: 24px; bottom: max(26px, env(safe-area-inset-bottom)); max-width: none; }
  .evolution-track ol { justify-content: center; }
  .detail-scroll { right: 21px; left: auto; top: calc(77px + env(safe-area-inset-top)); bottom: auto; transform: none; }
  .detail-scroll span { writing-mode: vertical-rl; }
  .detail-rail--left { display: none; }
  .detail-rail--right { right: 7px; top: 38%; }
  .detail-cursor { display: none; }
}

@media (min-width: 1101px) {
  .evolution-copy,
  .scene-right .evolution-copy {
    top: auto;
    bottom: 12vh;
    width: min(430px, 30vw);
    text-align: left;
    transform: none;
  }
  .evolution-copy { left: 7vw; right: auto; }
  .scene-right .evolution-copy { left: auto; right: 7vw; text-align: right; }
  .scene-intro .evolution-copy {
    left: 7vw;
    right: auto;
    top: auto;
    bottom: 12vh;
    width: min(620px, 43vw);
    text-align: left;
    transform: none;
  }
  .scene-intro .evolution-copy h1 {
    margin-inline: 0;
    font-size: clamp(4.4rem, 7.4vw, 8rem);
  }
  .scene-intro .evolution-copy h2 { margin-inline: 0; }
  .scene-intro .scene-lead { margin-inline: 0; }
  body[data-universe="marvel"] .frame-visual {
    filter: saturate(.82) contrast(1.13) brightness(.72);
  }
  body[data-universe="marvel"] .character-frame::before {
    background:
      linear-gradient(90deg, rgba(3,2,7,.84) 0, rgba(3,2,7,.34) 28%, transparent 54%, rgba(3,2,7,.16) 78%, rgba(3,2,7,.58) 100%),
      linear-gradient(0deg, #05030a 0, rgba(5,3,10,.2) 26%, transparent 70%, rgba(5,3,10,.38) 100%);
  }
}

@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait) {
  .evolution-copy,
  .scene-right .evolution-copy { left: 7vw; right: 7vw; bottom: 9vh; }
  .scene-intro .evolution-copy h1 { font-size: 13vw; }
}

@media (max-height: 650px) and (orientation: landscape) {
  .detail-header { min-height: 62px; padding-top: 10px; }
  .evolution-copy { top: 49%; }
  .evolution-copy h2 { font-size: 8.5vh; }
  .power-stats { margin-top: 13px; }
  .power-stats li { margin-top: 6px; }
  .back-home { min-height: 40px; margin-top: 10px; }
}

@media (pointer: coarse) { .detail-cursor { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .detail-cursor { display: none; }
  .frame-visual { transform: none !important; }
}