/* eesugi.com - Watercolor Atelier */
/* Palette: Rice Paper #f5f0e8 | Deep Ink #1a1a2e | Wet Charcoal #3a3a4a | Diluted Indigo #2c3e6b | Cedar Amber #b8864e | Faded Sepia #8a7e6a | Plum Mist #9e7b8a */

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

:root{
    --rice-paper:#f5f0e8;
    --deep-ink:#1a1a2e;
    --wet-charcoal:#3a3a4a;
    --diluted-indigo:#2c3e6b;
    --cedar-amber:#b8864e;
    --faded-sepia:#8a7e6a;
    --plum-mist:#9e7b8a;
    --washi-surface:#f6f2eb;
    --ease-ink:cubic-bezier(0.25,0.1,0.25,1.0);
}

html{scroll-behavior:smooth}

body{
    background-color:var(--rice-paper);
    color:var(--deep-ink);
    font-family:'Karla',sans-serif;
    font-weight:400;
    line-height:1.75;
    overflow-x:hidden;
    position:relative;
}

/* SVG Filters hidden */
.svg-filters{position:absolute;width:0;height:0;overflow:hidden}

/* Paper texture overlay */
body::before{
    content:'';
    position:fixed;
    inset:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events:none;
    z-index:1000;
}

body::after{
    content:'';
    position:fixed;
    inset:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23f)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events:none;
    z-index:999;
}

/* Vertical wash spine */
.wash-spine{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:1;
}

/* --- LEAF: Base --- */
.leaf{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:2;
}

/* --- LEAF I: First Stroke --- */
.leaf-one{
    min-height:100vh;
    position:relative;
}

.cedar-watermark{
    position:absolute;
    width:60vw;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    opacity:0;
    animation:fadeInSlow 4s var(--ease-ink) 1.8s forwards;
    pointer-events:none;
}

.cedar-branch-hero{width:100%;height:auto}

.hero-stroke{
    width:min(600px,70vw);
    height:auto;
    margin-bottom:1.5rem;
}

.draw-stroke{
    stroke-dasharray:900;
    stroke-dashoffset:900;
    animation:drawLine 2.5s var(--ease-ink) 1.2s forwards;
}

.hero-title{
    font-family:'Shippori Mincho',serif;
    font-size:clamp(3rem,8vw,9rem);
    font-weight:400;
    letter-spacing:0.15em;
    line-height:1.3;
    color:var(--deep-ink);
    text-align:center;
}

.char{
    display:inline-block;
    opacity:0;
    animation:charFade 600ms var(--ease-ink) forwards;
    animation-delay:calc(3.7s + var(--i) * 200ms);
}

.scroll-hint{
    position:absolute;
    bottom:4vh;
    left:50%;
    transform:translateX(-50%);
    animation:pulseOpacity 2.5s ease-in-out infinite 5s;
    opacity:0;
}

/* --- LEAF II: The Wash --- */
.leaf-two{
    min-height:100vh;
    padding:10vh 5vw;
    position:relative;
}

.leaf-two::before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:35%;
    height:100%;
    background:radial-gradient(ellipse at 30% 50%,rgba(44,62,107,0.06) 0%,transparent 70%);
    pointer-events:none;
}

/* Washi panels */
.washi-panel{
    background:rgba(246,242,235,0.85); /* #f6f2eb */
    padding:clamp(2rem,4vw,3.5rem);
    max-width:560px;
    position:relative;
    mask-image:radial-gradient(ellipse at center,black 70%,transparent 100%);
    -webkit-mask-image:radial-gradient(ellipse at center,black 70%,transparent 100%);
    box-shadow:
        12px 12px 40px rgba(138,126,106,0.06),
        -8px -8px 30px rgba(138,126,106,0.04),
        20px 20px 60px rgba(138,126,106,0.08);
    opacity:0;
    transform:translateY(12px);
    transition:opacity 800ms var(--ease-ink),transform 800ms var(--ease-ink);
}

.washi-panel.visible{
    opacity:1;
    transform:translateY(0);
}

.washi-panel:hover{
    filter:contrast(1.02) saturate(0.95);
}

.panel-offset-right{
    margin-left:55%;
}

.body-text{
    font-family:'Karla',sans-serif;
    font-size:clamp(1rem,1.2vw,1.15rem);
    font-weight:400;
    line-height:1.75;
    color:var(--wet-charcoal);
}

