:root {
    --paper: #f7f5f0;
    --ink: #2b2b2b;
    --muted-ink: #5c5a55;
    --forest-ink: #2f2141;
    --forest-muted: #725d86;
    --accent: #75508f;
    --sawa-violet-soft: #e9dff0;
    --sawa-violet-mid: #b99bcb;
    --sawa-violet-rich: #604174;
    --sawa-violet-deep: #2b1c3a;
    --content-wide: 1100px;
    --content-reading: 760px;
    --ease-drift: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    background: var(--paper);
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: var(--paper);
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.45), transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(120, 105, 80, 0.04), transparent 40%);
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

[hidden] {
    display: none !important;
}

body.viewing-yumemori {
    background: #101710;
}

body.viewing-yumemori::before {
    display: none;
}

.yumemori-view {
    position: relative;
    min-height: 100svh;
    width: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 72px 24px;
    background:
        radial-gradient(circle at 50% 58%, rgba(88, 117, 83, 0.22), transparent 28%),
        radial-gradient(circle at 17% 21%, rgba(188, 207, 171, 0.08), transparent 32%),
        linear-gradient(180deg, #0d130e, #172319 70%, #101710);
    color: #dce4d1;
}

.yumemori-haze {
    position: absolute;
    inset: -15%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 55%, rgba(209, 221, 194, 0.07), transparent 34%),
        radial-gradient(ellipse at 72% 45%, rgba(179, 202, 163, 0.06), transparent 32%);
    filter: blur(22px);
    animation: yumemori-haze-drift 14s ease-in-out infinite alternate;
}

.yumemori-arrival {
    position: relative;
    z-index: 1;
    width: min(850px, 100%);
    max-width: 100%;
    text-align: center;
}

.yumemori-eyebrow {
    margin: 0 0 1.5rem;
    color: #aab8a3;
    font-size: clamp(0.7rem, 1.5vw, 0.92rem);
    letter-spacing: clamp(0.14em, 1vw, 0.3em);
    text-transform: uppercase;
}

