/* ==========================================================================
   a6c.quest v2 — Surreal Cartographic Dreamscape
   ========================================================================== */

/* --- Palette --- */
:root {
    --parchment: #f5f0e8;
    --ink-deep: #1a1425;
    --ink-compass: #3d3225;
    --rose-anomaly: #8b3a4a;
    --blue-meridian: #2e4a7a;
    --gold-terra: #c9a84c;
    --mist-veil: #d8d2c8;

    --font-headline: 'Cormorant Garamond', 'Lora', Georgia, serif;
    --font-body: 'Nunito Sans', 'Inter', system-ui, sans-serif;
    --font-hand: 'Caveat', cursive;
}

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

html, body {
    background: var(--parchment);
    color: var(--ink-deep);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.75;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    background-image:
        radial-gradient(circle at 25% 30%, rgba(201, 168, 76, 0.04), transparent 35%),
        radial-gradient(circle at 75% 65%, rgba(46, 74, 122, 0.04), transparent 40%),
        repeating-linear-gradient(45deg, transparent, transparent 80px, rgba(61, 50, 37, 0.018) 80px, rgba(61, 50, 37, 0.018) 81px);
    min-height: 100vh;
    position: relative;
}

/* Aged paper texture overlay */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(circle at 13% 24%, rgba(61, 50, 37, 0.06), transparent 4%),
        radial-gradient(circle at 78% 67%, rgba(61, 50, 37, 0.05), transparent 3%),
        radial-gradient(circle at 45% 88%, rgba(139, 58, 74, 0.04), transparent 5%),
        radial-gradient(circle at 91% 14%, rgba(201, 168, 76, 0.05), transparent 4%);
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

/* ==========================================================================
   Background atmospherics
   ========================================================================== */
.atlas-background {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.rhumb-lines {
    position: absolute;
    width: 130vmax;
    height: 130vmax;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.12;
    animation: rhumb-rotate 120s linear infinite;
}

.rhumb-lines line {
    stroke: var(--gold-terra);
    stroke-width: 1;
    fill: none;
}

@keyframes rhumb-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.constellation {
    position: absolute;
    width: 380px;
    height: 380px;
    opacity: 0;
    filter: blur(4px);
    transition: opacity 1.4s ease, filter 1.4s ease;
    pointer-events: none;
}

.constellation line {
    stroke: var(--ink-compass);
    stroke-width: 0.6;
    opacity: 0.5;
}

.constellation circle {
    fill: var(--gold-terra);
    opacity: 0.85;
}

.constellation.is-visible {
    opacity: 0.55;
    filter: blur(0);
    animation: constellation-drift 30s ease-in-out infinite;
}

.constellation-1 { top: 12%; right: 6%; }
.constellation-2 { bottom: 18%; left: 8%; }

@keyframes constellation-drift {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-20px); }
}

.sea-creature {
    position: absolute;
    width: 140px;
    height: 140px;
    color: var(--ink-compass);
    opacity: 0.06;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
    cursor: crosshair;
}

.sea-creature:hover {
    opacity: 0.3;
    transform: scale(1.15);
}

.sea-creature-1 { top: 22%; left: 3%; }
.sea-creature-2 { top: 58%; right: 4%; transform: rotate(15deg); }
.sea-creature-2:hover { transform: rotate(15deg) scale(1.15); }
.sea-creature-3 { bottom: 8%; left: 35%; transform: rotate(-8deg); }
.sea-creature-3:hover { transform: rotate(-8deg) scale(1.15); }

.wave-pattern {
    position: absolute;
    width: 100%;
    height: 200px;
    opacity: 0.08;
    background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent 12px,
        var(--blue-meridian) 12px,
        var(--blue-meridian) 13px,
        transparent 13px,
        transparent 24px
    );
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    animation: wave-shift 14s linear infinite;
}

.wave-1 { top: 35%; }
.wave-2 { top: 70%; animation-direction: reverse; animation-duration: 18s; }

@keyframes wave-shift {
    from { background-position: 0 0; }
    to   { background-position: 240px 0; }
}

/* ==========================================================================
   Trail navigation (treasure map style)
   ========================================================================== */
.trail-nav {
    position: fixed;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 38px;
    padding: 24px 0;
}

