/* martial.quest -- horizontal scroll cinematic wuxia */
/* Palette: #0A0A0C void, #1A1A1E obsidian, #B8860B gold, #C23B22 cinnabar, #E8E0D4 bone, #6B6560 iron, #D4C5A0 parchment, #A0522D forge */

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

:root{
    --void:#0A0A0C;
    --obsidian:#1A1A1E;
    --gold:#B8860B;
    --cinnabar:#C23B22;
    --bone:#E8E0D4;
    --iron:#6B6560;
    --parchment:#D4C5A0;
    --forge:#A0522D;
    --ease-strike:cubic-bezier(0.16,1,0.3,1);
}

html{font-size:16px}

body{
    background:var(--void);
    color:var(--bone);
    font-family:'Noto Serif JP',serif;
    font-weight:300;
    font-size:clamp(1rem,1.5vw,1.25rem);
    line-height:1.85;
    letter-spacing:0.02em;
    overflow:hidden;
    cursor:crosshair;
    height:100vh;
}

/* Progress bar */
.progress-bar{
    position:fixed;
    bottom:0;left:0;
    height:2px;
    background:var(--gold);
    width:0%;
    z-index:100;
    transition:width 0.1s linear;
}

/* Yabane chevron pattern */
.yabane-overlay{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
    opacity:0.03;
    background:
        repeating-linear-gradient(60deg,transparent,transparent 20px,var(--gold) 20px,var(--gold) 21px),
        repeating-linear-gradient(-60deg,transparent,transparent 20px,var(--gold) 20px,var(--gold) 21px);
}

/* Horizontal scroll container */
.scroll-container{
    display:flex;
    height:100vh;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
}

.scroll-container::-webkit-scrollbar{display:none}
.scroll-container{-ms-overflow-style:none;scrollbar-width:none}

/* Chambers */
.chamber{
    min-width:100vw;
    height:100vh;
    flex-shrink:0;
    scroll-snap-align:start;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    background:var(--void);
}

/* Strike lines */
.strike-lines{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.strike-line{
    position:absolute;
    height:1px;
    background:var(--gold);
    opacity:0.3;
    width:0;
    left:0;
}

.strike-line.animate{
    animation:strikeSweep 0.3s ease-out forwards;
}

@keyframes strikeSweep{
    from{width:0}
    to{width:100vw}
}

/* Ink diffusion */
.ink-diffusion{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at center,var(--void),transparent);
    background-size:0% 0%;
    background-repeat:no-repeat;
    background-position:center;
    pointer-events:none;
    z-index:10;
}

/* Hanko watermark */
.hanko-mark{
    position:absolute;
    bottom:1.5rem;right:1.5rem;
    width:24px;height:24px;
    opacity:0.4;
}

/* Chamber 1: Gate */
.chamber-gate{
    flex-direction:column;
}

.gate-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    opacity:0;
    transition:opacity 0.8s ease;
}

.gate-content.revealed{opacity:1}

.brush-stroke{
    width:clamp(100px,20vw,200px);
    height:auto;
    margin-bottom:1rem;
}

.stroke-draw{
    stroke-dasharray:800;
    stroke-dashoffset:800;
    transition:stroke-dashoffset 4s ease-out;
}

.gate-content.revealed .stroke-draw{
    stroke-dashoffset:0;
}

.gate-title{
    font-family:'Noto Serif JP',serif;
    font-weight:700;
    font-size:clamp(5rem,15vw,14rem);
    color:var(--bone);
    line-height:1;
}

.kinetic-letter{
    display:inline-block;
    opacity:0;
    transform:translateY(120%);
    transition:opacity 0.6s ease,transform 0.6s var(--ease-strike);
}

.gate-content.revealed .kinetic-letter{
    opacity:1;
    transform:translateY(0);
}

.gate-rule{
    width:0;
    height:2px;
    background:var(--gold);
    margin-top:2rem;
    transition:width 1.5s ease 1s;
}

.gate-content.revealed .gate-rule{
    width:40vw;
}

