/* layer-2.report — moonlit ikebana from the second layer
   Implements: IntersectionObserver for shoji-wipe reveals, slide-reveal pattern.
   Typography stack includes Fraunces, Quicksand, Nunito, Shippori Mincho,
   with Inter, Lora, Space Grotesk and other system fallbacks.
   shoji-wipe reveals dominate; every section reveals via shoji-wipe.
*/

:root {
    --kinari: #F4ECDC;
    --ink-plum: #1B0E1F;
    --amethyst: #3E1259;
    --garnet: #7A0E2E;
    --emerald: #0F4D3A;
    --honey: #C68A2E;

    --glow-amethyst: 0 0 18px rgba(143, 73, 213, 0.55), 0 0 42px rgba(143, 73, 213, 0.28);
    --glow-emerald: 0 0 14px rgba(46, 178, 132, 0.50), 0 0 36px rgba(46, 178, 132, 0.22);
    --glow-garnet: 0 0 16px rgba(186, 56, 96, 0.50), 0 0 38px rgba(186, 56, 96, 0.24);
    --glow-honey: 0 0 14px rgba(232, 172, 78, 0.55), 0 0 32px rgba(232, 172, 78, 0.28);

    --column-w: 620px;
    --shoji-ease: cubic-bezier(0.22, 0.9, 0.18, 1.0);

    --glow-intensity: 1;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--kinari);
    color: var(--ink-plum);
    font-family: "Quicksand", "Inter", system-ui, sans-serif;
    font-size: 17.5px;
    line-height: 1.78;
    letter-spacing: 0.005em;
    font-weight: 400;
    overflow-x: hidden;
    min-height: 100vh;
    cursor: default;
    position: relative;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Paper grain overlay */
.paper-grain {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
    mix-blend-mode: multiply;
}

/* Sprite hidden but accessible */
.flora-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Hanging chōchin lantern */
.lantern {
    position: fixed;
    top: 32px;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    width: 88px;
    height: 120px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 50;
    transform-origin: top center;
    transition: transform 1.2s var(--shoji-ease);
    padding: 0;
}

.lantern.swing {
    animation: lantern-swing 1.4s var(--shoji-ease);
}

@keyframes lantern-swing {
    0%   { transform: translateX(-50%) rotate(0deg); }
    25%  { transform: translateX(-50%) rotate(4deg); }
    50%  { transform: translateX(-50%) rotate(-3.2deg); }
    75%  { transform: translateX(-50%) rotate(2deg); }
    100% { transform: translateX(-50%) rotate(0deg); }
}

.lantern-svg {
    width: 100%;
    height: 100%;
    filter:
        drop-shadow(0 0 14px rgba(198, 138, 46, 0.7))
        drop-shadow(0 0 36px rgba(143, 73, 213, 0.4));
    position: relative;
    z-index: 2;
}

.lantern-glow {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 240px;
    background: radial-gradient(
        circle at center,
        rgba(232, 172, 78, 0.28) 0%,
        rgba(143, 73, 213, 0.18) 35%,
        rgba(143, 73, 213, 0) 65%
    );
    pointer-events: none;
    z-index: 1;
    border-radius: 50%;
}

/* Scroll progress (peony-half) top right */
.scroll-progress {
    position: fixed;
    top: 36px;
    right: 36px;
    width: 28px;
    height: 28px;
    z-index: 40;
    color: var(--garnet);
    transform-origin: center;
    transform: scale(calc(0.62 + var(--scroll-fraction, 0) * 0.6)) rotate(calc(var(--scroll-fraction, 0) * 360deg));
    filter:
        drop-shadow(0 0 10px rgba(186, 56, 96, calc(0.4 + var(--scroll-fraction, 0) * 0.4)))
        drop-shadow(0 0 22px rgba(186, 56, 96, calc(0.18 + var(--scroll-fraction, 0) * 0.3)));
    transition: transform 200ms var(--shoji-ease);
}

