/* ============================================================
   yongzoon.xyz — surreal dreamscape of blob forms + mineral fog
   Palette:
     #2b2540 Hypnagogic Indigo
     #6a7a8a Mineral Fog
     #f2d8c6 Pillow Peach
     #c97457 Terracotta Dream
     #8aa78e Moss Residue
     #efe7dc Rice Paper
     #b79ad1 Amethyst Weather
     #1a1820 Ink Thumbprint
   Fonts: Fraunces / Caveat / Instrument Serif / Gothic A1
   ============================================================ */

:root {
    --indigo: #2b2540;
    --fog: #6a7a8a;
    --peach: #f2d8c6;
    --terracotta: #c97457;
    --moss: #8aa78e;
    --ricepaper: #efe7dc;
    --amethyst: #b79ad1;
    --ink: #1a1820;

    --font-display: "Fraunces", Georgia, serif;
    --font-prose: "Caveat", "Comic Sans MS", cursive;
    --font-label: "Instrument Serif", Georgia, serif;
    --font-korean: "Gothic A1", "Apple SD Gothic Neo", sans-serif;
}

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

html, body {
    width: 100%;
    background: var(--indigo);
    color: var(--fog);
    overflow-x: hidden;
    cursor: none;
}

body {
    font-family: var(--font-label);
    font-size: 16px;
    line-height: 1.55;
    position: relative;
    min-height: 100vh;
}

/* ============================================================
   FOG (Motif 2) — rotating conic gradient, heavily blurred
   ============================================================ */
.fog {
    position: fixed;
    inset: -30vmax;
    z-index: -4;
    background:
        radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), rgba(242, 216, 198, 0.05), transparent 30%),
        conic-gradient(
            from var(--fog-rot, 0deg),
            #2b2540 0deg,
            #6a7a8a 90deg,
            #2b2540 170deg,
            #3a3050 240deg,
            #6a7a8a 310deg,
            #2b2540 360deg
        );
    filter: blur(80px);
    will-change: filter, background;
    animation: fog-rotate 120s linear infinite;
}

@keyframes fog-rotate {
    0%   { --fog-rot: 0deg; }
    100% { --fog-rot: 360deg; }
}

@property --fog-rot {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
}

/* Noise grain overlay for all rooms */
.noise-layer {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0.9 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
}

/* Cursor trail blobs */
.cursor-trail-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

.cursor-blob {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 63% 37% 54% 46% / 41% 59% 40% 60%;
    background: radial-gradient(circle at 35% 30%, rgba(183, 154, 209, 0.6), rgba(183, 154, 209, 0.08) 70%, transparent);
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
    filter: blur(4px);
    mix-blend-mode: screen;
}

/* Custom cursor dot */
.cursor-dot {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--peach);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 10;
    transform: translate(-50%, -50%);
    opacity: 0.8;
}

/* ============================================================
   ROOMS — generic
   ============================================================ */
.room {
    position: relative;
    width: 100%;
    padding: 6vh 8vw;
    overflow: hidden;
    z-index: 1;
}

.room-thresh   { min-height: 100vh; }
.room-pillow   { min-height: 110vh; background: linear-gradient(180deg, rgba(43,37,64,0) 0%, rgba(242,216,198,0.06) 50%, rgba(239,231,220,0.12) 100%); }
.room-catalogue{ min-height: 80vh;  background: linear-gradient(180deg, rgba(239,231,220,0.12) 0%, rgba(239,231,220,0.22) 100%); }
.room-weather  { min-height: 100vh; background: var(--indigo); }
.room-letter   { min-height: 140vh; background: linear-gradient(180deg, rgba(239,231,220,0.22) 0%, rgba(239,231,220,0.36) 50%, rgba(239,231,220,0.22) 100%); }
.room-garden   { min-height: 80vh;  background: linear-gradient(180deg, rgba(239,231,220,0.22) 0%, rgba(239,231,220,0.12) 100%); }
.room-goodbye  { min-height: 100vh; background: linear-gradient(180deg, rgba(239,231,220,0.10) 0%, rgba(43,37,64,0.9) 100%); }

.room-whisper {
    font-family: var(--font-label);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ink);
    opacity: 0.55;
    letter-spacing: 0.02em;
    position: absolute;
    left: 7%;
    top: 8%;
    font-weight: 400;
}

/* ============================================================
   KOREAN MARGIN MIRRORS
   ============================================================ */
