/* ============================================================
   undo.quest -- parallax storytelling journey, hourglass scroll
   Palette:
     #0d0d1a deep past, #2a1f3d present, #c9a84c rewind gold,
     #4a6fa5 memory blue, #e8e0d0 parchment, #6b6080 fade
   Fonts: Cormorant Garamond, Lora, Space Mono
   ============================================================ */

:root {
    --c-deep-past: #0d0d1a;
    --c-present: #2a1f3d;
    --c-rewind-gold: #c9a84c;
    --c-memory-blue: #4a6fa5;
    --c-parchment: #e8e0d0;
    --c-fade: #6b6080;

    --gold-soft: rgba(201, 168, 76, 0.55);
    --gold-veil: rgba(201, 168, 76, 0.18);
    --past-veil: rgba(13, 13, 26, 0.55);

    --f-display: "Cormorant Garamond", "Lora", Georgia, serif;
    --f-body: "Lora", Georgia, serif;
    --f-mono: "Space Mono", "JetBrains Mono", monospace;

    --rail-x: clamp(1rem, 2.4vw, 2.5rem);
    --mast-h: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%;
    overflow-x: hidden;
}

html { scroll-behavior: smooth; }

body {
    background: var(--c-deep-past);
    color: var(--c-parchment);
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.8;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    background-image:
        radial-gradient(1200px 700px at 50% -10%, rgba(74, 111, 165, 0.18), transparent 60%),
        radial-gradient(900px 600px at 50% 120%, rgba(42, 31, 61, 0.85), transparent 60%);
    background-attachment: fixed;
}

/* ---------- film grain overlay ---------- */
.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    mix-blend-mode: overlay;
    opacity: 0.18;
    background-image:
        radial-gradient(rgba(232, 224, 208, 0.06) 1px, transparent 1px),
        radial-gradient(rgba(13, 13, 26, 0.5) 1px, transparent 1px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 1px 2px;
}

/* ---------- sand particles ---------- */
.sand-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.sand-grain {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--c-rewind-gold);
    opacity: 0.2;
    box-shadow: 0 0 4px rgba(201, 168, 76, 0.35);
    will-change: transform, opacity;
    animation: sand-drift linear infinite;
}
@keyframes sand-drift {
    0%   { transform: translate3d(0, -10vh, 0); opacity: 0; }
    10%  { opacity: 0.22; }
    90%  { opacity: 0.18; }
    100% { transform: translate3d(0, 110vh, 0); opacity: 0; }
}

/* ---------- masthead ---------- */
.page-mast {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mast-h);
    z-index: 150;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: linear-gradient(180deg, rgba(13, 13, 26, 0.78), rgba(13, 13, 26, 0.0));
    border-bottom: 1px solid rgba(232, 224, 208, 0.06);
}
.mast-inner {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 3vw, 2.25rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.mast-mark {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.32em;
    color: var(--c-rewind-gold);
}
.mast-meta {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-fade);
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mast-clock {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--c-rewind-gold);
}

