/* munju.club - Pixel Art x Art Deco */
/* Colors: #f7c59f #ff6b8a #8b7daa #1e1533 #faf3e8 #e85d3a #f0a830 #0d0b1e */

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: #0d0b1e;
    color: #faf3e8;
    font-family: "Space Mono", monospace;
    overflow-x: hidden;
    line-height: 1.6;
}

/* Pixel canvas backgrounds */
.pixel-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    z-index: 0;
    pointer-events: none;
}

/* Chambers */
.chamber {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ==================== */
/* CHAMBER 1: GATEWAY   */
/* ==================== */
.chamber--gateway {
    background: linear-gradient(180deg, #1e1533 0%, #0d0b1e 60%, #1e1533 100%);
}

.gateway-content {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

/* Archway structure */
.archway {
    position: relative;
    width: clamp(280px, 60vw, 600px);
    height: clamp(300px, 50vh, 500px);
    margin-bottom: 1rem;
}

.archway__keystone {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 60%;
    border: 4px solid #f0a830;
    border-bottom: none;
    border-radius: 50% 50% 0 0;
    box-shadow: 0 0 30px rgba(240, 168, 48, 0.3), inset 0 0 30px rgba(240, 168, 48, 0.1);
}

.archway__pillar {
    position: absolute;
    bottom: 0;
    width: 4px;
    height: 45%;
    background: #f0a830;
    box-shadow: 0 0 15px rgba(240, 168, 48, 0.4);
}

.archway__pillar--left {
    left: 0;
}

.archway__pillar--right {
    right: 0;
}

.archway__beam {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #f0a830, #e85d3a, #f0a830);
    box-shadow: 0 0 20px rgba(232, 93, 58, 0.5);
}

/* Domain title */
.domain-title {
    font-family: "Poiret One", cursive;
    font-size: clamp(36px, 6vw, 96px);
    font-weight: 400;
    letter-spacing: 0.15em;
    color: #faf3e8;
    text-shadow: 0 0 40px rgba(240, 168, 48, 0.6), 0 0 80px rgba(232, 93, 58, 0.3);
    position: relative;
    z-index: 3;
}

.letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: letterReveal 0.6s ease forwards;
}

.letter[data-index="0"] { animation-delay: 0.1s; }
.letter[data-index="1"] { animation-delay: 0.2s; }
.letter[data-index="2"] { animation-delay: 0.3s; }
.letter[data-index="3"] { animation-delay: 0.4s; }
.letter[data-index="4"] { animation-delay: 0.5s; }
.letter[data-index="5"] { animation-delay: 0.6s; }
.letter[data-index="6"] { animation-delay: 0.7s; }
.letter[data-index="7"] { animation-delay: 0.8s; }
.letter[data-index="8"] { animation-delay: 0.9s; }
.letter[data-index="9"] { animation-delay: 1.0s; }

@keyframes letterReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gateway-subtitle {
    font-family: "Inter", sans-serif;
    font-size: clamp(14px, 2vw, 20px);
    font-weight: 300;
    color: #8b7daa;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeIn 1s ease 1.2s forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Sunburst */
.sunburst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120vmax;
    height: 120vmax;
    z-index: 1;
    opacity: 0.15;
    background: conic-gradient(from 0deg, transparent 0deg, #f0a830 2deg, transparent 4deg, transparent 10deg, #e85d3a 12deg, transparent 14deg, transparent 20deg, #f0a830 22deg, transparent 24deg, transparent 30deg, #ff6b8a 32deg, transparent 34deg, transparent 40deg, #f0a830 42deg, transparent 44deg, transparent 50deg, #e85d3a 52deg, transparent 54deg, transparent 60deg, #f0a830 62deg, transparent 64deg, transparent 70deg, #ff6b8a 72deg, transparent 74deg, transparent 80deg, #f0a830 82deg, transparent 84deg, transparent 90deg, #e85d3a 92deg, transparent 94deg, transparent 100deg, #f0a830 102deg, transparent 104deg, transparent 110deg, #ff6b8a 112deg, transparent 114deg, transparent 120deg, #f0a830 122deg, transparent 124deg, transparent 130deg, #e85d3a 132deg, transparent 134deg, transparent 140deg, #f0a830 142deg, transparent 144deg, transparent 150deg, #ff6b8a 152deg, transparent 154deg, transparent 160deg, #f0a830 162deg, transparent 164deg, transparent 170deg, #e85d3a 172deg, transparent 174deg, transparent 180deg, #f0a830 182deg, transparent 184deg, transparent 190deg, #ff6b8a 192deg, transparent 194deg, transparent 200deg, #f0a830 202deg, transparent 204deg, transparent 210deg, #e85d3a 212deg, transparent 214deg, transparent 220deg, #f0a830 222deg, transparent 224deg, transparent 230deg, #ff6b8a 232deg, transparent 234deg, transparent 240deg, #f0a830 242deg, transparent 244deg, transparent 250deg, #e85d3a 252deg, transparent 254deg, transparent 260deg, #f0a830 262deg, transparent 264deg, transparent 270deg, #ff6b8a 272deg, transparent 274deg, transparent 280deg, #f0a830 282deg, transparent 284deg, transparent 290deg, #e85d3a 292deg, transparent 294deg, transparent 300deg, #f0a830 302deg, transparent 304deg, transparent 310deg, #ff6b8a 312deg, transparent 314deg, transparent 320deg, #f0a830 322deg, transparent 324deg, transparent 330deg, #e85d3a 332deg, transparent 334deg, transparent 340deg, #f0a830 342deg, transparent 344deg, transparent 350deg, #ff6b8a 352deg, transparent 354deg);
    animation: sunburstRotate 120s linear infinite;
    pointer-events: none;
}

@keyframes sunburstRotate {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Scroll indicator */
.scroll-indicator {
    opacity: 0;
    animation: fadeIn 1s ease 1.5s forwards, bobble 2s ease-in-out infinite 2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.scroll-indicator__arrow {
    width: 16px;
    height: 16px;
    border-right: 3px solid #f0a830;
    border-bottom: 3px solid #f0a830;
    transform: rotate(45deg);
}

.scroll-indicator__text {
    font-family: "Space Mono", monospace;
    font-size: 11px;
    color: #8b7daa;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

@keyframes bobble {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

/* ======================== */
/* CHEVRON DIVIDERS         */
/* ======================== */
.chevron-divider {
    position: relative;
    z-index: 5;
    margin-top: -1px;
    margin-bottom: -1px;
    line-height: 0;
}

.chevron-divider svg {
    display: block;
    width: 100%;
    height: 40px;
}

/* ==================== */
/* CHAMBER 2: ARCHIVE   */
/* ==================== */
.chamber--archive {
    background: #1e1533;
    padding: 6rem 2rem;
}

.archive-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.archive-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    position: relative;
}

.archive-block--left {
    padding-top: 4rem;
}

.archive-block--right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-top: 2rem;
}

.archive-block--overlap {
    grid-column: 1 / -1;
    margin-top: -2rem;
    display: flex;
    justify-content: center;
}

.section-title {
    font-family: "Poiret One", cursive;
    font-size: clamp(28px, 4vw, 64px);
    letter-spacing: 0.15em;
    color: #f0a830;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 30px rgba(240, 168, 48, 0.3);
}

.section-text {
    font-family: "Space Mono", monospace;
    font-size: clamp(13px, 1.4vw, 16px);
    color: #f7c59f;
    line-height: 1.8;
    max-width: 500px;
}

.sprite-canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    width: 256px;
    height: 256px;
    border: 3px solid #f0a830;
    box-shadow: 0 0 20px rgba(240, 168, 48, 0.2);
    background: #0d0b1e;
}

.sprite-label {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: #8b7daa;
    letter-spacing: 0.1em;
}

/* Deco frame */
.deco-frame {
    position: relative;
    padding: 2.5rem 3rem;
    border: 2px solid #8b7daa;
    max-width: 500px;
}

.deco-frame__corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: #f0a830;
    border-style: solid;
}

.deco-frame__corner--tl {
    top: -3px;
    left: -3px;
    border-width: 3px 0 0 3px;
}

.deco-frame__corner--tr {
    top: -3px;
    right: -3px;
    border-width: 3px 3px 0 0;
}

.deco-frame__corner--bl {
    bottom: -3px;
    left: -3px;
    border-width: 0 0 3px 3px;
}

.deco-frame__corner--br {
    bottom: -3px;
    right: -3px;
    border-width: 0 3px 3px 0;
}

.archive-quote {
    font-family: "Poiret One", cursive;
    font-size: clamp(18px, 2.5vw, 28px);
    color: #ff6b8a;
    text-align: center;
    letter-spacing: 0.08em;
    text-shadow: 0 0 30px rgba(255, 107, 138, 0.3);
}

/* ==================== */
/* CHAMBER 3: GARDEN    */
/* ==================== */
.chamber--garden {
    background: linear-gradient(180deg, #0d0b1e 0%, #1e1533 50%, #0d0b1e 100%);
    padding: 6rem 2rem;
    flex-direction: column;
}

.garden-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1200px;
    width: 100%;
}

.section-title--garden {
    color: #ff6b8a;
    text-shadow: 0 0 30px rgba(255, 107, 138, 0.4);
}

.garden-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin: 3rem 0;
}

.garden-sprite {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s ease;
}

.garden-sprite:hover {
    transform: translateY(-8px);
}

.garden-sprite .sprite-canvas {
    width: 192px;
    height: 192px;
    border-color: #ff6b8a;
    box-shadow: 0 0 20px rgba(255, 107, 138, 0.2);
    transition: box-shadow 0.3s ease;
}

.garden-sprite:hover .sprite-canvas {
    box-shadow: 0 0 40px rgba(255, 107, 138, 0.4);
}

.garden-text {
    font-family: "Space Mono", monospace;
    font-size: clamp(13px, 1.3vw, 15px);
    color: #8b7daa;
    max-width: 600px;
    margin: 2rem auto 0;
    line-height: 1.8;
}

/* Floating pixels */
.floating-pixels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.floating-pixel {
    position: absolute;
    image-rendering: pixelated;
    animation: floatUp linear infinite;
}

@keyframes floatUp {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(-20vh) rotate(180deg);
        opacity: 0;
    }
}

/* ======================== */
/* CHAMBER 4: OBSERVATORY   */
/* ======================== */
.chamber--observatory {
    background: #1e1533;
    padding: 6rem 2rem;
}

.observatory-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.observatory-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.observatory-text-block {
    padding: 2rem 0;
}

.observatory-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#telescope-canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    width: 300px;
    height: 300px;
    border: 3px solid #8b7daa;
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(139, 125, 170, 0.3), inset 0 0 40px rgba(139, 125, 170, 0.1);
}

