/* =====================================================
   계엄령.quest — cottagecore meets glitch
   Palette: ethereal-blue
   ===================================================== */

:root {
    --sky-wash: #E8F0FA;
    --mist: #D4E4F4;
    --twilight: #1E2A3A;
    --frost: #8BAFC4;
    --linen: #F8F4EC;
    --lavender-ash: #9B8EC4;
    --petal-white: #FAFCFE;

    --block-radius: 12px;
    --block-shadow: 0 2px 12px rgba(30, 42, 58, 0.06);
    --block-shadow-soft: 0 1px 6px rgba(30, 42, 58, 0.04);
}

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

html, body {
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Nunito', 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    line-height: 1.8;
    color: var(--twilight);
    background: linear-gradient(180deg, var(--sky-wash) 0%, var(--petal-white) 35%, var(--sky-wash) 100%);
    min-height: 100vh;
    padding: 2rem 0;
}

/* =====================================================
   Container
   ===================================================== */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

/* =====================================================
   Modular blocks (shared)
   ===================================================== */
.block {
    position: relative;
    border-radius: var(--block-radius);
    padding: 3rem;
    margin-bottom: 2rem;
    box-shadow: var(--block-shadow);
    overflow: hidden;
    background-color: var(--petal-white);
}

.block-inner {
    position: relative;
    z-index: 2;
}

.duotone-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.05;
    mix-blend-mode: luminosity;
    filter: grayscale(1) contrast(0.8) sepia(0.3) hue-rotate(180deg);
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.duotone-flower {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><g fill='%23445566'><circle cx='200' cy='200' r='40'/><ellipse cx='200' cy='130' rx='30' ry='55'/><ellipse cx='200' cy='270' rx='30' ry='55'/><ellipse cx='130' cy='200' rx='55' ry='30'/><ellipse cx='270' cy='200' rx='55' ry='30'/><ellipse cx='150' cy='150' rx='40' ry='25' transform='rotate(-45 150 150)'/><ellipse cx='250' cy='150' rx='40' ry='25' transform='rotate(45 250 150)'/><ellipse cx='150' cy='250' rx='40' ry='25' transform='rotate(45 150 250)'/><ellipse cx='250' cy='250' rx='40' ry='25' transform='rotate(-45 250 250)'/></g></svg>");
}

.duotone-leaf {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><g fill='%23556677'><path d='M200,40 Q140,140 160,260 Q180,340 200,360 Q220,340 240,260 Q260,140 200,40 Z'/><path d='M200,90 L200,340' stroke='%23334455' stroke-width='2' fill='none'/><path d='M200,160 Q170,170 150,200' stroke='%23334455' stroke-width='2' fill='none'/><path d='M200,160 Q230,170 250,200' stroke='%23334455' stroke-width='2' fill='none'/><path d='M200,220 Q170,230 145,265' stroke='%23334455' stroke-width='2' fill='none'/><path d='M200,220 Q230,230 255,265' stroke='%23334455' stroke-width='2' fill='none'/></g></svg>");
}

/* =====================================================
   Block 1 — The Hearth
   ===================================================== */