.yumemori-arrival h2 {
    margin: 0;
    color: #dce4d1;
    font-size: clamp(3rem, 15vw, 10rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.045em;
    overflow-wrap: anywhere;
}

.yumemori-line {
    margin: 1.8rem 0 0;
    color: #aab8a3;
    font-size: clamp(1.1rem, 2.5vw, 1.8rem);
    font-style: italic;
}

.yumemori-memory-light {
    width: 16px;
    aspect-ratio: 1;
    margin: clamp(2.8rem, 8vh, 6rem) auto;
    border-radius: 50%;
    background: radial-gradient(circle, #fffbd4 0%, #e6d992 34%, transparent 72%);
    box-shadow: 0 0 18px rgba(232, 220, 147, 0.5), 0 0 68px rgba(161, 190, 133, 0.22);
    animation: yumemori-light-breathe 4.8s ease-in-out infinite;
}

.yumemori-note {
    margin: 0;
    color: #aab8a3;
    font-size: clamp(1rem, 2vw, 1.35rem);
    line-height: 1.8;
}

.yumemori-note strong {
    display: block;
    margin-bottom: 0.55rem;
    color: rgba(226, 233, 214, 0.88);
    font-size: 0.78em;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.yumemori-floor {
    position: absolute;
    right: -8%;
    bottom: -12%;
    left: -8%;
    height: 35%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(4,8,5,0.92), transparent 68%),
        linear-gradient(to top, rgba(5,10,6,0.92), transparent);
    opacity: 0.86;
}

.yumemori-return {
    display: inline-block;
    margin-top: 3rem;
    color: rgba(220, 228, 207, 0.62);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-decoration: none;
    text-transform: uppercase;
}

@keyframes yumemori-light-breathe {
    0%, 100% { transform: scale(0.9); }
    50% { transform: scale(1.25); }
}

@keyframes yumemori-haze-drift {
    from { transform: translate3d(-1%, 0, 0); }
    to { transform: translate3d(2%, -1%, 0); }
}

@media (max-width: 700px) {
    .yumemori-view { padding: 48px 18px 34px; }
    .yumemori-arrival h2 { font-size: clamp(3rem, 20vw, 5.4rem); }
    .yumemori-memory-light { margin: clamp(2.4rem, 7vh, 4rem) auto; }
    .yumemori-note { font-size: 1rem; }
    .yumemori-return { margin-top: 2.2rem; }
}

body::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: -8%;
    pointer-events: none;
    background:
        radial-gradient(circle at 26% 34%, rgba(255,255,255,0.28), transparent 31%),
        radial-gradient(circle at 74% 68%, rgba(105,121,89,0.035), transparent 36%);
    animation: paper-breath 22s ease-in-out infinite alternate;
}

@keyframes paper-breath {
    from { transform: translate3d(-0.35%, 0.2%, 0) scale(1); }
    to { transform: translate3d(0.45%, -0.3%, 0) scale(1.008); }
}


/* =====================================================
   SAWA PALETTE — STONE THRESHOLD
   The white opening wakes quickly into the soft and deep
   violets carried by Sawa's master emblem.
   ===================================================== */
body.journey-stone {
    animation: stone-threshold-background 3.8s var(--ease-drift) forwards;
}

body.journey-stone::before {
    animation:
        paper-breath 22s ease-in-out infinite alternate,
        stone-threshold-light 3.8s var(--ease-drift) forwards;
}

@keyframes stone-threshold-background {
    0% {
        background-color: #f7f5f0;
    }
    28% {
        background-color: #f0eaf4;
    }
    55% {
        background-color: var(--sawa-violet-soft);
    }
    78% {
        background-color: #cbb5d8;
    }
    100% {
        background-color: var(--sawa-violet-mid);
    }
}

@keyframes stone-threshold-light {
    0% {
        background:
            radial-gradient(circle at 26% 34%, rgba(255,255,255,0.28), transparent 31%),
            radial-gradient(circle at 74% 68%, rgba(105,121,89,0.035), transparent 36%);
        opacity: 1;
    }
    38% {
        background:
            radial-gradient(circle at 34% 28%, rgba(255,246,255,0.54), transparent 38%),
            radial-gradient(circle at 77% 72%, rgba(194,150,218,0.20), transparent 43%);
        opacity: 1;
    }
    70% {
        background:
            radial-gradient(circle at 43% 35%, rgba(247,226,252,0.34), transparent 39%),
            radial-gradient(circle at 72% 66%, rgba(116,74,143,0.19), transparent 44%);
        opacity: 1;
    }
    100% {
        background:
            radial-gradient(circle at 29% 31%, rgba(255,244,255,0.25), transparent 34%),
            radial-gradient(circle at 74% 68%, rgba(79,45,105,0.22), transparent 42%);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.journey-stone {
        animation-duration: 0.01ms;
    }

    body.journey-stone::before {
        animation: none;
        background:
            radial-gradient(circle at 29% 31%, rgba(255,244,255,0.25), transparent 34%),
            radial-gradient(circle at 74% 68%, rgba(79,45,105,0.22), transparent 42%);
    }
}

button,
input,
textarea,
select {
    font: inherit;
}

p {
    margin: 0;
    color: var(--muted-ink);
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    line-height: 1.7;
}

/* =====================================================
   INTRO
   ===================================================== */

.intro {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: clamp(18px, 3vh, 30px) 20px;
    text-align: center;
}

.master-emblem {
    display: block;
    width: min(600px, 82vw);
    max-height: 54vh;
    height: auto;
    margin-bottom: clamp(16px, 3.5vh, 36px);
    object-fit: contain;
    opacity: 0;
    transform: scale(0.955);
    animation: emblem-introduction 4.6s var(--ease-drift) forwards;
}

.studio-name {
    opacity: 0;
    transform: translateY(16px);
    animation: words-appear 1.8s var(--ease-drift) 3.8s forwards;
}

.studio-name h1 {
    margin: 0;
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
}

.studio-name > p {
    margin-top: 1.15rem;
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    letter-spacing: 0.08em;
    line-height: 1.7;
}

.journey-button {
    width: clamp(260px, 65vw, 760px);
    margin-top: clamp(14px, 2vh, 28px);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    animation: button-appear 1.7s var(--ease-drift) 5.15s forwards;
    transition:
        opacity 0.7s ease,
        transform 0.45s var(--ease-drift),
        filter 0.45s ease;
    -webkit-tap-highlight-color: transparent;
}

.journey-button-image {
    display: block;
    width: 100%;
    height: auto;
    animation: gentle-float 6s ease-in-out 7s infinite;
    transition:
        transform 0.45s var(--ease-drift),
        filter 0.45s ease;
}

.journey-button:hover .journey-button-image {
    animation-play-state: paused;
    transform: translateY(-3px) scale(1.012);
    filter: brightness(1.06) drop-shadow(0 12px 18px rgba(44, 25, 60, 0.24));
}

.journey-button:active .journey-button-image {
    transform: translateY(0) scale(0.99);
}

.journey-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 8px;
    border-radius: 8px;
}

.journey-button.is-leaving {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

body.journey-locked .story-section {
    visibility: hidden;
}

@keyframes emblem-introduction {
    0% {
        opacity: 0;
        transform: scale(0.955);
    }

    24%,
    76% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.025);
    }
}

