/* ============================================
   rironbusou.com — Cottagecore Theoretical Armament
   Color Palette:
     Warm Linen:     #E8DFD0
     Rich Soil:      #4A3828
     Sage Garden:    #7B8B6B
     Honey Warm:     #C8A050
     Clay Rose:      #C4887A
     Parchment Light:#F5F0E8
     Bark Deep:      #3A2818
   ============================================ */

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: #E8DFD0;
    color: #4A3828;
    font-family: 'Merriweather', Georgia, serif;
    font-weight: 400;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.85;
    overflow-x: hidden;
}

/* ---- Particle Canvas ---- */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

/* ---- Typography ---- */
h1, h2 {
    font-family: 'Commissioner', Georgia, serif;
    font-weight: 700;
    color: #3A2818;
    line-height: 1.2;
}

h2 {
    font-size: clamp(28px, 4.5vw, 56px);
    font-weight: 600;
    margin-bottom: 1.2em;
}

.section-label {
    display: block;
    font-family: 'DM Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    color: #7B8B6B;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1em;
}

p {
    margin-bottom: 1.4em;
    max-width: 60ch;
}

/* ---- Garden Gate (Hero) ---- */
#garden-gate {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    background-color: #E8DFD0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
}

.gate-content {
    position: relative;
    z-index: 2;
    padding-top: 15vh;
    padding-left: 8vw;
}

.wordmark-container {
    position: relative;
    opacity: 0;
    animation: fadeInWordmark 0.8s ease-out 0.3s forwards;
}

.wordmark {
    font-family: 'Commissioner', Georgia, serif;
    font-weight: 700;
    font-size: clamp(36px, 6vw, 72px);
    color: #3A2818;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.wordmark-subtitle {
    font-family: 'Commissioner', Georgia, serif;
    font-weight: 600;
    font-size: clamp(20px, 3vw, 36px);
    color: #4A3828;
    margin-top: 0.3em;
    margin-bottom: 0.2em;
    letter-spacing: 0.15em;
}

.wordmark-meaning {
    font-family: 'Merriweather', Georgia, serif;
    font-style: italic;
    font-size: clamp(14px, 1.4vw, 18px);
    color: #7B8B6B;
    margin-top: 0.5em;
}

/* Ripple animation from wordmark */
.ripple-ring {
    position: absolute;
    top: 50%;
    left: 30%;
    width: 20px;
    height: 20px;
    border: 2px solid #C8A050;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    animation: rippleExpand 1.2s ease-out 0.5s forwards;
    pointer-events: none;
}

@keyframes rippleExpand {
    0% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(25);
    }
}

