/* ================================================================
   senggack.xyz — fairycore, organic-flow, serif-revival
   Palette: complementary lavender & moss
   ================================================================ */

:root {
    --twilight-lavender: #B4A0D2;
    --deep-forest: #2D2B3D;
    --moss-green: #7A9E7E;
    --dawn-mist: #F0EBF5;
    --pale-fern: #C8D9C4;
    --warm-parchment: #F5F0E8;
    --firefly-gold: #D4B896;
    --ink-violet: #7B6B94;

    --font-display: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
    --font-body: 'Karla', 'Helvetica Neue', Arial, sans-serif;
    --font-hand: 'Homemade Apple', cursive;
}

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

html, body {
    background: #ffffff;
    color: var(--deep-forest);
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.1vw, 1.08rem);
    line-height: 1.78;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

p {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--deep-forest);
}

em { font-style: italic; }

/* ================================================================
   Generic section
   ================================================================ */
.clearing {
    position: relative;
    width: 100%;
    padding: 8rem 6vw;
    min-height: 100vh;
}

/* ================================================================
   CLEARING I — THE ARRIVAL
   ================================================================ */
.clearing-arrival {
    background: linear-gradient(180deg, #ffffff 0%, var(--dawn-mist) 60%, var(--dawn-mist) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    animation: arrivalFade 2.2s ease-out both;
}

@keyframes arrivalFade {
    from { background: #ffffff; }
    to   { background: linear-gradient(180deg, #ffffff 0%, var(--dawn-mist) 60%, var(--dawn-mist) 100%); }
}

.mist-layer {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 55% 70%, rgba(180,160,210,0.12), transparent 60%),
                radial-gradient(ellipse at 20% 30%, rgba(200,217,196,0.18), transparent 55%);
    pointer-events: none;
}

.arrival-title-wrap {
    position: relative;
    z-index: 2;
    /* never perfectly centered — slightly below & slightly left */
    transform: translate(-6%, 8%);
    max-width: 760px;
}

.arrival-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    line-height: 1;
    color: var(--deep-forest);
    letter-spacing: -0.01em;
    opacity: 0;
    animation: titleRise 2s 0.6s ease-out forwards;
}

@keyframes titleRise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.arrival-sub {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--ink-violet);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    margin-top: 1.4rem;
    opacity: 0;
    animation: titleRise 2s 1.2s ease-out forwards;
}

.arrival-whisper {
    font-family: var(--font-hand);
    color: var(--moss-green);
    font-size: 0.95rem;
    margin-top: 3rem;
    opacity: 0;
    animation: whisperBlink 4s 2.4s ease-in-out infinite;
}

@keyframes whisperBlink {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.9;  }
}

.annotation {
    position: absolute;
    font-family: var(--font-hand);
    color: var(--ink-violet);
    font-size: 0.85rem;
}

.annotation-arrival {
    bottom: 4rem;
    left: 8%;
    transform: rotate(-4deg);
    opacity: 0;
    animation: titleRise 2s 2s ease-out forwards;
}

/* gathering leaves */
.arrival-leaf {
    position: absolute;
    width: 18px;
    height: 18px;
    opacity: 0;
    z-index: 3;
}
.arrival-leaf-1 { width: 16px; height: 16px; top: 18%;  left: 52%; animation: gather1 1.6s 0.9s ease-out forwards, swaySlow 7s 3s ease-in-out infinite; }
.arrival-leaf-2 { width: 20px; height: 20px; top: 42%;  left: 32%; animation: gather2 1.8s 1.1s ease-out forwards, swaySlow 9s 4s ease-in-out infinite; }
.arrival-leaf-3 { width: 14px; height: 14px; top: 58%;  left: 64%; animation: gather3 1.7s 1.3s ease-out forwards, swaySlow 8s 5s ease-in-out infinite; }
.arrival-leaf-4 { width: 22px; height: 22px; top: 70%;  left: 24%; animation: gather4 1.9s 1.5s ease-out forwards, swaySlow 10s 6s ease-in-out infinite; }
.arrival-leaf-5 { width: 18px; height: 18px; top: 30%;  left: 72%; animation: gather1 1.8s 1.7s ease-out forwards, swaySlow 11s 7s ease-in-out infinite; }

@keyframes gather1 { from { transform: translate(-40vw, -30vh) rotate(-80deg); opacity: 0; } to { transform: translate(0,0) rotate(10deg); opacity: 1; } }
@keyframes gather2 { from { transform: translate(-50vw,   0vh) rotate( 40deg); opacity: 0; } to { transform: translate(0,0) rotate(-8deg); opacity: 1; } }
@keyframes gather3 { from { transform: translate( 40vw,  -30vh) rotate( 70deg); opacity: 0; } to { transform: translate(0,0) rotate(-4deg); opacity: 1; } }
@keyframes gather4 { from { transform: translate( 50vw,   20vh) rotate(-60deg); opacity: 0; } to { transform: translate(0,0) rotate(12deg); opacity: 1; } }

