/* ============================================
   nonri.day — Ocean-Deep Editorial Design
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --abyss: #0d1b2a;
    --slate-shelf: #1b2d3a;
    --deep-teal: #3a6b7e;
    --aged-gold: #e8c87a;
    --sea-glass: #c8d6d0;
    --weathered-jade: #6b8f8a;
    --kelp-amber: #b8945a;
    --dried-parchment: #f0e8d8;
    --abyss-navy: #1a2e3d;
    --deep-forest: #2a3d3a;

    --font-display: 'Barlow Condensed', sans-serif;
    --font-body: 'Lora', serif;
    --font-mono: 'IBM Plex Mono', monospace;

    --content-width: 580px;
    --quote-width: 720px;
    --rotation: 2deg;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--abyss);
    color: var(--sea-glass);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    line-height: 1.78;
    letter-spacing: 0.005em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background-color: var(--kelp-amber);
    color: var(--abyss);
}

/* --- Rotated Wrapper (2-degree tilt) --- */
.rotated-wrapper {
    transform: rotate(var(--rotation));
    transform-origin: center top;
    width: 100%;
    position: relative;
}

/* --- Chapter System --- */
.chapter {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.chapter--odd {
    background-color: var(--abyss);
}

.chapter--even {
    background-color: var(--slate-shelf);
}

/* --- Background Layer --- */
.chapter__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    will-change: transform;
    overflow: hidden;
    pointer-events: none;
}

.bg-icon {
    position: absolute;
    width: 160px;
    height: 160px;
    opacity: 0.1;
}

.bg-icon--compass {
    top: 15%;
    right: 15%;
    width: 200px;
    height: 200px;
}

.bg-icon--book {
    top: 20%;
    left: 10%;
    width: 180px;
    height: 150px;
}

.bg-icon--astrolabe {
    top: 10%;
    right: 20%;
    width: 200px;
    height: 200px;
}

.bg-icon--quill {
    bottom: 15%;
    left: 8%;
    width: 160px;
    height: 180px;
}

.bg-icon--hourglass {
    top: 12%;
    right: 12%;
    width: 120px;
    height: 200px;
}

/* --- Topographic Lines --- */
.topo-lines {
    position: absolute;
    inset: 0;
    opacity: 0.07;
    background-size: 100% 100%;
    pointer-events: none;
}

.topo-lines--1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cpath d='M0,100 Q200,50 400,120 Q600,190 800,80' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,160 Q200,110 400,180 Q600,250 800,140' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,220 Q200,170 400,240 Q600,310 800,200' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,280 Q200,230 400,300 Q600,370 800,260' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,340 Q200,290 400,360 Q600,430 800,320' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,400 Q200,350 400,420 Q600,490 800,380' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,460 Q200,410 400,480 Q600,550 800,440' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,520 Q200,470 400,540 Q600,610 800,500' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3C/svg%3E");
}

.topo-lines--2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cpath d='M0,80 Q150,140 350,90 Q550,40 800,120' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,140 Q150,200 350,150 Q550,100 800,180' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,200 Q150,260 350,210 Q550,160 800,240' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,260 Q150,320 350,270 Q550,220 800,300' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,320 Q150,380 350,330 Q550,280 800,360' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,380 Q150,440 350,390 Q550,340 800,420' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,440 Q150,500 350,450 Q550,400 800,480' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3C/svg%3E");
}

.topo-lines--3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cpath d='M0,300 Q100,200 250,280 Q400,360 550,240 Q700,120 800,200' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,340 Q100,240 250,320 Q400,400 550,280 Q700,160 800,240' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,380 Q100,280 250,360 Q400,440 550,320 Q700,200 800,280' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,420 Q100,320 250,400 Q400,480 550,360 Q700,240 800,320' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,460 Q100,360 250,440 Q400,520 550,400 Q700,280 800,360' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3C/svg%3E");
}

.topo-lines--4 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cpath d='M0,120 Q200,180 400,100 Q600,20 800,100' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,180 Q200,240 400,160 Q600,80 800,160' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,240 Q200,300 400,220 Q600,140 800,220' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,300 Q200,360 400,280 Q600,200 800,280' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,360 Q200,420 400,340 Q600,260 800,340' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,420 Q200,480 400,400 Q600,320 800,400' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3C/svg%3E");
}

.topo-lines--5 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cpath d='M0,150 Q300,80 500,200 Q700,320 800,250' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,210 Q300,140 500,260 Q700,380 800,310' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,270 Q300,200 500,320 Q700,440 800,370' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,330 Q300,260 500,380 Q700,500 800,430' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3Cpath d='M0,390 Q300,320 500,440 Q700,560 800,490' fill='none' stroke='%233a6b7e' stroke-width='0.5'/%3E%3C/svg%3E");
}

/* --- Content Layer --- */
.chapter__content {
    position: relative;
    z-index: 1;
    max-width: var(--content-width);
    padding: 2rem;
}