@keyframes words-appear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes button-appear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gentle-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

/* =====================================================
   SHARED STORY SECTIONS
   ===================================================== */

.story-section {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(80px, 12vh, 140px) 24px;
}

.story-content {
    width: min(var(--content-reading), 100%);
    text-align: center;
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity 1.45s ease,
        transform 1.65s var(--ease-drift);
}

.story-section.is-visible .story-content {
    opacity: 1;
    transform: translateY(0);
}

.story-content h2 {
    margin: 0;
    font-weight: 400;
}

/* =====================================================
   PHILOSOPHY
   ===================================================== */

.philosophy-content {
    width: min(var(--content-wide), 88%);
}

.philosophy-content h2 {
    font-size: clamp(3rem, 7vw, 7rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.philosophy-content h2 span {
    display: block;
    margin-top: 0.24em;
    color: var(--muted-ink);
    font-style: italic;
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 1.4s ease 0.35s,
        transform 1.5s var(--ease-drift) 0.35s;
}

.philosophy-section.is-visible .philosophy-content h2 span {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================================
   EXPERIENCE
   ===================================================== */

.experience-content {
    position: relative;
    width: min(980px, 86%);
    margin: 0 auto;
    text-align: left;
}

.experience-content .eyebrow,
.experience-content h2,
.experience-statement,
.handwritten-note {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 1.2s ease,
        transform 1.4s var(--ease-drift);
}

.experience-section.is-visible .experience-content .eyebrow,
.experience-section.is-visible .experience-content h2,
.experience-section.is-visible .experience-statement,
.experience-section.is-visible .handwritten-note {
    opacity: 1;
    transform: translateY(0);
}

.experience-content .eyebrow {
    margin: 0 0 1.5rem;
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0;
    transition-delay: 0.05s;
}

.experience-section.is-visible .experience-content .eyebrow {
    opacity: 0.65;
}

.experience-content h2 {
    max-width: 900px;
    font-size: clamp(3.8rem, 8vw, 7.5rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
    transition-delay: 0.18s;
}

.experience-statement {
    max-width: 720px;
    margin: 3rem 0 0;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.8;
    transition-delay: 0.38s;
}

.handwritten-note {
    width: fit-content;
    max-width: 440px;
    margin: 4.5rem 5% 0 auto;
    font-family: "Segoe Print", "Bradley Hand", cursive;
    font-size: clamp(1.35rem, 2.4vw, 2.1rem);
    line-height: 1.55;
    letter-spacing: 0.01em;
    transition-delay: 0.68s;
}

.experience-section.is-visible .handwritten-note {
    transform: rotate(-2deg);
    opacity: 0.78;
}

/* =====================================================
   THE THRESHOLD — FIRST APPEARANCE OF COLOR
   ===================================================== */

.threshold-section {
    position: relative;
    min-height: 120svh;
    overflow: hidden;
    background:
        linear-gradient(
            to bottom,
            #f7f5f0 0%,
            #f3f1e9 16%,
            #eadff0 40%,
            #b99bcb 68%,
            #604174 100%
        );
}

body.journey-stone .threshold-section {
    background:
        linear-gradient(
            to bottom,
            #b99bcb 0%,
            #ad8fc1 18%,
            #9673ad 38%,
            #785493 67%,
            #3a2750 100%
        );
}

.threshold-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 76%, rgba(194, 148, 219, 0.58), transparent 42%),
        radial-gradient(circle at 20% 65%, rgba(225, 197, 235, 0.34), transparent 35%),
        radial-gradient(circle at 80% 58%, rgba(78, 43, 105, 0.38), transparent 38%);
    opacity: 0;
    transform: scale(1.08) translateY(24px);
    transition:
        opacity 3.2s ease,
        transform 4.2s var(--ease-drift);
}

.threshold-section::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 35%;
    background: linear-gradient(to top, rgba(34, 20, 48, 0.52), rgba(89, 57, 112, 0.16) 55%, transparent);
    opacity: 0;
    transform: translateY(38px);
    transition:
        opacity 2.8s ease 0.45s,
        transform 3.4s var(--ease-drift) 0.45s;
}

.threshold-section.is-visible::before {
    opacity: 0.85;
    transform: scale(1) translateY(0);
}

.threshold-section.is-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.threshold-background {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background-image:
        radial-gradient(circle at 30% 45%, rgba(255, 255, 255, 0.5), transparent 22%),
        radial-gradient(circle at 70% 58%, rgba(239, 218, 247, 0.30), transparent 25%);
    filter: blur(12px);
    transform: translateY(34px);
    transition:
        opacity 3.2s ease 0.55s,
        transform 3.8s var(--ease-drift) 0.55s;
}

.threshold-section.is-visible .threshold-background {
    opacity: 1;
    transform: translateY(0);
}

.threshold-content {
    position: relative;
    z-index: 3;
    width: min(1000px, 88%);
    color: #2f2141;
}

.threshold-eyebrow {
    margin: 0 0 2.5rem;
    color: var(--forest-muted);
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 1.4s ease 0.25s,
        transform 1.5s var(--ease-drift) 0.25s;
}

.threshold-content h2 {
    color: var(--forest-ink);
    font-size: clamp(3rem, 7vw, 7rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.threshold-content h2 span {
    display: block;
    margin-top: 0.25em;
    color: #553a6b;
    font-style: italic;
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 1.8s ease 0.75s,
        transform 1.9s var(--ease-drift) 0.75s;
}

.threshold-light {
    width: clamp(90px, 12vw, 150px);
    aspect-ratio: 1;
    margin: 4.5rem auto 3.5rem;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(244, 238, 174, 0.92) 0%,
        rgba(224, 193, 238, 0.48) 30%,
        rgba(146, 94, 177, 0.18) 56%,
        transparent 72%
    );
    opacity: 0;
    transform: scale(0.58);
    filter: blur(2px);
    transition:
        opacity 2.4s ease 1.2s,
        transform 3s var(--ease-drift) 1.2s;
    animation: threshold-breathe 6s ease-in-out infinite;
}

.threshold-invitation {
    margin: 0 auto;
    color: #4e3562;
    font-family: "Segoe Print", "Bradley Hand", cursive;
    font-size: clamp(1.4rem, 2.4vw, 2.15rem);
    line-height: 1.5;
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 1.8s ease 1.85s,
        transform 1.9s var(--ease-drift) 1.85s;
}

.threshold-section.is-visible .threshold-eyebrow {
    opacity: 0.72;
    transform: translateY(0);
}

.threshold-section.is-visible .threshold-content h2 span,
.threshold-section.is-visible .threshold-light,
.threshold-section.is-visible .threshold-invitation {
    opacity: 1;
}

.threshold-section.is-visible .threshold-content h2 span,
.threshold-section.is-visible .threshold-invitation {
    transform: translateY(0);
}

.threshold-section.is-visible .threshold-light {
    transform: scale(1);
}

@keyframes threshold-breathe {
    0%,
    100% {
        filter: blur(2px);
        box-shadow:
            0 0 30px rgba(189, 212, 156, 0.12),
            0 0 75px rgba(165, 194, 137, 0.08);
    }

    50% {
        filter: blur(3px);
        box-shadow:
            0 0 45px rgba(218, 224, 165, 0.3),
            0 0 110px rgba(152, 190, 127, 0.18);
    }
}


/* =====================================================
   THE GUIDE LIGHT
   ===================================================== */

.guide-light {
    --guide-x: 50vw;
    --guide-y: 50vh;
    --guide-scale: 0.92;
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    width: clamp(30px, 3.25vw, 46px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(var(--guide-x), var(--guide-y), 0) translate(-50%, -50%) scale(var(--guide-scale));
    background: radial-gradient(
        circle,
        rgba(255, 250, 199, 1) 0%,
        rgba(244, 226, 139, 0.88) 19%,
        rgba(210, 195, 112, 0.38) 43%,
        transparent 72%
    );
    box-shadow:
        0 0 12px rgba(255, 241, 166, 0.62),
        0 0 34px rgba(226, 210, 129, 0.34),
        0 0 72px rgba(187, 194, 121, 0.14);
    filter: blur(0.15px);
    will-change: transform, opacity;
    transition: opacity 1.1s ease;
}

.guide-light::before {
    content: "";
    position: absolute;
    inset: -70%;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(244, 235, 170, 0.18), transparent 67%);
    animation: guide-light-breathe 4.8s ease-in-out infinite;
}

.guide-light::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 72%;
    width: 42px;
    height: 8px;
    transform: translateY(-50%) rotate(-8deg);
    transform-origin: right center;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent, rgba(239, 224, 145, 0.2));
    filter: blur(4px);
    opacity: 0.6;
    animation: guide-wisp 5.4s ease-in-out infinite;
}