.deco-line-pattern {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 4rem;
}

.deco-line {
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f0a830, transparent);
}

/* ======================== */
/* CHAMBER 5: THRESHOLD     */
/* ======================== */
.chamber--threshold {
    background: linear-gradient(180deg, #0d0b1e 0%, #1e1533 40%, #0d0b1e 100%);
    padding: 6rem 2rem;
    flex-direction: column;
}

.threshold-content {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.threshold-archway {
    margin-bottom: 2rem;
}

.pixel-door {
    display: flex;
    gap: 4px;
    perspective: 800px;
}

.door-left, .door-right {
    width: 60px;
    height: 120px;
    border: 3px solid #f0a830;
    background: linear-gradient(180deg, rgba(240, 168, 48, 0.1) 0%, rgba(232, 93, 58, 0.05) 100%);
    transition: transform 1.5s ease;
}

.door-left {
    transform-origin: left center;
    border-right: 1px solid #f0a830;
}

.door-right {
    transform-origin: right center;
    border-left: 1px solid #f0a830;
}

.door-open .door-left {
    transform: rotateY(-70deg);
}

.door-open .door-right {
    transform: rotateY(70deg);
}

.section-title--threshold {
    color: #e85d3a;
    text-shadow: 0 0 40px rgba(232, 93, 58, 0.5);
}

.threshold-text {
    font-family: "Space Mono", monospace;
    font-size: clamp(14px, 1.5vw, 18px);
    color: #f7c59f;
    max-width: 500px;
    line-height: 1.8;
}

.domain-echo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.echo-text {
    font-family: "Poiret One", cursive;
    font-size: clamp(24px, 4vw, 48px);
    letter-spacing: 0.15em;
    color: #f0a830;
}

.echo-text--fade {
    opacity: 0.4;
    filter: blur(1px);
    color: #e85d3a;
}

.echo-text--fader {
    opacity: 0.15;
    filter: blur(2px);
    color: #ff6b8a;
}

.final-pixel-burst {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* ==================== */
/* SCROLL ANIMATIONS    */
/* ==================== */
.chamber .section-title,
.chamber .section-text,
.chamber .archive-block,
.chamber .garden-sprite,
.chamber .observatory-layout,
.chamber .threshold-content > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.chamber.visible .section-title,
.chamber.visible .section-text,
.chamber.visible .archive-block,
.chamber.visible .garden-sprite,
.chamber.visible .observatory-layout,
.chamber.visible .threshold-content > * {
    opacity: 1;
    transform: translateY(0);
}

.chamber.visible .archive-block:nth-child(1) { transition-delay: 0.1s; }
.chamber.visible .archive-block:nth-child(2) { transition-delay: 0.3s; }
.chamber.visible .archive-block:nth-child(3) { transition-delay: 0.5s; }

.chamber.visible .garden-sprite:nth-child(1) { transition-delay: 0.1s; }
.chamber.visible .garden-sprite:nth-child(2) { transition-delay: 0.2s; }
.chamber.visible .garden-sprite:nth-child(3) { transition-delay: 0.3s; }
.chamber.visible .garden-sprite:nth-child(4) { transition-delay: 0.4s; }

/* Gateway is always visible */
.chamber--gateway .gateway-content {
    opacity: 1;
    transform: none;
}

/* ==================== */
/* RESPONSIVE           */
/* ==================== */
@media (max-width: 768px) {
    .archive-grid {
        grid-template-columns: 1fr;
    }
    .garden-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .observatory-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .sprite-canvas {
        width: 192px;
        height: 192px;
    }
    .garden-sprite .sprite-canvas {
        width: 128px;
        height: 128px;
    }
    #telescope-canvas {
        width: 200px;
        height: 200px;
    }
    .archway {
        width: 80vw;
        height: 40vh;
    }
}