*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#0d1117;color:#3d3a36;font-family:'Zen Kaku Gothic New',sans-serif;font-size:clamp(1rem,1.2vw,1.25rem);line-height:1.9;overflow-x:hidden}

/* Progress bar */
.progress-bar{position:fixed;right:1.5rem;top:0;bottom:0;width:4px;z-index:10;pointer-events:none}
.progress-svg{width:100%;height:100%}
.progress-fill{transition:stroke-dashoffset 0.1s linear}

/* Sections */
.section{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(2rem,6vw,6rem);position:relative;transition:background-color 1s ease,color 1s ease}

/* Hour labels */
.hour-label{font-family:'Shippori Mincho',serif;font-size:0.75rem;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:3rem;opacity:0.5}
.hour-label .jp{margin-right:0.5em}

/* Section 1: Akatsuki */
.akatsuki{background:#0d1117;min-height:100vh;overflow:hidden}
.enso-watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.vertical-text{writing-mode:vertical-rl;text-orientation:mixed;font-family:'Zen Antique',serif;font-size:clamp(4rem,12vw,14rem);font-weight:400;letter-spacing:0.04em;color:#f5f0e8;position:relative;z-index:1}
.vertical-text span{display:inline-block;opacity:0;transform:translateY(-20px);animation:dropIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards}
.vertical-text span:nth-child(1){animation-delay:0.4s}
.vertical-text span:nth-child(2){animation-delay:0.6s}
.vertical-text span:nth-child(3){animation-delay:0.8s}
.vertical-text span:nth-child(4){animation-delay:1.0s}
.vertical-text span:nth-child(5){animation-delay:1.2s}
.vertical-text span:nth-child(6){animation-delay:1.4s}
.vertical-text span:nth-child(7){animation-delay:1.6s}
.vertical-text span:nth-child(8){animation-delay:1.8s}
@keyframes dropIn{to{opacity:1;transform:translateY(0)}}

/* Vertical line motifs */
.vertical-lines{position:absolute;right:15%;top:20%;display:flex;gap:8px;opacity:0.06}
.vertical-lines span{display:block;width:1px;height:120px;background:#8b9daf}
.vertical-lines-set{display:flex;gap:6px;opacity:0.06;margin-bottom:2rem}
.vertical-lines-set span{display:block;width:1px;height:80px;background:#3d3a36}

/* Section 2: Asahi */
.asahi{background:linear-gradient(180deg,#0d1117 0%,#1a1520 30%,#2a2030 60%,#3d2f28 100%)}
.golden-line{width:61.8%;height:1px;background:linear-gradient(90deg,transparent,#d4a574,transparent);margin-bottom:3rem;opacity:0.6}
.haiku-text{font-family:'Zen Antique',serif;font-size:clamp(1.25rem,2.5vw,2rem);color:#d4a574;text-align:center;line-height:2.2}

/* Section 3: Hiru */
.hiru{background:#f5f0e8;position:relative}
.enso-noon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.enso-rotate{animation:slowSpin 120s linear infinite}
@keyframes slowSpin{to{transform:rotate(360deg)}}
.noon-content{max-width:520px;position:relative;z-index:1}
.noon-content h2{font-family:'Zen Antique',serif;font-size:clamp(2rem,5vw,4rem);font-weight:400;letter-spacing:0.04em;color:#3d3a36;margin-bottom:2rem;text-align:center}
.noon-content p{margin-bottom:1.5rem;color:#3d3a36}
.hiru .hour-label{color:#8b9daf}

/* Section 4: Yugure */
.yugure{background:linear-gradient(180deg,#f5f0e8 0%,#e8d8c4 30%,#c17f3e40 100%);align-items:flex-end}
.dusk-content{max-width:50%;text-align:left}
.dusk-text h2{font-family:'Zen Antique',serif;font-size:clamp(1.5rem,3vw,2.5rem);color:#3d3a36;margin-bottom:1.5rem}
.dusk-text p{margin-bottom:1.25rem;color:#3d3a36}
.yugure .hour-label{color:#8b9daf}

/* Section 5: Tasogare */
.tasogare{background:linear-gradient(180deg,#c17f3e40 0%,#2a2d4a 100%)}
.twilight-phrase{font-family:'Zen Antique',serif;font-size:clamp(2rem,6vw,5rem);font-weight:400;color:#f5f0e8;text-align:center;margin-bottom:2vh;line-height:1.3;opacity:0.85}
.tasogare .hour-label{color:#d4a574}

/* Section 6: Yoru */
.yoru{background:#0a0a0f}
.enso-night{margin-bottom:3rem}
.night-text{font-family:'Zen Kaku Gothic New',sans-serif;font-size:clamp(1rem,1.5vw,1.25rem);color:#c8c0b4;text-align:center;max-width:400px;line-height:1.9}
.yoru .hour-label{color:#8b9daf}

/* Card reveal */
.card{opacity:0;transform:translateY(20px);transition:opacity 0.8s ease,transform 0.8s ease}
.card.visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media(max-width:768px){
  .dusk-content{max-width:90%}
  .yugure{align-items:center}
  .progress-bar{right:0.5rem}
}