/* daitoua.quest - Vaporwave Neo-Orientalism */
/* Colors: #0d0221 #150338 #f0e6ff #ff006e #00fff5 #7b2ff7 #e0d6ff #1a0033 #2d1b4e #ff69b4 */
/* Fonts: Righteous, Libre Caslon Text, Share Tech Mono */

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

html{scroll-behavior:smooth}

body{
    background:#0d0221;
    color:#e0d6ff;
    font-family:'Libre Caslon Text',Georgia,serif;
    font-size:clamp(1rem,1.8vw,1.25rem);
    line-height:1.7;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* ===== PROGRESS RAIL ===== */
#progress-rail{
    position:fixed;
    left:20px;
    top:0;
    width:2px;
    height:100vh;
    background:rgba(255,0,110,0.15);
    z-index:1000;
}
#progress-fill{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:0%;
    background:#ff006e;
    transition:height 0.1s linear;
}
.waypoint{
    position:absolute;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    width:8px;height:8px;
    border:1px solid #ff006e;
    background:transparent;
    transition:background 0.3s ease;
}
.waypoint.active{
    background:#ff006e;
    box-shadow:0 0 8px #ff006e;
}

/* ===== AMBIENT CANVAS ===== */
#ambient-canvas{
    position:fixed;
    top:0;left:0;
    width:100vw;height:100vh;
    pointer-events:none;
    z-index:1;
}

/* ===== ZONES ===== */
.zone{
    position:relative;
    min-height:200vh;
    padding:10vh 5vw;
    z-index:2;
}
.zone-dark{background:transparent}
.zone-light{background:#f0e6ff}

.zone-label{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(0.7rem,1vw,0.85rem);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#00fff5;
    position:absolute;
    top:4vh;right:5vw;
    opacity:0.6;
}
.zone-label-dark{color:#2d1b4e}

/* ===== REVEAL ANIMATION ===== */
.reveal-element{
    opacity:0;
    transform:translateY(30px) scale(0.92);
    filter:blur(4px);
    transition:opacity 0.8s ease-out,transform 0.8s cubic-bezier(0.16,1,0.3,1),filter 0.6s ease-out 0.1s;
}
.reveal-element.revealed{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0px);
}

/* ===== ZONE 1: SURFACE ===== */
#zone-surface{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:200vh;
}
#title-assembly{
    display:flex;
    gap:0.5em;
    margin-bottom:2rem;
}
.title-char{
    font-family:'Righteous',sans-serif;
    font-size:clamp(3rem,8vw,7rem);
    color:#ff006e;
    letter-spacing:0.08em;
    opacity:0.7;
    transform:translate(var(--tx,0),var(--ty,0)) rotate(var(--rot,0deg));
    transition:all 1.5s cubic-bezier(0.16,1,0.3,1);
    will-change:transform,opacity;
}
.title-char.assembled{
    opacity:1;
    transform:translate(0,0) rotate(0deg);
}
#domain-title{
    font-family:'Righteous',sans-serif;
    font-size:clamp(3rem,8vw,7rem);
    color:#ff006e;
    letter-spacing:0.08em;
    text-transform:uppercase;
    opacity:0;
    transition:opacity 1s ease-out;
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
}
#domain-title.visible{opacity:1}
#scroll-instruction{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(0.7rem,1vw,0.85rem);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#00fff5;
    margin-top:3rem;
    animation:pulse-opacity 3s ease-in-out infinite;
}
@keyframes pulse-opacity{
    0%,100%{opacity:0.4}
    50%{opacity:1}
}

/* ===== GLASS CARDS ===== */
.glass-card{
    border-radius:16px;
    backdrop-filter:blur(12px) saturate(1.4);
    -webkit-backdrop-filter:blur(12px) saturate(1.4);
    box-shadow:0 8px 32px rgba(123,47,247,0.15),inset 0 1px 0 rgba(255,255,255,0.05);
    padding:1.5rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:default;
    transition:border-color 0.3s ease,box-shadow 0.3s ease,transform 0.3s ease,backdrop-filter 0.3s ease;
    will-change:transform;
}
.glass-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 48px rgba(255,0,110,0.3),inset 0 1px 0 rgba(255,255,255,0.08);
}
.glass-magenta,.glass-card:not(.glass-cyan):not(.glass-card-dark){
    background:rgba(13,2,33,0.35);
    border:1px solid rgba(255,0,110,0.3);
}
.glass-magenta:hover,.glass-card:not(.glass-cyan):not(.glass-card-dark):hover{
    border-color:rgba(255,0,110,0.9);
}
.glass-cyan{
    background:rgba(13,2,33,0.35);
    border:1px solid rgba(0,255,245,0.3);
}
.glass-cyan:hover{
    border-color:rgba(0,255,245,0.9);
}
.glass-card-dark{
    background:rgba(26,0,51,0.6);
    border:1px solid rgba(255,0,110,0.4);
}
.glass-card-dark:hover{
    border-color:rgba(255,0,110,0.9);
}

