/* hwakryul.com - The Architecture of Chance */
/* Colors: #2c1810 #8b4513 #c77f48 #d4a55a #f5ebe0 #ede0d0 #4a6670 #e85d3a */

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

html{
  scroll-behavior:smooth;
  font-size:16px;
}

body{
  background:#f5ebe0;
  color:#2c1810;
  font-family:'Source Serif 4',Georgia,serif;
  font-weight:400;
  font-size:clamp(1rem,1.8vw,1.2rem);
  line-height:1.72;
  overflow-x:hidden;
}

/* ========== SCROLL PROGRESS ========== */
#scroll-progress{
  position:fixed;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  z-index:100;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}

#scroll-line{
  width:2px;
  height:200px;
  background:linear-gradient(to bottom,#d4a55a 0%,#d4a55a var(--scroll-pct,0%),rgba(212,165,90,0.2) var(--scroll-pct,0%));
  border-radius:1px;
  position:relative;
}

.scroll-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#d4a55a;
  opacity:0.3;
  margin:8px 0;
  transition:opacity 0.4s,transform 0.4s;
  animation:dot-pulse 3s ease-in-out infinite;
  animation-delay:calc(var(--zone-idx,0) * 0.6s);
}

.scroll-dot.active{
  opacity:1;
  transform:scale(1.4);
}

@keyframes dot-pulse{
  0%,100%{opacity:0.3}
  50%{opacity:0.55}
}

/* ========== GLITCH OVERLAY ========== */
#glitch-overlay{
  position:fixed;
  top:0;left:0;width:100%;height:100%;
  pointer-events:none;
  z-index:90;
  opacity:0;
  transition:opacity 0.1s;
}

#glitch-overlay.active{
  opacity:1;
}

.scan-line{
  position:absolute;
  left:0;width:100%;height:1px;
  background:#e85d3a;
  opacity:0.4;
}

/* ========== KOREAN WATERMARKS ========== */
#korean-watermarks{
  position:fixed;
  top:0;left:0;width:100%;height:100%;
  pointer-events:none;
  z-index:1;
}

.watermark{
  position:absolute;
  font-family:'Noto Serif KR',serif;
  font-size:clamp(4rem,10vw,8rem);
  font-weight:700;
  color:#2c1810;
  opacity:0.04;
  user-select:none;
  transform:rotate(-5deg);
}

/* ========== ZONES (General) ========== */
.zone{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.zone-content{
  position:relative;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:2rem;
}

/* ========== ZONE 1: THE QUESTION ========== */
#zone-question{
  min-height:100vh;
  background:#f5ebe0;
}

.zone-question-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  text-align:center;
  position:relative;
  z-index:5;
}

#title-hwakryul{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:clamp(5rem,15vw,10rem);
  color:#2c1810;
  letter-spacing:-0.02em;
  opacity:0;
  transform:translateY(20px);
  animation:fade-up 800ms ease-out 400ms forwards;
}

#title-domain{
  font-family:'JetBrains Mono',monospace;
  font-weight:400;
  color:#4a6670;
  letter-spacing:0.15em;
  font-size:clamp(0.9rem,2vw,1.3rem);
  margin-top:0.5rem;
  opacity:0;
  animation:fade-up 600ms ease-out 1200ms forwards;
}

#title-subtitle{
  font-family:'Playfair Display',serif;
  font-weight:600;
  font-style:italic;
  color:#8b4513;
  font-size:clamp(1.2rem,3vw,2rem);
  margin-top:1rem;
  opacity:0;
  animation:fade-up 600ms ease-out 1800ms forwards;
}

@keyframes fade-up{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* Isometric Die */
.isometric-die{
  width:80px;height:80px;
  position:absolute;
  bottom:20%;right:20%;
  transform-style:preserve-3d;
  animation:die-rotate 12s linear infinite;
}

.die-face{
  position:absolute;
  width:80px;height:80px;
  background:#f5ebe0;
  border:2px solid #c77f48;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;
  color:#2c1810;
  backface-visibility:visible;
}

.die-front{transform:translateZ(40px)}
.die-back{transform:rotateY(180deg) translateZ(40px)}
.die-right{transform:rotateY(90deg) translateZ(40px)}
.die-left{transform:rotateY(-90deg) translateZ(40px)}
.die-top{transform:rotateX(90deg) translateZ(40px)}
.die-bottom{transform:rotateX(-90deg) translateZ(40px)}

@keyframes die-rotate{
  0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
  100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(180deg)}
}