.scroll-hint{
    position:absolute;
    right:clamp(2rem,4vw,4rem);
    top:50%;
    transform:translateY(-50%);
    animation:hintPulse 1s ease-in-out infinite;
}

.hint-arrow{
    font-size:2rem;
    color:var(--gold);
    opacity:0.6;
}

@keyframes hintPulse{
    0%,100%{opacity:0.3}
    50%{opacity:0.8}
}

/* Chamber headings */
.chamber-heading{
    font-family:'Bebas Neue',sans-serif;
    font-weight:400;
    font-size:clamp(2rem,5vw,5rem);
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--bone);
    margin-bottom:1.5rem;
}

.body-text{
    font-family:'Noto Serif JP',serif;
    font-weight:300;
    font-size:clamp(1rem,1.5vw,1.25rem);
    line-height:1.85;
    color:var(--bone);
}

/* Chamber 2: Path */
.path-content{
    display:flex;
    flex-direction:column;
    gap:clamp(2rem,4vw,8rem);
    padding:clamp(2rem,4vw,6rem);
    max-width:700px;
    opacity:0;
    transition:opacity 0.8s ease;
}

.path-content.revealed{opacity:1}

.path-block{
    opacity:0;
    transform:translateY(40px);
}

.path-content.revealed .path-block{
    animation:pathReveal 0.6s var(--ease-strike) forwards;
}

.pb-1{animation-delay:0.2s !important}
.pb-2{animation-delay:0.5s !important}
.pb-3{animation-delay:0.8s !important}

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

/* Chamber 3: Forge */
.forge-content{
    display:flex;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 0.8s ease;
}

.forge-content.revealed{opacity:1}

.forge-left{
    width:40%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2rem;
}

.forge-grid{
    width:60%;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr 1fr;
    gap:2px;
    padding:2rem;
}

.forge-card{
    background:var(--obsidian);
    padding:clamp(1rem,2vw,2rem);
    transform:skewX(-3deg);
    opacity:0;
    transition:opacity 0.5s ease,transform 0.5s var(--ease-strike);
}

.forge-card.revealed{
    opacity:1;
}

.card-title{
    font-family:'Bebas Neue',sans-serif;
    font-weight:400;
    font-size:clamp(1.2rem,2vw,1.8rem);
    letter-spacing:0.15em;
    color:var(--gold);
    margin-bottom:0.5rem;
}

.card-text{
    font-family:'Noto Serif JP',serif;
    font-weight:300;
    font-size:clamp(0.8rem,1vw,0.95rem);
    line-height:1.6;
    color:var(--parchment);
}

/* Chamber 4: Arena */
.arena-content{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    perspective:1200px;
    opacity:0;
    transition:opacity 0.8s ease;
}

.arena-content.revealed{opacity:1}

.arena-plane{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:2rem;
}

.arena-far{
    transform:translateZ(-200px);
    opacity:0.3;
    width:100%;
}

.arena-text-far{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:0.7rem;
    letter-spacing:0.25em;
    color:var(--iron);
}

.arena-mid{
    transform:translateZ(0);
    flex-direction:column;
    max-width:600px;
}

.arena-near{
    transform:translateZ(100px);
    opacity:0.15;
    pointer-events:none;
}

.arena-text-near{
    font-family:'Noto Serif JP',serif;
    font-weight:700;
    font-size:clamp(6rem,12vw,12rem);
    color:var(--gold);
}

/* Chamber 5: Scroll */
.chamber-scroll{
    background:var(--void);
}

.scroll-content{
    max-width:500px;
    padding:20vh 2rem;
    text-align:left;
    opacity:0;
    transition:opacity 0.8s ease;
}

.scroll-content.revealed{opacity:1}

.scroll-text{
    font-family:'Noto Serif JP',serif;
    font-weight:300;
    font-size:clamp(1rem,1.5vw,1.25rem);
    line-height:1.85;
    color:var(--bone);
}

/* Chamber 6: Strike */
.strike-content{
    position:relative;
    width:80%;
    height:80%;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity 0.8s ease;
}

.strike-content.revealed{opacity:1}