/* ---------- rewind rail (reverse progress) ---------- */
.rewind-rail {
    position: fixed;
    left: var(--rail-x);
    top: calc(var(--mast-h) + 4vh);
    bottom: 12vh;
    width: 14px;
    z-index: 140;
    pointer-events: none;
}
.rail-track {
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(232, 224, 208, 0.08);
}
.rail-fill {
    position: absolute;
    left: 6px;
    bottom: 0;
    width: 2px;
    height: 0%;
    background: var(--c-rewind-gold);
    box-shadow: 0 0 12px rgba(201, 168, 76, 0.45), 0 0 2px rgba(201, 168, 76, 0.9);
    transform-origin: bottom;
    transition: height 0.18s linear;
}
.rail-marker {
    position: absolute;
    left: 0;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rail-marker::before {
    content: "";
    position: absolute;
    left: 5px;
    width: 4px;
    height: 4px;
    background: var(--c-rewind-gold);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(201, 168, 76, 0.7);
}
.rail-marker-top { top: -8px; }
.rail-marker-bottom { bottom: -8px; }
.rail-marker-label {
    position: absolute;
    left: 22px;
    font-family: var(--f-mono);
    font-size: 0.6rem;
    letter-spacing: 0.32em;
    color: var(--c-fade);
    white-space: nowrap;
    text-transform: uppercase;
}
.rail-marker-bottom .rail-marker-label { color: var(--c-rewind-gold); }
.rail-percent {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    font-family: var(--f-mono);
    font-size: 0.62rem;
    letter-spacing: 0.32em;
    color: var(--c-rewind-gold);
    white-space: nowrap;
    text-transform: uppercase;
}

/* ---------- timeline / sections ---------- */
.timeline {
    position: relative;
    z-index: 5;
    padding-top: var(--mast-h);
}

.layer {
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: clamp(5rem, 10vh, 9rem) clamp(1.5rem, 5vw, 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    transition: filter 600ms ease;
}

/* Each layer peels off the one beneath via z-index + shadow */
.layer-1 { --section-index: 0; z-index: 16; }
.layer-2 { --section-index: 1; z-index: 15; }
.layer-3 { --section-index: 2; z-index: 14; }
.layer-4 { --section-index: 3; z-index: 13; }
.layer-5 { --section-index: 4; z-index: 12; }
.layer-6 { --section-index: 5; z-index: 11; }

/* Layer backgrounds: present at top, threading down to deep past at the origin */
.layer-1 {
    background: linear-gradient(180deg, #2a1f3d 0%, #221934 60%, #1a142a 100%);
    box-shadow: 0 -10px 30px rgba(13, 13, 26, 0.0);
}
.layer-2 {
    background: linear-gradient(180deg, #221934 0%, #1c1530 55%, #161028 100%);
    box-shadow: 0 -14px 40px rgba(13, 13, 26, 0.55);
}
.layer-3 {
    background: linear-gradient(180deg, #161028 0%, #110c22 50%, #0f0a1f 100%);
    box-shadow: 0 -18px 50px rgba(13, 13, 26, 0.65);
}
.layer-4 {
    background: linear-gradient(180deg, #0f0a1f 0%, #110c22 50%, #14102a 100%);
    box-shadow: 0 -18px 50px rgba(13, 13, 26, 0.65);
}
.layer-5 {
    background: linear-gradient(180deg, #14102a 0%, #110d24 55%, #0f0c1f 100%);
    box-shadow: 0 -14px 40px rgba(13, 13, 26, 0.55);
}
.layer-6 {
    background:
        radial-gradient(700px 500px at 50% 60%, rgba(74, 111, 165, 0.10), transparent 70%),
        linear-gradient(180deg, #0f0c1f 0%, #0d0d1a 60%, #08080f 100%);
    box-shadow: 0 -10px 30px rgba(13, 13, 26, 0.45);
}

/* gold edge thread at the top of each layer (the unspooling thread of reversal) */
.layer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(70%, 720px);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gold-soft) 50%, transparent 100%);
    opacity: 0.7;
    pointer-events: none;
}
.layer-1::before { opacity: 0; }

/* faint scattered sand inside layer */
.layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 22%, var(--gold-veil) 0 1.5px, transparent 2px),
        radial-gradient(circle at 78% 18%, var(--gold-veil) 0 1.2px, transparent 2px),
        radial-gradient(circle at 30% 78%, var(--gold-veil) 0 1.4px, transparent 2px),
        radial-gradient(circle at 88% 64%, var(--gold-veil) 0 1.2px, transparent 2px),
        radial-gradient(circle at 55% 92%, var(--gold-veil) 0 1.6px, transparent 2px);
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
}

/* ---------- hourglass narrowing per section ---------- */
.layer-frame {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    transition: max-width 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
    padding-left: clamp(0rem, 2vw, 1.5rem);
    padding-right: clamp(0rem, 2vw, 1.5rem);
}
.layer-1 .layer-frame { max-width: 1000px; }
.layer-2 .layer-frame { max-width: 700px; }
.layer-3 .layer-frame { max-width: 480px; }
.layer-4 .layer-frame { max-width: 480px; }
.layer-5 .layer-frame { max-width: 700px; }
.layer-6 .layer-frame { max-width: 1000px; }

.layer-frame-narrow {
    text-align: center;
}

/* ---------- stamps / chapter labels ---------- */
.layer-stamp {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-rewind-gold);
    margin-bottom: clamp(1.75rem, 4vh, 3rem);
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(201, 168, 76, 0.18);
    flex-wrap: wrap;
}
.layer-frame-narrow .layer-stamp {
    justify-content: center;
}
.stamp-tick {
    color: var(--c-rewind-gold);
    font-size: 0.55rem;
    transform: translateY(-1px);
}
.stamp-time {
    color: var(--c-rewind-gold);
}
.stamp-label {
    color: var(--c-fade);
    letter-spacing: 0.34em;
}

/* ---------- typography ---------- */
.display {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.12;
    letter-spacing: 0.04em;
    color: var(--c-parchment);
    margin-bottom: clamp(1.5rem, 3.5vh, 2.5rem);
}
.display em {
    font-style: italic;
    font-weight: 500;
    color: var(--c-rewind-gold);
}
.display-hero {
    font-size: clamp(2.4rem, 5.4vw, 4.4rem);
    line-height: 1.08;
}
.display-pinch {
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    line-height: 1.18;
    letter-spacing: 0.05em;
}

.prose {
    font-family: var(--f-body);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--c-parchment);
    max-width: 62ch;
    margin-bottom: 1.4rem;
}
.layer-frame-narrow .prose {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
.prose-lead {
    color: var(--c-parchment);
    font-size: 1.125rem;
}
.prose-quiet {
    color: var(--c-fade);
    font-style: italic;
}
.prose-pinch {
    font-size: 1rem;
    color: var(--c-fade);
    text-align: center;
    max-width: 42ch;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- hero meta + scroll cue ---------- */
.hero-meta {
    margin-top: 2.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.meta-key { color: var(--c-fade); }
.meta-val { color: var(--c-parchment); }
.meta-sep { color: rgba(232, 224, 208, 0.25); }

.scroll-cue {
    margin-top: clamp(2.5rem, 6vh, 4rem);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.cue-line {
    width: 48px;
    height: 1px;
    background: var(--c-rewind-gold);
    position: relative;
    overflow: hidden;
}
.cue-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(232, 224, 208, 0.85), transparent);
    transform: translateX(-100%);
    animation: cue-sweep 2.4s ease-in-out infinite;
}
@keyframes cue-sweep {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}
.cue-text {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--c-fade);
}

/* ---------- single thread row ---------- */
.thread-row {
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.thread-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-rewind-gold) 30%, var(--c-rewind-gold) 70%, transparent);
    position: relative;
}
.thread-line::before,
.thread-line::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--c-rewind-gold);
    box-shadow: 0 0 6px rgba(201, 168, 76, 0.6);
    transform: translateY(-50%);
}
.thread-line::before { left: 0; }
.thread-line::after { right: 0; }
.thread-label {
    font-family: var(--f-mono);
    font-size: 0.66rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-fade);
    white-space: nowrap;
}

