:root {
    --deep-layer-navy: #071426;
    --embassy-blue: #3A86FF;
    --vellum-ice: #EAF6FF;
    --iris-violet: #8B5CF6;
    --wax-coral: #FF6B6B;
    --mint-attestation: #7DFFC4;
    --graphite-ink: #1D2636;
    --fraunces: 'Fraunces', serif;
    --commissioner: 'Commissioner', sans-serif;
    --mono: 'Azeret Mono', monospace;
    --progress: 0;
    --stage: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--vellum-ice);
    background:
        radial-gradient(circle at 72% 12%, rgba(58,134,255,.28), transparent 28vw),
        radial-gradient(circle at 24% 80%, rgba(139,92,246,.28), transparent 31vw),
        linear-gradient(135deg, #030814 0%, var(--deep-layer-navy) 48%, #0a1a31 100%);
    font-family: var(--commissioner);
    overflow-x: hidden;
}

button { font: inherit; }

.paper-dust {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background-image:
        radial-gradient(circle, rgba(234,246,255,.25) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(125,255,196,.18) 0 1px, transparent 1.6px);
    background-size: 90px 90px, 137px 137px;
    opacity: .32;
    transform: translateY(calc(var(--progress) * -120px));
}

.proof-crossing { position: relative; }

.chamber {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    padding: 9vh 7vw 9vh 13vw;
    display: grid;
    align-items: center;
    isolation: isolate;
}

.chamber::before {
    content: '';
    position: absolute;
    inset: 7vh 6vw;
    border: 1px solid rgba(234,246,255,.12);
    border-radius: 34px;
    background: linear-gradient(135deg, rgba(234,246,255,.06), rgba(234,246,255,.015));
    box-shadow: inset 0 0 60px rgba(234,246,255,.05), 0 30px 80px rgba(0,0,0,.25);
    transform: skewY(-2deg);
    z-index: -1;
}

.chamber::after {
    content: attr(data-stage);
    position: absolute;
    right: 4vw;
    bottom: 6vh;
    font-family: var(--mono);
    font-size: clamp(3rem, 13vw, 12rem);
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgba(234,246,255,.07);
    letter-spacing: -.08em;
    z-index: -1;
}

.passport-spread {
    width: min(86vw, 1180px);
    min-height: 54vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    perspective: 1600px;
    filter: drop-shadow(0 35px 70px rgba(0,0,0,.35));
    transform: rotate(-4deg) translateX(calc((var(--stage) - 3) * .35vw));
}

.offset-left { transform: rotate(-7deg) translateX(-4vw); }
.offset-right { transform: rotate(5deg) translateX(5vw); }
.final-spread { transform: rotate(-1deg) scale(1.05); }

.passport-page {
    position: relative;
    min-height: 54vh;
    padding: clamp(1.5rem, 4vw, 4.6rem);
    color: var(--graphite-ink);
    background:
        linear-gradient(90deg, rgba(29,38,54,.13), transparent 10%, transparent 90%, rgba(29,38,54,.08)),
        radial-gradient(circle at 20% 10%, rgba(58,134,255,.15), transparent 28%),
        repeating-linear-gradient(0deg, rgba(29,38,54,.025) 0 1px, transparent 1px 15px),
        var(--vellum-ice);
    border: 1px solid rgba(234,246,255,.9);
    box-shadow: inset 0 0 26px rgba(29,38,54,.14);
}

.title-page { border-radius: 32px 0 0 32px; }
.annotation-page { border-radius: 0 32px 32px 0; border-left: 2px solid rgba(29,38,54,.12); }

.annotation-page::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 6%;
    bottom: 6%;
    width: 22px;
    background: radial-gradient(circle, rgba(29,38,54,.22) 0 2px, transparent 2.5px) center/22px 28px;
}

.docket, .mono {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.7;
}

.docket { font-size: .78rem; color: var(--embassy-blue); margin: 0 0 1.3rem; }
.mono { font-size: clamp(.75rem, 1.2vw, .95rem); color: rgba(29,38,54,.78); }

