/* Wrapped della Campagna -- number-first, Spotify-Wrapped-style reveal.
   Separate from cinematic.css/home.html on purpose: this is a preview of a
   different page concept, not a modification of the current homepage. */

/* Fraunces, self-hosted -- SIL Open Font License (Google Fonts), free for
   any use. Font files kept locally in static/fonts/fraunces/, no live
   Google Fonts fetch at runtime. Display-only trial: scoped to .wrapped
   so it never touches the rest of the site. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces/Fraunces-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces/Fraunces-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces/Fraunces-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}

body.wrapped {
  margin: 0;
  background: var(--night);
  color: var(--text);
  overflow-x: hidden;
  --wr-font-display: "Fraunces", var(--font-display);
}

/* A single fixed backdrop sits behind every section, holding all three
   photos stacked at the same screen position. Each photo's own opacity is
   driven by how centred its matching content section currently is
   (--wr-p, 0..1, set per layer by wrapped.js) -- so as one scene's content
   leaves centre and the next scene's enters, their photos genuinely
   overlap and cross-dissolve on screen, rather than a hard cut between
   separate boxes. Content sections scroll normally on top (z-index 1). */
.wr-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--night);
}

.wr-layer {
  position: absolute;
  inset: 0;
  opacity: var(--wr-p, 0);
}

/* Release offscreen surfaces instead of keeping fourteen GPU scenes ready.
   JS exposes only the one/two scenes involved in the current cross-dissolve. */
.wr-layer[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .wr-layer { opacity: 1; } }

.wr-section {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}

.wr-bg {
  position: absolute;
  left: 0;
  top: -200px;
  width: 100%;
  height: calc(100% + 400px);
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  /* Continuous scroll-progress parallax (apple-design-motion: mapRange +
     damped rAF, transform-only) -- the image drifts while its opacity
     (above) carries the cross-dissolve. */
  transform: translateY(calc(var(--wr-p, 0) * 160px - 80px)) scale(1.14);
}

@media (prefers-reduced-motion: reduce) {
  .wr-bg { transform: none; }
}

/* Foreground plane -- same canvas/position as .wr-bg, mostly transparent
   except the near-camera subject (roofs, cage/chains, beam+lantern). Moves
   faster and more than the background: the actual depth parallax, not just
   a single drifting photo. More overscan since its travel is wider. */
.wr-fg {
  position: absolute;
  left: 0;
  top: -340px;
  width: 100%;
  height: calc(100% + 680px);
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  transform: translateY(calc(var(--wr-p, 0) * 320px - 160px)) scale(1.24);
}

@media (prefers-reduced-motion: reduce) {
  .wr-fg { transform: none; }
}

/* Fortuna's fg subjects (the two d20s) sit in the far bottom corners of
   the source canvas -- plain "cover" crops them off on narrower viewports.
   "contain" + bottom anchor keeps both dice in frame and makes them read
   larger, since the empty top of that asset no longer forces a crop. */
.wr-fg-contain-bottom {
  top: 0;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transform: translateY(calc(var(--wr-p, 0) * 30px - 15px)) scale(1.05);
}

/* Readability scrims -- the number must win over the image. */
.wr-scrim { position: absolute; inset: 0; pointer-events: none; }
.wr-scrim-bottom { background: linear-gradient(180deg, rgba(10,13,20,0.35) 0%, rgba(10,13,20,0.55) 45%, rgba(10,13,20,0.92) 100%); }
.wr-scrim-left { background: linear-gradient(90deg, rgba(10,13,20,0.95) 0%, rgba(10,13,20,0.82) 38%, rgba(10,13,20,0.35) 68%, rgba(10,13,20,0.15) 100%); }

/* -------------------------------------------------------------- */
/* Shared typography                                               */
/* -------------------------------------------------------------- */
.wr-kicker {
  position: relative; z-index: 2;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.65rem, 3.4vw, 2.25rem);
  font-weight: 600;
  color: var(--gold-bright);
  line-height: 1.2;
  text-shadow: 0 2px 16px rgba(0,0,0,0.9);
  margin: 0 0 0.8rem;
}

.wr-phrase {
  position: relative; z-index: 2;
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.8vw, 3.6rem);
  line-height: 1.12;
  text-wrap: balance;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
  color: var(--text);
}