.strike-heading{
    font-family:'Bebas Neue',sans-serif;
    font-weight:400;
    font-size:clamp(3rem,8vw,8rem);
    letter-spacing:0.15em;
    color:var(--bone);
    position:relative;
    z-index:5;
}

.strike-element{
    position:absolute;
    font-family:'Bebas Neue',sans-serif;
    font-weight:400;
    letter-spacing:0.15em;
    opacity:0;
}

.strike-content.revealed .strike-element{
    animation:strikeIn 0.8s var(--ease-strike) forwards;
}

.se-top{
    top:10%;left:50%;
    transform:translate(-50%,-100%);
    font-size:clamp(2rem,5vw,4rem);
    color:var(--gold);
    animation-delay:0.3s !important;
}

.se-left{
    left:5%;top:50%;
    transform:translate(-100%,-50%);
    font-size:clamp(1.2rem,2vw,2rem);
    color:var(--parchment);
    animation-delay:0.5s !important;
}

.se-right{
    right:5%;top:50%;
    transform:translate(100%,-50%);
    font-size:clamp(1.2rem,2vw,2rem);
    color:var(--parchment);
    animation-delay:0.5s !important;
}

.se-bottom{
    bottom:10%;left:50%;
    transform:translate(-50%,100%);
    font-size:clamp(1.2rem,2vw,2rem);
    color:var(--forge);
    animation-delay:0.7s !important;
}

@keyframes strikeIn{
    to{opacity:1;transform:translate(-50%,-50%) !important}
}

.se-left.animate-done{transform:translate(0,-50%)}
.se-right.animate-done{transform:translate(0,-50%)}
.se-top.animate-done{transform:translate(-50%,0)}
.se-bottom.animate-done{transform:translate(-50%,0)}

/* Chamber 7: Seal */
.chamber-seal{
    background:linear-gradient(to right,var(--void),var(--obsidian));
}

.seal-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    opacity:0;
    transition:opacity 1s ease;
}

.seal-content.revealed{opacity:1}

.hanko-large{
    width:clamp(120px,20vw,200px);
    transform:rotate(-2deg);
    margin-bottom:2rem;
}

.hanko-svg{width:100%;height:auto}

.seal-domain{
    font-family:'Bebas Neue',sans-serif;
    font-weight:400;
    font-size:clamp(1.5rem,3vw,3rem);
    letter-spacing:0.15em;
    color:var(--parchment);
    text-transform:lowercase;
}

/* Hover effects */
.body-text:hover,.scroll-text:hover,.card-text:hover{
    border-left:2px solid var(--gold);
    padding-left:8px;
    transform:perspective(800px) rotateY(1deg) translateX(-2px);
    transition:border-left 0s,padding-left 0s,transform 0.3s ease;
}

/* Responsive */
@media(max-width:768px){
    .forge-content{flex-direction:column}
    .forge-left{width:100%;padding:1rem}
    .forge-grid{width:100%;grid-template-columns:1fr;padding:1rem}
    .forge-card{transform:skewX(0)}
    .arena-text-near{font-size:4rem}
    .strike-heading{font-size:3rem}
    .chamber-heading{font-size:2rem}
}

@media(prefers-reduced-motion:reduce){
    .gate-content,.path-content,.forge-content,.arena-content,.scroll-content,.strike-content,.seal-content{
        opacity:1;transition:none;
    }
    .kinetic-letter{opacity:1;transform:none;transition:none}
    .stroke-draw{stroke-dashoffset:0;transition:none}
    .gate-rule{width:40vw;transition:none}
    .path-block{opacity:1;transform:none;animation:none !important}
    .forge-card{opacity:1;transition:none}
    .strike-element{opacity:1;animation:none !important;transform:translate(-50%,-50%) !important}
    .se-left{transform:translate(0,-50%) !important}
    .se-right{transform:translate(0,-50%) !important}
    .se-top{transform:translate(-50%,0) !important}
    .se-bottom{transform:translate(-50%,0) !important}
    .scroll-hint{animation:none}
    .strike-line{animation:none}
    .yabane-overlay{display:none}
}