@keyframes swaySlow {
    0%, 100% { transform: translate(0,0) rotate(6deg); }
    50%      { transform: translate(2px,-3px) rotate(-4deg); }
}

.arrival-fern {
    position: absolute;
    right: 6%;
    bottom: 3%;
    width: 120px;
    height: 160px;
    opacity: 0;
    animation: titleRise 2.4s 1.6s ease-out forwards;
    pointer-events: none;
}

/* ================================================================
   CLEARING II — THE UNDERSTORY
   ================================================================ */
.clearing-understory {
    background: linear-gradient(180deg, var(--dawn-mist) 0%, var(--warm-parchment) 100%);
    padding-top: 10rem;
    padding-bottom: 12rem;
    overflow: hidden;
}

.understory-label {
    position: absolute;
    top: 4rem;
    left: 6vw;
    font-family: var(--font-display);
    color: var(--ink-violet);
    font-style: italic;
}
.understory-label .label-roman { font-size: 1.6rem; margin-right: 0.6rem; font-style: normal; font-weight: 700; }
.understory-label .label-name  { font-size: 1.05rem; }

.vine-network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.vine {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.clearing-understory.active .vine    { clip-path: inset(0 0% 0 0); }
.clearing-understory.active .vine-1  { transition-delay: 0s; }
.clearing-understory.active .vine-2  { transition-delay: 0.35s; }
.clearing-understory.active .vine-3  { transition-delay: 0.55s; }
.clearing-understory.active .vine-4  { transition-delay: 0.75s; }
.clearing-understory.active .vine-5  { transition-delay: 0.95s; }

.vine-leaves { opacity: 0; transition: opacity 1s ease 1.8s; }
.clearing-understory.active .vine-leaves { opacity: 1; }

.scatter {
    position: relative;
    z-index: 2;
}

.block {
    position: relative;
    margin-bottom: 6rem;
    max-width: 520px;
}

.block h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    color: var(--deep-forest);
    font-size: clamp(1.55rem, 2.4vw, 2.1rem);
    line-height: 1.22;
    margin-bottom: 1rem;
}

.block p {
    color: #3a3848;
    max-width: 46ch;
}

.block-index {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--moss-green);
    font-size: 1rem;
    display: inline-block;
    margin-bottom: 0.6rem;
    letter-spacing: 0.04em;
}

.pen-note {
    display: inline-block;
    margin-top: 1rem;
    font-family: var(--font-hand);
    color: var(--ink-violet);
    font-size: 0.85rem;
    transform: rotate(-2deg);
}

/* organic-flow positioning — desktop/tablet */
.block-a { margin-left: 10%; width: 32%; }
.block-b { margin-left: 48%; width: 34%; }
.block-c { margin-left: 14%; width: 30%; }
.block-d { margin-left: 56%; width: 34%; }
.block-e { margin-left: 22%; width: 36%; }

/* firefly gold highlight — one per block max */
.block-a h2::first-letter,
.block-c h2::first-letter,
.block-e h2::first-letter {
    color: var(--firefly-gold);
    font-weight: 700;
}

/* slide-reveal animation */
.reveal {
    opacity: 0;
    transition: transform 700ms ease-out, opacity 500ms ease-out;
}
.reveal-left  { transform: translateX(-80px); }
.reveal-right { transform: translateX( 80px); }
.reveal.visible {
    opacity: 1;
    transform: translateX(0);
}

/* scatter leaves */
.scatter-leaf {
    position: absolute;
    z-index: 2;
}
.scatter-leaf-a { top: 18%;  left: 42%; width: 26px; height: 26px; transform: rotate(20deg); }
.scatter-leaf-b { top: 48%;  left: 12%; width: 30px; height: 30px; transform: rotate(-15deg); }
.scatter-leaf-c { top: 78%;  left: 70%; width: 24px; height: 24px; transform: rotate(40deg); }

/* ================================================================
   CLEARING III — THE CANOPY
   ================================================================ */
.clearing-canopy {
    background: radial-gradient(ellipse at 50% 40%, #3a3650 0%, var(--deep-forest) 60%, #1a1928 100%);
    color: var(--warm-parchment);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10rem 8vw;
}

.canopy-inner {
    max-width: 640px;
    position: relative;
    z-index: 2;
    text-align: center;
}

.canopy-chapter {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    color: var(--twilight-lavender);
    font-size: 1rem;
    margin-bottom: 2.4rem;
    letter-spacing: 0.08em;
}

.canopy-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    line-height: 1.18;
    color: var(--warm-parchment);
    margin-bottom: 2.4rem;
}

.canopy-inner p {
    color: #e6ddf0;
    font-family: var(--font-body);
    margin-bottom: 1.6rem;
    font-size: clamp(1rem, 1.15vw, 1.1rem);
}

.canopy-small {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--twilight-lavender) !important;
    margin-top: 2rem;
}

/* bioluminescent glow */
.glow {
    text-shadow: 0 0 20px rgba(180, 160, 210, 0.3);
    animation: bioGlow 6s ease-in-out infinite;
}