.wr-bignum {
  position: relative; z-index: 2;
  font-family: var(--wr-font-display);
  font-weight: 900;
  font-size: clamp(5rem, 17vw, 11.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0.1rem 0;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 6px 60px rgba(0,0,0,0.5);
}

.wr-bignum-mid { font-size: clamp(3.8rem, 11.5vw, 7.5rem); display: flex; align-items: baseline; gap: 0.6rem; }
.wr-section[data-scene="parole"] .wr-bignum { font-size: clamp(3.5rem, 13vw, 9.5rem); }
.wr-unit { font-family: var(--font-body); font-size: clamp(1.25rem, 2.7vw, 1.8rem); color: #f4eddb; font-style: italic; }

.wr-lede {
  position: relative; z-index: 2;
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 2.3vw, 1.45rem);
  line-height: 1.5;
  color: #f1eee7;
  text-shadow: 0 2px 14px rgba(0,0,0,0.9);
  max-width: 540px;
  margin: 0.6rem 0 0;
}

.wr-lede strong { color: var(--gold-bright); font-weight: 600; }

.wr-counter-inline { font-variant-numeric: tabular-nums; color: var(--gold-bright); font-weight: 600; }

/* Scale-from-below + opacity materialize, one-shot on scroll entry
   (apple-design-motion S4.7). Monotonic -- no bounce on numbers. */
.wr-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: transform var(--spring-smooth-duration) var(--spring-smooth),
              opacity var(--spring-smooth-duration) linear;
  transition-delay: var(--reveal-delay, 0ms);
}
.wr-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .wr-reveal { transition: none; opacity: 1; transform: none; } }

/* -------------------------------------------------------------- */
/* 1. HERO                                                          */
/* -------------------------------------------------------------- */
.wr-hero-content { position: relative; z-index: 2; text-align: center; max-width: 760px; }
.wr-hero .wr-lede { margin-inline: auto; }

.wr-scroll-cue {
  position: absolute; z-index: 2; bottom: 2rem; left: 50%; transform: translateX(-50%);
  font-size: 1.3rem; color: rgba(232,230,224,0.6);
  animation: wr-bob 2.6s ease-in-out infinite;
}
@keyframes wr-bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .wr-scroll-cue { animation: none; } }

/* -------------------------------------------------------------- */
/* 2. SPLIT (risate) -- text left, image right, different rhythm   */
/* -------------------------------------------------------------- */
.wr-split { justify-content: flex-start; }
.wr-bg-right { object-position: center 35%; }
.wr-split-content { position: relative; z-index: 2; max-width: 620px; padding-left: clamp(1.5rem, 6vw, 6rem); }

/* -------------------------------------------------------------- */
/* 3. COMPARE (danni) -- bar comparison                             */
/* -------------------------------------------------------------- */
.wr-compare-content { position: relative; z-index: 2; width: min(100%, 740px); text-align: center; margin: 0 auto; }
.wr-compare .wr-lede { margin-inline: auto; }

