/* ============================================================
   sora.quest — split-screen avant-garde geometry
   palette : #FFF8F0 #F5E6D8 #D4A0A0 #B8A9C9 #E8D5C0 #5B4A6F #3D3347 #F0C9A6
   fonts   : Josefin Sans (display), Jost (body), DM Mono (data)
============================================================ */

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

:root {
    --c-cream: #FFF8F0;
    --c-blush: #F5E6D8;
    --c-rose: #D4A0A0;
    --c-lavender: #B8A9C9;
    --c-taupe: #E8D5C0;
    --c-plum: #5B4A6F;
    --c-charcoal: #3D3347;
    --c-peach: #F0C9A6;

    --f-display: 'Josefin Sans', 'Futura', 'Inter', sans-serif;
    --f-body: 'Jost', 'Inter', sans-serif;
    --f-mono: 'DM Mono', 'Space Mono', monospace;

    --pad: clamp(2rem, 5vw, 4.5rem);
}

html, body {
    background: var(--c-cream);
    color: var(--c-charcoal);
    font-family: var(--f-body);
    font-weight: 300;
    line-height: 1.72;
    letter-spacing: 0.02em;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    position: relative;
}

/* ======================================================
   Persistent SVG split-line overlay
   ====================================================== */
.split-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 5;
    transition: transform 800ms cubic-bezier(.65,0,.35,1);
}
.split-overlay #splitLine {
    transition:
        x1 900ms cubic-bezier(.65,0,.35,1),
        y1 900ms cubic-bezier(.65,0,.35,1),
        x2 900ms cubic-bezier(.65,0,.35,1),
        y2 900ms cubic-bezier(.65,0,.35,1),
        stroke-dashoffset 800ms ease-out;
    filter: drop-shadow(0 0 8px rgba(212,160,160,0.25));
    animation: splitBreathe 4s ease-in-out infinite;
}
@keyframes splitBreathe {
    0%, 100% { stroke-width: 3; opacity: 0.85; }
    50%      { stroke-width: 4.2; opacity: 1; }
}

/* ======================================================
   Grid substrate hairlines
   ====================================================== */
.grid-substrate {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    pointer-events: none;
    z-index: 1;
    opacity: 0.3;
}
.grid-substrate span {
    border-right: 1px solid var(--c-rose);
    height: 100%;
}
.grid-substrate span:last-child { border-right: none; }

/* ======================================================
   Floating geometric nav
   ====================================================== */
.geo-nav {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    z-index: 50;
}
.geo-nav__btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--c-lavender);
    cursor: pointer;
    padding: 2px;
    transition: color 400ms ease, transform 400ms ease;
}
.geo-nav__btn svg { width: 100%; height: 100%; display: block; }
.geo-nav__btn.active {
    color: var(--c-rose);
    transform: scale(1.18);
}
.geo-nav__btn.active svg circle,
.geo-nav__btn.active svg rect,
.geo-nav__btn.active svg polygon { fill: var(--c-rose); stroke: var(--c-rose); }
.geo-nav__btn:hover { color: var(--c-charcoal); }

/* ======================================================
   Stage / sections
   ====================================================== */
.stage { position: relative; z-index: 2; }

.sora-sec {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

.zone {
    position: relative;
    padding: var(--pad);
    overflow: hidden;
}

.zone--a {
    background: linear-gradient(160deg, var(--c-cream) 0%, var(--c-blush) 100%);
    color: var(--c-charcoal);
}
.zone--b {
    background: linear-gradient(220deg, var(--c-taupe) 0%, var(--c-rose) 100%);
    color: var(--c-plum);
}

.zone__inner {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.4rem;
    z-index: 2;
}
.zone__inner--full { justify-content: flex-start; padding-top: 2rem; }

/* === Differential parallax — Zone B scrolls slower === */
.sora-sec .zone--b {
    will-change: transform;
}

/* ======================================================
   Section split orientation overrides
   The persistent SVG .split-overlay handles the visible split.
   For section-scoped variations the data-split attr drives subtle rotation.
   ====================================================== */
.sora-sec[data-split="vertical"] { /* zones already at 50/50 */ }

.sora-sec[data-split="diagonal-up"] { grid-template-columns: 1fr 1fr; }
.sora-sec[data-split="diagonal-up"] .zone--a { order: 2; }
.sora-sec[data-split="diagonal-up"] .zone--b { order: 1; }

.sora-sec[data-split="horizontal"] {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
}
.sora-sec[data-split="grid"] {
    grid-template-columns: 1fr;
}

/* ======================================================
   Typography
   ====================================================== */
.meta-tag {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-rose);
    margin-bottom: 1rem;
}

.coord {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--c-plum);
    opacity: 0.72;
}

.body-passage {
    font-family: var(--f-body);
    font-weight: 300;
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    line-height: 1.72;
    color: var(--c-plum);
    max-width: 38ch;
}
.center-passage { margin: 0 auto; max-width: 58ch; text-align: center; }