.chapter__content--left {
    margin-left: 12vw;
}

.chapter__content--right {
    margin-left: 45vw;
}

/* --- Foreground Layer --- */
.chapter__fg {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    will-change: transform;
}

.fg-element {
    position: absolute;
    opacity: 0.3;
}

.fg-rule {
    width: 120px;
    top: 20%;
    right: 8%;
}

.fg-dagger {
    width: 18px;
    top: 30%;
    left: 12%;
}

.fg-pilcrow {
    width: 22px;
    bottom: 25%;
    right: 10%;
}

.fg-diamond-rule {
    width: 160px;
    bottom: 20%;
    left: 20%;
}

.fg-end-mark {
    width: 28px;
    bottom: 15%;
    right: 15%;
}

/* --- Chapter Icon --- */
.chapter-icon {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.chapter-icon .icon-inline {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.section-marker {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1rem, 2vw, 1.5rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--deep-teal);
    border-bottom: 1px solid var(--deep-teal);
    padding-bottom: 0.25rem;
    padding-right: 3rem;
}

/* --- Pull Quotes --- */
.pull-quote {
    position: relative;
    max-width: var(--quote-width);
    border-left: 3px solid var(--deep-teal);
    padding-left: 1.5rem;
    margin-bottom: 2.5rem;
}

.quote-line {
    position: absolute;
    top: -80px;
    left: -2px;
    width: 3px;
    height: 80px;
    background-color: var(--deep-teal);
    opacity: 0.4;
}

.pull-quote__text {
    font-family: var(--font-body);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.4rem, 2.8vw, 2.2rem);
    line-height: 1.45;
    color: var(--aged-gold);
}

/* --- Chapter Titles --- */
.chapter-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--abyss-navy);
    color: var(--sea-glass);
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.chapter--odd .chapter-title {
    color: var(--sea-glass);
}

.chapter--even .chapter-body p {
    color: #c8d6d0;
}

/* deep-forest text variant for light sections */
.parchment-section {
    color: #2a3d3a;
}

.chapter--even .chapter-title {
    color: var(--dried-parchment);
}

/* --- Body Text --- */
.chapter-body p {
    margin-bottom: 1.25rem;
    max-width: var(--content-width);
}

.chapter-body p:last-child {
    margin-bottom: 0;
}

/* --- Annotations --- */
.annotation {
    position: absolute;
    max-width: 200px;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.annotation--right {
    right: -240px;
    top: 60%;
}

.annotation--left {
    left: -240px;
    top: 50%;
}

.annotation--lower {
    top: 78%;
}

.annotation__mark {
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 0.65rem;
    color: var(--weathered-jade);
    opacity: 0.7;
    vertical-align: super;
    flex-shrink: 0;
}

.annotation__text {
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 0.75rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--weathered-jade);
    opacity: 0.7;
}

/* --- Margin Stamps --- */
.margin-stamp {
    position: absolute;
    right: -180px;
    bottom: 20%;
    width: 36px;
    height: 36px;
    opacity: 0.5;
}

.chapter__content--right .margin-stamp {
    right: auto;
    left: -180px;
}

/* --- Wave Separators --- */
.wave-separator {
    position: relative;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform: rotate(calc(var(--rotation) * -1));
    background: linear-gradient(
        to bottom,
        var(--abyss),
        var(--slate-shelf) 50%,
        var(--abyss)
    );
}

.wave-svg {
    width: 100%;
    height: 24px;
    opacity: 0.25;
}

.wave-path {
    animation: waveShift 20s linear infinite;
}

@keyframes waveShift {
    0% { transform: translateX(0); }
    100% { transform: translateX(-80px); }
}

/* --- Chapter Indicator --- */
.chapter-indicator {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    opacity: 0.3;
    transition: opacity 0.4s ease;
}

.chapter-indicator:hover {
    opacity: 1;
}