.wr-bars { margin: 2rem 0 1.2rem; display: flex; flex-direction: column; gap: 1rem; }
.wr-bar-row { display: grid; grid-template-columns: 145px minmax(0, 1fr) max-content; align-items: center; gap: 1rem; }
.wr-bar-label { text-align: right; font-family: var(--font-body); font-size: clamp(1.05rem, 1.75vw, 1.25rem); line-height: 1.2; font-weight: 700; color: #fff7e8; text-shadow: 0 2px 12px #0a0d14; }
.wr-bar-track { min-width: 0; height: 3rem; background: rgba(232,230,224,0.16); border-radius: 6px; overflow: hidden; }
.wr-bar-value { min-width: 4ch; text-align: right; font-family: var(--wr-font-display); font-size: 1.4rem; font-weight: 700; color: #fff7e8; font-variant-numeric: tabular-nums; text-shadow: 0 2px 12px #0a0d14; }
.wr-bar-fill {
  height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 0.8rem;
  width: 0;
  transition: width 900ms var(--spring-smooth);
  font-family: var(--wr-font-display); font-weight: 600; font-size: 1.2rem; color: #11141c;
}
.wr-compare-content.is-in .wr-bar-fill { width: calc(var(--wr-bar-p, 0) * 100%); }
@media (prefers-reduced-motion: reduce) { .wr-bar-fill { width: calc(var(--wr-bar-p, 0) * 100%); } }
.wr-bar-fill-a { background: var(--gold-bright); }
.wr-bar-fill-b { background: #9a6b6b; }
.wr-bar-fill-c { background: #7a93b0; }
.wr-bar-fill-d { background: #8aa876; }
.wr-bar-fill-e { background: #a68cc2; }
@media (prefers-reduced-motion: reduce) { .wr-bar-fill { transition: none; } }

/* -------------------------------------------------------------- */
/* NOMI -- one common canvas, independent rates, no mismatched zoom. */
/* -------------------------------------------------------------- */
.wr-layer[data-layer="nomi"] .wr-bg,
.wr-layer[data-layer="nomi"] .wr-fg {
  top: -120px;
  height: calc(100% + 240px);
  object-position: 50% 50%;
  transform: translateY(calc(var(--wr-travel, 0) * 20px)) scale(1.06);
}
.wr-layer[data-layer="nomi"] .wr-fg {
  transform: translateY(calc(var(--wr-travel, 0) * 110px)) scale(1.06);
}
.wr-layer[data-layer="nomi"] .wr-scrim {
  background: radial-gradient(ellipse at 50% 45%, rgba(10,13,20,0.76), rgba(10,13,20,0.35) 48%, rgba(10,13,20,0.1)),
              linear-gradient(0deg, rgba(10,13,20,0.28), transparent 32%);
}

/* CHIUSURA -- an asymmetric four-plane portrait composition.
   Heads sit at distinct heights; lower bodies dissolve into Waterdeep.
   The content has a quiet central opening, not a row of portraits. */
.wr-cast-scenic {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wr-cast-figure {
  position: absolute;
  width: min(38vw, 680px);
  height: auto;
  max-height: none;
  margin: 0;
  mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 97%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 97%);
  transform: translate3d(calc(var(--wr-travel, 0) * var(--cast-x, 0px)), calc(var(--wr-travel, 0) * var(--cast-y, 80px)), 0);
}
.wr-cast-figure[data-pg="esme"] {
  top: 2vh; left: -2vw; width: min(38vw, 680px);
  --cast-x: -18px; --cast-y: -60px;
}
.wr-cast-figure[data-pg="barto"] {
  top: 6vh; right: -2vw; width: min(40vw, 720px);
  --cast-x: 22px; --cast-y: -100px;
}
.wr-cast-figure[data-pg="erowen"] {
  top: 42vh; left: 10vw; width: min(31vw, 560px);
  --cast-x: -36px; --cast-y: -155px;
}
.wr-cast-figure[data-pg="zefiro"] {
  top: 45vh; right: 9vw; width: min(34vw, 610px);
  --cast-x: 30px; --cast-y: -210px;
}
.wr-finale-layer .wr-scrim {
  background: radial-gradient(ellipse at 50% 47%, rgba(10,13,20,0.86), rgba(10,13,20,0.48) 24%, rgba(10,13,20,0.04) 61%),
              linear-gradient(0deg, rgba(10,13,20,0.8), transparent 24%);
}
.wr-finale { min-height: 125vh; }
.wr-finale .wr-hero-content {
  max-width: min(35vw, 500px);
  align-self: flex-start;
  margin-top: 35vh;
}
.wr-finale .wr-phrase {
  font-size: clamp(2.3rem, 4vw, 4.25rem);
  line-height: 1.06;
  text-wrap: balance;
  text-shadow: 0 3px 30px #0a0d14;
}
.wr-finale .wr-lede { text-wrap: balance; }

@media (max-width: 700px) {
  .wr-layer[data-layer="nomi"] .wr-bg,
  .wr-layer[data-layer="nomi"] .wr-fg { object-position: 30% 50%; }
  .wr-cast-figure[data-pg="esme"] { top: 1vh; left: -5vw; width: 70vw; --cast-x: -5px; --cast-y: -30px; }
  .wr-cast-figure[data-pg="barto"] { top: 4vh; right: -8vw; width: 70vw; --cast-x: 7px; --cast-y: -45px; }
  .wr-cast-figure[data-pg="erowen"] { top: 56vh; left: -8vw; width: 64vw; --cast-x: -10px; --cast-y: -65px; }
  .wr-cast-figure[data-pg="zefiro"] { top: 65vh; right: -6vw; width: 65vw; --cast-x: 12px; --cast-y: -95px; }
  .wr-finale .wr-hero-content { max-width: 84vw; margin-top: 57vh; }
  .wr-finale .wr-phrase { font-size: clamp(2.1rem, 7.3vw, 3.2rem); }
  .wr-finale .wr-lede { max-width: 300px; font-size: 1.1rem; }
  .wr-finale-layer .wr-scrim {
    background: radial-gradient(ellipse at 50% 48%, rgba(10,13,20,0.93), rgba(10,13,20,0.65) 19%, transparent 46%),
                linear-gradient(0deg, rgba(10,13,20,0.65), transparent 16%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wr-cast-figure,
  .wr-layer[data-layer="nomi"] .wr-bg,
  .wr-layer[data-layer="nomi"] .wr-fg { transform: none; will-change: auto; }
}

.wr-note { font-family: var(--font-body); font-size: 0.95rem; color: #ddd9d0; margin-top: 1.2rem; text-align: left; }
.wr-note summary { cursor: pointer; color: var(--gold-bright); }
.wr-note p { margin: 0.6rem 0 0; max-width: 540px; }

@media (max-width: 700px) {
  .wr-split { justify-content: center; }
  .wr-split-content { padding-left: 1.5rem; padding-right: 1.5rem; text-align: center; }
  .wr-scrim-left { background: linear-gradient(180deg, rgba(10,13,20,0.55) 0%, rgba(10,13,20,0.95) 70%); }
  .wr-bg-right { object-position: center 30%; }
  .wr-bar-row { grid-template-columns: 102px minmax(0, 1fr) max-content; gap: 0.6rem; }
  .wr-bar-value { font-size: 1.2rem; }
  .wr-bar-track { height: 2.8rem; }
}
@media (max-width: 380px) {
  .wr-section[data-scene="parole"] .wr-bignum { font-size: clamp(2.8rem, 15.5vw, 3.5rem); }
}