.trail-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    border-left: 1.5px dotted var(--ink-compass);
    opacity: 0.55;
    transform: translateX(-50%);
}

.trail-marker {
    position: relative;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 2;
}

.trail-dot {
    width: 8px;
    height: 8px;
    background: var(--parchment);
    border: 1.5px solid var(--ink-compass);
    border-radius: 50%;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.trail-marker.is-active .trail-dot {
    background: var(--gold-terra);
    border-color: var(--ink-deep);
    transform: scale(1.4);
    box-shadow:
        0 0 0 4px rgba(201, 168, 76, 0.18),
        0 0 0 10px rgba(201, 168, 76, 0.06);
    animation: pulse-marker 2.4s ease-in-out infinite;
}

@keyframes pulse-marker {
    0%, 100% { box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.18), 0 0 0 10px rgba(201, 168, 76, 0.06); }
    50%      { box-shadow: 0 0 0 6px rgba(201, 168, 76, 0.28), 0 0 0 14px rgba(201, 168, 76, 0.10); }
}

.trail-marker::after {
    content: attr(data-label);
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-hand);
    font-size: 16px;
    color: var(--ink-compass);
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.trail-marker:hover::after,
.trail-marker.is-active::after {
    opacity: 0.85;
    transform: translateY(-50%) translateX(4px);
}

/* ==========================================================================
   Main atlas layout
   ========================================================================== */
.atlas-main {
    position: relative;
    z-index: 2;
}

section {
    position: relative;
    min-height: 100vh;
    padding: 80px 80px 80px 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Section 1: Opening compass rose
   ========================================================================== */
.opening-section {
    flex-direction: column;
    text-align: center;
}

.compass-stage {
    position: relative;
    width: min(520px, 80vw);
    height: min(520px, 80vw);
    display: flex;
    align-items: center;
    justify-content: center;
}

.compass-rose {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--ink-deep);
}

.compass-ring {
    stroke: var(--ink-compass);
    stroke-width: 0.8;
    opacity: 0.7;
}
.outer-ring  { stroke-dasharray: 4 3; }
.middle-ring { stroke-width: 1.2; }
.inner-ring  { stroke-width: 0.6; opacity: 0.5; }

.compass-ticks .tick {
    stroke: var(--ink-compass);
    stroke-width: 1;
    opacity: 0.7;
}
.compass-ticks .tick.major {
    stroke-width: 1.6;
    opacity: 0.95;
}

.compass-letter {
    font-family: var(--font-headline);
    font-style: italic;
    font-size: 18px;
    fill: var(--ink-deep);
    letter-spacing: 0.08em;
}

.star-point {
    fill: var(--ink-deep);
    opacity: 0.85;
}
.star-point.star-n, .star-point.star-s,
.star-point.star-e, .star-point.star-w {
    fill: var(--ink-compass);
}
.star-point.star-nw, .star-point.star-ne,
.star-point.star-se, .star-point.star-sw {
    fill: var(--gold-terra);
    opacity: 0.7;
}

.compass-needle {
    transform-origin: 200px 200px;
    transform-box: fill-box;
}

.needle-north { fill: var(--rose-anomaly); }
.needle-south { fill: var(--ink-compass); opacity: 0.8; }
.needle-pivot { fill: var(--gold-terra); stroke: var(--ink-deep); stroke-width: 1; }
.needle-center { fill: var(--ink-deep); }

.compass-needle.is-spinning {
    animation: needle-spin 20s linear infinite;
}

@keyframes needle-spin {
    from { transform: translate(200px, 200px) rotate(0deg); }
    to   { transform: translate(200px, 200px) rotate(360deg); }
}

.compass-needle.is-wobbling {
    animation: needle-wobble 2.2s cubic-bezier(0.4, 1.6, 0.5, 0.9);
}

@keyframes needle-wobble {
    0%   { transform: translate(200px, 200px) rotate(0deg); }
    15%  { transform: translate(200px, 200px) rotate(-5deg); }
    30%  { transform: translate(200px, 200px) rotate(4deg); }
    45%  { transform: translate(200px, 200px) rotate(-3deg); }
    60%  { transform: translate(200px, 200px) rotate(2deg); }
    75%  { transform: translate(200px, 200px) rotate(-1.2deg); }
    90%  { transform: translate(200px, 200px) rotate(0.6deg); }
    100% { transform: translate(200px, 200px) rotate(0deg); }
}