/* ---------- pinch grain mark ---------- */
.grain-mark {
    margin: 2.5rem auto 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    position: relative;
}
.grain-mark::before,
.grain-mark::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--gold-soft), transparent);
}
.grain-mark::before { top: 0; height: 32px; transform: translateX(-50%); }
.grain-mark::after  { bottom: 0; height: 32px; transform: translateX(-50%); }
.grain-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-rewind-gold);
    box-shadow:
        0 0 0 2px rgba(201, 168, 76, 0.18),
        0 0 0 8px rgba(201, 168, 76, 0.08),
        0 0 18px rgba(201, 168, 76, 0.55);
    animation: grain-pulse 3.4s ease-in-out infinite;
}
@keyframes grain-pulse {
    0%, 100% { transform: scale(1); opacity: 0.95; }
    50%      { transform: scale(1.25); opacity: 1; }
}

/* ---------- forks (choice section) ---------- */
.forks {
    list-style: none;
    margin: 2.25rem auto 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 32ch;
}
.fork {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(232, 224, 208, 0.08);
    background: rgba(13, 13, 26, 0.4);
}
.fork-mark {
    color: var(--c-rewind-gold);
    font-size: 1rem;
}
.fork-text { color: var(--c-parchment); }
.fork-taken {
    border-color: rgba(201, 168, 76, 0.35);
    color: var(--c-rewind-gold);
}
.fork-taken .fork-text { color: var(--c-rewind-gold); }
.fork-other {
    border-color: rgba(74, 111, 165, 0.35);
    opacity: 0.78;
}
.fork-other .fork-text { color: var(--c-memory-blue); }