h1, h2 {
    margin: 0;
    font-family: var(--fraunces);
    font-weight: 750;
    line-height: .9;
    color: var(--graphite-ink);
    letter-spacing: -.055em;
}

h1 { font-size: clamp(4.2rem, 13vw, 13rem); }
h2 { font-size: clamp(3.3rem, 9vw, 9rem); max-width: 9ch; }

.whisper {
    max-width: 34rem;
    font-size: clamp(1rem, 1.5vw, 1.34rem);
    line-height: 1.65;
    color: rgba(29,38,54,.78);
}

.seal {
    display: grid;
    place-items: center;
    width: 9.5rem;
    height: 9.5rem;
    margin: 2vh 0 4vh auto;
    border-radius: 50%;
    font-family: var(--fraunces);
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--graphite-ink);
    background: conic-gradient(from 0deg, currentColor 0 12deg, transparent 12deg 24deg), radial-gradient(circle, transparent 47%, currentColor 48% 52%, transparent 53%);
    opacity: .75;
    animation: sealRotate 18s linear infinite;
}

.seal-blue { color: var(--embassy-blue); }
.seal-mint { color: var(--mint-attestation); }
.seal-violet { color: var(--iris-violet); }
.seal-coral { color: var(--wax-coral); }
.large-seal { width: 12rem; height: 12rem; }

.border-slip {
    position: fixed;
    z-index: 20;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 7.4rem;
    padding: 1rem .75rem;
    border-radius: 999px;
    background: rgba(234,246,255,.88);
    color: var(--graphite-ink);
    box-shadow: 0 18px 45px rgba(0,0,0,.35), inset 0 0 20px rgba(58,134,255,.14);
    display: grid;
    gap: .5rem;
}

.slip-code {
    font-family: var(--mono);
    font-size: .58rem;
    text-align: center;
    color: var(--iris-violet);
    letter-spacing: .14em;
    margin-bottom: .25rem;
}

.border-slip button {
    border: 0;
    border-radius: 999px;
    padding: .55rem .25rem;
    background: radial-gradient(circle at left, rgba(29,38,54,.12) 0 2px, transparent 2.5px) left center/12px 12px repeat-y, transparent;
    color: rgba(29,38,54,.55);
    font-family: var(--mono);
    font-size: .58rem;
    cursor: pointer;
    transition: color .25s, background-color .25s, transform .25s;
}

.border-slip button.active {
    color: var(--deep-layer-navy);
    background-color: rgba(58,134,255,.18);
    transform: translateX(.25rem);
}

.causeway {
    position: fixed;
    z-index: 5;
    left: 8vw;
    bottom: 12vh;
    width: 86vw;
    height: 3px;
    transform: rotate(-32deg);
    transform-origin: left center;
    background: linear-gradient(90deg, transparent, var(--embassy-blue), var(--mint-attestation), transparent);
    box-shadow: 0 0 28px var(--embassy-blue);
    pointer-events: none;
}

.causeway span {
    position: absolute;
    left: calc(var(--progress) * 100%);
    top: -7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--mint-attestation);
    box-shadow: 0 0 24px var(--mint-attestation);
}

.living-folio {
    position: fixed;
    z-index: 12;
    left: calc(18vw + var(--progress) * 55vw);
    top: calc(70vh - var(--progress) * 47vh);
    width: clamp(190px, 19vw, 285px);
    aspect-ratio: 1.38;
    padding: 1rem;
    border-radius: 22px;
    color: var(--graphite-ink);
    background:
        linear-gradient(135deg, rgba(234,246,255,.95), rgba(234,246,255,.68)),
        radial-gradient(circle at 25% 20%, rgba(125,255,196,.55), transparent 34%);
    border: 1px solid rgba(234,246,255,.96);
    box-shadow: 0 22px 55px rgba(0,0,0,.42), inset 0 0 22px rgba(58,134,255,.18);
    transform: translate(-50%, -50%) rotate(calc(-12deg + var(--progress) * 24deg)) scale(calc(1 - var(--progress) * .05));
    transition: border-radius .45s ease;
}

