/* =============================================================
   naru.day — dark-academia journal with dopamine-neon accents
   Palette
     #1A1418 library dark   (primary background)
     #E8A030 neon amber     (primary accent, lamplight)
     #E84878 neon rose      (secondary accent)
     #E8DCC8 page cream     (text)
     #3A3028 grain warm     (grain tint)
     #7A7068 margin gray    (secondary text, annotations)
     #0A0808 ink deep       (deepest dark / shadows)
   Fonts: Jost (geometric, ~Futura), Lora (transitional serif)
   ============================================================= */

:root {
    --library-dark: #1A1418;
    --neon-amber: #E8A030;
    --neon-rose: #E84878;
    --page-cream: #E8DCC8;
    --grain-warm: #3A3028;
    --margin-gray: #7A7068;
    --ink-deep: #0A0808;

    --font-headline: 'Jost', 'Futura', 'Inter', sans-serif;
    --font-body: 'Lora', Georgia, serif;

    --col-width: 600px;
    --entry-gap: 80px;
    --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

    --pool-x: 50vw;
    --pool-y: 50vh;
    --cursor-x: -200px;
    --cursor-y: -200px;
}

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

html {
    background: var(--ink-deep);
    scroll-behavior: smooth;
}

body {
    background: var(--library-dark);
    color: var(--page-cream);
    font-family: var(--font-body);
    font-size: clamp(16px, 1.1vw, 18px);
    line-height: 1.95;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============== Grain overlay (full viewport, fixed) ============== */

.grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    opacity: 0.15;
    mix-blend-mode: overlay;
}

.grain-overlay svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* slight grain shimmer */
.grain-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(58, 48, 40, 0.18), transparent 60%),
                radial-gradient(circle at 70% 80%, rgba(58, 48, 40, 0.14), transparent 55%);
    mix-blend-mode: multiply;
}

/* ============== Lamplight pool — follows scroll/cursor ============== */

.lamplight-pool {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(circle 60vmin at var(--pool-x) var(--pool-y), rgba(232, 160, 48, 0.10), transparent 65%),
        radial-gradient(circle 90vmin at calc(var(--pool-x) + 25vw) calc(var(--pool-y) - 12vh), rgba(232, 160, 48, 0.05), transparent 70%),
        radial-gradient(circle 70vmin at calc(var(--pool-x) - 22vw) calc(var(--pool-y) + 18vh), rgba(232, 72, 120, 0.04), transparent 70%);
    transition: background 0.6s var(--ease-soft);
}

.cursor-glow {
    position: fixed;
    width: 320px;
    height: 320px;
    left: var(--cursor-x);
    top: var(--cursor-y);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(circle, rgba(232, 160, 48, 0.10), rgba(232, 160, 48, 0.04) 40%, transparent 70%);
    border-radius: 50%;
    transition: opacity 0.6s var(--ease-soft);
    opacity: 0;
}

body.cursor-active .cursor-glow {
    opacity: 1;
}

/* ============== Glitch overlay ============== */

.glitch-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 30;
    opacity: 0;
    mix-blend-mode: screen;
}

.glitch-overlay::before,
.glitch-overlay::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(232, 160, 48, 0.6), rgba(232, 72, 120, 0.5), transparent);
}

.glitch-overlay::before { top: 33%; transform: translateX(-12px); }
.glitch-overlay::after  { top: 67%; transform: translateX(8px); }

body.glitch-fire {
    animation: glitchShake 0.16s steps(2, end) 1;
}

body.glitch-fire .glitch-overlay {
    opacity: 1;
    animation: glitchFlicker 0.16s steps(3, end) 1;
}

body.glitch-fire .journal {
    animation: glitchHueShift 0.16s steps(2, end) 1;
}

@keyframes glitchShake {
    0%   { transform: translate(0, 0); }
    33%  { transform: translate(-2px, 1px); }
    66%  { transform: translate(2px, -1px); }
    100% { transform: translate(0, 0); }
}

@keyframes glitchFlicker {
    0%   { opacity: 0; }
    33%  { opacity: 0.9; }
    66%  { opacity: 0.4; }
    100% { opacity: 0; }
}

@keyframes glitchHueShift {
    0%   { filter: none; }
    50%  { filter: hue-rotate(180deg) saturate(1.2); }
    100% { filter: none; }
}

/* ============== Journal column ============== */

.journal {
    position: relative;
    z-index: 10;
    max-width: var(--col-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ============== Dawn page (100vh hero) ============== */

.dawn-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 80px 0;
}

.dawn-light {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(232, 160, 48, 0.32), rgba(232, 160, 48, 0.08) 30%, transparent 60%);
    transform: scale(0);
    opacity: 0;
    z-index: -1;
    transition: transform 1200ms var(--ease-soft), opacity 1200ms var(--ease-soft);
}