@keyframes fadeInWordmark {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Shield-Bookshelf Illustration */
.gate-illustration {
    position: absolute;
    bottom: 5vh;
    right: 8vw;
    z-index: 1;
}

.shield-bookshelf {
    width: clamp(200px, 30vw, 400px);
    height: auto;
    opacity: 0;
    animation: drawIn 1.5s ease-out 0.6s forwards;
}

.shield-outline {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: strokeDraw 2s ease-out 0.6s forwards;
}

.shelf {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
}

.shelf-1 { animation: strokeDraw 1s ease-out 1.2s forwards; }
.shelf-2 { animation: strokeDraw 1s ease-out 1.4s forwards; }
.shelf-3 { animation: strokeDraw 1s ease-out 1.6s forwards; }
.shelf-4 { animation: strokeDraw 1s ease-out 1.8s forwards; }

.book {
    opacity: 0;
    animation: bookFadeIn 0.5s ease-out forwards;
}

.book:nth-child(n+5):nth-child(-n+13) { animation-delay: 1.6s; }
.book:nth-child(n+14):nth-child(-n+23) { animation-delay: 1.8s; }
.book:nth-child(n+24):nth-child(-n+32) { animation-delay: 2.0s; }

.plant, .steam {
    opacity: 0;
    animation: bookFadeIn 0.8s ease-out 2.2s forwards;
}

.steam {
    animation: steamFloat 3s ease-in-out infinite;
    animation-delay: 2.4s;
}

.steam-2 {
    animation-delay: 2.8s;
}

@keyframes strokeDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes drawIn {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes bookFadeIn {
    0% { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes steamFloat {
    0%, 100% { transform: translateY(0); opacity: 0; }
    20% { opacity: 0.6; }
    50% { transform: translateY(-8px); opacity: 0.4; }
    80% { opacity: 0.2; }
}

/* Scroll hint */
.scroll-hint {
    position: absolute;
    bottom: 3vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0;
    animation: fadeInWordmark 0.8s ease-out 2.5s forwards;
    z-index: 2;
}

.scroll-hint-text {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: #7B8B6B;
    letter-spacing: 0.12em;
    text-transform: lowercase;
}

.scroll-arrow {
    animation: gentleBounce 2.5s ease-in-out infinite;
}

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

/* ---- Knowledge Garden ---- */
#knowledge-garden {
    position: relative;
    padding: 10vh 0 15vh;
    background-color: #E8DFD0;
}

.garden-section {
    position: relative;
    max-width: 60vw;
    padding: 6vh 0;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.garden-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Asymmetric margins - no two adjacent sections share the same margin */
.section-1 {
    margin-left: 5vw;
}

.section-2 {
    margin-left: 20vw;
}

.section-3 {
    margin-left: 8vw;
}

.section-4 {
    margin-left: 15vw;
}

/* Garden illustrations */
.garden-illustration {
    position: absolute;
    opacity: 0.75;
    z-index: 0;
}

.illustration-pen-sword {
    right: -18vw;
    top: 2vh;
    width: clamp(100px, 12vw, 180px);
}

.illustration-pen-sword svg {
    width: 100%;
    height: auto;
}

.illustration-arrow-idea {
    left: -15vw;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(120px, 16vw, 220px);
}

.illustration-arrow-idea svg {
    width: 100%;
    height: auto;
}

.illustration-book-shield {
    right: -14vw;
    top: 1vh;
    width: clamp(100px, 12vw, 180px);
}

.illustration-book-shield svg {
    width: 100%;
    height: auto;
}

/* SVG draw-in on scroll */
.garden-illustration svg path,
.garden-illustration svg line,
.garden-illustration svg rect,
.garden-illustration svg circle {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 1.5s ease-out;
}

.garden-section.visible .garden-illustration svg path,
.garden-section.visible .garden-illustration svg line,
.garden-section.visible .garden-illustration svg rect,
.garden-section.visible .garden-illustration svg circle {
    stroke-dashoffset: 0;
}

/* ---- Armory Library ---- */
#armory-library {
    position: relative;
    padding: 12vh 0 15vh;
    background-color: #F5F0E8;
    overflow: hidden;
}

.armory-content {
    margin-left: 10vw;
    max-width: 50vw;
    margin-bottom: 6vh;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.armory-content.visible {
    opacity: 1;
    transform: translateY(0);
}

.armory-illustration {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5vw;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s;
}

.armory-illustration.visible {
    opacity: 1;
    transform: translateY(0);
}

.library-scene {
    width: clamp(300px, 50vw, 600px);
    height: auto;
}

/* Ripple effect on armory library enter */
.armory-ripple {
    position: absolute;
    border: 2px solid #C8A050;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    pointer-events: none;
    opacity: 0;
    transform: scale(0);
    animation: rippleExpand 1.2s ease-out forwards;
}

/* ---- Twilight Garden Footer ---- */
#twilight-footer {
    position: relative;
    background-color: #4A3828;
    padding: 10vh 0 8vh;
    color: #E8DFD0;
    overflow: hidden;
}

.footer-content {
    margin-left: 8vw;
    max-width: 50vw;
}

.footer-title {
    font-family: 'Commissioner', Georgia, serif;
    font-weight: 700;
    font-size: clamp(22px, 3vw, 36px);
    color: #E8DFD0;
    margin-bottom: 0.2em;
}

.footer-japanese {
    font-family: 'Commissioner', Georgia, serif;
    font-weight: 600;
    font-size: clamp(16px, 2vw, 24px);
    color: #C8A050;
    letter-spacing: 0.15em;
    margin-bottom: 0.8em;
}

.footer-tagline {
    font-family: 'Merriweather', Georgia, serif;
    font-style: italic;
    font-size: clamp(14px, 1.2vw, 17px);
    color: #C4887A;
    margin-bottom: 2em;
}

.footer-divider {
    width: 60px;
    height: 1px;
    background-color: #7B8B6B;
    margin-bottom: 2em;
    opacity: 0.6;
}

.footer-note {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    color: #7B8B6B;
    letter-spacing: 0.08em;
}

/* ---- Click Ripple Effect ---- */
.click-ripple {
    position: fixed;
    border: 2px solid #C8A050;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    pointer-events: none;
    z-index: 2000;
    opacity: 0;
    transform: scale(0);
    animation: clickRipple 0.6s ease-out forwards;
}

@keyframes clickRipple {
    0% {
        opacity: 0.7;
        transform: scale(0);
    }
    100% {
        opacity: 0;
        transform: scale(12);
    }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .gate-content {
        padding-top: 12vh;
        padding-left: 6vw;
    }

    .gate-illustration {
        right: 4vw;
        bottom: 8vh;
    }

    .shield-bookshelf {
        width: clamp(150px, 45vw, 250px);
    }

    .garden-section {
        max-width: 85vw;
    }

    .section-1 { margin-left: 5vw; }
    .section-2 { margin-left: 10vw; }
    .section-3 { margin-left: 5vw; }
    .section-4 { margin-left: 8vw; }

    .garden-illustration {
        position: relative;
        right: auto;
        left: auto;
        top: auto;
        margin-top: 2vh;
        margin-bottom: 2vh;
        width: clamp(100px, 50vw, 200px);
    }

    .illustration-arrow-idea {
        transform: none;
    }

    .armory-content {
        margin-left: 6vw;
        max-width: 88vw;
    }

    .footer-content {
        margin-left: 6vw;
        max-width: 88vw;
    }

    #armory-library {
        padding: 8vh 0 10vh;
    }
}

@media (max-width: 480px) {
    .wordmark {
        font-size: clamp(28px, 8vw, 40px);
    }

    .wordmark-subtitle {
        font-size: clamp(16px, 5vw, 24px);
    }

    h2 {
        font-size: clamp(24px, 6vw, 36px);
    }

    .garden-section {
        max-width: 90vw;
        padding: 4vh 0;
    }

    .section-1,
    .section-2,
    .section-3,
    .section-4 {
        margin-left: 5vw;
    }
}