/* Companion fireflies travel with the guide while keeping their own motion. */
.guide-firefly {
    --firefly-x: 0px;
    --firefly-y: 0px;
    --firefly-size: 5px;
    --firefly-opacity: 0.7;
    --firefly-glow: 12px;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: var(--firefly-size);
    height: var(--firefly-size);
    border-radius: 50%;
    pointer-events: none;
    opacity: var(--firefly-opacity);
    transform: translate(-50%, -50%) translate3d(var(--firefly-x), var(--firefly-y), 0);
    background: radial-gradient(circle,
        rgba(255, 252, 214, 1) 0%,
        rgba(247, 229, 139, 0.88) 32%,
        rgba(217, 205, 122, 0.28) 62%,
        transparent 78%
    );
    box-shadow:
        0 0 calc(var(--firefly-glow) * 0.45) rgba(255, 242, 171, 0.72),
        0 0 var(--firefly-glow) rgba(229, 214, 132, 0.42);
    will-change: transform, opacity;
}

.guide-firefly::after {
    content: "";
    position: absolute;
    inset: -110%;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(250, 235, 157, 0.18), transparent 68%);
}

body.journey-started .guide-light {
    opacity: var(--guide-opacity, 0);
}

.guide-light.is-arriving {
    transition: opacity 1.8s ease;
}