.dawn-page.is-lit .dawn-light {
    transform: scale(1);
    opacity: 1;
}

.dawn-content {
    position: relative;
    text-align: center;
    z-index: 2;
    width: 100%;
}

.domain-mark {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: clamp(40px, 7vw, 88px);
    letter-spacing: 0.01em;
    color: var(--page-cream);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 1100ms 600ms var(--ease-soft), transform 1100ms 600ms var(--ease-soft);
    text-shadow: 0 0 32px rgba(232, 160, 48, 0.28),
                 0 0 80px rgba(232, 160, 48, 0.12);
}

.domain-mark::after {
    content: '';
    display: block;
    width: 64px;
    height: 1px;
    background: var(--neon-amber);
    margin: 22px auto 0;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: opacity 800ms 1300ms var(--ease-soft), transform 900ms 1300ms var(--ease-soft);
    box-shadow: 0 0 12px rgba(232, 160, 48, 0.6);
}

.dawn-page.is-lit .domain-mark {
    opacity: 1;
    transform: translateY(0);
}

.dawn-page.is-lit .domain-mark::after {
    opacity: 0.85;
    transform: scaleX(1);
}

.dawn-subtitle {
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(15px, 1.3vw, 18px);
    color: var(--margin-gray);
    margin-top: 28px;
    letter-spacing: 0.04em;
    opacity: 0;
    transition: opacity 1100ms 1500ms var(--ease-soft);
}

.dawn-page.is-lit .dawn-subtitle {
    opacity: 1;
}

.date-stamp {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border: 1px solid rgba(122, 112, 104, 0.5);
    background: linear-gradient(180deg, rgba(58, 48, 40, 0.35), rgba(26, 20, 24, 0.65));
    backdrop-filter: blur(2px);
    transition: border-color 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft);
    position: relative;
    overflow: hidden;
}

.date-stamp::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top left, rgba(58, 48, 40, 0.55), transparent 60%);
    pointer-events: none;
    opacity: 0.7;
}

.date-stamp:hover {
    border-color: rgba(232, 160, 48, 0.7);
    box-shadow: 0 0 18px rgba(232, 160, 48, 0.22), inset 0 0 12px rgba(232, 160, 48, 0.08);
}

.date-stamp__label {
    font-family: var(--font-headline);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--margin-gray);
    position: relative;
}

.date-stamp__value {
    font-family: var(--font-headline);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--page-cream);
    position: relative;
}

.date-stamp--hero {
    margin-top: 44px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 1100ms 1700ms var(--ease-soft), transform 1100ms 1700ms var(--ease-soft);
}

.dawn-page.is-lit .date-stamp--hero {
    opacity: 1;
    transform: translateY(0);
}

.dawn-scroll-hint {
    margin-top: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transition: opacity 1200ms 2200ms var(--ease-soft);
}

.dawn-page.is-lit .dawn-scroll-hint {
    opacity: 1;
}

.dawn-scroll-hint__line {
    display: block;
    width: 1px;
    height: 48px;
    background: linear-gradient(180deg, transparent, rgba(232, 160, 48, 0.7), transparent);
    animation: scrollPulse 2.6s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
    50%      { opacity: 1;   transform: scaleY(1); }
}

.dawn-scroll-hint__text {
    font-family: var(--font-headline);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--margin-gray);
}

/* ============== Dividers (flowing curves) ============== */

.divider {
    margin: var(--entry-gap) auto;
    color: var(--neon-amber);
    width: 100%;
    max-width: 540px;
    transition: opacity 0.5s var(--ease-soft), filter 0.5s var(--ease-soft);
    opacity: 0.55;
    filter: drop-shadow(0 0 6px rgba(232, 160, 48, 0.18));
}

.divider svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.divider__path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 1100ms var(--ease-soft);
}

.divider.is-drawn .divider__path {
    stroke-dashoffset: 0;
}

.divider.is-drawn .divider__path--secondary {
    transition-delay: 350ms;
}

.divider:hover {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(232, 160, 48, 0.45));
}

.divider__dot {
    opacity: 0;
    transition: opacity 600ms 900ms var(--ease-soft);
}

.divider.is-drawn .divider__dot {
    opacity: 1;
}

.divider--final {
    color: var(--neon-rose);
    filter: drop-shadow(0 0 10px rgba(232, 72, 120, 0.22));
}

.divider--reversed {
    transform: scaleX(-1);
}

/* ============== Journal entries ============== */

.entry {
    position: relative;
    margin: 0 auto var(--entry-gap);
}

.entry__header {
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
}