.korean-margin {
    position: absolute;
    font-family: var(--font-korean);
    font-weight: 300;
    font-size: 0.95rem;
    color: var(--fog);
    opacity: 0;
    transform: rotate(6deg);
    transition: opacity 1400ms ease, transform 1400ms ease;
    letter-spacing: 0.04em;
}

.korean-margin.visible {
    opacity: 0.42;
    transform: rotate(var(--kr-rot, -1deg));
}

.margin-left  { left: 5%;  top: 18%; }
.margin-right { right: 6%; top: 40%; }

/* ============================================================
   ROOM 1 — THRESH (the name)
   ============================================================ */
.room-thresh {
    display: flex;
    align-items: center;
    justify-content: center;
}

.name-wrap {
    position: relative;
    z-index: 2;
    font-family: var(--font-display);
    font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 300;
    font-size: clamp(4rem, 14vw, 12rem);
    color: var(--peach);
    letter-spacing: -0.02em;
    text-align: center;
    line-height: 0.95;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 40px rgba(242, 216, 198, 0.15));
    user-select: none;
}

.letter {
    display: inline-block;
    font-variation-settings: "opsz" 144, "SOFT" var(--soft, 30), "wght" var(--wght, 300);
    transition: font-variation-settings 700ms cubic-bezier(0.22, 1.2, 0.36, 1),
                transform 700ms cubic-bezier(0.22, 1.2, 0.36, 1),
                filter 700ms ease,
                opacity 700ms ease;
    transform: translateY(0) scale(1);
    will-change: font-variation-settings, transform;
    opacity: var(--l-op, 1);
}

.name-wrap.retracted .letter {
    opacity: 0.15;
    filter: blur(8px);
    transform: translateY(12px) scale(0.94);
}

/* ambient drifting blobs in Thresh */
.ambient-blob {
    position: absolute;
    border-radius: 63% 37% 54% 46% / 41% 59% 40% 60%;
    filter: blur(60px);
    opacity: 0.4;
    pointer-events: none;
    z-index: -1;
}

.blob-a {
    width: 50vw;
    height: 50vw;
    left: -10vw;
    top: 20vh;
    background: radial-gradient(circle at 30% 30%, var(--peach), transparent 70%);
    animation: blob-breathe 26s ease-in-out infinite;
}
.blob-b {
    width: 40vw;
    height: 40vw;
    right: -8vw;
    bottom: 10vh;
    background: radial-gradient(circle at 60% 40%, var(--amethyst), transparent 70%);
    animation: blob-breathe 22s ease-in-out infinite -8s;
}

@keyframes blob-breathe {
    0%   { border-radius: 63% 37% 54% 46% / 41% 59% 40% 60%; transform: translate(0, 0) scale(1); }
    25%  { border-radius: 45% 55% 63% 37% / 60% 40% 55% 45%; transform: translate(2%, -1%) scale(1.03); }
    50%  { border-radius: 57% 43% 38% 62% / 48% 55% 45% 52%; transform: translate(-1%, 2%) scale(0.98); }
    75%  { border-radius: 52% 48% 60% 40% / 52% 48% 58% 42%; transform: translate(1%, 1%) scale(1.02); }
    100% { border-radius: 63% 37% 54% 46% / 41% 59% 40% 60%; transform: translate(0, 0) scale(1); }
}

/* ============================================================
   ROOM 2 — PILLOW
   ============================================================ */
.room-pillow {
    display: grid;
    grid-template-columns: 38% 62%;
    align-items: center;
    gap: 4vw;
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.pillow-prose {
    padding-left: 4vw;
    max-width: 30vw;
}

.journal {
    font-family: var(--font-prose);
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.65;
    color: var(--ink);
    opacity: 0.82;
}

.journal-sig {
    margin-top: 1.4rem;
    font-family: var(--font-label);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--fog);
    opacity: 0.7;
}