@keyframes guide-light-breathe {
    0%   { transform: scale(0.86); opacity: 0.42; }
    18%  { transform: scale(1.08); opacity: 0.76; }
    37%  { transform: scale(0.97); opacity: 0.58; }
    61%  { transform: scale(1.24); opacity: 0.90; }
    79%  { transform: scale(1.02); opacity: 0.66; }
    100% { transform: scale(0.86); opacity: 0.42; }
}

@keyframes guide-wisp {
    0%, 100% { transform: translateY(-50%) rotate(-10deg) scaleX(0.74); opacity: 0.32; }
    50% { transform: translateY(-50%) rotate(6deg) scaleX(1.12); opacity: 0.68; }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 700px) {

    .guide-light {
        width: 32px;
    }
    .story-section {
        padding-right: 20px;
        padding-left: 20px;
    }

    .philosophy-content {
        width: 94%;
    }

    .philosophy-content h2 {
        font-size: clamp(2.6rem, 11vw, 4.5rem);
    }

    .experience-content {
        width: 92%;
    }

    .experience-content h2 {
        font-size: clamp(3rem, 14vw, 5rem);
        line-height: 1;
    }

    .experience-statement {
        margin-top: 2rem;
        font-size: 1.15rem;
        line-height: 1.7;
    }

    .handwritten-note {
        max-width: 90%;
        margin: 3.5rem 0 0 auto;
        font-size: 1.35rem;
    }

    .threshold-section {
        min-height: 110svh;
    }

    .threshold-content {
        width: 94%;
    }

    .threshold-content h2 {
        font-size: clamp(2.8rem, 13vw, 4.8rem);
        line-height: 1.02;
    }

    .threshold-light {
        margin-top: 3.5rem;
        margin-bottom: 2.75rem;
    }

    .threshold-invitation {
        font-size: 1.4rem;
    }
}