#dice-field{
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  pointer-events:none;
  z-index:2;
}

.mini-die{
  position:absolute;
  width:30px;height:30px;
  background:#f5ebe0;
  border:1px solid #c77f48;
  display:flex;align-items:center;justify-content:center;
  font-size:0.8rem;
  color:#2c1810;
  opacity:0;
  transition:opacity 1s ease-out;
  transform-style:preserve-3d;
  box-shadow:3px 3px 0 rgba(139,69,19,0.15);
}

.mini-die.visible{
  opacity:0.6;
}

/* ========== ZONE 2: THE TREE ========== */
#zone-tree{
  min-height:150vh;
  padding:4rem 0;
  background:#f5ebe0;
}

.tree-zone-content{
  min-height:120vh;
}

.isometric-grid{
  position:relative;
  width:100%;
  max-width:1200px;
  min-height:800px;
  margin:0 auto;
}

.tree-connections{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  z-index:1;
}

.circuit-trace{
  stroke:#d4a55a;
  stroke-width:2;
  fill:none;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.2s ease-out;
}

.circuit-trace.dim{
  stroke-dasharray:6 4;
  opacity:0.5;
}

.circuit-trace.drawn{
  stroke-dashoffset:0;
}

.junction{
  fill:#c77f48;
  opacity:0;
  transition:opacity 0.5s ease-out;
}

.junction.visible{
  opacity:1;
}

/* Tree Cards */
.tree-card{
  position:absolute;
  transform:translateX(-50%);
  background:#ede0d0;
  border:1px solid #c77f48;
  border-radius:4px;
  padding:12px 18px;
  text-align:center;
  z-index:5;
  box-shadow:4px 4px 0 rgba(44,24,16,0.08);
  opacity:0;
  transition:opacity 0.5s ease-out,transform 0.5s ease-out;
}

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

.tree-level-0{
  background:#f5ebe0;
  border-color:#8b4513;
  border-width:2px;
}

.tree-level-0 .card-body{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:1.3rem;
  color:#2c1810;
}

.tree-level-1 .card-label{
  font-family:'Playfair Display',serif;
  font-weight:600;
  color:#8b4513;
  font-size:1.1rem;
}

.card-prob{
  font-family:'JetBrains Mono',monospace;
  font-size:0.85rem;
  color:#4a6670;
  background:rgba(199,127,72,0.08);
  border-radius:3px;
  padding:2px 6px;
  display:inline-block;
  margin-top:4px;
}

.tree-level-2{
  opacity:0;
}

.tree-level-3{
  opacity:0;
  background:rgba(237,224,208,0.6);
}

.tree-level-3 .card-prob{
  font-size:0.75rem;
}

.tree-final{
  background:#f5ebe0;
  border:2px solid #8b4513;
  min-width:280px;
}

.card-body-mono{
  font-family:'Source Serif 4',serif;
  font-size:0.95rem;
  color:#2c1810;
  margin-bottom:8px;
}

.card-counter{
  font-family:'JetBrains Mono',monospace;
  font-size:1.4rem;
  color:#e85d3a;
  font-weight:400;
}

/* ========== INTERSTITIAL ========== */
.interstitial{
  min-height:50vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#ede0d0;
  padding:4rem 2rem;
}

.interstitial-text{
  font-family:'Playfair Display',serif;
  font-weight:600;
  font-style:italic;
  font-size:clamp(1.5rem,4vw,3rem);
  color:#8b4513;
  text-align:center;
  max-width:800px;
  opacity:0;
  transform:translateY(20px);
}

.interstitial-formula{
  margin-top:2rem;
  opacity:0;
  transform:translateY(20px);
}

.formula{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(1rem,2.5vw,1.6rem);
  color:#4a6670;
  background:rgba(199,127,72,0.08);
  border-radius:3px;
  padding:8px 16px;
}

.interstitial-text.revealed,
.interstitial-formula.revealed{
  opacity:1;
  transform:translateY(0);
  transition:opacity 0.5s ease-out,transform 0.5s ease-out;
}

/* ========== ZONE 3: THE DISTRIBUTION ========== */
#zone-distribution{
  min-height:130vh;
  padding:4rem 0;
}