.living-folio.stage-3 { border-radius: 999px; }
.living-folio.stage-4 { transform: translate(-50%, -50%) rotate(12deg) scale(.72); border-radius: 999px; }
.living-folio.stage-6 { border-radius: 22px; box-shadow: 0 0 65px rgba(125,255,196,.42), inset 0 0 22px rgba(58,134,255,.18); }

.folio-topline { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .62rem; color: var(--embassy-blue); }
.portrait { position: absolute; left: 1rem; bottom: 1rem; width: 34%; height: 48%; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, var(--iris-violet), var(--embassy-blue), var(--mint-attestation)); }
.portrait span { position: absolute; inset: 16% 22% 0; border-radius: 50% 50% 35% 35%; background: rgba(234,246,255,.7); filter: blur(.5px); animation: portraitShimmer 2.8s linear infinite; }
.folio-copy { position: absolute; right: 1rem; bottom: 1.2rem; width: 50%; display: grid; gap: .35rem; }
.folio-copy strong { font-family: var(--fraunces); font-size: 1rem; line-height: 1; }
.folio-copy em { font-family: var(--mono); font-size: .58rem; font-style: normal; color: rgba(29,38,54,.65); }
.micro-ring { position: absolute; right: .85rem; top: 2rem; width: 4.5rem; height: 4.5rem; border-radius: 50%; border: 2px dashed var(--wax-coral); animation: sealRotate 12s linear infinite reverse; }
.proof-tabs { position: absolute; right: -10px; top: 38%; display: grid; gap: .45rem; }
.proof-tabs span { width: 22px; height: 34px; border-radius: 0 8px 8px 0; background: var(--iris-violet); box-shadow: inset 4px 0 rgba(255,255,255,.28); }
.proof-tabs span:nth-child(2) { background: var(--embassy-blue); }
.proof-tabs span:nth-child(3) { background: var(--mint-attestation); }
.stamp-impression { position: absolute; inset: auto 1rem 1rem auto; border: 2px solid var(--wax-coral); color: var(--wax-coral); font-family: var(--mono); font-weight: 700; padding: .35rem; transform: rotate(-11deg) scale(0); opacity: 0; transition: .5s ease; }
.stamp-impression.show { transform: rotate(-11deg) scale(1); opacity: .8; }