.caveat-note{
    font-family:'Caveat',cursive;
    font-size:clamp(0.85rem,1vw,1rem);
    color:var(--faded-sepia);
    line-height:1.4;
}

.note-left{
    position:absolute;
    left:8%;
    top:40%;
    transform:rotate(-2deg);
    opacity:0;
    transition:opacity 1.2s var(--ease-ink);
}

.note-left.visible{opacity:1}

/* --- LEAF III: Ink Gallery --- */
.leaf-three{
    min-height:200vh;
    padding-top:10vh;
}

.section-heading{
    font-family:'Shippori Mincho',serif;
    font-size:clamp(1.8rem,4vw,4rem);
    font-weight:400;
    letter-spacing:0.08em;
    line-height:1.3;
    color:var(--deep-ink);
    text-align:center;
    margin-bottom:4vh;
}

.emakimono-wrapper{
    width:100%;
    height:70vh;
    overflow:hidden;
    position:sticky;
    top:15vh;
}

.emakimono-scroll{
    display:flex;
    gap:0;
    height:100%;
    transition:transform 0.1s linear;
    will-change:transform;
}

.ink-panel{
    flex:0 0 100vw;
    height:70vh;
    position:relative;
    overflow:hidden;
}

.panel-connector{
    flex:0 0 10vw;
    display:flex;
    align-items:center;
}

.panel-connector svg{width:100%;height:2px}

/* Panel 1: Concentric Rings */
.panel-rings{
    display:flex;
    align-items:center;
    justify-content:center;
}

.ring{
    position:absolute;
    border-radius:50%;
    border:2px solid var(--diluted-indigo);
}

.ring-1{width:60vh;height:60vh;opacity:0.08}
.ring-2{width:45vh;height:45vh;opacity:0.12}
.ring-3{width:30vh;height:30vh;opacity:0.16}
.ring-4{width:15vh;height:15vh;opacity:0.22}

/* Panel 2: Diagonal Sweep */
.panel-sweep{
    background:
        linear-gradient(135deg,transparent 20%,rgba(158,123,138,0.1) 40%,rgba(158,123,138,0.06) 60%,transparent 80%),
        radial-gradient(circle at 70% 30%,rgba(184,134,78,0.08) 0%,transparent 40%),
        radial-gradient(circle at 30% 70%,rgba(184,134,78,0.06) 0%,transparent 30%);
}

/* Panel 3: Overlapping Washes */
.panel-overlap{
    background:
        radial-gradient(ellipse at 35% 40%,rgba(44,62,107,0.1) 0%,transparent 50%),
        radial-gradient(ellipse at 65% 60%,rgba(158,123,138,0.08) 0%,transparent 50%),
        radial-gradient(ellipse at 50% 50%,rgba(44,62,107,0.05) 0%,transparent 60%);
}

/* Panel 4: Parallel Strokes */
.panel-strokes{
    background:
        repeating-linear-gradient(
            92deg,
            transparent,
            transparent 8vh,
            rgba(44,62,107,0.04) 8vh,
            rgba(44,62,107,0.08) 8.5vh,
            rgba(44,62,107,0.04) 9vh,
            transparent 9vh
        );
}

/* Panel 5: Bold Stroke */
.panel-bold{
    background:
        linear-gradient(
            155deg,
            transparent 15%,
            rgba(26,26,46,0.03) 25%,
            rgba(26,26,46,0.15) 45%,
            rgba(26,26,46,0.2) 50%,
            rgba(26,26,46,0.15) 55%,
            rgba(26,26,46,0.03) 75%,
            transparent 85%
        );
}

/* --- Brush Dividers --- */
.brush-divider{
    width:min(700px,80vw);
    margin:0 auto;
    padding:8vh 0;
    z-index:2;
    position:relative;
}

.draw-divider{
    stroke-dasharray:900;
    stroke-dashoffset:900;
    transition:stroke-dashoffset 1.5s var(--ease-ink);
}

.draw-divider.visible{
    stroke-dashoffset:0;
}

/* --- LEAF IV: Granulation --- */
.leaf-four{
    min-height:100vh;
    padding:10vh 5vw;
    display:flex;
    flex-direction:column;
    gap:6vh;
    align-items:flex-start;
    position:relative;
}

.card-left{margin-left:15%;max-width:45%}
.card-center{margin-left:45%;max-width:50%}
.card-right{margin-left:25%;max-width:42%}

/* --- LEAF V: Branch --- */
.leaf-five{
    min-height:100vh;
    position:relative;
}