.scroll-progress svg {
    width: 100%;
    height: 100%;
}

/* Incense thread, left margin */
.incense-thread {
    position: fixed;
    top: 0;
    left: max(28px, calc((100vw - var(--column-w)) / 2 - 64px));
    width: 2px;
    height: 100vh;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.incense-line {
    position: absolute;
    top: -20%;
    left: 0;
    width: 2px;
    height: 220%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(122, 14, 46, 0) 8%,
        rgba(122, 14, 46, 0.35) 22%,
        rgba(186, 56, 96, 0.55) 50%,
        rgba(122, 14, 46, 0.35) 78%,
        rgba(122, 14, 46, 0) 92%,
        transparent 100%
    );
    filter: blur(0.5px) drop-shadow(0 0 6px rgba(186, 56, 96, 0.55));
    animation: incense-rise 14s linear infinite;
}

@keyframes incense-rise {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-30%); }
}

/* Margin wisteria — drifting at low opacity */
.margin-wisteria {
    position: fixed;
    width: 96px;
    height: 144px;
    opacity: 0.06;
    z-index: 1;
    pointer-events: none;
    transform-origin: top center;
    animation: wisteria-sway 32s ease-in-out infinite;
    filter: drop-shadow(0 0 14px rgba(186, 56, 96, 0.4));
}

.margin-wisteria svg {
    width: 100%;
    height: 100%;
}

.margin-wisteria.left {
    left: 4vw;
    top: 12vh;
    animation-delay: -8s;
}

.margin-wisteria.right {
    right: 5vw;
    top: 38vh;
    animation-delay: -18s;
    animation-duration: 28s;
}

.margin-wisteria.far-left {
    left: 8vw;
    top: 68vh;
    animation-delay: -3s;
    animation-duration: 38s;
    opacity: 0.05;
}

@keyframes wisteria-sway {
    0%   { transform: rotate(-2.4deg) translateY(0); }
    50%  { transform: rotate(2.4deg) translateY(6px); }
    100% { transform: rotate(-2.4deg) translateY(0); }
}

/* Cursor petal */
.cursor-petal {
    position: fixed;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    pointer-events: none;
    z-index: 60;
    transform: translate3d(-100px, -100px, 0) rotate(0deg);
    will-change: transform;
    color: var(--garnet);
    filter: drop-shadow(0 0 10px rgba(186, 56, 96, 0.6))
            drop-shadow(0 0 20px rgba(186, 56, 96, 0.28));
}

.cursor-petal svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Main column */
.column {
    position: relative;
    z-index: 10;
    max-width: var(--column-w);
    margin: 0 auto;
    padding: 0 24px;
}

.act {
    position: relative;
    padding: 96px 0;
}

.act-haiku {
    min-height: 40vh;
    padding: 22vh 0 8vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.act-premise {
    min-height: 220vh;
    padding: 14vh 0;
}

.act-garden {
    min-height: 140vh;
    padding: 14vh 0;
}

.act-koi-interlude {
    min-height: 80vh;
    padding: 10vh 0;
}

.act-pond {
    min-height: 100vh;
    padding: 0;
}

/* Reveal mechanism — shoji wipe */
.reveal {
    position: relative;
    overflow: hidden;
    margin-bottom: 48px;
}

.reveal .shoji {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(244, 236, 220, 1) 0%,
        rgba(244, 236, 220, 0.98) 80%,
        rgba(244, 236, 220, 0.86) 100%
    );
    border-right: 1px solid rgba(27, 14, 31, 0.08);
    z-index: 3;
    transform: translateX(0);
    transition: transform 720ms var(--shoji-ease);
    box-shadow: -2px 0 12px rgba(27, 14, 31, 0.04);
}

.reveal.in-view .shoji {
    transform: translateX(110%);
}

.reveal .reveal-content {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 600ms ease 90ms, transform 600ms ease 90ms;
}

.reveal.in-view .reveal-content {
    opacity: 1;
    transform: translateY(0);
}