.distribution-content{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.bell-curve{
  position:absolute;
  top:10%;left:0;
  width:100%;height:80%;
  z-index:1;
  opacity:0;
  transition:opacity 1s ease-out;
}

.bell-curve.visible{
  opacity:1;
}

.bell-line{
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  transition:stroke-dashoffset 2s ease-out;
}

.bell-line.drawn{
  stroke-dashoffset:0;
}

.distribution-grid{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
}

.dist-card{
  position:relative;
  background:#ede0d0;
  border:1px solid #c77f48;
  border-radius:4px;
  padding:10px 14px;
  text-align:center;
  box-shadow:3px 3px 0 rgba(44,24,16,0.06);
  transform:translate(var(--dx,0),var(--dy,0));
  opacity:0;
  transition:opacity 0.5s ease-out;
}

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

.dist-card.large{
  padding:16px 24px;
  border-color:#8b4513;
  border-width:2px;
  background:#f5ebe0;
}

.dist-card .card-label{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:2rem;
  color:#8b4513;
  display:block;
}

.dist-card .card-prob{
  display:block;
  margin-top:2px;
}

.dist-card.tail{
  opacity:0;
}
.dist-card.tail.revealed{
  opacity:0.5;
}

#galton-canvas{
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  z-index:2;
  pointer-events:none;
}

/* ========== ZONE 4: THE COLLAPSE ========== */
#zone-collapse{
  min-height:100vh;
  background:#f5ebe0;
}

.collapse-content{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  position:relative;
}

#collapse-grid{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:600px;height:600px;
}

.collapse-card{
  position:absolute;
  top:50%;left:50%;
  transform:translate(calc(-50% + var(--gx,0px)),calc(-50% + var(--gy,0px)));
  font-family:'JetBrains Mono',monospace;
  font-size:0.85rem;
  color:#4a6670;
  background:#ede0d0;
  border:1px solid #c77f48;
  border-radius:4px;
  padding:10px 16px;
  opacity:0.8;
  transition:opacity 0.8s ease-out,transform 0.8s cubic-bezier(0.68,-0.55,0.265,1.55);
  box-shadow:3px 3px 0 rgba(44,24,16,0.06);
}

.collapse-card.collapsed{
  opacity:0.05;
}

.collapse-center-card{
  position:relative;
  z-index:10;
  background:#f5ebe0;
  border:2px solid #8b4513;
  border-radius:4px;
  padding:30px 50px;
  text-align:center;
  opacity:0;
  transform:scale(0.8);
  transition:opacity 0.6s ease-out,transform 0.6s ease-out;
}

.collapse-center-card.revealed{
  opacity:1;
  transform:scale(1);
}

.collapse-text{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:clamp(2rem,5vw,3.5rem);
  color:#2c1810;
}

/* Glitch Animation */
@keyframes glitch-shift{
  0%{transform:translate(calc(-50% + var(--gx,0px)),calc(-50% + var(--gy,0px))) translateX(0)}
  15%{transform:translate(calc(-50% + var(--gx,0px)),calc(-50% + var(--gy,0px))) translateX(-5px)}
  30%{transform:translate(calc(-50% + var(--gx,0px)),calc(-50% + var(--gy,0px))) translateX(3px)}
  45%{transform:translate(calc(-50% + var(--gx,0px)),calc(-50% + var(--gy,0px))) translateX(-4px)}
  60%{transform:translate(calc(-50% + var(--gx,0px)),calc(-50% + var(--gy,0px))) translateX(2px)}
  75%{transform:translate(calc(-50% + var(--gx,0px)),calc(-50% + var(--gy,0px))) translateX(-3px)}
  100%{transform:translate(calc(-50% + var(--gx,0px)),calc(-50% + var(--gy,0px))) translateX(0)}
}

.collapse-card.glitching{
  animation:glitch-shift 0.8s steps(8) forwards;
}

body.glitching{
  filter:saturate(1.8);
  transition:filter 0.2s;
}

/* Glitch saturation color: #f0c060 applied via JS class */
.glitch-saturate .circuit-trace{
  stroke:#f0c060;
}

body.glitch-end{
  filter:saturate(1);
  transition:filter 0.4s;
}

/* ========== ZONE 5: THE INVITATION ========== */
#zone-invitation{
  min-height:100vh;
  background:#f5ebe0;
  padding-bottom:0;
}

