/* Faulty lights, a fixed blade reflection, then one continuous camera dolly. */
html[data-intro] { overflow: hidden; }
.blackout { display: none; }
html[data-intro="loading"] .blackout,
html[data-intro="blackout"] .blackout,
html[data-intro="haunting"] .blackout,
html[data-intro="settling"] .blackout {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  padding: 28px;
  background: #030304;
  color: #efedee;
}
html[data-intro="loading"] .page,
html[data-intro="blackout"] .page { opacity: 0; visibility: hidden; }
html[data-intro="blackout"] .blackout { background: #000; }
html[data-intro="blackout"] .blackout__room,
html[data-intro="blackout"] .blackout__lamp,
html[data-intro="blackout"] .blackout__content,
html[data-intro="blackout"] .blackout__footer,
html[data-intro="blackout"] .blackout__meter { visibility: hidden; }
html[data-intro="haunting"] .blackout,
html[data-intro="settling"] .blackout { z-index: 1002; background: transparent; }
html[data-intro="haunting"] .blackout > :not(.blackout__skip),
html[data-intro="settling"] .blackout > :not(.blackout__skip) { visibility: hidden; }
html[data-intro="haunting"] .blackout__skip,
html[data-intro="settling"] .blackout__skip { visibility: visible; }
html[data-intro="blackout"] .blackout__skip { opacity: .18; }

/* Room, blood, steel and live reflection share one camera in screen space. */
.intro-viewport, .intro-reflection { display: contents; }
.intro-media, .intro-steel, .intro-reflection-field { display: none; }
.site-stage { min-height: 100svh; }
html[data-intro] .site-stage *,
html[data-intro] .site-stage *::before,
html[data-intro] .site-stage *::after { animation-play-state: paused !important; }
/* Avoid promoting text into separate oversized layers during the camera move. */
html[data-intro] .site-stage [data-warp] { will-change: auto !important; }
html:is([data-intro="haunting"], [data-intro="settling"]) .site-stage :is(.panel:not(.do), .code, .faq details) {
  backdrop-filter: var(--intro-panel-backdrop, none) !important;
  -webkit-backdrop-filter: var(--intro-panel-backdrop, none) !important;
}
html:is([data-intro="haunting"], [data-intro="settling"]) .site-stage .bar {
  backdrop-filter: var(--intro-bar-backdrop, none) !important;
  -webkit-backdrop-filter: var(--intro-bar-backdrop, none) !important;
}
html:is([data-intro="haunting"], [data-intro="settling"]) .intro-viewport {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1001;
  overflow: hidden;
  isolation: isolate;
  background: #050203;
}
html[data-intro="haunting"] .intro-viewport {
  animation: ghost-light-failures 650ms steps(1, end) both;
}
html:is([data-intro="haunting"], [data-intro="settling"]) .intro-media {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.intro-world {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
  background:
    radial-gradient(ellipse at 78% 48%, #22252d44, transparent 58%),
    linear-gradient(165deg, #0c0b0f, #030204 72%);
}
.intro-world::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #0302043d, #02020399);
}
.intro-media__image {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: contain;
  filter: saturate(.2);
  transform-origin: 0 0;
  z-index: 1;
}
.intro-blood {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
html:is([data-intro="haunting"], [data-intro="settling"]) .intro-reflection {
  display: block;
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 2;
  isolation: isolate;
  pointer-events: none;
  clip-path: url(#blade-portal-clip);
  background: #060607;
}
html:is([data-intro="haunting"], [data-intro="settling"]) .intro-reflection-field {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  transform-origin: 0 0;
}
html:is([data-intro="haunting"], [data-intro="settling"]) .site-stage {
  position: fixed;
  inset: 0;
  height: 100%;
  overflow: visible;
  z-index: 1;
  isolation: isolate;
  transform-origin: 0 0;
  transform: var(--blade-matrix);
}
html:is([data-intro="haunting"], [data-intro="settling"]) .page {
  opacity: 1;
  visibility: visible;
  transform-origin: 0 0;
}
/* Fixed scenery remains aligned when the reflected page opens at an anchor. */
html:is([data-intro="haunting"], [data-intro="settling"]) .site-stage > :is(.bg, .grain, #snow) {
  translate: var(--reflection-scroll-x, 0px) var(--reflection-scroll-y, 0px);
}
/* Keep the photograph's inset overscan beneath its own vignette. */
html:is([data-intro="haunting"], [data-intro="settling"]) .site-stage > .bg {
  overflow: hidden;
}
html:is([data-intro="haunting"], [data-intro="settling"]) .intro-steel {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.intro-steel [data-steel-material] { opacity: 0; }


/* The strap and card travel together; the outer hang keeps its original physics. */
.badge-rig {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  opacity: 1;
  transform: none;
  transform-origin: 50% 0;
}
.hang-col .lanyard { transform-origin: 50% 0; }
.hang-col.badge-awaiting .hang { opacity: 0; }
.hang-col.badge-falling .hang {
  opacity: 1;
  animation: badge-enter-from-top 1000ms linear both;
}
.hang-col.badge-falling .lanyard {
  animation: badge-strap-fall 1000ms linear both;
}
.hang-col.badge-falling .badge-rig {
  animation: badge-fall 1000ms linear both;
}
/* The entire badge and strap start above the viewport, then catch at the anchor. */
@keyframes badge-enter-from-top {
  0% {
    translate: 0 calc(var(--badge-entry-distance, 120vh) * -1);
    animation-timing-function: cubic-bezier(.35, .02, .9, .48);
  }
  60%, 100% { translate: 0 0; }
}
/* Matching easing and extension keeps the clip attached throughout the fall. */
@keyframes badge-strap-fall {
  0% {
    transform: scaleY(1);
    animation-timing-function: cubic-bezier(.35, .02, .9, .48);
  }
  60% {
    transform: scaleY(1.12);
    animation-timing-function: cubic-bezier(.15, .75, .3, 1);
  }
  78% {
    transform: scaleY(.94);
    animation-timing-function: cubic-bezier(.2, .6, .3, 1);
  }
  90% {
    transform: scaleY(1.02);
    animation-timing-function: ease-out;
  }
  100% { transform: scaleY(1); }
}
@keyframes badge-fall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(-5deg);
    animation-timing-function: cubic-bezier(.35, .02, .9, .48);
  }
  60% {
    transform: translateY(calc(var(--badge-lanyard-length, 70px) * .12)) rotate(3deg);
    animation-timing-function: cubic-bezier(.15, .75, .3, 1);
  }
  78% {
    transform: translateY(calc(var(--badge-lanyard-length, 70px) * -.06)) rotate(-2deg);
    animation-timing-function: cubic-bezier(.2, .6, .3, 1);
  }
  90% {
    transform: translateY(calc(var(--badge-lanyard-length, 70px) * .02)) rotate(1deg);
    animation-timing-function: ease-out;
  }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

/* The photograph and its reflection lose power together. */
.blackout__light-wash { display: none; }
@keyframes ghost-light-failures {
  0%, 9% { filter: brightness(.08); }
  10%, 30% { filter: brightness(1); }
  31%, 60% { filter: brightness(.08); }
  61%, 100% { filter: brightness(1); }
}
.blackout__room {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 20%, #9ba5b01b, transparent 55%),
    repeating-linear-gradient(90deg, transparent 0 119px, #ffffff03 120px),
    linear-gradient(180deg, #0d0e12, #030304 70%);
}
.blackout__room::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 35%, #cbd7ef20, transparent 68%);
  opacity: .08;
  animation: blackout-room 1400ms steps(1, end) both;
}
.blackout__lamp {
  position: absolute;
  top: 19%;
  left: 50%;
  width: min(64vw, 700px);
  height: 5px;
  transform: translateX(-50%) rotate(-3deg);
  border-radius: 3px;
  background: #d8e2e8;
  box-shadow: 0 0 10px #d8e2e8, 0 0 45px 6px #bdcdd25c, 0 35px 120px 40px #b8c7d722;
  opacity: .02;
  animation: blackout-light 1400ms steps(1, end) both;
}
.blackout__lamp--second {
  top: auto;
  bottom: 20%;
  width: min(40vw, 420px);
  transform: translateX(-50%) rotate(3deg);
  animation-name: blackout-light-second;
}
.blackout__content {
  width: min(100%, 620px);
  text-align: center;
  animation: blackout-content 1400ms steps(1, end) both;
}
.blackout__eyebrow,
.blackout__footer,
.blackout__skip,
.blackout__status {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
}
.blackout__eyebrow { margin: 0 0 24px; color: #77767c; text-transform: uppercase; }
.blackout__title {
  margin: 0;
  font-family: var(--f-scream);
  font-weight: 400;
  font-size: clamp(64px, 12vw, 140px);
  line-height: .9;
  letter-spacing: .015em;
  text-transform: uppercase;
  text-shadow: 0 0 45px #d9e6ef22;
}
.blackout__title span { display: block; color: #62636a; }
.blackout__status { min-height: 2em; margin: 28px 0 0; color: #a5a0a5; letter-spacing: 0; }
.blackout__footer {
  position: absolute;
  right: 28px;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #69656c;
  font-variant-numeric: tabular-nums;
}
.blackout__signal { display: inline-flex; align-items: center; gap: 10px; }
.blackout__signal::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ae-red);
  box-shadow: 0 0 10px #e5091480;
}
.blackout__skip {
  position: absolute;
  z-index: 3;
  top: max(24px, env(safe-area-inset-top));
  right: 28px;
  padding: 10px 12px;
  border: 1px solid #ffffff1a;
  border-radius: 6px;
  background: #ffffff05;
  color: #ada6ad;
  cursor: pointer;
  letter-spacing: 0;
}
.blackout__skip:hover { color: #fff; border-color: #ffffff50; }
html[data-intro="haunting"] .blackout__skip,
html[data-intro="settling"] .blackout__skip { background: #000b; color: #fff; }
.blackout__meter { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: #ffffff08; }
.blackout__meter span { display: block; height: 100%; background: #bb0a15; transform: scaleX(var(--intro-progress, 0)); transform-origin: left; }
/* Two uneven light failures, separated by darkness; no repeated strobe loop. */
@keyframes blackout-light {
  0%, 7% { opacity: .02; }
  13%, 21% { opacity: .8; }
  29%, 51% { opacity: .025; }
  58%, 66% { opacity: .65; }
  77%, 100% { opacity: 0; }
}
@keyframes blackout-light-second {
  0%, 7% { opacity: .01; }
  13%, 21% { opacity: .35; }
  29%, 51% { opacity: .01; }
  58%, 66% { opacity: .25; }
  77%, 100% { opacity: 0; }
}
@keyframes blackout-room {
  0%, 7% { opacity: .04; }
  13%, 21% { opacity: .7; }
  29%, 51% { opacity: .04; }
  58%, 66% { opacity: .55; }
  77%, 100% { opacity: 0; }
}
@keyframes blackout-content {
  0%, 7% { opacity: .12; }
  13%, 21% { opacity: 1; }
  29%, 51% { opacity: .12; }
  58%, 66% { opacity: 1; }
  77%, 100% { opacity: 0; }
}
/* The actual character sheet owns this portrait; the badge keeps its avatar. */
.char-portrait { margin: 0; }
.char-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.char-portrait figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 14px;
  margin-top: 9px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--mute);
}
/* Keep the restored photo sharp while maintaining readable foreground text. */
.bg::before {
  inset: -12px;
  background-image: url(./ghostface.eb5786703b68.webp);
  background-position: center 28%;
}
.bg::after {
  background:
    linear-gradient(90deg, #060607d9, #06060785 55%, #0606078c),
    radial-gradient(ellipse at 50% 30%, #06060724 0%, #0606078c 65%, var(--void) 100%);
}
@media (max-width: 600px) {
  .blackout { padding: 20px; }
  .blackout__skip { right: 20px; }
  .blackout__footer { right: 20px; left: 20px; font-size: 10px; }
  .blackout__lamp { top: 21%; width: 80vw; }
  .blackout__lamp--second { top: auto; bottom: 22%; width: 55vw; }
  .bg::before { background-position: 55% center; }
  .bg::after {
    background:
      linear-gradient(180deg, #06060785, #060607aa),
      radial-gradient(ellipse at 50% 25%, transparent, #060607a6 90%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hang-col.badge-awaiting .hang,
  .hang-col.badge-falling .hang {
    animation: none !important;
    translate: none;
    opacity: 1;
  }
  .hang-col.badge-awaiting .lanyard,
  .hang-col.badge-falling .lanyard,
  .hang-col.badge-awaiting .badge-rig,
  .hang-col.badge-falling .badge-rig {
    animation: none !important;
    transform: none;
    opacity: 1;
  }
  .blackout__lamp, .blackout__room::after { animation: none; opacity: .08; }
  .blackout__content { animation: none; opacity: 1; }
  .blackout__light-wash { display: none !important; }
  .intro-media {
    display: none !important;
    animation: none !important;
    transition: none !important;
  }
  .intro-world {
    animation: none !important;
    transform: none !important;
  }
  html[data-intro="haunting"] .site-stage,
  html[data-intro="settling"] .site-stage {
    position: static;
    height: auto;
    overflow: visible;
    z-index: auto;
    isolation: auto;
    transform: none !important;
    will-change: auto;
    animation: none !important;
  }
}

:root {
  --intro-void: #030304;
  --intro-white: #f2f2f3;
  --intro-muted: #b7b8c1;
  --intro-steel: #d9e4ed;
  --intro-red: #e50914;
  --intro-pad: max(50px, 5vw);
  --intro-control: 16px;
  --intro-title-size: clamp(48px, 10vw, 140px);
  --intro-small-gap: 8px;
  --intro-gap: 24px;
  --intro-radius: 8px;
  --intro-duration: 6200ms;
  --intro-interaction: 200ms;
  --intro-ease: cubic-bezier(.22, 1, .36, 1);
  --intro-room-light: rgba(217, 228, 237, .08);
  --intro-edge: rgba(217, 228, 237, .2);
  --intro-metal-front: -28%;
  --intro-metal-angle: 180deg;
  --intro-metal-pitch: 3.25px;
  --intro-metal-glint: 0;
  --intro-metal-sweep-angle: 100deg;
  --intro-metal-neutral: #808080;
  --intro-metal-dark: #111720;
}

html[data-intro] { scrollbar-gutter: stable; }
html[data-intro] .blackout {
  padding: var(--intro-pad);
  background: var(--intro-void);
  color: var(--intro-white);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--intro-gap);
  align-items: center;
}
.blackout__room {
  background:
    radial-gradient(ellipse at 65% 4%, var(--intro-room-light), transparent 64%),
    linear-gradient(150deg, #0d1015, var(--intro-void) 72%);
}
.blackout__room::after {
  animation: none;
  opacity: .2;
  background: linear-gradient(110deg, transparent 32%, #d9e4ed06 48%, transparent 64%);
}
.blackout__lamp {
  left: 18%;
  top: 18%;
  width: 64%;
  height: 2px;
  border-radius: 0;
  transform: rotate(-3deg);
  opacity: .32;
  background: var(--intro-steel);
  box-shadow: 0 0 24px #d9e4ed24, 0 32px 96px #d9e4ed14;
  animation: intro-light-decay 1500ms ease-in both;
}
.blackout__lamp--second {
  left: 30%;
  top: auto;
  bottom: 18%;
  width: 40%;
  height: 1px;
  transform: rotate(3deg);
  opacity: .15;
  animation: intro-light-decay 1500ms ease-in both;
}
.blackout__content {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  width: min(100%, 720px);
  min-width: 0;
  animation: none;
}
.blackout__eyebrow,
.blackout__status,
.blackout__footer,
.blackout__skip {
  font-size: var(--intro-control);
  line-height: 1.6;
  color: var(--intro-muted);
  letter-spacing: 0;
}
.blackout__eyebrow {
  margin: 0 0 var(--intro-gap);
  text-transform: lowercase;
}
.blackout__title {
  font-family: var(--f-scream);
  font-size: var(--intro-title-size);
  line-height: 1.04;
  letter-spacing: .015em;
  color: var(--intro-white);
  text-shadow: 0 2px 24px #0009;
}
.blackout__title span {
  display: block;
  color: var(--intro-white);
}
.blackout__title::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  margin: var(--intro-gap) auto 0;
  background: var(--intro-red);
}
.blackout__status {
  min-height: 2em;
  margin: var(--intro-gap) 0 0;
}
.blackout__skip {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--intro-small-gap) 16px;
  border: 1px solid var(--intro-edge);
  border-radius: var(--intro-radius);
  background: #030304cc;
  color: var(--intro-white);
  transition: background var(--intro-interaction) var(--intro-ease), border-color var(--intro-interaction) var(--intro-ease);
}
.blackout__skip:hover { background: #1a1b20; border-color: var(--intro-steel); color: var(--intro-white); }
.blackout__skip:focus-visible { outline: 2px solid var(--intro-white); outline-offset: 4px; }
.blackout__footer {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 3;
  width: 100%;
  min-width: 0;
  gap: var(--intro-gap);
}
.blackout__footer > :last-child { white-space: nowrap; }
.blackout__signal { min-width: 0; }
.blackout__signal::before { flex: 0 0 4px; width: 4px; height: 16px; border-radius: 0; box-shadow: none; }
.blackout__meter span { background: var(--intro-red); }
html[data-intro="blackout"] .blackout { background: #000; }
html[data-intro="blackout"] .blackout__skip { opacity: 1; }
html:is([data-intro="haunting"], [data-intro="settling"]) .blackout {
  background: transparent;
  pointer-events: none;
}
html:is([data-intro="haunting"], [data-intro="settling"]) .blackout__skip { pointer-events: auto; }
html[data-intro="haunting"] .intro-viewport { animation: none; }
.intro-world {
  background:
    radial-gradient(ellipse at 65% 25%, #29333d52, transparent 64%),
    linear-gradient(170deg, #0a0d11, var(--intro-void) 72%);
}
.intro-world::before {
  background: linear-gradient(180deg, #03030400 30%, #03030480);
}
.intro-media__image {
  aspect-ratio: 2172 / 724;
  filter: saturate(.06) contrast(1.1);
}
.intro-ground {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: #000b;
  filter: blur(16px);
  transform-origin: center;
}
.intro-blood { opacity: .64; }
.intro-steel { shape-rendering: geometricPrecision; }
.intro-metal-tone,
.intro-metal-grain,
.intro-metal-glint { display: none; }
html:is([data-intro="haunting"], [data-intro="settling"]) :is(.intro-metal-tone, .intro-metal-grain, .intro-metal-glint) {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
html[data-intro] .intro-steel,
.intro-metal-tone,
.intro-metal-grain {
  -webkit-mask-image: var(--intro-metal-mask);
  mask-image: var(--intro-metal-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.intro-metal-tone {
  z-index: 2;
  background: var(--intro-metal-neutral);
  mix-blend-mode: color;
}
.intro-metal-grain {
  z-index: 3;
  background:
    repeating-linear-gradient(var(--intro-metal-angle), #d9e4ed24 0, #d9e4ed24 .5px, #03030418 1px, transparent 1.5px, transparent var(--intro-metal-pitch)),
    repeating-linear-gradient(var(--intro-metal-angle), transparent 0, transparent 23px, #d9e4ed0a 24px, transparent 25px, transparent 48px),
    linear-gradient(112deg, #11172038 0%, #d9e4ed12 26%, #d9e4ed28 46%, #11172030 61%, #d9e4ed14 78%, #03030438 100%);
}
.intro-metal-glint {
  z-index: 4;
  opacity: var(--intro-metal-glint);
  mix-blend-mode: screen;
  filter: blur(.15px);
  background:
    linear-gradient(var(--intro-metal-sweep-angle), transparent calc(var(--intro-metal-front) - 18%), #d9e4ed08 calc(var(--intro-metal-front) - 11%), #d9e4ed38 calc(var(--intro-metal-front) - 3%), #f2f2f3b8 var(--intro-metal-front), #d9e4ed30 calc(var(--intro-metal-front) + 3%), transparent calc(var(--intro-metal-front) + 10%)),
    linear-gradient(var(--intro-metal-sweep-angle), transparent calc(var(--intro-metal-front) - 28%), #d9e4ed0a calc(var(--intro-metal-front) - 8%), transparent calc(var(--intro-metal-front) + 6%), #03030430 calc(var(--intro-metal-front) + 13%), transparent calc(var(--intro-metal-front) + 22%));
}
html[data-intro-busy] .bar.intro-bar-awaiting { visibility: hidden; }
html[data-intro-busy] .bar.intro-bar-arriving {
  will-change: translate;
  transition: none;
}
html[data-intro] .site-stage .bar,
html[data-intro] .site-stage .panel,
html[data-intro] .site-stage .code { will-change: auto; }
@keyframes intro-light-decay {
  0%, 40% { opacity: .32; }
  64% { opacity: .2; }
  86% { opacity: .24; }
  100% { opacity: .08; }
}
@media (max-width: 600px) {
  :root { --intro-title-size: clamp(48px, 15vw, 88px); --intro-gap: 16px; }
  .blackout__footer { flex-wrap: wrap; }
  .blackout__signal { flex-basis: 100%; }
  .blackout__footer > :last-child { margin-left: auto; }
  .blackout__lamp { top: 24%; left: 12%; width: 76%; }
  .blackout__lamp--second { top: auto; bottom: 24%; left: 28%; width: 44%; }
}
@media (max-height: 560px) and (min-width: 601px) {
  :root { --intro-title-size: 48px; --intro-gap: 8px; }
  .blackout__title span { display: inline; }
  .blackout__title::after { margin-top: 8px; }
  .blackout__eyebrow { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .blackout__lamp { animation: none; }
  .blackout__skip { transition: none; }
  html[data-intro] :is(.intro-metal-tone, .intro-metal-grain, .intro-metal-glint) { display: none; }
  html[data-intro-busy] .bar.intro-bar-arriving { translate: none !important; }
  .hang-col .hang { translate: none !important; }
  .hang-col .badge-rig { transform: none !important; }
}

/* ===== abertura v2: título vivo, faca cortando a tela, transição sem salto ===== */

/* A máscara lê --intro-metal-front, que o script anima no .intro-viewport:
   por isso ela é declarada aqui (no :root ela congelaria no valor inicial).
   A borda da revelação ficou mais larga e suave. */
/* Declarada nas próprias camadas do aço: o script escreve as variáveis nelas, não
   no .intro-viewport, que contém o site inteiro. */
.intro-steel,
.intro-metal-tone,
.intro-metal-grain,
.intro-metal-glint {
  --intro-metal-mask: linear-gradient(var(--intro-metal-sweep-angle),
    transparent calc(var(--intro-metal-front) - 14%), #000 calc(var(--intro-metal-front) + 14%));
}
.intro-metal-tone { opacity: var(--intro-tone, 1); }
/* Textura escovada mais fina e discreta (antes virava listras na tela toda) e some perto da superfície. */
.intro-metal-grain {
  opacity: var(--intro-grain, 1);
  background:
    repeating-linear-gradient(var(--intro-metal-angle), #d9e4ed14 0, #d9e4ed14 .5px, #0303040c 1px, transparent 1.5px, transparent var(--intro-metal-pitch)),
    linear-gradient(112deg, #11172030 0%, #d9e4ed10 26%, #d9e4ed22 46%, #11172028 61%, #d9e4ed10 78%, #03030430 100%);
}
.intro-metal-glint { filter: blur(.6px); }
.intro-ground { transform-origin: 0 0; }


/* Enquanto as imagens carregam, só o essencial aparece; a animação começa junto com o relógio do script. */
html[data-intro="loading"]:not([data-intro-run]) .blackout__title,
html[data-intro="loading"]:not([data-intro-run]) .blackout__lamp { opacity: 0; }
html[data-intro-run][data-intro="loading"] .blackout__eyebrow { animation: intro-rise 600ms 80ms cubic-bezier(.2, .8, .2, 1) both; }
html[data-intro-run][data-intro="loading"] .blackout__title { animation: intro-title-in 1500ms cubic-bezier(.2, .8, .2, 1) both; transform-origin: 50% 55%; }
html[data-intro-run][data-intro="loading"] .blackout__title::after { animation: intro-rule 800ms 380ms cubic-bezier(.2, .8, .2, 1) both; }
html[data-intro-run][data-intro="loading"] .blackout__lamp { animation: intro-lamp 1500ms steps(1, end) both; }
html[data-intro-run][data-intro="loading"] .blackout__lamp--second { animation-name: intro-lamp-second; }
html[data-intro-run][data-intro="loading"] .blackout__footer { animation: intro-rise 500ms 200ms ease-out both; }

/* O título entra borrado e grande, falha duas vezes com separação de cor e, no fim,
   colapsa numa linha como tela de tubo desligando. */
@keyframes intro-title-in {
  0% { opacity: 0; transform: scale(1.16); filter: blur(14px); letter-spacing: .22em; }
  15% { opacity: 1; transform: scale(1.06); filter: blur(0); letter-spacing: .05em;
        text-shadow: -4px 0 #e50914b0, 4px 0 #6fd3ffa0, 0 2px 24px #0009; }
  18% { opacity: .18; transform: scale(1.055) translateX(-7px); }
  21% { opacity: 1; transform: scale(1.05) translateX(5px) skewX(-5deg);
        text-shadow: 3px 0 #e50914b0, -3px 0 #6fd3ffa0, 0 2px 24px #0009; }
  25% { transform: scale(1.045); text-shadow: 0 2px 24px #0009; }
  58% { opacity: 1; }
  61% { opacity: .5; text-shadow: -2px 0 #e5091480, 2px 0 #6fd3ff70, 0 2px 24px #0009; }
  64% { opacity: 1; text-shadow: 0 2px 24px #0009; }
  90% { opacity: 1; transform: scale(1); filter: brightness(1); letter-spacing: .015em; }
  100% { opacity: 1; transform: scale(1.08, .015); filter: brightness(3); letter-spacing: .015em; }
}
@keyframes intro-rule { from { width: 0; } to { width: 48px; } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes intro-lamp {
  0% { opacity: .04; } 7% { opacity: .5; } 10% { opacity: .06; } 13% { opacity: .44; }
  39% { opacity: .36; } 42% { opacity: .03; } 45% { opacity: .4; } 77% { opacity: .3; }
  81% { opacity: .04; } 85% { opacity: .26; } 100% { opacity: .1; }
}
@keyframes intro-lamp-second {
  0% { opacity: .02; } 7% { opacity: .24; } 10% { opacity: .03; } 13% { opacity: .2; }
  39% { opacity: .17; } 42% { opacity: .02; } 45% { opacity: .19; } 77% { opacity: .14; }
  81% { opacity: .02; } 85% { opacity: .12; } 100% { opacity: .05; }
}

/* Granulação de filme por cima do título. */
html[data-intro-run][data-intro="loading"] .blackout::after {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: intro-film 480ms steps(4, end) infinite;
}
@keyframes intro-film {
  0% { transform: translate(0, 0); } 25% { transform: translate(-6%, 4%); }
  50% { transform: translate(5%, -3%); } 75% { transform: translate(-3%, -6%); } 100% { transform: translate(0, 0); }
}

/* Apagão: a linha que sobrou do título encolhe até um ponto e some. */
html[data-intro="blackout"] .blackout::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 3;
  height: 2px;
  margin-top: -1px;
  background: #fff;
  box-shadow: 0 0 18px 4px #d9e4ed80, 0 0 60px 10px #d9e4ed30;
  animation: intro-crt 200ms cubic-bezier(.5, 0, .9, .4) both;
}
@keyframes intro-crt {
  0% { transform: scaleX(.6); opacity: 1; }
  70% { transform: scaleX(.03); opacity: 1; }
  100% { transform: scaleX(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-intro] .blackout__title,
  html[data-intro] .blackout__title::after,
  html[data-intro] .blackout__eyebrow,
  html[data-intro] .blackout__footer,
  html[data-intro] .blackout__lamp,
  html[data-intro] .blackout::before,
  html[data-intro] .blackout::after { animation: none !important; }
}

/* ===== loader: linha de corte =====
   Tela preta em duas metades e uma linha de 1px no meio que cresce com o carregamento
   real. Em 100 a linha brilha como lâmina e a tela se parte por ela, revelando a abertura. */
.blackout__loader { display: none; }
html[data-intro="loading"] .blackout__loader,
html[data-intro-loaded]:is([data-intro="blackout"], [data-intro="haunting"]) .blackout__loader {
  display: block;
  visibility: visible;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  font-family: var(--f-mono, monospace);
  color: #a5a0a5;
}
html[data-intro="loading"]:not([data-intro-run]) :is(.blackout__footer, .blackout__meter) { opacity: 0; }
/* O botão de pular fica acima das metades. */
html[data-intro] .blackout .blackout__skip { z-index: 5; }

/* Metades: 0,5px de sobreposição no meio evita fresta antes do corte. */
.loader__half {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(50% + .5px);
  background: #000;
  transition: transform 760ms 180ms cubic-bezier(.87, 0, .13, 1);
  will-change: transform;
}
.loader__half--top { top: 0; }
.loader__half--bot { bottom: 0; }

/* Linha do corte: trilho quase invisível + preenchimento branco. */
.loader__line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  margin-top: -.5px;
  background: #ffffff10;
  transition: opacity 320ms 260ms ease;
}
.loader__line i {
  position: absolute;
  inset: 0;
  background: #efedee;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: box-shadow 160ms ease, background 160ms ease;
}

/* Etapa à esquerda e contador pequeno à direita, logo acima da linha. */
.loader__meta {
  position: absolute;
  left: max(24px, 4vw);
  right: max(24px, 4vw);
  bottom: calc(50% + 14px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.loader__meta p { margin: 0; overflow: hidden; }
.loader__step {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8f8a90;
}
.loader__step span { display: inline-block; animation: loader-up 700ms 200ms cubic-bezier(.2, .8, .2, 1) both; }
.loader__step span::after { content: "_"; animation: loader-blink 800ms steps(1, end) infinite; }
@keyframes loader-blink { 50% { opacity: .15; } }

/* Odômetro discreto: cada dígito é um rolo de 0 a 9. */
.loader__count {
  display: flex;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .2em;
  font-variant-numeric: tabular-nums;
  color: #efedee;
}
.loader__digit {
  display: block;
  height: 1em;
  overflow: hidden;
  animation: loader-up 700ms 260ms cubic-bezier(.2, .8, .2, 1) both;
}
.loader__reel {
  display: flex;
  flex-direction: column;
  transition: transform 420ms cubic-bezier(.65, 0, .2, 1);
  will-change: transform;
}
.loader__reel span { display: block; height: 1em; }

/* Título "o filme já vai começar" sobe letra por letra de dentro de uma máscara. */
.blackout__eyebrow[data-split] { overflow: hidden; }
.split-char { display: inline-block; }
html[data-intro="loading"]:not([data-intro-run]) .split-char {
  animation: loader-up 800ms calc(var(--i) * 28ms + 150ms) cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes loader-up { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }

/* Pronto: textos saem por cima, a linha brilha como lâmina e a tela se parte.
   As metades continuam por cima da cena enquanto abrem: a faca entra pelo corte. */
html[data-intro-loaded] .loader__meta p {
  animation: loader-out 420ms cubic-bezier(.7, 0, .3, 1) both;
}
html[data-intro-loaded] .loader__count { animation-delay: 40ms; }
html[data-intro-loaded]:not([data-intro-run]) .split-char {
  animation: loader-out 560ms calc(var(--i) * 12ms) cubic-bezier(.7, 0, .3, 1) both;
}
html[data-intro-loaded] .loader__line i {
  background: #fff;
  box-shadow: 0 0 10px 1px #fff, 0 0 36px 3px #e5091466;
  animation: loader-blade 260ms ease-out both;
}
html[data-intro-loaded] .loader__line { opacity: 0; }
html[data-intro-loaded] .loader__half--top { transform: translateY(-101%); }
html[data-intro-loaded] .loader__half--bot { transform: translateY(101%); }
@keyframes loader-out { to { transform: translateY(-110%); opacity: 0; } }
@keyframes loader-blade { 0% { scale: 1 1; } 35% { scale: 1 3; } 100% { scale: 1 1; } }

@media (prefers-reduced-motion: reduce) {
  .loader__half { transition: opacity 400ms ease; }
  html[data-intro-loaded] :is(.loader__half--top, .loader__half--bot) { transform: none; opacity: 0; }
}

/* ===== versão curta (celular e máquinas fracas) =====
   Sem reflexo, câmera nem aço: o site fica parado no lugar de sempre e só a cena da
   faca (uma camada fixa por cima) se mexe, com transform e opacity. */
html[data-intro-mode="lite"] .intro-viewport,
html[data-intro-mode="lite"] .intro-reflection { display: contents !important; animation: none !important; }
html[data-intro-mode="lite"] :is(.intro-steel, .intro-reflection-field, .intro-metal-tone, .intro-metal-grain, .intro-metal-glint) {
  display: none !important;
}
html[data-intro-mode="lite"]:is([data-intro="haunting"], [data-intro="settling"]) .site-stage {
  position: static;
  inset: auto;
  height: auto;
  z-index: auto;
  isolation: auto;
  transform: none;
}
html[data-intro-mode="lite"]:is([data-intro="haunting"], [data-intro="settling"]) .site-stage > :is(.bg, .grain, #snow) { translate: none; }
html[data-intro-mode="lite"]:is([data-intro="haunting"], [data-intro="settling"]) .intro-media {
  position: fixed;
  inset: 0;
  z-index: 1001;
  overflow: hidden;
}
html[data-intro-mode="lite"] .intro-world { will-change: transform, opacity; }
.intro-lite-glint {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  transform-origin: 0 0;
  mix-blend-mode: screen;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.intro-lite-glint > i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 34%;
  opacity: 0;
  will-change: transform;
  background: linear-gradient(100deg, transparent 0%, rgba(217, 228, 237, .18) 30%, rgba(242, 242, 243, .85) 50%, rgba(217, 228, 237, .18) 70%, transparent 100%);
}
.intro-lite-slash {
  position: absolute;
  left: 0;
  top: -1px;
  z-index: 3;
  height: 2px;
  opacity: 0;
  pointer-events: none;
  transform-origin: 0 50%;
  will-change: transform, opacity;
  background: linear-gradient(90deg, transparent, #f2f2f3 8%, #fff 50%, #f2f2f3 92%, transparent);
  box-shadow: 0 0 10px rgba(255, 255, 255, .8), 0 0 26px rgba(229, 9, 20, .55);
}

/* ===== botão de pular: pílula com preenchimento, texto rolando, seta que troca,
   tecla esc, barra de progresso da abertura e ímã leve até o cursor ===== */
html .blackout .blackout__skip {
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px 10px 18px;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  background: #0a0a0cb3;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #d8d4d8;
  font: 500 13px/1 var(--f-mono, monospace);
  letter-spacing: .04em;
  cursor: pointer;
  translate: var(--mx, 0px) var(--my, 0px);
  transition: translate 320ms cubic-bezier(.2, .8, .2, 1), color 420ms cubic-bezier(.7, 0, .2, 1),
    border-color 420ms ease, scale 160ms ease;
  animation: skip-in 700ms 350ms cubic-bezier(.2, .8, .2, 1) both;
}
html .blackout .blackout__skip:hover { color: #050505; border-color: #efedee; }
html .blackout .blackout__skip:active { scale: .96; }
html .blackout .blackout__skip:focus-visible { outline: 2px solid #efedee; outline-offset: 4px; }
@keyframes skip-in { from { opacity: 0; transform: translateY(-10px); filter: blur(4px); } }

.skip__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #efedee;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 520ms cubic-bezier(.7, 0, .2, 1);
}
.blackout__skip:hover .skip__fill { clip-path: inset(0 0 0 0); }

.skip__roll { display: block; height: 1.25em; line-height: 1.25; overflow: hidden; }
.skip__roll span { display: block; transition: transform 520ms cubic-bezier(.7, 0, .2, 1); }
.skip__roll span::after { content: attr(data-t); display: block; }
.blackout__skip:hover .skip__roll span { transform: translateY(-50%); }

.skip__key {
  padding: 3px 6px;
  border: 1px solid currentColor;
  border-radius: 5px;
  font: inherit;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .45;
}

.skip__bar {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6px;
  height: 1px;
  background: #e50914;
  box-shadow: 0 0 6px #e50914;
  transform: scaleX(var(--skip-p, 0));
  transform-origin: 0 50%;
}

@media (max-width: 600px) {
  .skip__key { display: none; }
  html .blackout .blackout__skip { font-size: 12px; padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html .blackout .blackout__skip { animation: none; translate: none; }
  .skip__fill, .skip__roll span { transition: none; }
}