:root {
  --obsidian: #050403;
  --lacquer: #11100D;
  --ivory: #F4E6C3;
  --gold: #D6A13A;
  --antique: #8B6424;
  --oxblood: #3A0D0A;
  --smoke: #7C7568;
  --inter-design-token: "Inter**";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--ivory);
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(214, 161, 58, .14), transparent 34%),
    radial-gradient(circle at 86% 64%, rgba(58, 13, 10, .34), transparent 32%),
    linear-gradient(115deg, transparent 0 46%, rgba(139, 100, 36, .08) 47%, transparent 49% 100%);
  z-index: 1;
}

.film-grain {
  position: fixed;
  inset: 0;
  opacity: .16;
  pointer-events: none;
  z-index: 4;
  background-image:
    repeating-radial-gradient(circle at 13% 27%, rgba(244,230,195,.34) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px);
  mix-blend-mode: soft-light;
}

.progress-frame {
  position: fixed;
  inset: 18px;
  border: 1px solid rgba(214, 161, 58, .45);
  clip-path: polygon(0 0, var(--frame-x, 0%) 0, var(--frame-x, 0%) 100%, 0 100%);
  z-index: 6;
  pointer-events: none;
  box-shadow: inset 0 0 18px rgba(214, 161, 58, .12);
}

.corner-code {
  position: fixed;
  z-index: 7;
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: .34em;
  color: var(--gold);
  opacity: .72;
}
.top-left { top: 28px; left: 32px; }
.top-right { top: 28px; right: 32px; }
.bottom-left { bottom: 28px; left: 32px; }
.bottom-right { bottom: 28px; right: 32px; }

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  overflow: hidden;
  isolation: isolate;
  background: var(--obsidian);
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(132deg, transparent 0 23%, rgba(214,161,58,.06) 23.2% 23.7%, transparent 24% 100%),
    linear-gradient(46deg, transparent 0 68%, rgba(124,117,104,.06) 68.2% 69%, transparent 69.4% 100%);
  z-index: -1;
}