.glass-card-small{width:180px;height:120px}
.glass-card-medium{width:300px;height:200px}
.glass-card-large{width:460px;height:300px;padding:2rem}

.card-text{
    font-family:'Libre Caslon Text',Georgia,serif;
    font-size:clamp(0.9rem,1.4vw,1.1rem);
    color:#e0d6ff;
    line-height:1.6;
}
.card-text-dark{
    font-family:'Libre Caslon Text',Georgia,serif;
    font-size:clamp(0.9rem,1.4vw,1.1rem);
    color:#1a0033;
    line-height:1.6;
}
.card-haiku{
    font-family:'Libre Caslon Text',Georgia,serif;
    font-size:clamp(0.85rem,1.2vw,1rem);
    color:#e0d6ff;
    line-height:2;
    font-style:italic;
}
.card-label{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(0.7rem,1vw,0.85rem);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#00fff5;
}
.card-label-dark{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(1.5rem,3vw,2.5rem);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#1a0033;
}
.card-icon{
    font-size:2.5rem;
    color:#ff006e;
}
.gradient-swatch{
    width:80%;height:40px;
    border-radius:8px;
    margin-top:0.5rem;
}

/* ===== ZONE 2: ARCADE ===== */
#zone-arcade{min-height:200vh}
.arcade-columns{
    display:flex;
    gap:3vw;
    justify-content:center;
    padding-top:15vh;
}
.arcade-column{
    display:flex;
    flex-direction:column;
    gap:4vh;
    align-items:center;
}
.arcade-col-left{padding-top:8vh}
.arcade-col-center{padding-top:0}
.arcade-col-right{padding-top:16vh}

/* ===== ZONE 3: CANAL ===== */
#zone-canal{
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:200vh;
}
.canal-upper,.canal-lower{
    display:flex;
    flex-wrap:wrap;
    gap:3vw;
    justify-content:center;
    align-items:center;
    padding:5vh 2vw;
}
#gradient-river{
    width:100%;
    height:200px;
    overflow:hidden;
    position:relative;
    margin:5vh 0;
}
.river-inner{
    width:300%;
    height:100%;
    background:linear-gradient(90deg,#ff006e 0%,#7b2ff7 17%,#00fff5 33%,#ff006e 50%,#7b2ff7 67%,#00fff5 83%,#ff006e 100%);
    animation:river-flow 30s linear infinite;
}
@keyframes river-flow{
    0%{transform:translateX(0)}
    100%{transform:translateX(-33.333%)}
}

/* ===== ZONE 4: TEMPLE ===== */
#zone-temple{
    min-height:200vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}
#kanji-container{
    width:60vw;
    height:60vw;
    max-width:600px;
    max-height:600px;
    position:relative;
    z-index:3;
}
#kanji-east{
    width:100%;height:100%;
    filter:drop-shadow(0 0 20px rgba(123,47,247,0.5));
}
.kanji-stroke{
    fill:none;
    stroke:#7b2ff7;
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:var(--dash-length,300);
    stroke-dashoffset:var(--dash-length,300);
    transition:stroke 0.5s ease;
}
.temple-cards{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    z-index:4;
}

/* ===== ZONE 5: HORIZON ===== */
#zone-horizon{
    min-height:200vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
}
#constellation-canvas{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    pointer-events:none;
    z-index:1;
}
#final-title{
    position:relative;
    z-index:3;
    margin-bottom:4rem;
}
.chromatic-layer{
    font-family:'Righteous',sans-serif;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    position:absolute;
    top:0;left:0;
    white-space:nowrap;
    mix-blend-mode:screen;
}
.chromatic-layer:first-child{position:relative}
.chromatic-magenta{color:#ff006e}
.chromatic-cyan{color:#00fff5;transform:translate(2px,-2px)}
.chromatic-violet{color:#7b2ff7;transform:translate(-2px,2px)}

#thesis-text{
    font-family:'Libre Caslon Text',Georgia,serif;
    font-size:clamp(1rem,2vw,1.4rem);
    color:#e0d6ff;
    text-align:center;
    max-width:700px;
    line-height:1.8;
    z-index:3;
    padding:0 2rem;
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
    .arcade-columns{flex-direction:column;align-items:center}
    .arcade-col-left,.arcade-col-center,.arcade-col-right{padding-top:0}
    .glass-card-large{width:90vw;height:auto;min-height:180px}
    .glass-card-medium{width:80vw;height:auto;min-height:140px}
    .glass-card-small{width:60vw;height:auto;min-height:80px}
    #kanji-container{width:80vw;height:80vw}
    .temple-cards .glass-card{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;margin:2vh auto}
    .temple-cards{position:relative;display:flex;flex-direction:column}
    .canal-upper,.canal-lower{flex-direction:column}
}