/* ---------- memory cards ---------- */
.memory-grid {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}
.memory-card {
    border-left: 1px solid rgba(201, 168, 76, 0.35);
    padding: 0.6rem 1rem 0.8rem;
    background: linear-gradient(180deg, rgba(74, 111, 165, 0.06), rgba(13, 13, 26, 0.0));
}
.memory-time {
    display: block;
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    color: var(--c-rewind-gold);
    margin-bottom: 0.5rem;
}
.memory-line {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--c-parchment);
}

/* ---------- origin seal ---------- */
.origin-seal {
    margin-top: clamp(2.5rem, 6vh, 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.seal-ring {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px solid rgba(201, 168, 76, 0.45);
    box-shadow:
        inset 0 0 18px rgba(201, 168, 76, 0.10),
        0 0 28px rgba(201, 168, 76, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}
.seal-ring::before,
.seal-ring::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(201, 168, 76, 0.28);
    border-radius: 50%;
    animation: seal-rotate 22s linear infinite;
}
.seal-ring::after {
    inset: 18px;
    border-style: dotted;
    border-color: rgba(74, 111, 165, 0.32);
    animation-direction: reverse;
    animation-duration: 32s;
}
@keyframes seal-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.seal-rune {
    position: relative;
    z-index: 2;
    color: var(--c-rewind-gold);
    font-size: 1.6rem;
    text-shadow: 0 0 10px rgba(201, 168, 76, 0.55);
}
.seal-text {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--c-fade);
}

/* ---------- footer ---------- */
.page-foot {
    position: relative;
    z-index: 20;
    background: #08080f;
    border-top: 1px solid rgba(232, 224, 208, 0.06);
    padding: 2rem 1.5rem;
}
.foot-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.foot-mark {
    font-family: var(--f-display);
    font-weight: 600;
    letter-spacing: 0.24em;
    color: var(--c-rewind-gold);
    font-size: 0.95rem;
}
.foot-line {
    font-family: var(--f-body);
    font-style: italic;
    color: var(--c-fade);
    font-size: 0.92rem;
}
.foot-stamp {
    font-family: var(--f-mono);
    font-size: 0.65rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--c-fade);
}

/* ---------- reveal-on-enter ---------- */
.layer-frame > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 900ms ease, transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.layer.in-view .layer-frame > * {
    opacity: 1;
    transform: translateY(0);
}
.layer.in-view .layer-frame > *:nth-child(1) { transition-delay: 0ms; }
.layer.in-view .layer-frame > *:nth-child(2) { transition-delay: 120ms; }
.layer.in-view .layer-frame > *:nth-child(3) { transition-delay: 240ms; }
.layer.in-view .layer-frame > *:nth-child(4) { transition-delay: 360ms; }
.layer.in-view .layer-frame > *:nth-child(5) { transition-delay: 480ms; }
.layer.in-view .layer-frame > *:nth-child(6) { transition-delay: 600ms; }

/* dimming far layers (parallax depth feel) */
.layer.is-far { filter: brightness(0.78) saturate(0.85); }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
    :root { --rail-x: 0.85rem; }
    .mast-meta { display: none; }
    .layer { padding: 6rem 1.25rem 5rem; }
    .layer-1 .layer-frame { max-width: 100%; }
    .layer-2 .layer-frame { max-width: 90%; }
    .layer-3 .layer-frame { max-width: 78%; }
    .layer-4 .layer-frame { max-width: 78%; }
    .layer-5 .layer-frame { max-width: 90%; }
    .layer-6 .layer-frame { max-width: 100%; }
    .display-hero { font-size: clamp(2rem, 7vw, 2.8rem); }
    .rail-marker-label { font-size: 0.55rem; letter-spacing: 0.24em; }
    .rail-percent { font-size: 0.55rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sand-field { display: none; }
    .cue-line::after,
    .grain-dot,
    .seal-ring::before,
    .seal-ring::after { animation: none; }
    .layer-frame > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .layer-frame { transition: none; }
    .layer.is-far { filter: none; }
}