.block-hearth {
    background: linear-gradient(160deg, var(--sky-wash) 0%, var(--mist) 100%);
    padding: 5rem 3rem 0 3rem;
    text-align: center;
    min-height: clamp(420px, 55vh, 620px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.hero-title {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: clamp(4rem, 10vw, 8rem);
    color: var(--twilight);
    letter-spacing: 0.04em;
    line-height: 1;
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
}

.hero-subtitle {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    color: var(--frost);
    text-transform: lowercase;
    letter-spacing: 0.4em;
    margin-bottom: 2rem;
}

.hero-tagline {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    color: var(--frost);
    margin-bottom: 1rem;
    opacity: 0.85;
}

.mountain-svg {
    display: block;
    width: 100%;
    height: auto;
}

.mountain-hearth {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35%;
    z-index: 1;
}

/* =====================================================
   Block 2 — The Note
   ===================================================== */
.block-note {
    width: clamp(280px, 75%, 600px);
    margin-left: auto;
    margin-right: auto;
    background-color: var(--linen);
    border: 1px solid rgba(155, 142, 196, 0.18);
    transform: rotate(-1.5deg);
    box-shadow: var(--block-shadow), 0 6px 18px rgba(30, 42, 58, 0.05);
    padding: 2.5rem 2.5rem;
}

.note-greeting {
    font-family: 'Caveat', cursive;
    font-weight: 600;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    color: var(--lavender-ash);
    text-align: center;
    margin-bottom: 1.5rem;
}

.note-body {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: clamp(1.2rem, 1.7vw, 1.45rem);
    line-height: 1.7;
    color: var(--twilight);
    margin-bottom: 1.2rem;
}

.note-body em {
    font-family: 'Noto Sans KR', 'Caveat', sans-serif;
    font-weight: 300;
    font-style: normal;
    color: var(--lavender-ash);
    letter-spacing: 0.05em;
}

.note-signature {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    color: var(--frost);
    text-align: right;
    margin-top: 1.5rem;
    opacity: 0.85;
}

/* =====================================================
   Block 3 — The Glitch
   ===================================================== */
.block-glitch {
    background-color: var(--twilight);
    color: var(--sky-wash);
    padding: 4rem 3rem;
    min-height: clamp(360px, 50vh, 520px);
}

.glitch-heading {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    color: var(--mist);
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}

.glitch-body {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    line-height: 1.8;
    color: var(--mist);
    margin-bottom: 1.2rem;
    max-width: 60ch;
    position: relative;
}

.glitch-secondary {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    color: var(--lavender-ash);
    margin-top: 1.5rem;
}

.mountain-glitch {
    position: relative;
    margin-top: 2rem;
    height: 200px;
}

/* glitch overlay layers via ::before / ::after */
.glitch-heading::before,
.glitch-heading::after,
.glitch-body::before,
.glitch-body::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.glitch-heading::before,
.glitch-body::before {
    color: var(--lavender-ash);
    clip-path: inset(0 0 70% 0);
    transform: translateX(0);
    opacity: 0;
}

.glitch-heading::after,
.glitch-body::after {
    color: var(--frost);
    clip-path: inset(70% 0 0 0);
    transform: translateX(0);
    opacity: 0;
}

/* =====================================================
   Glitch keyframes
   ===================================================== */
@keyframes cottagecore-glitch {
    0%, 92% {
        transform: none;
        filter: none;
    }
    93% {
        transform: translateX(-3px) skewX(1deg);
        clip-path: inset(15% 0 60% 0);
        filter: hue-rotate(40deg);
    }
    95% {
        transform: translateX(4px);
        clip-path: inset(40% 0 20% 0);
        filter: saturate(1.5);
    }
    97% {
        transform: translateX(-2px) skewX(-0.5deg);
        clip-path: inset(70% 0 5% 0);
    }
    98%, 100% {
        transform: none;
        filter: none;
    }
}

@keyframes glitch-overlay-a {
    0%, 92% { opacity: 0; transform: translateX(0); }
    93% { opacity: 0.85; transform: translateX(-3px); clip-path: inset(8% 0 70% 0); }
    95% { opacity: 0.7; transform: translateX(4px); clip-path: inset(35% 0 30% 0); }
    97% { opacity: 0.6; transform: translateX(-2px); clip-path: inset(60% 0 10% 0); }
    98%, 100% { opacity: 0; transform: translateX(0); }
}

@keyframes glitch-overlay-b {
    0%, 92% { opacity: 0; transform: translateX(0); }
    93% { opacity: 0.7; transform: translateX(3px); clip-path: inset(50% 0 25% 0); }
    95% { opacity: 0.55; transform: translateX(-4px); clip-path: inset(20% 0 55% 0); }
    97% { opacity: 0.5; transform: translateX(2px); clip-path: inset(75% 0 5% 0); }
    98%, 100% { opacity: 0; transform: translateX(0); }
}

@keyframes glitch-svg {
    0%, 92% { transform: translate(0, 0); opacity: 1; }
    93% { transform: translate(-6px, 2px); opacity: 0.85; }
    95% { transform: translate(8px, -3px); opacity: 0.95; }
    97% { transform: translate(-3px, 1px); opacity: 0.7; }
    98%, 100% { transform: translate(0, 0); opacity: 1; }
}

/* On-load glitch (Block 1) — applied via JS */
.glitch-once {
    animation: cottagecore-glitch 600ms ease-in-out 1;
}

/* Infinite glitch (Block 3) — base elements */
.glitch-active .glitch-heading,
.glitch-active .glitch-body {
    animation: cottagecore-glitch 7s ease-in-out infinite;
}

.glitch-active .glitch-heading::before,
.glitch-active .glitch-body::before {
    animation: glitch-overlay-a 7s ease-in-out infinite;
}

.glitch-active .glitch-heading::after,
.glitch-active .glitch-body::after {
    animation: glitch-overlay-b 7s ease-in-out infinite;
}

.glitch-active .glitch-shape-a {
    animation: glitch-svg 7s ease-in-out infinite;
}
.glitch-active .glitch-shape-b {
    animation: glitch-svg 7s ease-in-out infinite 0.3s;
}
.glitch-active .glitch-shape-c {
    animation: glitch-svg 7s ease-in-out infinite 0.6s;
}

/* =====================================================
   Block 4 — The Clearing
   ===================================================== */
.block-clearing {
    background-color: var(--petal-white);
    padding: 4rem 3rem 3rem 3rem;
    text-align: center;
}

.clearing-heading {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    color: var(--frost);
    margin-bottom: 1.5rem;
    letter-spacing: 0.03em;
}

.clearing-body {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    line-height: 1.8;
    color: var(--twilight);
    max-width: 50ch;
    margin: 0 auto 2rem auto;
    opacity: 0.85;
}

.mountain-clearing {
    height: 120px;
    margin: 1.5rem 0;
    opacity: 0.75;
}

.clearing-footer {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(139, 175, 196, 0.25);
}

.footer-line {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 600;
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    color: var(--frost);
    letter-spacing: 0.15em;
}

.footer-quiet {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    color: var(--lavender-ash);
    letter-spacing: 0.05em;
    margin-top: 0.4rem;
    opacity: 0.7;
}

/* =====================================================
   Reveal-on-scroll
   ===================================================== */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
    will-change: opacity, transform;
}

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

/* =====================================================
   Subtle floating motion for SVG trees
   ===================================================== */
@keyframes gentle-sway {
    0%, 100% { transform: translate(620px, 120px) rotate(0deg); }
    50% { transform: translate(620px, 120px) rotate(1.2deg); }
}

.tree-group {
    transform-origin: center;
    animation: gentle-sway 9s ease-in-out infinite;
}

/* =====================================================
   Responsive adjustments
   ===================================================== */
@media (max-width: 700px) {
    .container {
        padding: 1rem;
    }

    .block {
        padding: 2rem 1.5rem;
        margin-bottom: 1.5rem;
    }

    .block-hearth {
        padding-top: 3rem;
        min-height: 380px;
    }

    .block-note {
        width: 92%;
        padding: 2rem 1.5rem;
    }

    .block-glitch {
        padding: 2.5rem 1.5rem;
    }

    .block-clearing {
        padding: 2.5rem 1.5rem 2rem 1.5rem;
    }
}