/* diplomatic.day - Matsuri Diplomacy / Four-Act Temporal Narrative */

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

:root{
  --midnight-indigo:#0D1B2A;
  --diplomatic-blue:#1B3A5C;
  --vermillion-seal:#C23B22;
  --cinnabar-glow:#E8573A;
  --washi-cream:#F5F0E8;
  --stone-gray:#8A9BA8;
  --kintsugi-gold:#C9A84C;
  --lacquer-black:#0A0F14;
  --ink-wash:#12233A;
}

html{scroll-behavior:smooth}

body{
  font-family:'Zen Kaku Gothic New',sans-serif;
  background:var(--midnight-indigo);
  color:var(--washi-cream);
  overflow-x:hidden;
  line-height:1.85;
  letter-spacing:0.02em;
}

/* Content Column */
.content-column{
  max-width:680px;
  margin:0 auto;
  position:relative;
  z-index:2;
}

/* Viewport Border Frame */
.viewport-border{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:100;
}
.viewport-border div{
  position:absolute;
  background:var(--cinnabar-glow);
}
.border-top{top:0;left:0;height:1px;width:0;animation:drawTop 1s ease-out 0.5s forwards}
.border-right{top:0;right:0;width:1px;height:0;animation:drawRight 1s ease-out 1.5s forwards}
.border-bottom{bottom:0;right:0;height:1px;width:0;animation:drawBottom 1s ease-out 2.5s forwards}
.border-left{bottom:0;left:0;width:1px;height:0;animation:drawLeft 1s ease-out 3.5s forwards}

@keyframes drawTop{to{width:100%}}
@keyframes drawRight{to{height:100%}}
@keyframes drawBottom{to{width:100%}}
@keyframes drawLeft{to{height:100%}}

.viewport-border.dissolving .border-top{animation:eraseTop 1s ease-in forwards}
.viewport-border.dissolving .border-right{animation:eraseRight 1s ease-in 0.5s forwards}
.viewport-border.dissolving .border-bottom{animation:eraseBottom 1s ease-in 1s forwards}
.viewport-border.dissolving .border-left{animation:eraseLeft 1s ease-in 1.5s forwards}

@keyframes eraseTop{from{width:100%}to{width:0}}
@keyframes eraseRight{from{height:100%}to{height:0}}
@keyframes eraseBottom{from{width:100%}to{width:0}}
@keyframes eraseLeft{from{height:100%}to{height:0}}

/* Act Navigation */
.act-nav{
  position:fixed;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  z-index:90;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.act-indicator{
  width:36px;
  height:36px;
  background:none;
  border:1px solid var(--stone-gray);
  color:var(--stone-gray);
  font-family:'IBM Plex Mono',monospace;
  font-size:0.7rem;
  font-weight:300;
  letter-spacing:0.12em;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color 0.4s ease,border-color 0.4s ease;
  opacity:0.6;
}
.act-indicator.active{
  color:var(--cinnabar-glow);
  border-color:var(--cinnabar-glow);
  opacity:1;
  animation:borderPulse 8s ease-in-out infinite;
}

@keyframes borderPulse{
  0%,100%{border-color:rgba(232,87,58,0.4)}
  50%{border-color:rgba(232,87,58,0.8)}
}

/* Floating Mon Crests */
.floating-mons{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}

.mon{
  position:absolute;
  opacity:0.15;
  color:var(--diplomatic-blue);
  animation:monRotate 120s linear infinite;
  transition:left 5s ease,right 5s ease,opacity 3s ease,color 2s ease;
}

.mon-1{width:40px;left:5%;top:20%}
.mon-2{width:36px;right:8%;top:35%}
.mon-3{width:44px;left:3%;top:55%}
.mon-4{width:32px;right:5%;top:15%}
.mon-5{width:38px;left:7%;top:75%}
.mon-6{width:48px;right:4%;top:65%}

@keyframes monRotate{to{transform:rotate(360deg)}}

.mon.converged{
  opacity:0.25;
}

/* ACT I: Dawn */
.act-1{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
  background:var(--midnight-indigo);
  background-image:radial-gradient(circle at 50% 50%,var(--ink-wash) 0%,transparent 60%);
  position:relative;
}

.act-centered{
  text-align:center;
}

.hero-title{
  font-family:'Zen Antique',serif;
  font-size:clamp(3rem,10vw,8rem);
  font-weight:400;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--washi-cream);
  opacity:0;
  animation:fadeInTitle 1.5s ease-out 0.5s forwards;
  line-height:1.1;
}

.hero-tagline{
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:clamp(1rem,1.2vw,1.15rem);
  font-weight:400;
  color:var(--stone-gray);
  margin-top:32px;
  opacity:0;
  animation:fadeInTitle 1.5s ease-out 2.5s forwards;
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
}

@keyframes fadeInTitle{to{opacity:1}}

/* ACT II: Midday */
.act-2{
  min-height:100vh;
  padding:120px 24px 80px;
  position:relative;
}

.act-2::before{
  content:'';
  position:absolute;
  top:-40vh;
  left:0;
  right:0;
  height:40vh;
  background:linear-gradient(to bottom,var(--midnight-indigo),var(--washi-cream));
  pointer-events:none;
  z-index:-1;
}

.act-2{
  background:var(--washi-cream);
  color:var(--midnight-indigo);
  background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,0.3) 0%,transparent 50%);
}

.act-heading-wrap{
  text-align:center;
  margin-bottom:80px;
}

.act-heading{
  font-family:'Zen Antique',serif;
  font-size:clamp(1.8rem,4vw,3.5rem);
  font-weight:400;
  letter-spacing:0.05em;
  color:var(--vermillion-seal);
}