.ink-line {
    fill: none;
    stroke: var(--ink-deep);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ink-line.is-drawn {
    opacity: 0.7;
    animation: draw-ink 1.8s ease-out forwards;
}

@keyframes draw-ink {
    to { stroke-dashoffset: 0; }
}

.cartouche-title {
    position: absolute;
    top: -80px;
    left: -40px;
    font-family: var(--font-headline);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(36px, 7vw, 78px);
    letter-spacing: 0.04em;
    color: var(--ink-deep);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1.2s ease 2.6s, transform 1.2s ease 2.6s;
    text-shadow: 0 1px 0 rgba(245, 240, 232, 0.4);
}

.cartouche-title.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cartouche-subtitle {
    position: absolute;
    top: 8px;
    right: -40px;
    font-family: var(--font-hand);
    font-size: clamp(16px, 1.6vw, 22px);
    color: var(--ink-compass);
    opacity: 0;
    max-width: 200px;
    transition: opacity 1.2s ease 3.2s;
    transform: rotate(-3deg);
}

.cartouche-subtitle.is-visible { opacity: 0.85; }

.opening-annotations {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hand-note {
    position: absolute;
    font-family: var(--font-hand);
    font-size: 16px;
    color: var(--ink-compass);
    opacity: 0;
    transition: opacity 1s ease;
}

.hand-note.is-visible { opacity: 0.7; }

.note-1 { bottom: -50px; left: 10%; transform: rotate(-4deg); }
.note-2 { top: -30px; right: 15%; transform: rotate(2deg); }
.note-3 { bottom: -30px; right: 5%; transform: rotate(3deg); }

.scroll-cue {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-hand);
    color: var(--ink-compass);
    font-size: 18px;
    opacity: 0;
    animation: cue-fade 1s ease 4s forwards, cue-bob 2.4s ease-in-out 5s infinite;
    text-align: center;
}

.cue-arrow {
    display: block;
    margin-top: 4px;
    font-family: var(--font-headline);
    font-size: 22px;
}

@keyframes cue-fade {
    to { opacity: 0.8; }
}
@keyframes cue-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}

/* ==========================================================================
   Generic island styling
   ========================================================================== */
.island {
    position: relative;
    background: var(--parchment);
    color: var(--ink-deep);
    padding: 56px 64px;
    max-width: 580px;
    box-shadow:
        0 20px 60px -28px rgba(26, 20, 37, 0.45),
        0 4px 14px -6px rgba(26, 20, 37, 0.18);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.4, 0, 0.2, 1),
        clip-path 0.8s ease;
    opacity: 0;
    transform: translateY(40px) rotate(0deg);
}

.island.is-visible {
    opacity: 1;
}

.island::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px dashed var(--ink-compass);
    opacity: 0.45;
    pointer-events: none;
}

.island::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 3px solid var(--ink-compass);
    pointer-events: none;
    opacity: 0.85;
}

.island-title {
    font-family: var(--font-headline);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(24px, 3.6vw, 44px);
    letter-spacing: 0.04em;
    color: var(--ink-deep);
    margin-bottom: 22px;
    line-height: 1.18;
}

.island-body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.78;
    color: var(--ink-compass);
    margin-bottom: 16px;
}

.island-body:last-of-type { margin-bottom: 24px; }

.hand-annotation {
    display: inline-block;
    font-family: var(--font-hand);
    font-size: clamp(15px, 1.2vw, 19px);
    color: var(--ink-compass);
    opacity: 0.7;
    transform: rotate(-1.5deg);
    margin-top: 12px;
}

.island-annotation {
    display: block;
    text-align: right;
    margin-top: 18px;
}

/* ==========================================================================
   Wax seal
   ========================================================================== */
.wax-seal {
    position: absolute;
    top: -28px;
    right: -28px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #c14d5d, var(--rose-anomaly) 55%, #6e2d39 100%);
    box-shadow:
        inset -3px -4px 8px rgba(26, 20, 37, 0.45),
        inset 2px 3px 6px rgba(255, 240, 220, 0.18),
        0 8px 18px -6px rgba(139, 58, 74, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-8deg);
    z-index: 3;
}