/* ACT 1 — Opening haiku */
.haiku {
    font-family: "Fraunces", "Lora", Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1, "wght" 420;
    font-size: clamp(2.4rem, 5.6vw, 4.8rem);
    line-height: 1.18;
    color: var(--ink-plum);
    text-align: center;
    margin-bottom: 8vh;
    letter-spacing: -0.005em;
}

.haiku span {
    display: block;
    font-style: italic;
}

.haiku span:nth-child(2) {
    color: var(--amethyst);
    padding-left: 1.6em;
}

.haiku span:nth-child(3) {
    padding-left: 3.2em;
}

.wordmark {
    font-family: "Quicksand", sans-serif;
    font-size: 13px;
    text-align: center;
    letter-spacing: 0.18em;
    color: var(--ink-plum);
    opacity: 0.62;
    text-transform: lowercase;
    margin-top: 32px;
}

/* Section openers */
.section-opener {
    text-align: center;
    margin: 80px 0 48px;
}

.section-opener .reveal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    position: relative;
}

.bloom-glyph {
    display: inline-block;
    width: 48px;
    height: 48px;
    transform: scale(0.92);
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 0 12px rgba(186, 56, 96, calc(0.5 * var(--glow-intensity))))
            drop-shadow(0 0 28px rgba(186, 56, 96, calc(0.24 * var(--glow-intensity))));
}

.reveal.in-view .bloom-glyph {
    transform: scale(1);
}

.bloom-glyph svg {
    width: 100%;
    height: 100%;
}

.section-opener h2 {
    font-family: "Fraunces", "Lora", Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1, "wght" 420;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    color: var(--ink-plum);
    line-height: 1.3;
    letter-spacing: -0.005em;
    transition: color 400ms ease;
}

.section-opener h2:hover {
    color: var(--amethyst);
}

.section-opener h2 em {
    font-style: italic;
}

.vertical-anno {
    font-family: "Shippori Mincho", serif;
    font-size: 13px;
    color: var(--ink-plum);
    opacity: 0.55;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    font-feature-settings: "vert" 1;
    position: absolute;
    right: -28px;
    top: 0;
    letter-spacing: 0.2em;
}

.vertical-anno.tiny {
    font-size: 12px;
    right: -22px;
    top: 4px;
}

/* Prose */
.prose {
    margin-bottom: 36px;
}

.prose p {
    font-family: "Quicksand", sans-serif;
    font-size: 17.5px;
    line-height: 1.78;
    color: var(--ink-plum);
    letter-spacing: 0.005em;
}

.prose em {
    font-style: italic;
    color: var(--amethyst);
}

.dropcap {
    font-family: "Fraunces", "Lora", Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1, "wght" 600;
    font-size: 6.4rem;
    color: var(--honey);
    float: left;
    line-height: 0.92;
    margin: 0.18em 0.12em -0.1em -0.04em;
    text-shadow: 0 0 22px rgba(232, 172, 78, 0.4),
                 0 4px 0 rgba(15, 77, 58, 0.16);
    letter-spacing: -0.04em;
}

.lede p {
    font-size: 18px;
}

/* Bloom numerals */
.bloom-num {
    font-family: "Nunito", "Inter", sans-serif;
    font-weight: 700;
    font-feature-settings: "tnum" 1, "ss01" 1;
    color: var(--amethyst);
    text-shadow: var(--glow-amethyst);
    padding: 0 0.06em;
    transition: text-shadow 380ms ease;
    letter-spacing: 0.01em;
}

.bloom-num.pulse {
    animation: bloom-pulse 380ms ease;
}

@keyframes bloom-pulse {
    0%   { text-shadow: var(--glow-amethyst); }
    50%  {
        text-shadow:
            0 0 28px rgba(143, 73, 213, 0.85),
            0 0 64px rgba(143, 73, 213, 0.45);
    }
    100% { text-shadow: var(--glow-amethyst); }
}