.pillow {
    position: relative;
    width: 50vw;
    height: 42vw;
    max-height: 70vh;
    justify-self: end;
    margin-right: 4vw;
    border-radius: 62% 38% 57% 43% / 43% 54% 46% 57%;
    background:
        radial-gradient(circle at var(--px, 35%) var(--py, 30%), rgba(255, 255, 255, 0.35) 0%, rgba(242, 216, 198, 0.1) 35%, transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(201, 116, 87, 0.22) 0%, transparent 50%),
        radial-gradient(circle at 20% 90%, rgba(183, 154, 209, 0.08), transparent 50%),
        linear-gradient(140deg, #f2d8c6 0%, #e7bea5 60%, #c97457 100%);
    box-shadow:
        inset 40px 40px 80px rgba(255, 255, 255, 0.15),
        inset -30px -30px 80px rgba(201, 116, 87, 0.3),
        0 40px 100px rgba(43, 37, 64, 0.35);
    animation: blob-breathe 28s ease-in-out infinite;
    transition: transform 700ms cubic-bezier(0.22, 1.2, 0.36, 1);
}

.ceramic-divider {
    position: absolute;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 20px;
    opacity: 0.4;
}
.ceramic-divider svg {
    width: 100%;
    height: 100%;
}
.ceramic-divider path {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.2;
    stroke-linecap: round;
}

/* ============================================================
   ROOM 3 — CATALOGUE
   ============================================================ */
.room-catalogue {
    padding-top: 12vh;
    padding-bottom: 6vh;
}

.shelf {
    position: relative;
    width: 100%;
    height: 70vh;
    margin-top: 2vh;
}

.horizon-line {
    position: absolute;
    left: 6%;
    right: 8%;
    bottom: 30%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(26, 24, 32, 0.25) 20%, rgba(26, 24, 32, 0.15) 80%, transparent);
    transform: rotate(-0.8deg);
    pointer-events: none;
}

.found-item {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    cursor: none;
    transition: transform 500ms cubic-bezier(0.22, 1.2, 0.36, 1);
    transform: scale(1);
}

.found-item:hover {
    transform: scale(1.08);
    z-index: 3;
}

.blob-object {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 55% 45% 62% 38% / 48% 55% 45% 52%;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 45%),
        radial-gradient(circle at 70% 75%, rgba(201, 116, 87, 0.28), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(183, 154, 209, 0.1), transparent 60%),
        var(--hue, var(--peach));
    box-shadow:
        inset 12px 14px 30px rgba(255, 255, 255, 0.22),
        inset -14px -14px 30px rgba(26, 24, 32, 0.22),
        0 18px 40px rgba(43, 37, 64, 0.18);
    animation: blob-breathe 24s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

/* Cassette details */
.cassette {
    border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
}
.cassette-spool {
    position: absolute;
    width: 28%;
    height: 40%;
    border-radius: 50%;
    background: rgba(26, 24, 32, 0.35);
    top: 30%;
    box-shadow: inset 0 0 0 3px rgba(239, 231, 220, 0.3);
}
.s1 { left: 18%; }
.s2 { right: 18%; }

/* Skull */
.skull { border-radius: 55% 45% 60% 40% / 60% 55% 45% 50%; }
.skull-eye {
    position: absolute;
    width: 18%;
    height: 14%;
    background: rgba(26, 24, 32, 0.75);
    border-radius: 60% 40% 55% 45% / 50% 50% 50% 50%;
    top: 38%;
}
.e1 { left: 22%; }
.e2 { right: 22%; }
.skull-nose {
    position: absolute;
    width: 10%;
    height: 14%;
    background: rgba(26, 24, 32, 0.45);
    border-radius: 50%;
    top: 58%;
    left: 45%;
}

/* Telephone */
.phone { border-radius: 70% 30% 55% 45% / 60% 50% 50% 40%; }
.phone-dial {
    position: absolute;
    width: 50%;
    height: 50%;
    border: 2px solid rgba(26, 24, 32, 0.4);
    border-radius: 50%;
    top: 20%;
    left: 25%;
}
.phone-mouth {
    position: absolute;
    width: 30%;
    height: 8%;
    border-bottom: 2px solid rgba(26, 24, 32, 0.4);
    border-radius: 0 0 50% 50%;
    top: 70%;
    left: 35%;
}

/* Melting Monitor */
.monitor {
    border-radius: 18% 18% 32% 18% / 16% 16% 22% 16%;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(26, 24, 32, 0.9) 0%, rgba(26, 24, 32, 0.75) 100%);
    transform: skew(-3deg, 1.5deg);
}

.scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(239, 231, 220, 0.25);
    animation: scan 6s linear infinite;
}
.sl1 { animation-delay: 0s; }
.sl2 { animation-delay: -1.5s; }
.sl3 { animation-delay: -3s; }
.sl4 { animation-delay: -4.5s; }

@keyframes scan {
    0%   { top: -5%; opacity: 0; }
    10%  { opacity: 0.35; }
    90%  { opacity: 0.35; }
    100% { top: 105%; opacity: 0; }
}

.static-blob {
    position: absolute;
    width: 30%;
    height: 30%;
    top: 35%;
    left: 35%;
    border-radius: 55% 45% 60% 40%;
    background: radial-gradient(circle, rgba(239, 231, 220, 0.4), transparent 70%);
    animation: static-pulse 3.2s ease-in-out infinite;
}