.hero-scene {
  place-items: center;
  background:
    linear-gradient(180deg, #050403 0%, #11100D 52%, #050403 100%);
}

.letterbox {
  position: absolute;
  left: 0;
  right: 0;
  height: 10vh;
  background: #050403;
  z-index: 2;
}
.letterbox.top { top: 0; }
.letterbox.bottom { bottom: 0; }

.scan-stage {
  position: absolute;
  width: min(62vw, 620px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 32px rgba(214, 161, 58, .22));
}

.sigil { width: 100%; height: 100%; fill: none; }
.sigil-wire path {
  stroke: var(--smoke);
  stroke-width: 2.2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 980;
  stroke-dashoffset: 980;
  animation: drawSigil 2.8s ease forwards, wireGold 3s ease forwards;
}
.sigil-wire .delayed { animation-delay: .35s; }

.skeleton-band {
  position: absolute;
  width: 130%;
  height: 18%;
  background: linear-gradient(90deg, transparent, rgba(124,117,104,.12), rgba(214,161,58,.34), rgba(244,230,195,.22), transparent);
  transform: rotate(-21deg) translateX(-120%);
  filter: blur(4px);
  animation: scanBand 3.2s cubic-bezier(.7,0,.2,1) forwards;
}
.band-two { animation-delay: .8s; opacity: .55; }

.diagonal-slash {
  position: absolute;
  width: 2px;
  height: 145vh;
  background: linear-gradient(180deg, transparent, var(--gold), var(--ivory), var(--antique), transparent);
  transform: rotate(26deg) scaleY(0);
  box-shadow: 0 0 24px rgba(214,161,58,.8);
  animation: slashOpen 1.5s 2.15s cubic-bezier(.8,0,.16,1) forwards;
  z-index: 3;
}

.hero-title-wrap {
  grid-column: 1 / -1;
  text-align: center;
  z-index: 5;
  opacity: 0;
  transform: translateY(28px) scale(.98);
  animation: titleRise 1.2s 2.75s ease forwards;
}

.ceremony-label, .chapter {
  margin: 0 0 18px;
  font-family: "Cinzel", serif;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .36em;
  font-size: clamp(10px, 1.1vw, 14px);
}

h1, h2, .scene-number {
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  margin: 0;
}

h1 {
  font-size: clamp(64px, 15vw, 220px);
  line-height: .8;
  color: var(--ivory);
  text-shadow: 0 0 18px rgba(214,161,58,.28), 0 18px 60px #000;
}

.subtitle-strip {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 24px;
  color: rgba(244,230,195,.78);
  background: linear-gradient(90deg, transparent, rgba(17,16,13,.88), rgba(58,13,10,.42), transparent);
  border-top: 1px solid rgba(214,161,58,.36);
  border-bottom: 1px solid rgba(139,100,36,.32);
  transform: skewX(-18deg);
  letter-spacing: .18em;
  font-size: 12px;
  text-transform: uppercase;
}

.threshold-scene {
  background: radial-gradient(circle at 72% 28%, rgba(139,100,36,.18), transparent 24%), var(--obsidian);
}

.scene-number {
  position: absolute;
  top: 12vh;
  left: 7vw;
  font-size: clamp(72px, 13vw, 190px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(214,161,58,.42);
  opacity: .75;
}

.gold-thread {
  position: absolute;
  inset: -20vh auto auto 44vw;
  height: 145vh;
  width: 1px;
  background: var(--gold);
  transform: rotate(39deg);
  box-shadow: 0 0 22px rgba(214,161,58,.6);
}

.plan-map {
  grid-column: 2 / 7;
  align-self: center;
  height: 58vh;
  position: relative;
  clip-path: polygon(14% 0, 100% 10%, 78% 100%, 0 82%);
  background: linear-gradient(135deg, rgba(17,16,13,.92), rgba(58,13,10,.24));
  border: 1px solid rgba(214,161,58,.34);
}
.plan-map span {
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(139,100,36,.5);
  transform: rotate(calc(var(--i, 1) * 13deg));
}
.plan-map span:nth-child(1) { --i: 1; }
.plan-map span:nth-child(2) { --i: -1; inset: 18%; }
.plan-map span:nth-child(3) { --i: 2; inset: 28%; }
.plan-map span:nth-child(4) { --i: -2; inset: 38%; }
.map-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Cinzel", serif;
  font-size: 110px;
  color: rgba(214,161,58,.42);
}

.text-blade {
  grid-column: 7 / 12;
  align-self: center;
  padding: 42px;
  background: linear-gradient(110deg, rgba(17,16,13,.95), rgba(17,16,13,.28));
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  border-left: 1px solid var(--gold);
}
.text-blade h2, .final-card h2 {
  font-size: clamp(34px, 5.4vw, 84px);
  line-height: .96;
}
.text-blade p:last-child, .final-card p:last-child {
  color: var(--smoke);
  letter-spacing: .08em;
  line-height: 1.8;
  max-width: 520px;
}

.corridor-scene {
  place-items: center;
  perspective: 900px;
  background: linear-gradient(180deg, #050403, #11100D 50%, #050403);
}
.corridor { grid-column: 1 / -1; position: absolute; inset: 0; transform-style: preserve-3d; }
.banner {
  position: absolute;
  top: -10vh;
  bottom: -10vh;
  width: 22vw;
  background: linear-gradient(100deg, rgba(58,13,10,.78), rgba(17,16,13,.94) 50%, rgba(139,100,36,.22));
  border-right: 1px solid rgba(214,161,58,.42);
  clip-path: polygon(0 0, 100% 8%, 78% 100%, 0 92%);
}
.banner-a { left: 10vw; transform: skewX(-15deg); }
.banner-b { left: 39vw; transform: skewX(-9deg) scale(.78); opacity: .82; }
.banner-c { right: 9vw; transform: skewX(16deg); }
.vanish-line {
  position: absolute;
  left: 50%; top: 10vh; bottom: 10vh;
  width: 1px;
  background: linear-gradient(transparent, var(--gold), transparent);
  box-shadow: 0 0 40px rgba(214,161,58,.5);
}
.corridor-copy { grid-column: 3 / 11; align-self: end; margin-bottom: 16vh; z-index: 2; }

.guardian-scene { background: radial-gradient(circle at 50% 45%, rgba(124,117,104,.12), transparent 34%), var(--obsidian); }
.guardian-wrap { grid-column: 2 / 7; align-self: center; justify-self: center; width: min(54vw, 520px); position: relative; transition: transform .25s ease; }
.guardian { width: 100%; filter: drop-shadow(0 35px 40px #000); }
.mask-shadow { fill: #050403; stroke: rgba(214,161,58,.34); stroke-width: 2; }
.face.left { fill: #11100D; }
.face.right { fill: #3A0D0A; }
.gold-edge { fill: rgba(214,161,58,.78); stroke: #F4E6C3; stroke-width: 1; }
.leaf-crack { fill: none; stroke: #8B6424; stroke-width: 3; stroke-linecap: square; }
.engraving-lines { position: absolute; inset: 72% 8% auto; display: flex; justify-content: space-between; font-family: "Cinzel", serif; color: var(--gold); letter-spacing: .24em; font-size: 10px; text-transform: uppercase; opacity: 0; transform: translateY(20px); transition: .45s ease; }
.guardian-wrap:hover .engraving-lines { opacity: 1; transform: translateY(0); }
.guardian-copy { grid-column: 7 / 12; }

.finale-scene { place-items: center; background: radial-gradient(circle at center, rgba(214,161,58,.16), transparent 28%), #050403; }
.giant-shadow { position: absolute; font-family: "Jost", sans-serif; font-size: 78vw; line-height: 1; color: rgba(17,16,13,.92); transform: rotate(-12deg); }
.sigil-final { position: absolute; width: min(48vw, 520px); opacity: .9; }
.sigil-final path { stroke: var(--gold); stroke-width: 5; filter: drop-shadow(0 0 14px rgba(214,161,58,.5)); }
.final-card { grid-column: 4 / 10; text-align: center; z-index: 2; padding: 48px; background: rgba(5,4,3,.64); border: 1px solid rgba(214,161,58,.42); clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }
.final-card h2 { color: var(--ivory); letter-spacing: .22em; }

.reveal { opacity: 0; transform: translateY(48px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

@keyframes drawSigil { to { stroke-dashoffset: 0; } }
@keyframes wireGold { 75%, 100% { stroke: var(--gold); } }
@keyframes scanBand { to { transform: rotate(-21deg) translateX(120%); } }
@keyframes slashOpen { 0% { transform: rotate(26deg) scaleY(0); } 58% { transform: rotate(26deg) scaleY(1); } 100% { transform: rotate(26deg) scaleY(.68) translateX(21vw); } }
@keyframes titleRise { to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 800px) {
  .scene { grid-template-columns: repeat(6, 1fr); padding: 80px 24px; }
  .plan-map, .guardian-wrap { grid-column: 1 / -1; width: 100%; height: 42vh; }
  .text-blade, .guardian-copy, .final-card { grid-column: 1 / -1; }
  .corner-code { display: none; }
  .sigil-final { width: 78vw; }
}