@media (max-height: 650px) {
    .intro {
        justify-content: flex-start;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .master-emblem {
        max-height: 38vh;
        margin-bottom: 8px;
    }

    .studio-name h1 {
        font-size: clamp(2rem, 6vw, 2.9rem);
    }

    .studio-name > p {
        margin-top: 0.65rem;
        font-size: clamp(0.92rem, 2.2vw, 1.1rem);
    }

    .journey-button {
        width: min(500px, 82vw);
        margin-top: 10px;
        flex-shrink: 0;
    }
}

/* =====================================================
   ACCESSIBILITY
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }


    .guide-light {
        display: none;
    }

    .master-emblem,
    .studio-name,
    .journey-button {
        opacity: 1;
        transform: none;
    }
}

/* =====================================================
   YUMEMORI GATEWAY + PAGE TURN
   ===================================================== */

.world-gate {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: min(270px, 66vw);
    margin-top: clamp(2.8rem, 7vh, 5.5rem);
    color: rgba(238, 241, 222, 0.78);
    text-decoration: none;
    opacity: 0;
    transform: translateY(22px) scale(0.96);
    transition:
        opacity 1.6s ease 2.3s,
        transform 1.7s var(--ease-drift) 2.3s,
        filter 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}

.threshold-section.is-visible .world-gate {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.world-gate-emblem {
    display: block;
    width: 100%;
    height: auto;
    max-height: 230px;
    object-fit: contain;
    filter:
        brightness(1.08)
        drop-shadow(0 0 18px rgba(215, 224, 164, 0.15));
    transition:
        transform 0.7s var(--ease-drift),
        filter 0.7s ease;
}

.world-gate span {
    font-size: 0.82rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    transition: color 0.5s ease, letter-spacing 0.5s ease;
}

.world-gate:hover .world-gate-emblem,
.world-gate:focus-visible .world-gate-emblem {
    transform: translateY(-5px) scale(1.025);
    filter:
        brightness(1.18)
        drop-shadow(0 0 25px rgba(230, 234, 169, 0.28));
}

.world-gate:hover span,
.world-gate:focus-visible span {
    color: rgba(255, 252, 218, 0.98);
    letter-spacing: 0.29em;
}

.world-gate:focus-visible {
    outline: 1px solid rgba(235, 239, 190, 0.68);
    outline-offset: 12px;
    border-radius: 12px;
}


/* The guide light completes its journey inside the Primary mark. */
.world-gate {
    position: relative;
    isolation: isolate;
}

.world-gate-light-well {
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 43%;
    width: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45);
    background: radial-gradient(
        circle,
        rgba(255, 246, 177, 0.44) 0%,
        rgba(197, 218, 148, 0.18) 42%,
        transparent 72%
    );
    filter: blur(5px);
    transition: opacity 1.4s ease, transform 1.8s var(--ease-drift);
}

.world-gate.is-awake .world-gate-light-well {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: gateway-breathe 4.8s ease-in-out infinite;
}

.world-gate.is-awake .world-gate-emblem {
    filter:
        brightness(1.16)
        drop-shadow(0 0 20px rgba(231, 227, 163, 0.22))
        drop-shadow(0 0 45px rgba(113, 145, 99, 0.18));
}

.world-gate.is-activating {
    pointer-events: none;
}

.world-gate.is-activating .world-gate-emblem {
    animation: gateway-open 0.72s cubic-bezier(0.2, 0.76, 0.25, 1) forwards;
}

.world-gate.is-activating .world-gate-light-well {
    animation: gateway-flash 0.72s ease forwards;
}

.guide-light.is-entering-gate {
    transition:
        transform 0.72s cubic-bezier(0.3, 0.7, 0.2, 1),
        opacity 0.72s ease !important;
}

@keyframes gateway-breathe {
    0%, 100% { opacity: 0.62; transform: translate(-50%, -50%) scale(0.88); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.14); }
}

@keyframes gateway-open {
    0% { transform: translateY(0) scale(1); filter: brightness(1.16) drop-shadow(0 0 20px rgba(231, 227, 163, 0.22)); }
    48% { transform: translateY(-3px) scale(1.065); filter: brightness(1.42) drop-shadow(0 0 38px rgba(255, 241, 170, 0.48)); }
    100% { transform: translateY(-1px) scale(1.015); filter: brightness(1.22) drop-shadow(0 0 58px rgba(145, 188, 126, 0.34)); }
}

@keyframes gateway-flash {
    0% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.8); }
    52% { opacity: 1; transform: translate(-50%, -50%) scale(1.55); }
    100% { opacity: 0.35; transform: translate(-50%, -50%) scale(2.1); }
}

.page-turn {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    visibility: hidden;
    overflow: hidden;
    perspective: 1800px;
    background: #111711;
}

.page-turn-sheet {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform: rotateY(0deg);
    background:
        radial-gradient(circle at 18% 28%, rgba(255,255,255,0.42), transparent 38%),
        radial-gradient(circle at 78% 72%, rgba(110,95,72,0.08), transparent 42%),
        #f7f5f0;
    box-shadow: 28px 0 70px rgba(0, 0, 0, 0.5);
    backface-visibility: hidden;
}

.page-turn-sheet::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 22%;
    background: linear-gradient(90deg, transparent, rgba(30, 37, 29, 0.14) 72%, rgba(9, 13, 9, 0.44));
    opacity: 0;
}

.page-turn-shadow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 92% 50%, rgba(137, 164, 112, 0.22), transparent 38%);
    opacity: 0;
}

body.is-turning-page {
    overflow: hidden;
}

body.is-turning-page .page-turn {
    visibility: visible;
}

body.is-turning-page .page-turn-sheet {
    animation: turn-page 1.55s cubic-bezier(0.62, 0.02, 0.28, 1) forwards;
}