.act-heading-light{
  color:var(--washi-cream);
}

.act-meta{
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.8rem;
  font-weight:300;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--stone-gray);
  margin-top:12px;
}
.act-meta-light{
  color:rgba(245,240,232,0.5);
}

/* Content Panels */
.content-panel{
  max-width:560px;
  margin:0 auto 80px;
  display:flex;
  gap:24px;
  align-items:center;
  padding:32px;
  position:relative;
  border:1px solid transparent;
  transition:border-color 0.3s ease;
}

.content-panel.border-drawn{
  border-color:var(--stone-gray);
  opacity:1;
}

.panel-right-img{flex-direction:row-reverse}

.panel-text{flex:1}

.panel-title{
  font-family:'Zen Antique',serif;
  font-size:1.3rem;
  font-weight:400;
  letter-spacing:0.05em;
  color:var(--vermillion-seal);
  margin-bottom:12px;
}

.panel-body{
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:clamp(0.95rem,1.2vw,1.1rem);
  font-weight:400;
  line-height:1.85;
  color:var(--midnight-indigo);
}

.panel-illustration{
  flex:0 0 120px;
}
.panel-illustration svg{
  width:120px;
  height:120px;
}

/* Animated Border on panels */
.animate-border{
  opacity:0;
  transition:opacity 0.5s ease;
}
.animate-border.visible{
  opacity:1;
}
.animate-border::before,
.animate-border::after{
  content:'';
  position:absolute;
  background:var(--diplomatic-blue);
}
.animate-border::before{
  top:0;left:0;height:1px;width:0;
  transition:width 0.5s ease;
}
.animate-border::after{
  bottom:0;right:0;height:1px;width:0;
  transition:width 0.5s ease 1s;
}
.animate-border.visible::before,
.animate-border.visible::after{
  width:100%;
}

/* Brushstroke Dividers */
.brushstroke-divider{
  max-width:400px;
  margin:60px auto;
  opacity:0.5;
}
.brushstroke-divider svg{
  width:100%;
  height:20px;
}
.brush-path{
  stroke-dasharray:800;
  stroke-dashoffset:800;
  transition:stroke-dashoffset 2s ease-in-out;
}
.brush-path.drawn{
  stroke-dashoffset:0;
}

/* ACT III: Evening */
.act-3{
  min-height:100vh;
  padding:120px 24px 80px;
  position:relative;
}

.act-3::before{
  content:'';
  position:absolute;
  top:-30vh;
  left:-50vw;
  right:-50vw;
  height:30vh;
  background:linear-gradient(to bottom,var(--washi-cream),var(--vermillion-seal));
  pointer-events:none;
  z-index:-1;
}

.act-3{
  background:var(--vermillion-seal);
  color:var(--washi-cream);
  margin-left:-50vw;
  margin-right:-50vw;
  padding-left:calc(50vw - 340px);
  padding-right:calc(50vw - 340px);
  position:relative;
  left:50%;
  right:50%;
  width:100vw;
  transform:translateX(-50%);
  margin-left:0;
  margin-right:0;
  left:auto;
  right:auto;
}

/* Diplomatic Seal */
.seal-container{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 0;
  position:sticky;
  top:10vh;
}

.diplomatic-seal{
  width:min(400px,80vw);
  height:min(400px,80vw);
}

.diplomatic-seal path,
.diplomatic-seal circle,
.diplomatic-seal line{
  stroke-dasharray:1200;
  stroke-dashoffset:1200;
  transition:stroke-dashoffset 3s ease-in-out;
}
.diplomatic-seal.drawn path,
.diplomatic-seal.drawn circle,
.diplomatic-seal.drawn line{
  stroke-dashoffset:0;
}

.ceremony-text{
  text-align:center;
  padding:40px 24px 60px;
  position:relative;
  z-index:2;
}

.ceremony-title{
  font-family:'Zen Antique',serif;
  font-size:clamp(1.3rem,2.5vw,2rem);
  font-weight:400;
  letter-spacing:0.05em;
  color:var(--washi-cream);
  margin-bottom:16px;
}

.ceremony-body{
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:clamp(0.95rem,1.2vw,1.1rem);
  line-height:1.85;
  color:rgba(245,240,232,0.85);
  max-width:480px;
  margin:0 auto;
}

/* ACT IV: Midnight */
.act-4{
  min-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:80px 24px;
  background:var(--lacquer-black);
  background-image:radial-gradient(circle at 50% 50%,rgba(13,27,42,0.5) 0%,transparent 60%);
}

.accord-center{
  max-width:560px;
}

.accord-text{
  font-family:'Zen Antique',serif;
  font-size:clamp(1.5rem,3vw,2.5rem);
  font-weight:400;
  letter-spacing:0.05em;
  line-height:1.5;
  color:var(--washi-cream);
  text-align:center;
  opacity:0;
  transform:translateY(20px);
  transition:opacity 1.5s ease,transform 1.5s ease;
}
.accord-text.visible{
  opacity:1;
  transform:translateY(0);
}

/* Responsive */
@media(max-width:768px){
  .floating-mons{display:none}
  .act-nav{
    right:12px;
    gap:12px;
  }
  .act-indicator{
    width:28px;
    height:28px;
    font-size:0.6rem;
  }
  .content-panel{
    flex-direction:column;
    padding:24px;
  }
  .panel-right-img{flex-direction:column}
  .panel-illustration{flex:0 0 auto}
  .act-3{
    padding-left:24px;
    padding-right:24px;
  }
}