.passage-emph {
    font-family: var(--f-display);
    font-weight: 600;
    color: var(--c-rose);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.98em;
}

.section-h {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(2rem, 4.6vw, 3.6rem);
    color: var(--c-charcoal);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 0.6rem;
}

/* === Display mark for Section I === */
.display-mark {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.6rem 0 1.2rem;
}
.display-mark__top {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(3rem, 8vw, 6.5rem);
    letter-spacing: 0.15em;
    color: var(--c-charcoal);
    line-height: 1;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 900ms cubic-bezier(.65,0,.35,1) 400ms forwards;
}
.display-mark__bottom {
    position: relative;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 3.2rem);
    letter-spacing: 0.18em;
    color: var(--c-plum);
    line-height: 1;
    align-self: flex-start;
    padding-bottom: 8px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 900ms cubic-bezier(.65,0,.35,1) 700ms forwards;
}
.underline-draw {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: var(--c-rose);
    animation: drawUnderline 700ms cubic-bezier(.65,0,.35,1) 1300ms forwards;
}
@keyframes drawUnderline { to { width: 100%; } }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

.zone__caption {
    max-width: 36ch;
    font-size: clamp(0.9rem, 1.4vw, 1.05rem);
    color: var(--c-plum);
    opacity: 0.86;
    margin-bottom: 0.6rem;
}

/* ======================================================
   Section I — Constellation
   ====================================================== */
.constellation {
    position: relative;
    width: min(620px, 92%);
    aspect-ratio: 1;
    margin: 0 auto;
    animation: rotate60 60s linear infinite;
}
@keyframes rotate60 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.con-icon {
    position: absolute;
    left: var(--cx);
    top: var(--cy);
    width: calc(36px * var(--scale));
    height: calc(36px * var(--scale));
    color: var(--c-plum);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: conIconIn 600ms ease-out forwards, conPulse 4s ease-in-out infinite;
    animation-delay: var(--delay), calc(var(--delay) + 1200ms);
}
.con-icon svg { width: 100%; height: 100%; display: block; }
@keyframes conIconIn { to { opacity: 1; } }
@keyframes conPulse {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

/* === Decorative rotating square === */
.rot-square {
    position: absolute;
    border: 1px solid var(--c-lavender);
    pointer-events: none;
    animation: spinSlow 50s linear infinite;
    z-index: 0;
}
.rot-square--lg {
    width: 200px;
    height: 200px;
    right: -80px;
    bottom: -80px;
}
@keyframes spinSlow {
    from { transform: rotate(45deg); }
    to   { transform: rotate(405deg); }
}

/* ======================================================
   Section II — Instruments
   ====================================================== */
.instrument-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 1rem;
}
.instrument {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    color: var(--c-plum);
    border: 1px solid var(--c-lavender);
    background: rgba(255, 248, 240, 0.4);
    cursor: pointer;
    overflow: hidden;
    transition: color 300ms ease, background 300ms ease, transform 300ms ease;
}
.instrument::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 0;
    padding: 2px;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        transparent 270deg,
        var(--c-peach) 305deg,
        var(--c-rose) 340deg,
        transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    animation: chase 4s linear infinite;
    opacity: 0.85;
}
@keyframes chase {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.instrument:hover {
    color: var(--c-charcoal);
    background: rgba(240, 201, 166, 0.25);
    transform: translateY(-2px);
}
.instrument__icon {
    width: 40px;
    height: 40px;
    color: inherit;
    display: block;
    flex-shrink: 0;
}
.instrument__icon svg { width: 100%; height: 100%; display: block; }
.instrument__label {
    font-family: var(--f-body);
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.instrument-stage {
    align-items: center;
    text-align: center;
}

.instrument-large {
    position: relative;
    width: 240px;
    height: 240px;
    color: var(--c-plum);
    margin: 0 auto 1.4rem;
}
.instrument-large__svg {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
}
.radial-pulse {
    position: absolute;
    inset: 50%;
    width: 0;
    height: 0;
    border: 1px solid var(--c-rose);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: radial 2.4s ease-out infinite;
}
.radial-pulse:nth-child(1) { animation-delay: 0ms;    }
.radial-pulse:nth-child(2) { animation-delay: 600ms;  }
.radial-pulse:nth-child(3) { animation-delay: 1200ms; }
.radial-pulse:nth-child(4) { animation-delay: 1800ms; }
@keyframes radial {
    0%   { width: 0;     height: 0;     opacity: 0.7; }
    80%  { opacity: 0.05; }
    100% { width: 320px; height: 320px; opacity: 0; }
}

/* ======================================================
   Section III — Star field
   ====================================================== */
.star-field {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 70vh;
}
.star-shape {
    position: absolute;
    width: var(--ss);
    height: var(--ss);
    left: var(--sx);
    top: var(--sy);
    color: var(--c-plum);
    opacity: 0.7;
    transform: translate(-50%, -50%);
    animation: starPulse var(--sd) ease-in-out infinite;
    animation-delay: var(--so);
}
.star-shape svg { width: 100%; height: 100%; display: block; }
@keyframes starPulse {
    0%, 100% { opacity: 0.25; transform: translate(-50%, -50%) scale(0.85); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.05); }
}

/* ======================================================
   Section IV — Map
   ====================================================== */
.route-band {
    position: relative;
    width: 100%;
    height: 160px;
    margin-bottom: 1.6rem;
}
.route-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.route-svg #routePath {
    animation: dashFlow 12s linear infinite;
}
@keyframes dashFlow {
    to { stroke-dashoffset: -140; }
}
.route-node {
    position: absolute;
    width: 36px;
    height: 36px;
    left: var(--rx);
    top: var(--ry);
    color: var(--c-plum);
    transform: translate(-50%, -50%);
    background: var(--c-cream);
    padding: 4px;
    border: 1px solid var(--c-lavender);
    animation: borderPulse 4s ease-in-out infinite;
}
.route-node svg { width: 100%; height: 100%; display: block; }
@keyframes borderPulse {
    0%, 100% { border-color: var(--c-lavender); }
    50%      { border-color: var(--c-rose); }
}