body.is-turning-page .page-turn-sheet::after {
    animation: page-edge-shadow 1.55s ease forwards;
}

body.is-turning-page .page-turn-shadow {
    animation: world-reveal 1.55s ease forwards;
}

@keyframes turn-page {
    0% { transform: rotateY(0deg); }
    38% { transform: rotateY(-34deg); }
    100% { transform: rotateY(-112deg); }
}

@keyframes page-edge-shadow {
    0% { opacity: 0; }
    32% { opacity: 1; }
    100% { opacity: 0.3; }
}

@keyframes world-reveal {
    0%, 34% { opacity: 0; }
    68% { opacity: 1; }
    100% { opacity: 0.65; }
}

@media (max-width: 700px) {
    .world-gate { width: min(220px, 62vw); }
    .world-gate-emblem { max-height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
    body.is-turning-page .page-turn-sheet,
    body.is-turning-page .page-turn-sheet::after,
    body.is-turning-page .page-turn-shadow {
        animation: none !important;
    }

    body.is-turning-page .page-turn {
        background: #111711;
    }
}

/* Stronger storybook page turn and remembered return state */
.page-turn {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    visibility: hidden;
    overflow: hidden;
    perspective: 2200px;
    background: #0d130d;
}

.page-turn-reveal {
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 46%, rgba(126, 160, 108, 0.28), transparent 34%),
        linear-gradient(135deg, #101710, #1b281b 55%, #0b110b);
}

.page-turn-sheet {
    position: absolute;
    top: -6%;
    right: -2%;
    width: 108%;
    height: 112%;
    transform-origin: left center;
    transform: translateX(100%) rotateY(0deg);
    transform-style: preserve-3d;
    border-radius: 52% 0 0 52% / 6% 0 0 6%;
    background:
        linear-gradient(90deg,
            rgba(16, 22, 16, 0.98) 0%,
            rgba(39, 47, 37, 0.98) 8%,
            rgba(247, 244, 234, 0.99) 17%,
            rgba(238, 234, 220, 0.99) 72%,
            rgba(178, 171, 150, 0.98) 96%,
            rgba(82, 78, 66, 0.98) 100%);
    box-shadow: -35px 0 90px rgba(0, 0, 0, 0.65);
}

.page-turn-back {
    position: absolute;
    inset: 0;
    transform: translateZ(-2px) rotateY(180deg);
    backface-visibility: hidden;
    background:
        radial-gradient(circle at 70% 35%, rgba(111, 145, 96, 0.16), transparent 32%),
        linear-gradient(90deg, #d8d2c2, #f3efe4 76%, #bcb39d);
}

.page-turn-crease {
    position: absolute;
    top: 0;
    left: 0;
    width: 15%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(0,0,0,0.62),
        rgba(0,0,0,0.18) 34%,
        rgba(255,255,255,0.34) 70%,
        transparent);
    filter: blur(1px);
}

.page-turn-shadow {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(90deg,
        rgba(0,0,0,0.78) 0%,
        rgba(0,0,0,0.38) 38%,
        transparent 72%);
}

body.is-turning-page {
    overflow: hidden;
}

body.is-turning-page .page-turn {
    visibility: visible;
}

body.is-turning-page .page-turn-reveal {
    animation: reveal-yumemori-under-page 2s ease forwards;
}

body.is-turning-page .page-turn-sheet {
    animation: curl-page-across 2s cubic-bezier(0.58, 0.01, 0.22, 1) forwards;
}

body.is-turning-page .page-turn-shadow {
    animation: sweep-page-shadow 2s ease forwards;
}

@keyframes curl-page-across {
    0% {
        transform: translateX(100%) rotateY(0deg) skewY(0deg);
        border-radius: 52% 0 0 52% / 6% 0 0 6%;
    }
    18% {
        transform: translateX(74%) rotateY(-14deg) skewY(-0.8deg);
        border-radius: 43% 0 0 43% / 10% 0 0 10%;
    }
    52% {
        transform: translateX(24%) rotateY(-42deg) skewY(0.7deg);
        border-radius: 24% 0 0 24% / 16% 0 0 16%;
    }
    82% {
        transform: translateX(-47%) rotateY(-98deg) skewY(-0.4deg);
        border-radius: 10% 0 0 10% / 20% 0 0 20%;
    }
    100% {
        transform: translateX(-112%) rotateY(-168deg) skewY(0deg);
        border-radius: 0;
    }
}

@keyframes sweep-page-shadow {
    0% { opacity: 0; transform: translateX(45%); }
    22% { opacity: 0.74; }
    70% { opacity: 0.42; transform: translateX(-18%); }
    100% { opacity: 0; transform: translateX(-62%); }
}

@keyframes reveal-yumemori-under-page {
    0% { opacity: 0; transform: scale(1.035); }
    26% { opacity: 0.18; }
    72% { opacity: 0.92; }
    100% { opacity: 1; transform: scale(1); }
}

body.journey-restored .guide-light {
    opacity: 0;
}

/* One physical page-turn system: the current violet threshold lifts from its
   right edge and folds across the left-hand spine to reveal Yumemori. */
.page-turn {
    position: fixed;
    inset: 0;
    z-index: 1000;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
    perspective: 2400px;
    background: #0d130d;
}

.page-turn-reveal {
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 48%, rgba(126, 160, 108, 0.26), transparent 32%),
        radial-gradient(circle at 22% 72%, rgba(205, 218, 179, 0.05), transparent 26%),
        linear-gradient(145deg, #101710, #1a281b 58%, #0a100b);
    transform: scale(1.025);
}

.page-turn-sheet {
    position: absolute;
    inset: -2% -1% -2% 0;
    width: 101%;
    height: 104%;
    transform-origin: left center;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    border-radius: 0 1.5% 1.5% 0 / 0 50% 50% 0;
    background:
        radial-gradient(circle at 50% 68%, rgba(194,148,219,0.54), transparent 40%),
        linear-gradient(to bottom, #f3edf6 0%, #e4d7eb 28%, #b99bcb 58%, #604174 100%);
    box-shadow: 28px 0 70px rgba(0,0,0,0.4);
}

.page-turn-sheet::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 24%;
    height: 100%;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(56,35,72,0.18) 62%, rgba(22,12,31,0.66));
}