.layer-city { position: absolute; left: 8vw; bottom: 4vh; width: 28vw; height: 18vh; opacity: .55; background: repeating-linear-gradient(90deg, rgba(234,246,255,.18) 0 22px, transparent 22px 32px); clip-path: polygon(0 100%,0 45%,8% 45%,8% 22%,18% 22%,18% 55%,28% 55%,28% 30%,40% 30%,40% 62%,52% 62%,52% 15%,67% 15%,67% 48%,80% 48%,80% 28%,100% 28%,100% 100%); }
.layer-city span, .floating-island span { position: absolute; font-family: var(--mono); font-size: .65rem; color: rgba(234,246,255,.7); }
.floating-island { position: absolute; right: 8vw; top: 8vh; width: 22vw; height: 13vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(125,255,196,.28), transparent 70%); box-shadow: 0 0 70px rgba(58,134,255,.35); }
.desk-lamp { position: absolute; left: 48vw; top: 5vh; width: 22vw; height: 42vh; background: radial-gradient(ellipse at top, rgba(234,246,255,.45), transparent 68%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); opacity: .55; }
.reflection-pool, .blue-void, .origami-void, .portable-aurora, .embassy-dome { position: absolute; inset: 12vh 9vw; border-radius: 50%; filter: blur(.2px); z-index: -1; }
.reflection-pool { background: radial-gradient(ellipse, rgba(58,134,255,.28), transparent 62%); transform: scaleY(.35) rotate(-8deg); }
.origami-void { background: conic-gradient(from 140deg, transparent, rgba(139,92,246,.32), transparent, rgba(234,246,255,.16), transparent); }
.blue-void { background: radial-gradient(ellipse, rgba(58,134,255,.38), transparent 62%); transform: rotate(-12deg); }
.embassy-dome { border: 2px solid rgba(125,255,196,.28); border-bottom: 0; border-radius: 50% 50% 0 0; transform: translateY(17vh); }
.portable-aurora { background: conic-gradient(from calc(var(--progress) * 360deg), rgba(125,255,196,.28), rgba(58,134,255,.24), rgba(139,92,246,.28), rgba(255,107,107,.14), rgba(125,255,196,.28)); }
.constellation { position: absolute; right: 12vw; top: 16vh; width: 30vw; height: 30vh; background: linear-gradient(35deg, transparent 49%, rgba(125,255,196,.28) 50%, transparent 51%); }
.constellation i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--mint-attestation); box-shadow: 0 0 18px var(--mint-attestation); }
.constellation i:nth-child(1) { left: 8%; top: 70%; } .constellation i:nth-child(2) { left: 25%; top: 30%; } .constellation i:nth-child(3) { left: 44%; top: 58%; } .constellation i:nth-child(4) { left: 62%; top: 20%; } .constellation i:nth-child(5) { left: 80%; top: 48%; } .constellation i:nth-child(6) { left: 90%; top: 12%; }
.fold-sheets { position: absolute; right: 12vw; bottom: 14vh; display: flex; transform: rotate(-18deg); }
.fold-sheets span { width: 10vw; height: 18vh; background: linear-gradient(135deg, rgba(234,246,255,.85), rgba(139,92,246,.25)); clip-path: polygon(0 0, 100% 20%, 70% 100%, 0 78%); margin-left: -4vw; box-shadow: 0 18px 35px rgba(0,0,0,.25); animation: foldPulse 3s ease-in-out infinite; }
.ferry { position: absolute; right: 18vw; top: 50%; width: 22vw; height: 8vh; border-radius: 999px; background: rgba(234,246,255,.2); border: 1px solid rgba(234,246,255,.6); box-shadow: 0 0 32px rgba(58,134,255,.55); animation: ferryGlide 5s ease-in-out infinite; }
.ferry span { display: inline-block; width: 18%; height: 42%; margin: 4% 3%; border-radius: 999px; background: var(--embassy-blue); box-shadow: 0 0 20px var(--embassy-blue); }
.gate-pylons { position: absolute; right: 12vw; inset-block: 15vh; width: 24vw; display: flex; justify-content: space-between; transform: rotate(-8deg); }
.gate-pylons span { width: 18%; background: repeating-linear-gradient(0deg, rgba(234,246,255,.7) 0 18px, rgba(58,134,255,.28) 18px 36px); border-radius: 14px; box-shadow: 0 0 26px rgba(58,134,255,.25); }
.lighthouses { position: absolute; right: 10vw; top: 18vh; display: flex; gap: 7vw; }
.lighthouses span { width: 1.3rem; height: 7rem; background: linear-gradient(var(--mint-attestation), var(--embassy-blue)); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); box-shadow: 0 -24px 45px var(--mint-attestation); }

@keyframes sealRotate { to { transform: rotate(360deg); } }
@keyframes portraitShimmer { 0%,100% { opacity: .55; transform: translateY(0); } 50% { opacity: .95; transform: translateY(-7px); } }
@keyframes foldPulse { 50% { transform: rotateY(45deg) translateY(-10px); } }
@keyframes ferryGlide { 0%,100% { transform: translateX(-6vw) rotate(-4deg); } 50% { transform: translateX(6vw) rotate(3deg); } }

@media (max-width: 800px) {
    .border-slip { display: none; }
    .chamber { padding: 8vh 5vw; }
    .passport-spread { width: 90vw; grid-template-columns: 1fr; transform: rotate(-2deg); }
    .title-page, .annotation-page { border-radius: 26px; min-height: auto; }
    .annotation-page::before { display: none; }
    .living-folio { width: 170px; left: calc(26vw + var(--progress) * 42vw); }
    h1 { font-size: clamp(3.8rem, 20vw, 6rem); }
    h2 { font-size: clamp(3rem, 16vw, 5rem); }
}