.invitation-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:90vh;
  position:relative;
}

.ghost-field{
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  pointer-events:none;
}

.invitation-ghost{
  position:absolute;
  top:50%;left:50%;
  transform:translate(calc(-50% + var(--ix,0px)),calc(-50% + var(--iy,0px)));
  font-family:'JetBrains Mono',monospace;
  font-size:0.8rem;
  color:#4a6670;
  background:#ede0d0;
  border:1px solid rgba(199,127,72,0.3);
  border-radius:4px;
  padding:8px 12px;
  opacity:0.3;
}

.invitation-card{
  background:#f5ebe0;
  border:2px solid #8b4513;
  border-radius:6px;
  padding:40px 60px;
  text-align:center;
  position:relative;
  z-index:10;
  box-shadow:8px 8px 0 rgba(44,24,16,0.08);
  opacity:0;
  transform:translateY(20px);
}

.invitation-card.revealed{
  opacity:1;
  transform:translateY(0);
  transition:opacity 0.6s ease-out,transform 0.6s ease-out;
}

.invitation-heading{
  font-family:'Noto Serif KR',serif;
  font-weight:700;
  font-size:clamp(1.4rem,3.5vw,2.4rem);
  color:#2c1810;
  line-height:1.5;
}

.invitation-sub{
  font-family:'Playfair Display',serif;
  font-weight:600;
  font-style:italic;
  font-size:clamp(1rem,2vw,1.4rem);
  color:#8b4513;
  margin-top:0.8rem;
}

.invitation-domain{
  font-family:'JetBrains Mono',monospace;
  color:#4a6670;
  letter-spacing:0.1em;
  margin-top:1.2rem;
  font-size:1.1rem;
  animation:invite-pulse 3s ease-in-out infinite;
}

@keyframes invite-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.02)}
}

/* Symbol Orbit */
.symbol-orbit{
  position:absolute;
  width:300px;height:300px;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:5;
}

.orbit-symbol{
  position:absolute;
  top:50%;left:50%;
  font-family:'JetBrains Mono',monospace;
  font-size:1.5rem;
  color:#d4a55a;
  opacity:0.6;
  animation:orbit-spin 18s linear infinite;
  animation-delay:var(--orbit-delay,0s);
}

@keyframes orbit-spin{
  0%{transform:rotate(0deg) translateX(150px) rotate(0deg)}
  100%{transform:rotate(360deg) translateX(150px) rotate(-360deg)}
}

/* ========== FOOTER ========== */
.site-footer{
  text-align:center;
  padding:2rem;
  font-family:'JetBrains Mono',monospace;
  font-size:0.8rem;
  color:#8b4513;
  opacity:0.6;
}

/* ========== FADE REVEAL UTILITY ========== */
.fade-reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.5s ease-out,transform 0.5s ease-out;
}

.fade-reveal.revealed{
  opacity:1;
  transform:translateY(0);
}

/* ========== RESPONSIVE ========== */
@media(max-width:768px){
  .isometric-die{
    width:50px;height:50px;
    right:10%;bottom:25%;
  }
  .die-face{width:50px;height:50px;font-size:1.2rem}
  .die-front{transform:translateZ(25px)}
  .die-back{transform:rotateY(180deg) translateZ(25px)}
  .die-right{transform:rotateY(90deg) translateZ(25px)}
  .die-left{transform:rotateY(-90deg) translateZ(25px)}
  .die-top{transform:rotateX(90deg) translateZ(25px)}
  .die-bottom{transform:rotateX(-90deg) translateZ(25px)}

  .tree-card{padding:8px 10px;font-size:0.85rem}
  .invitation-card{padding:24px 20px}
  .symbol-orbit{width:200px;height:200px}
  .orbit-symbol{font-size:1.1rem}
  @keyframes orbit-spin{
    0%{transform:rotate(0deg) translateX(100px) rotate(0deg)}
    100%{transform:rotate(360deg) translateX(100px) rotate(-360deg)}
  }
  #collapse-grid{width:300px;height:300px}
  .collapse-center-card{padding:20px 30px}
  #scroll-progress{left:8px}
  .watermark{font-size:clamp(2rem,6vw,4rem)}
  .dist-card{
    transform:translate(calc(var(--dx,0) * 0.5),calc(var(--dy,0) * 0.5));
  }
}