.chapter-indicator__line {
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: var(--deep-teal);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.chapter-indicator__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid var(--deep-teal);
    background: transparent;
    cursor: pointer;
    position: relative;
    z-index: 1;
    margin: 12px 0;
    padding: 0;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.chapter-indicator__dot.is-active {
    background-color: var(--aged-gold);
    border-color: var(--aged-gold);
    transform: scale(1.5);
}

.chapter-indicator__dot:hover {
    background-color: var(--kelp-amber);
    border-color: var(--kelp-amber);
}

/* --- Stagger Animation System --- */
.stagger-enter {
    opacity: 0;
    transform: translate3d(-20px, 30px, 0);
    transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stagger-enter[data-stagger="0"] { transition-delay: 0ms; }
.stagger-enter[data-stagger="1"] { transition-delay: 120ms; }
.stagger-enter[data-stagger="2"] { transition-delay: 240ms; }
.stagger-enter[data-stagger="3"] { transition-delay: 360ms; }
.stagger-enter[data-stagger="4"] { transition-delay: 480ms; }
.stagger-enter[data-stagger="5"] { transition-delay: 600ms; }
.stagger-enter[data-stagger="6"] { transition-delay: 720ms; }

.stagger-enter.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* --- Sand Particle Animations --- */
@keyframes sandFall1 {
    0%, 5% { transform: translate(0, 0); opacity: 1; }
    80% { opacity: 1; }
    95% { transform: translate(5px, 100px); opacity: 0; }
    100% { transform: translate(5px, 100px); opacity: 0; }
}
@keyframes sandFall2 {
    0%, 8% { transform: translate(0, 0); opacity: 1; }
    82% { opacity: 1; }
    96% { transform: translate(-3px, 105px); opacity: 0; }
    100% { transform: translate(-3px, 105px); opacity: 0; }
}
@keyframes sandFall3 {
    0%, 3% { transform: translate(0, 0); opacity: 1; }
    78% { opacity: 1; }
    93% { transform: translate(2px, 98px); opacity: 0; }
    100% { transform: translate(2px, 98px); opacity: 0; }
}
@keyframes sandFall4 {
    0%, 10% { transform: translate(0, 0); opacity: 1; }
    85% { opacity: 1; }
    97% { transform: translate(-4px, 110px); opacity: 0; }
    100% { transform: translate(-4px, 110px); opacity: 0; }
}
@keyframes sandFall5 {
    0%, 6% { transform: translate(0, 0); opacity: 1; }
    81% { opacity: 1; }
    94% { transform: translate(3px, 102px); opacity: 0; }
    100% { transform: translate(3px, 102px); opacity: 0; }
}
@keyframes sandFall6 {
    0%, 12% { transform: translate(0, 0); opacity: 1; }
    83% { opacity: 1; }
    95% { transform: translate(-2px, 95px); opacity: 0; }
    100% { transform: translate(-2px, 95px); opacity: 0; }
}

.sand-1 { animation: sandFall1 3.8s ease-in infinite; }
.sand-2 { animation: sandFall2 4.2s ease-in infinite 0.3s; }
.sand-3 { animation: sandFall3 3.5s ease-in infinite 0.6s; }
.sand-4 { animation: sandFall4 4.8s ease-in infinite 0.9s; }
.sand-5 { animation: sandFall5 5.2s ease-in infinite 1.2s; }
.sand-6 { animation: sandFall1 4.0s ease-in infinite 1.5s; }
.sand-7 { animation: sandFall3 3.7s ease-in infinite 0.4s; }
.sand-8 { animation: sandFall6 5.5s ease-in infinite 0.7s; }
.sand-9 { animation: sandFall2 4.5s ease-in infinite 1.0s; }
.sand-10 { animation: sandFall4 3.9s ease-in infinite 1.3s; }
.sand-11 { animation: sandFall5 4.3s ease-in infinite 0.2s; }
.sand-12 { animation: sandFall6 5.0s ease-in infinite 0.8s; }

/* --- Character Animation for first quote --- */
.char-animate {
    display: inline-block;
    opacity: 0;
    animation: charFadeIn 0.1s ease forwards;
}

@keyframes charFadeIn {
    to { opacity: 1; }
}

/* --- Responsive Adjustments --- */
@media (max-width: 1200px) {
    .annotation {
        position: relative;
        right: auto;
        left: auto;
        top: auto;
        max-width: 100%;
        margin-top: 1.5rem;
    }

    .margin-stamp {
        position: relative;
        right: auto;
        left: auto;
        bottom: auto;
        margin-top: 1.5rem;
    }
}

@media (max-width: 900px) {
    .chapter__content--left,
    .chapter__content--right {
        margin-left: 5vw;
        margin-right: 5vw;
        max-width: calc(100vw - 10vw);
    }

    .rotated-wrapper {
        transform: rotate(1deg);
    }

    .pull-quote__text {
        font-size: clamp(1.2rem, 4vw, 1.8rem);
    }

    .chapter-title {
        font-size: clamp(2rem, 8vw, 3.5rem);
    }

    .chapter-indicator {
        right: 0.75rem;
    }

    .wave-separator {
        height: 30vh;
    }
}

@media (max-width: 600px) {
    .chapter__content--left,
    .chapter__content--right {
        margin-left: 1rem;
        margin-right: 1rem;
        padding: 1rem;
    }

    .rotated-wrapper {
        transform: rotate(0.5deg);
    }

    .chapter {
        height: auto;
        min-height: 100vh;
        padding: 3rem 0;
    }

    .quote-line {
        display: none;
    }

    .fg-element {
        display: none;
    }

    .bg-icon {
        opacity: 0.05;
    }

    .chapter-indicator {
        display: none;
    }

    .wave-separator {
        height: 15vh;
    }
}