.map-figure-wrap {
    align-items: center;
    justify-content: center;
}
.map-figure {
    position: relative;
    width: min(360px, 80%);
    aspect-ratio: 1;
    margin: 0 auto;
}
.map-figure__svg {
    width: 100%;
    height: 100%;
    display: block;
}
.figure-shape.draw {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 800ms cubic-bezier(.65,0,.35,1);
}
.figure-triangle.draw { transition-delay: 0ms; }
.figure-square.draw { transition-delay: 400ms; }
.figure-circle.draw { transition-delay: 800ms; }

.cardinal {
    position: absolute;
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    color: var(--c-charcoal);
    opacity: 0.7;
}
.cardinal--n { top: -8px;     left: 50%; transform: translateX(-50%); }
.cardinal--e { right: -8px;   top: 50%; transform: translateY(-50%); }
.cardinal--s { bottom: -8px;  left: 50%; transform: translateX(-50%); }
.cardinal--w { left: -8px;    top: 50%; transform: translateY(-50%); }

/* ======================================================
   Section V — Mosaic Convergence
   ====================================================== */
#sec5 .zone--a {
    background: linear-gradient(180deg, var(--c-cream) 0%, var(--c-blush) 60%, var(--c-taupe) 100%);
}
.mosaic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    width: min(720px, 90vw);
    aspect-ratio: 1;
    margin: 1.4rem auto;
    background: var(--c-rose);
    padding: 2px;
}
.mosaic__cell {
    position: relative;
    background: var(--c-cream);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    color: var(--c-plum);
    overflow: hidden;
    animation: mosaicPulse 4s ease-in-out infinite;
}
.mosaic__cell::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--c-lavender);
    pointer-events: none;
    animation: mosaicBorder 4s ease-in-out infinite;
}
.mosaic__cell--center {
    background: var(--c-blush);
    color: var(--c-charcoal);
}
.mosaic__icon {
    width: 38px;
    height: 38px;
    color: inherit;
}
.mosaic__icon svg { width: 100%; height: 100%; display: block; }
.mosaic__label {
    font-family: var(--f-mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-plum);
    opacity: 0.78;
}
@keyframes mosaicBorder {
    0%, 100% { border-color: var(--c-lavender); }
    50%      { border-color: var(--c-rose); }
}
@keyframes mosaicPulse {
    0%, 100% { background-color: var(--c-cream); }
    50%      { background-color: rgba(245, 230, 216, 0.65); }
}

.domain-mark {
    text-align: center;
    margin: 1.2rem auto 1rem;
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    letter-spacing: 0.18em;
    color: var(--c-plum);
    text-transform: lowercase;
}
.domain-mark__inner {
    display: inline-block;
    min-height: 1.2em;
}
.domain-mark__inner span.letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
}
.domain-mark__inner span.letter.show {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 240ms ease-out, transform 240ms ease-out;
}

/* ======================================================
   Responsive — collapse split for narrow viewports
   ====================================================== */
@media (max-width: 820px) {
    .sora-sec {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    .sora-sec[data-split="diagonal-up"] .zone--a { order: 1; }
    .sora-sec[data-split="diagonal-up"] .zone--b { order: 2; }
    .geo-nav { right: 8px; gap: 12px; }
    .geo-nav__btn { width: 22px; height: 22px; }
    .grid-substrate { display: none; }
    .display-mark__top { font-size: clamp(2.6rem, 12vw, 4rem); }
    .instrument-list { grid-template-columns: 1fr; }
    .constellation { width: min(420px, 86%); }
}