.wax-seal::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(245, 240, 232, 0.35);
    border-radius: 50%;
}

.seal-letter {
    font-family: var(--font-headline);
    font-style: italic;
    font-weight: 600;
    color: var(--parchment);
    font-size: 26px;
    text-shadow: 0 1px 1px rgba(26, 20, 37, 0.4);
}

.wax-seal-warning {
    background: radial-gradient(circle at 35% 30%, #b06b3a, var(--gold-terra) 55%, #6c5320 100%);
    top: 30px;
    right: -32px;
}

/* ==========================================================================
   Section 2: Cartouche
   ========================================================================== */
.cartouche-section {
    justify-content: flex-start;
    padding-left: 18vw;
}

.island-cartouche {
    clip-path: polygon(
        4% 12%, 18% 2%, 38% 6%, 56% 0%, 74% 8%, 92% 4%, 98% 22%,
        96% 44%, 100% 62%, 92% 82%, 80% 96%, 58% 100%, 38% 94%,
        18% 100%, 4% 88%, 0% 64%, 6% 42%, 2% 22%
    );
    transform: translateY(40px) rotate(-1.5deg);
    background: linear-gradient(135deg, var(--parchment) 0%, #ede6d8 100%);
}

.island-cartouche.is-visible {
    transform: rotate(-1.5deg);
}

.island-frame {
    position: relative;
    z-index: 2;
}

.rhumb-radiator {
    position: absolute;
    right: 10%;
    top: 30%;
    width: 320px;
    height: 320px;
    pointer-events: none;
    background:
        repeating-conic-gradient(
            from 0deg at center,
            transparent 0deg,
            transparent 22deg,
            rgba(201, 168, 76, 0.16) 22deg,
            rgba(201, 168, 76, 0.16) 22.5deg
        );
    border-radius: 50%;
    opacity: 0;
    transition: opacity 1.4s ease;
    animation: radiator-rotate 90s linear infinite;
}

.rhumb-radiator.is-visible { opacity: 0.6; }

@keyframes radiator-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ==========================================================================
   Section 3: Drifting Islands
   ========================================================================== */
.islands-section {
    flex-wrap: wrap;
    gap: 48px;
    padding: 120px 100px 120px 140px;
    align-items: stretch;
    justify-content: space-around;
}

.islands-section .island {
    flex: 1 1 280px;
    max-width: 360px;
    padding: 44px 40px;
}

.island-a {
    clip-path: polygon(
        8% 16%, 24% 0%, 48% 8%, 70% 0%, 92% 12%, 100% 36%,
        88% 56%, 96% 80%, 76% 96%, 52% 88%, 28% 100%, 8% 88%, 0% 60%, 4% 32%
    );
    transform: translateY(40px) rotate(2deg);
}
.island-a.is-visible { transform: rotate(2deg); }

.island-b {
    clip-path: polygon(
        0% 22%, 16% 6%, 40% 0%, 64% 8%, 88% 0%, 100% 28%,
        92% 52%, 100% 78%, 80% 92%, 56% 100%, 30% 92%, 8% 100%, 0% 70%, 8% 44%
    );
    transform: translateY(40px) rotate(-2deg);
    margin-top: 80px;
}
.island-b.is-visible { transform: rotate(-2deg); }

.island-c {
    clip-path: polygon(
        12% 4%, 36% 14%, 60% 0%, 84% 8%, 100% 30%, 92% 54%,
        100% 76%, 84% 96%, 60% 92%, 38% 100%, 14% 92%, 0% 76%, 8% 50%, 0% 26%
    );
    transform: translateY(40px) rotate(2.5deg);
    margin-top: -40px;
}
.island-c.is-visible { transform: rotate(2.5deg); }

/* ==========================================================================
   Section 4: Meridians
   ========================================================================== */
.meridians-section {
    justify-content: flex-end;
    padding-right: 12vw;
}

.island-meridian {
    clip-path: polygon(
        2% 18%, 14% 4%, 32% 0%, 52% 6%, 72% 0%, 92% 8%, 100% 28%,
        96% 50%, 100% 72%, 88% 92%, 68% 100%, 48% 94%, 28% 100%, 8% 92%, 0% 70%, 6% 44%
    );
    max-width: 640px;
    padding: 60px 70px;
    transform: translateY(40px) rotate(1deg);
    background: linear-gradient(160deg, var(--parchment), #efe7d6);
}
.island-meridian.is-visible { transform: rotate(1deg); }

.meridian-list {
    list-style: none;
    margin: 28px 0 16px;
    border-top: 1px dashed var(--ink-compass);
    padding-top: 18px;
}

.meridian-list li {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: baseline;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px dotted rgba(61, 50, 37, 0.3);
    font-size: 16px;
}

.meridian-list li:last-child { border-bottom: none; }

.meridian-symbol {
    color: var(--gold-terra);
    font-size: 14px;
}

.meridian-name {
    font-family: var(--font-headline);
    font-style: italic;
    font-weight: 400;
    color: var(--ink-deep);
    font-size: 19px;
}

.meridian-bearing {
    font-family: var(--font-hand);
    color: var(--ink-compass);
    opacity: 0.78;
    font-size: 17px;
}

/* ==========================================================================
   Section 5: Dragons
   ========================================================================== */
.dragons-section {
    justify-content: flex-start;
    padding-left: 14vw;
}

.island-dragons {
    clip-path: polygon(
        6% 10%, 22% 0%, 44% 6%, 64% 0%, 86% 10%, 100% 30%, 92% 50%,
        100% 70%, 88% 88%, 70% 96%, 48% 90%, 26% 100%, 8% 86%, 0% 60%, 6% 36%
    );
    max-width: 600px;
    background: linear-gradient(170deg, var(--parchment), #ece4d2);
    padding: 56px 64px 70px;
    transform: translateY(40px) rotate(-1deg);
}
.island-dragons.is-visible { transform: rotate(-1deg); }

.inline-creature {
    display: block;
    width: 200px;
    height: 80px;
    margin: 24px auto 0;
    color: var(--ink-compass);
    opacity: 0.55;
}

/* ==========================================================================
   Section 6: Reassembly
   ========================================================================== */
.reassembly-section {
    flex-direction: column;
    background: linear-gradient(180deg, var(--parchment) 0%, #efe7d4 100%);
}

.reassembly-stage {
    position: relative;
    width: min(720px, 92vw);
    height: min(720px, 92vw);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fragment {
    position: absolute;
    width: 50%;
    height: 50%;
    background: radial-gradient(
        circle at center,
        var(--parchment),
        #ede5d3 70%,
        #d8d2c8 100%
    );
    border: 1.5px solid var(--ink-compass);
    transform-origin: center;
    transition:
        transform 1.6s cubic-bezier(0.65, 0, 0.35, 1),
        clip-path 1.6s ease,
        opacity 0.8s ease;
    opacity: 0;
}

.reassembly-stage.is-active .fragment {
    opacity: 0.94;
}

/* Initial scattered positions (away from center) */
.fragment-1 { clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 50% 0%); transform: translate(-220%, -180%) rotate(-25deg); }
.fragment-2 { clip-path: polygon(50% 50%, 50% 0%, 0% 0%, 0% 50%); transform: translate(220%, -200%) rotate(40deg); }
.fragment-3 { clip-path: polygon(50% 50%, 0% 50%, 0% 100%, 50% 100%); transform: translate(-200%, 220%) rotate(15deg); }
.fragment-4 { clip-path: polygon(50% 50%, 50% 100%, 100% 100%, 100% 50%); transform: translate(220%, 220%) rotate(-30deg); }
.fragment-5 { clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 50% 0%); transform: translate(-300%, 100%) rotate(60deg); opacity: 0; }
.fragment-6 { clip-path: polygon(50% 50%, 50% 0%, 0% 0%, 0% 50%); transform: translate(300%, 50%) rotate(-50deg); opacity: 0; }
.fragment-7 { clip-path: polygon(50% 50%, 0% 50%, 0% 100%, 50% 100%); transform: translate(-50%, 300%) rotate(20deg); opacity: 0; }
.fragment-8 { clip-path: polygon(50% 50%, 50% 100%, 100% 100%, 100% 50%); transform: translate(100%, -300%) rotate(-15deg); opacity: 0; }

/* When stage activates, fragments fly together to form a circle */
.reassembly-stage.is-assembling .fragment {
    opacity: 0.95;
    transition-delay: var(--delay, 0s);
}

.reassembly-stage.is-assembling .fragment-1 { transform: translate(0, 0) rotate(0deg); --delay: 0.1s; clip-path: polygon(50% 50%, 100% 50%, 92% 18%, 50% 0%); }
.reassembly-stage.is-assembling .fragment-2 { transform: translate(0, 0) rotate(0deg); --delay: 0.25s; clip-path: polygon(50% 50%, 50% 0%, 8% 18%, 0% 50%); }
.reassembly-stage.is-assembling .fragment-3 { transform: translate(0, 0) rotate(0deg); --delay: 0.4s; clip-path: polygon(50% 50%, 0% 50%, 8% 82%, 50% 100%); }
.reassembly-stage.is-assembling .fragment-4 { transform: translate(0, 0) rotate(0deg); --delay: 0.55s; clip-path: polygon(50% 50%, 50% 100%, 92% 82%, 100% 50%); }

.reassembly-stage.is-assembling .fragment-5,
.reassembly-stage.is-assembling .fragment-6,
.reassembly-stage.is-assembling .fragment-7,
.reassembly-stage.is-assembling .fragment-8 {
    opacity: 0;
}

.reassembly-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--ink-compass);
    opacity: 0;
    transition: opacity 1.2s ease 1.6s;
    pointer-events: none;
}

.reassembly-stage.is-assembling::after { opacity: 0.8; }

.reassembly-center {
    position: relative;
    z-index: 5;
    text-align: center;
    max-width: 460px;
    padding: 40px;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 1.2s ease 1.8s, transform 1.2s ease 1.8s;
}

.reassembly-stage.is-assembling .reassembly-center {
    opacity: 1;
    transform: scale(1);
}

.reassembly-title {
    font-family: var(--font-headline);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(28px, 4.4vw, 52px);
    letter-spacing: 0.04em;
    color: var(--ink-deep);
    margin-bottom: 22px;
}

.reassembly-text {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.78;
    color: var(--ink-compass);
    margin-bottom: 24px;
}

.reassembly-signature {
    font-family: var(--font-hand);
    font-size: 22px;
    color: var(--rose-anomaly);
    transform: rotate(-2deg);
    display: inline-block;
}

/* ==========================================================================
   Custom cursor compass
   ========================================================================== */
.cursor-compass {
    position: fixed;
    width: 30px;
    height: 30px;
    pointer-events: none;
    color: var(--ink-compass);
    opacity: 0;
    z-index: 100;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: opacity 0.4s ease;
    mix-blend-mode: multiply;
}

.cursor-compass.is-visible { opacity: 0.55; }

/* ==========================================================================
   Scroll-depth modifiers (rotation/opacity for distant islands)
   ========================================================================== */
.island.is-distant {
    opacity: 0.85;
}

/* ==========================================================================
   Responsive adjustments
   ========================================================================== */
@media (max-width: 800px) {
    section {
        padding: 80px 24px 80px 60px;
    }
    .trail-nav { left: 12px; gap: 28px; }
    .trail-marker::after { font-size: 13px; }
    .cartouche-title { font-size: clamp(32px, 9vw, 60px); top: -60px; left: -16px; }
    .cartouche-subtitle { right: -8px; max-width: 160px; font-size: 16px; }
    .island { padding: 36px 28px; max-width: 100%; }
    .islands-section { gap: 36px; padding: 80px 24px 80px 60px; }
    .island-b { margin-top: 0; }
    .island-c { margin-top: 0; }
    .meridians-section { padding-right: 24px; }
    .dragons-section { padding-left: 60px; }
    .meridian-list li { grid-template-columns: 20px 1fr auto; gap: 8px; font-size: 14px; }
    .meridian-name { font-size: 17px; }
    .reassembly-center { padding: 24px; }
    .cursor-compass { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .compass-needle.is-spinning,
    .rhumb-lines,
    .constellation,
    .wave-pattern,
    .rhumb-radiator,
    .scroll-cue {
        animation: none !important;
    }
}