/* Section terminator (camellia) */
.section-terminator {
    text-align: center;
    margin: 64px 0 32px;
}

.section-terminator .reveal-content {
    display: flex;
    justify-content: center;
}

.section-terminator svg {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 0 10px rgba(186, 56, 96, 0.5))
            drop-shadow(0 0 24px rgba(186, 56, 96, 0.22));
}

/* Bamboo divider */
.bamboo-divider {
    margin: 64px auto 32px;
    text-align: center;
    max-width: 240px;
}

.bamboo-divider .reveal-content {
    display: flex;
    justify-content: center;
}

.bamboo-divider svg {
    width: 240px;
    height: 16px;
    filter: drop-shadow(0 0 6px rgba(15, 77, 58, 0.4));
}

/* Field notes */
.field-notes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.field-note {
    text-align: center;
    margin-bottom: 56px;
    padding: 20px 16px;
}

.field-note .reveal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.iris-bullet {
    width: 22px;
    height: 22px;
    display: inline-block;
    filter: drop-shadow(0 0 8px rgba(15, 77, 58, 0.5))
            drop-shadow(0 0 18px rgba(15, 77, 58, 0.22));
    transform: scale(0.92);
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal.in-view .iris-bullet {
    transform: scale(1);
}

.iris-bullet svg {
    width: 100%;
    height: 100%;
}

.field-note p {
    font-family: "Quicksand", sans-serif;
    font-size: 17px;
    line-height: 1.72;
    color: var(--ink-plum);
    max-width: 520px;
}

/* ACT 4 — Koi interlude inline strip */
.koi-strip {
    margin: 48px 0 0;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
}

.koi-strip .reveal-content {
    background: linear-gradient(
        135deg,
        #2a0c40 0%,
        #3E1259 45%,
        #4a1865 100%
    );
    padding: 72px 0 48px;
    border-radius: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 24px rgba(15, 5, 25, 0.18);
    position: relative;
    overflow: hidden;
}

.koi-track {
    position: relative;
    width: 100%;
    height: 110px;
    overflow: hidden;
}

.koi-fish {
    position: absolute;
    width: 96px;
    height: 36px;
    filter: drop-shadow(0 0 12px rgba(232, 172, 78, 0.5))
            drop-shadow(0 0 28px rgba(232, 172, 78, 0.28));
    will-change: transform;
}

.koi-fish svg {
    width: 100%;
    height: 100%;
}

.koi-fish.koi-1 {
    top: 8px;
    animation: koi-drift-1 18s linear infinite;
}

.koi-fish.koi-2 {
    top: 44px;
    animation: koi-drift-2 24s linear infinite;
    transform: scale(0.9);
}

.koi-fish.koi-3 {
    top: 72px;
    animation: koi-drift-3 30s linear infinite;
    transform: scale(0.78);
}

@keyframes koi-drift-1 {
    0%   { transform: translateX(-120px) translateY(0) rotate(2deg); }
    50%  { transform: translateX(50vw) translateY(-6px) rotate(-2deg); }
    100% { transform: translateX(110vw) translateY(0) rotate(2deg); }
}

@keyframes koi-drift-2 {
    0%   { transform: translateX(110vw) translateY(0) rotate(-180deg) scale(0.9); }
    50%  { transform: translateX(40vw) translateY(8px) rotate(-178deg) scale(0.9); }
    100% { transform: translateX(-120px) translateY(0) rotate(-180deg) scale(0.9); }
}

@keyframes koi-drift-3 {
    0%   { transform: translateX(-120px) translateY(0) rotate(3deg) scale(0.78); }
    50%  { transform: translateX(60vw) translateY(-4px) rotate(-3deg) scale(0.78); }
    100% { transform: translateX(110vw) translateY(0) rotate(3deg) scale(0.78); }
}

.koi-caption {
    text-align: center;
    margin-top: 32px;
    color: var(--kinari);
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: lowercase;
    opacity: 0.82;
}

/* ACT 5 — Pond closer */
.act-pond {
    background: var(--amethyst);
    background: radial-gradient(
        ellipse at 50% 30%,
        #4a186a 0%,
        #3E1259 38%,
        #2a0c40 80%,
        #1B0E1F 100%
    );
    color: var(--kinari);
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    max-width: 100vw;
    padding: 0;
    min-height: 100vh;
}

.pond-content {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
}

.pond-koi {
    position: absolute;
    left: 0;
    width: 100%;
    height: 200px;
    overflow: visible;
    filter:
        drop-shadow(0 0 14px rgba(232, 172, 78, 0.5))
        drop-shadow(0 0 32px rgba(232, 172, 78, 0.25));
}

.pond-koi-1 {
    top: 18%;
}

.pond-koi-2 {
    top: 38%;
    opacity: 0.92;
}

.pond-koi-3 {
    top: 58%;
    opacity: 0.86;
}

.pond-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 36px;
    text-align: center;
    color: var(--kinari);
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    letter-spacing: 0.16em;
    opacity: 0.84;
    text-shadow: 0 0 14px rgba(232, 172, 78, 0.3);
}