.entry__title {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: clamp(24px, 3vw, 36px);
    letter-spacing: 0.01em;
    line-height: 1.25;
    color: var(--page-cream);
    text-shadow: 0 0 22px rgba(232, 160, 48, 0.12);
}

.entry__lede {
    font-size: clamp(17px, 1.2vw, 19px);
    line-height: 1.85;
    color: var(--page-cream);
}

.entry__lede::first-letter {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 2.6em;
    line-height: 0.9;
    float: left;
    padding: 6px 10px 0 0;
    color: var(--neon-amber);
    text-shadow: 0 0 18px rgba(232, 160, 48, 0.45);
}

.entry__body p {
    margin-bottom: 1.4em;
    color: var(--page-cream);
}

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

.entry__body em {
    font-style: italic;
    color: var(--neon-amber);
    text-shadow: 0 0 8px rgba(232, 160, 48, 0.18);
}

.ink-link {
    position: relative;
    color: var(--page-cream);
    border-bottom: 1px solid rgba(122, 112, 104, 0.55);
    cursor: pointer;
    transition: color 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft), text-shadow 0.35s var(--ease-soft);
    padding-bottom: 1px;
}

.ink-link:hover {
    color: var(--neon-amber);
    border-color: var(--neon-amber);
    text-shadow: 0 0 8px rgba(232, 160, 48, 0.7), 0 0 18px rgba(232, 160, 48, 0.35);
}

.ink-link.is-pulsed {
    animation: inkPulse 700ms var(--ease-soft);
}

@keyframes inkPulse {
    0%   { color: var(--neon-amber); text-shadow: 0 0 0 rgba(232, 160, 48, 0); }
    40%  { color: var(--neon-rose);  text-shadow: 0 0 14px rgba(232, 72, 120, 0.6); }
    100% { color: var(--page-cream); text-shadow: 0 0 0 rgba(232, 160, 48, 0); }
}

/* Margin notes */
.entry__margin {
    position: absolute;
    left: -210px;
    top: 56px;
    width: 180px;
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.55;
    color: var(--margin-gray);
    text-align: right;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 900ms 200ms var(--ease-soft), transform 900ms 200ms var(--ease-soft);
}

.entry__margin::before {
    content: '';
    display: block;
    width: 22px;
    height: 1px;
    background: rgba(122, 112, 104, 0.6);
    margin-left: auto;
    margin-bottom: 10px;
}

.entry.is-visible .entry__margin {
    opacity: 1;
    transform: translateX(0);
}

/* On narrower screens the margin note collapses inline */
@media (max-width: 980px) {
    .entry__margin {
        position: relative;
        left: 0;
        top: 0;
        width: auto;
        text-align: center;
        margin: 0 auto 22px;
        max-width: 420px;
    }
    .entry__margin::before {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============== Colophon ============== */

.colophon {
    text-align: center;
    padding: 60px 0 120px;
    color: var(--margin-gray);
}

.colophon__mark {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(122, 112, 104, 0.6);
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.4s var(--ease-soft), color 0.4s var(--ease-soft);
}

.colophon__mark:hover {
    border-color: var(--neon-amber);
    color: var(--neon-amber);
    box-shadow: 0 0 14px rgba(232, 160, 48, 0.25);
}

.colophon__symbol {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: 14px;
    color: inherit;
}

.colophon__line {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 14px;
    margin: 6px 0;
    line-height: 1.6;
}

.colophon__line--small {
    font-style: normal;
    font-family: var(--font-headline);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.colophon__line em {
    font-style: italic;
    color: var(--page-cream);
}

/* ============== Entry reveal-on-scroll (subtle, journal already there) ============== */

.entry,
.divider,
.colophon {
    opacity: 0.001;
    transition: opacity 800ms var(--ease-soft);
}

.entry.is-visible,
.divider.is-visible,
.colophon.is-visible {
    opacity: 1;
}

/* Initial state: dawn page is visible immediately */

.dawn-page {
    opacity: 1;
}

/* ============== Selection style ============== */

::selection {
    background: rgba(232, 160, 48, 0.28);
    color: var(--page-cream);
    text-shadow: 0 0 8px rgba(232, 160, 48, 0.6);
}

/* ============== Subtle ambient pulse on amber accents ============== */

@keyframes amberBreathe {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(232, 160, 48, 0.18)); }
    50%      { filter: drop-shadow(0 0 14px rgba(232, 160, 48, 0.35)); }
}

.divider.is-drawn {
    animation: amberBreathe 6s ease-in-out infinite;
}

.divider--final.is-drawn {
    animation-name: roseBreathe;
}

@keyframes roseBreathe {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(232, 72, 120, 0.18)); }
    50%      { filter: drop-shadow(0 0 16px rgba(232, 72, 120, 0.4)); }
}

/* ============== Reduced motion fallback ============== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}