.branch-container{
    position:sticky;
    top:10vh;
    width:90vw;
    height:80vh;
    margin:0 auto;
}

.cedar-branch-full{
    width:100%;
    height:100%;
}

.branch-draw{
    stroke-dasharray:1200;
    stroke-dashoffset:1200;
    transition:stroke-dashoffset 3s var(--ease-ink);
}

.branch-draw.visible{stroke-dashoffset:0}

.branch-draw.delay-1{transition-delay:1.5s}
.branch-draw.delay-2{transition-delay:2.5s}
.branch-draw.delay-3{transition-delay:3.5s}

.needle-cluster{
    transition:opacity 1.5s var(--ease-ink);
}

.needle-cluster.visible{opacity:0.06}

.nc-1{transition-delay:2s}
.nc-2{transition-delay:3s}
.nc-3{transition-delay:3.5s}
.nc-4{transition-delay:4s}
.nc-5{transition-delay:4.5s}

.branch-annotation{
    position:absolute;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 1s var(--ease-ink),transform 1s var(--ease-ink);
}

.branch-annotation.visible{
    opacity:1;
    transform:translateY(0);
}

.ann-1{left:18%;top:50%;transition-delay:2.5s}
.ann-2{left:52%;top:25%;transition-delay:3.5s}
.ann-3{right:15%;top:15%;transition-delay:4.5s}

/* --- LEAF VI: Seal --- */
.leaf-six{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2rem;
}

.seal-content{
    display:flex;
    align-items:center;
    gap:1rem;
}

.seal-domain{
    font-family:'Karla',sans-serif;
    font-size:1.2rem;
    font-weight:400;
    color:var(--wet-charcoal);
    letter-spacing:0.05em;
}

.hanko-seal{
    display:block;
}

.final-stroke{
    width:min(800px,90vw);
    margin-top:2rem;
}

.draw-final{
    stroke-dasharray:1100;
    stroke-dashoffset:1100;
    transition:stroke-dashoffset 2s var(--ease-ink);
}

.draw-final.visible{stroke-dashoffset:0}

.cedar-colophon{
    margin-top:1rem;
    opacity:0;
    transition:opacity 2s var(--ease-ink);
}

.cedar-colophon.visible{opacity:1}

.colophon-silence{
    height:30vh;
}

/* --- Ink Blooms --- */
.ink-bloom{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    opacity:0;
    transform:scale(0.1);
    z-index:0;
}

.bloom-1{
    width:40vw;height:40vw;
    left:-5vw;top:20%;
    background:radial-gradient(circle,rgba(44,62,107,0.06) 0%,rgba(44,62,107,0.02) 40%,transparent 70%);
}

.bloom-2{
    width:35vw;height:35vw;
    right:5vw;top:10%;
    background:radial-gradient(circle,rgba(158,123,138,0.05) 0%,rgba(158,123,138,0.02) 40%,transparent 70%);
}

.bloom-3{
    width:30vw;height:30vw;
    left:30%;top:20%;
    background:radial-gradient(circle,rgba(44,62,107,0.04) 0%,rgba(158,123,138,0.02) 40%,transparent 70%);
}

.ink-bloom.visible{
    animation:bloomExpand 3.5s var(--ease-ink) forwards;
}

/* --- Animations --- */
@keyframes drawLine{
    to{stroke-dashoffset:0}
}

@keyframes charFade{
    to{opacity:1}
}

@keyframes fadeInSlow{
    to{opacity:1}
}

@keyframes pulseOpacity{
    0%,100%{opacity:0.3}
    50%{opacity:0.6}
}

@keyframes bloomExpand{
    0%{opacity:0;transform:scale(0.1)}
    100%{opacity:1;transform:scale(1)}
}

/* --- Links --- */
a{
    color:var(--cedar-amber);
    text-decoration:none;
    transition:color 600ms var(--ease-ink);
}

a:hover{
    color:var(--diluted-indigo);
}

/* --- Responsive --- */
@media(max-width:768px){
    .panel-offset-right{margin-left:10%}
    .card-left{margin-left:5%;max-width:85%}
    .card-center{margin-left:5%;max-width:85%}
    .card-right{margin-left:5%;max-width:85%}
    .note-left{left:5%;top:auto;bottom:-3rem}
    .ann-1{left:5%;top:55%}
    .ann-2{left:40%;top:30%}
    .ann-3{right:5%;top:20%}
    .ink-panel{flex:0 0 90vw}
}