@keyframes bioGlow {
    0%, 100% { text-shadow: 0 0 16px rgba(180, 160, 210, 0.2), 0 0 30px rgba(180,160,210,0.1); }
    50%      { text-shadow: 0 0 22px rgba(180, 160, 210, 0.4), 0 0 44px rgba(180,160,210,0.18); }
}

/* fireflies */
.firefly {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--firefly-gold);
    box-shadow: 0 0 12px 2px rgba(212, 184, 150, 0.8),
                0 0 24px 6px rgba(212, 184, 150, 0.35);
    opacity: 0;
    z-index: 1;
}
.firefly-1 { top: 22%; left: 14%; animation: fly1 14s ease-in-out infinite, glimmer 3.2s ease-in-out infinite; }
.firefly-2 { top: 66%; left: 82%; animation: fly2 16s ease-in-out infinite, glimmer 3.6s 0.4s ease-in-out infinite; }
.firefly-3 { top: 38%; left: 68%; animation: fly3 18s ease-in-out infinite, glimmer 3.4s 0.9s ease-in-out infinite; }
.firefly-4 { top: 78%; left: 22%; animation: fly1 15s ease-in-out infinite, glimmer 3.8s 1.2s ease-in-out infinite; }
.firefly-5 { top: 18%; left: 48%; animation: fly2 17s ease-in-out infinite, glimmer 3.1s 0.6s ease-in-out infinite; }
.firefly-6 { top: 54%; left: 36%; animation: fly3 19s ease-in-out infinite, glimmer 3.9s 1.8s ease-in-out infinite; }
.firefly-7 { top: 84%; left: 58%; animation: fly1 13s ease-in-out infinite, glimmer 3.3s 2.1s ease-in-out infinite; }
.firefly-8 { top: 10%; left: 88%; animation: fly2 20s ease-in-out infinite, glimmer 3.7s 0.2s ease-in-out infinite; }

@keyframes glimmer {
    0%, 100% { opacity: 0.15; }
    50%      { opacity: 0.9;  }
}
@keyframes fly1 { 0%,100% { transform: translate(0,0);} 25% { transform: translate(28px, -18px);} 50% { transform: translate(14px, 22px);} 75% { transform: translate(-20px, 8px);} }
@keyframes fly2 { 0%,100% { transform: translate(0,0);} 25% { transform: translate(-22px, 20px);} 50% { transform: translate(-8px, -24px);} 75% { transform: translate(18px, -6px);} }
@keyframes fly3 { 0%,100% { transform: translate(0,0);} 25% { transform: translate(16px, 14px);} 50% { transform: translate(-18px, 20px);} 75% { transform: translate(-12px, -22px);} }

/* ================================================================
   CLEARING IV — THE MEADOW
   ================================================================ */
.clearing-meadow {
    background: linear-gradient(180deg, var(--deep-forest) 0%, #4a4558 4%, var(--dawn-mist) 20%, var(--warm-parchment) 100%);
    overflow: hidden;
    padding: 14rem 8vw 8rem;
}

.falling-leaves {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.falling-leaf {
    position: absolute;
    top: -30px;
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

@keyframes fall {
    from { transform: translateY(-20px) rotate(0deg); }
    to   { transform: translateY(calc(100vh + 20px)) rotate(360deg); }
}

@keyframes sway {
    0%, 100% { margin-left: 0; }
    50%      { margin-left: 18px; }
}

.meadow-inner {
    position: relative;
    z-index: 2;
    max-width: 680px;
    margin-left: 18%;
}

.meadow-chapter {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    color: var(--moss-green);
    font-size: 1rem;
    margin-bottom: 2rem;
    letter-spacing: 0.08em;
}

.meadow-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
    color: var(--deep-forest);
    line-height: 1.2;
    margin-bottom: 1.8rem;
}

.meadow-text {
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    max-width: 50ch;
    margin-bottom: 2.4rem;
    color: #3a3848;
}

.meadow-sign {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--ink-violet);
    font-size: 1.2rem;
    margin: 3rem 0 2rem;
}

.meadow-footer {
    font-family: var(--font-hand);
    color: var(--moss-green);
    font-size: 0.9rem;
    margin-top: 4rem;
    opacity: 0.85;
}
.meadow-footer span + span { margin-left: 0.3rem; }

/* ================================================================
   Mobile — collapse organic flow
   ================================================================ */
@media (max-width: 768px) {
    .clearing { padding: 5rem 7vw; }

    .arrival-title-wrap { transform: none; }
    .arrival-fern { width: 80px; height: 110px; right: 4%; bottom: 4%; }

    .block-a, .block-b, .block-c, .block-d, .block-e {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
    }
    .block { margin-bottom: 4rem; }

    .vine-network { display: none; }
    .scatter-leaf { display: none; }

    .meadow-inner { margin-left: 0; }
    .annotation-arrival { left: 6%; bottom: 2rem; }
}