.page-turn-back {
    position: absolute;
    inset: 0;
    transform: translateZ(-1px) rotateY(180deg);
    backface-visibility: hidden;
    background:
        radial-gradient(circle at 70% 38%, rgba(116,145,98,0.13), transparent 34%),
        linear-gradient(90deg, #cbc5b4, #f1ede2 72%, #aaa18b);
}

.page-turn-crease {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 9%;
    height: 100%;
    opacity: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0.1) 42%, rgba(255,255,255,0.25) 74%, transparent);
}

.page-turn-shadow {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.7), rgba(0,0,0,0.25) 32%, transparent 67%);
}

body.is-turning-page .page-turn { visibility: visible; }
body.is-turning-page .page-turn-reveal { animation: reveal-yumemori-under-page 2.05s ease forwards; }
body.is-turning-page .page-turn-sheet { animation: turn-real-page 2.05s cubic-bezier(0.55, 0.02, 0.19, 1) forwards; }
body.is-turning-page .page-turn-sheet::after { animation: curl-edge-shadow 2.05s ease forwards; }
body.is-turning-page .page-turn-crease { animation: spine-crease 2.05s ease forwards; }
body.is-turning-page .page-turn-shadow { animation: sweep-page-shadow 2.05s ease forwards; }

@keyframes turn-real-page {
    0% { transform: rotateY(0deg) translateX(0); border-radius: 0 1.5% 1.5% 0 / 0 50% 50% 0; }
    18% { transform: rotateY(-18deg) translateX(-0.5%); border-radius: 0 5% 5% 0 / 0 50% 50% 0; }
    52% { transform: rotateY(-82deg) translateX(-1.5%); border-radius: 0 10% 10% 0 / 0 50% 50% 0; }
    82% { transform: rotateY(-145deg) translateX(-1%); border-radius: 0 5% 5% 0 / 0 50% 50% 0; }
    100% { transform: rotateY(-179deg) translateX(0); border-radius: 0; }
}

@keyframes curl-edge-shadow {
    0% { opacity: 0; }
    22%, 65% { opacity: 1; }
    100% { opacity: 0.12; }
}

@keyframes spine-crease {
    0%, 28% { opacity: 0; }
    55% { opacity: 0.9; }
    100% { opacity: 0.15; }
}

@media (max-width: 700px) {
    .page-turn { perspective: 1600px; }
    .guide-light::after { width: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    body.is-turning-page .page-turn-sheet,
    body.is-turning-page .page-turn-shadow,
    body.is-turning-page .page-turn-reveal {
        animation-duration: 0.01ms !important;
    }
}


/* Slow threshold departure into Sawa's cottage. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #030201;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.8s cubic-bezier(.55,0,.25,1);
}
body.leaving-for-cottage::after { opacity: 1; }