@keyframes static-pulse {
    0%, 100% { transform: scale(0.8); opacity: 0.4; }
    50%      { transform: scale(1.2); opacity: 0.7; }
}

.vhs-jitter {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='turbulence' baseFrequency='2.2' numOctaves='1' seed='3'/></filter><rect width='100' height='100' filter='url(%23n)' opacity='0.5'/></svg>");
    mix-blend-mode: overlay;
    opacity: 0.4;
    animation: hue-shift 9s linear infinite;
}

@keyframes hue-shift {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Carrot */
.carrot {
    border-radius: 50% 50% 45% 55% / 30% 30% 70% 70%;
}
.carrot-brace {
    position: absolute;
    width: 60%;
    height: 4px;
    background: rgba(239, 231, 220, 0.85);
    left: 20%;
    border-radius: 2px;
}
.b1 { top: 58%; }
.b2 { top: 70%; }

/* Shoe */
.shoe {
    border-radius: 55% 45% 30% 70% / 70% 60% 40% 30%;
}

/* Mini pillow */
.mini-pillow {
    border-radius: 62% 38% 55% 45% / 45% 55% 45% 55%;
}

/* Label-card (rotates out on click) */
.label-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: left center;
    transform: translate(-10%, -50%) rotate(-90deg);
    opacity: 0;
    background: var(--ricepaper);
    color: var(--ink);
    font-family: var(--font-label);
    font-style: italic;
    font-size: 0.85rem;
    padding: 8px 14px;
    letter-spacing: 0.02em;
    box-shadow: 2px 3px 10px rgba(43, 37, 64, 0.2);
    border: 1px solid rgba(26, 24, 32, 0.18);
    white-space: nowrap;
    pointer-events: none;
    transition: transform 600ms cubic-bezier(0.22, 1.2, 0.36, 1), opacity 400ms ease;
}

.label-card.open {
    transform: translate(110%, -50%) rotate(-6deg);
    opacity: 1;
}

/* ============================================================
   ROOM 4 — WEATHER
   ============================================================ */
.room-weather {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0;
    overflow: hidden;
}

.weather-field {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--indigo), var(--amethyst), var(--peach), var(--terracotta));
    background-size: 300% 300%;
    animation: weather-cycle 90s ease-in-out infinite;
    filter: blur(30px);
}

@keyframes weather-cycle {
    0%   { background-position: 0% 0%; }
    25%  { background-position: 50% 30%; }
    50%  { background-position: 100% 100%; }
    75%  { background-position: 30% 60%; }
    100% { background-position: 0% 0%; }
}

.weather-sig {
    position: absolute;
    bottom: 8vh;
    left: 8vw;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    z-index: 2;
    mix-blend-mode: screen;
}

.weather-sig .korean-mirror {
    font-family: var(--font-korean);
    font-weight: 300;
    font-size: 1.1rem;
    color: var(--peach);
    opacity: 0.65;
}

.weather-sig .en {
    font-family: var(--font-prose);
    font-size: 1.3rem;
    color: var(--ricepaper);
    opacity: 0.85;
}

.weather-blob {
    position: absolute;
    border-radius: 55% 45% 60% 40% / 48% 55% 45% 52%;
    background: radial-gradient(circle at 40% 40%, rgba(183, 154, 209, 0.8), rgba(183, 154, 209, 0.1) 70%, transparent);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
    filter: blur(6px);
    mix-blend-mode: screen;
}

/* ============================================================
   ROOM 5 — LETTER
   ============================================================ */
.room-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 15vh;
    padding-bottom: 15vh;
    background-color: var(--ricepaper);
}

.letter-paper {
    position: relative;
    width: min(60%, 720px);
    margin-left: 38.2%;
    transform: translateX(-50%);
}

.letter-body {
    font-family: var(--font-label);
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    line-height: 1.85;
    color: var(--ink);
    text-align: left;
    letter-spacing: 0.01em;
    font-style: normal;
}

.margin-note {
    position: absolute;
    font-family: var(--font-korean);
    font-weight: 300;
    font-size: 0.95rem;
    color: var(--fog);
    opacity: 0.5;
    transform: rotate(-1.5deg);
    letter-spacing: 0.03em;
}

.note-1 { left: -14%; top: 10%; }
.note-2 { right: -12%; top: 40%; font-family: var(--font-label); font-style: italic; }
.note-3 { left: -15%; bottom: 18%; font-family: var(--font-label); font-style: italic; transform: rotate(1.8deg); }