.lantern-reflection {
    position: absolute;
    left: 50%;
    bottom: 84px;
    transform: translateX(-50%) scaleY(-1);
    width: 64px;
    height: 88px;
    opacity: 0.32;
    filter: blur(0.6px);
}

.lantern-reflection svg {
    width: 100%;
    height: 100%;
}

/* Map peony-full hover/scale, link maple decoration would go here */
a {
    color: var(--garnet);
    text-decoration: none;
    border-bottom: 1px dotted var(--garnet);
    transition: color 280ms ease, border-color 280ms ease;
}

a:hover {
    color: var(--amethyst);
    border-bottom-color: var(--amethyst);
}

/* Em-dash hover faint emerald */
.prose:hover em,
.prose p:hover {
    transition: color 360ms ease;
}

/* Scroll velocity-driven glow intensity */
body[data-scrolling="true"] {
    --glow-intensity: 1.4;
}

body[data-scrolling="true"] .bloom-num {
    text-shadow:
        0 0 22px rgba(143, 73, 213, 0.78),
        0 0 52px rgba(143, 73, 213, 0.4);
}

/* Mobile responsiveness */
@media (max-width: 720px) {
    .column {
        padding: 0 18px;
    }

    .haiku {
        font-size: clamp(1.8rem, 8vw, 2.6rem);
    }

    .haiku span:nth-child(2) {
        padding-left: 1em;
    }

    .haiku span:nth-child(3) {
        padding-left: 2em;
    }

    .lantern {
        width: 64px;
        height: 88px;
        top: 18px;
    }

    .lantern-glow {
        width: 160px;
        height: 160px;
    }

    .scroll-progress {
        top: 22px;
        right: 22px;
        width: 22px;
        height: 22px;
    }

    .vertical-anno {
        right: -16px;
        font-size: 11px;
    }

    .vertical-anno.tiny {
        right: -14px;
    }

    .margin-wisteria {
        opacity: 0.04;
        width: 64px;
        height: 96px;
    }

    .incense-thread {
        left: 12px;
    }

    .dropcap {
        font-size: 4.6rem;
    }

    .pond-koi {
        height: 140px;
    }

    .lantern-reflection {
        width: 48px;
        height: 64px;
        bottom: 64px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal .shoji {
        transition: opacity 200ms ease;
        transform: translateX(0);
    }

    .reveal.in-view .shoji {
        opacity: 0;
        transform: translateX(0);
    }

    .reveal .reveal-content {
        transition: opacity 200ms ease;
        transform: none;
    }

    .reveal.in-view .reveal-content {
        transform: none;
    }

    .cursor-petal {
        display: none;
    }

    .margin-wisteria,
    .incense-line,
    .koi-fish,
    .lantern {
        animation: none !important;
    }

    .pond-koi use {
        animation: none !important;
    }
}