/* ============================================================
   ROOM 6 — GARDEN
   ============================================================ */
.room-garden {
    padding-top: 14vh;
    padding-bottom: 8vh;
    background-color: var(--ricepaper);
}

.garden-grid {
    position: relative;
    width: 100%;
    height: 60vh;
    margin-top: 2vh;
}

.garden-icon {
    position: absolute;
    left: var(--gx);
    top: var(--gy);
    width: 64px;
    height: 64px;
    cursor: none;
    transition: transform 500ms cubic-bezier(0.22, 1.2, 0.36, 1);
    transform: rotate(var(--rot, -3deg));
}

.garden-icon svg {
    width: 100%;
    height: 100%;
}

.garden-icon:hover {
    transform: rotate(var(--rot, -3deg)) translateY(-3px) scale(1.05);
}

.tooltip {
    position: fixed;
    font-family: var(--font-label);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--ink);
    background: rgba(239, 231, 220, 0.92);
    padding: 4px 10px;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -150%);
    transition: opacity 400ms ease, transform 400ms ease;
    z-index: 9;
    border: 1px solid rgba(26, 24, 32, 0.18);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.tooltip.visible {
    opacity: 0.95;
    transform: translate(-50%, -180%);
}

/* ============================================================
   ROOM 7 — GOODBYE
   ============================================================ */
.room-goodbye {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.goodbye-blob {
    position: absolute;
    width: 70vw;
    height: 70vw;
    top: 0;
    left: 50%;
    transform: translate(-50%, -20%);
    background: radial-gradient(circle at 40% 40%, rgba(42, 37, 64, 0.9), rgba(42, 37, 64, 0.2) 60%, transparent 80%);
    border-radius: 55% 45% 60% 40% / 48% 55% 45% 52%;
    animation: blob-breathe 28s ease-in-out infinite;
    filter: blur(30px);
    z-index: 0;
    opacity: 0.6;
}

.goodbye-line {
    position: relative;
    z-index: 2;
    font-family: var(--font-display);
    font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 300;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    color: var(--peach);
    opacity: 0.8;
    letter-spacing: 0.02em;
    margin-bottom: 4rem;
}

.signature {
    position: relative;
    z-index: 2;
    font-family: var(--font-prose);
    font-size: 1.2rem;
    color: var(--ricepaper);
    opacity: 0.45;
    transform: rotate(-3deg);
    margin-top: 6rem;
}

/* ============================================================
   MOTH (navigator / mascot)
   ============================================================ */
.moth {
    position: fixed;
    z-index: 10;
    width: 56px;
    height: 42px;
    left: 0;
    top: 0;
    transform: translate(calc(100vw - 120px), calc(100vh - 90px)) rotate(0deg);
    pointer-events: auto;
    cursor: none;
    will-change: transform;
}

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

.moth .wing {
    fill: var(--terracotta);
    fill-opacity: 0.88;
    stroke: var(--ink);
    stroke-width: 0.6;
    transform-origin: 0 0;
}

.moth .wing-left  { animation: flutter-l 280ms ease-in-out infinite alternate; }
.moth .wing-right { animation: flutter-r 280ms ease-in-out infinite alternate; }

@keyframes flutter-l {
    0%   { transform: scaleX(1)    translateY(0); }
    100% { transform: scaleX(0.6) translateY(-1px); }
}
@keyframes flutter-r {
    0%   { transform: scaleX(1)    translateY(0); }
    100% { transform: scaleX(0.6) translateY(-1px); }
}

.moth .moth-body {
    fill: var(--ink);
}

.moth .eyespot {
    fill: var(--moss);
    stroke: var(--ink);
    stroke-width: 0.4;
}

.moth .antenna {
    fill: none;
    stroke: var(--ink);
    stroke-width: 0.8;
    stroke-linecap: round;
}

/* ============================================================
   TRANSITION OVERLAY (moth teleport)
   ============================================================ */
.transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms ease;
}

.transition-overlay.active {
    opacity: 1;
}

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

.transition-overlay path {
    fill: var(--peach);
    transition: d 900ms cubic-bezier(0.22, 1.2, 0.36, 1);
}

/* ============================================================
   REDUCED MOTION — slow 2×, reduce amplitude
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .fog { animation-duration: 240s; }
    .blob-a, .blob-b, .pillow, .blob-object, .goodbye-blob {
        animation-duration: 52s;
    }
    .weather-field { animation-duration: 180s; }
}