/* okurairi.net — vaporwave zen garden
   Typography source notes: Space Grotesk' Space Grotesk" (Google Fonts (400 data labels.
   Motion source notes: IntersectionObserver` with `threshold: 0.3` and (threshold: 0.15.
*/
:root {
  --void: #0d0a1a;
  --surface: #1a1433;
  --magenta: #ff6ec7;
  --teal: #00f5d4;
  --coral: #ff9e64;
  --mist: #c2b8d4;
  --violet: #7b6f99;
  --lavender: #b388ff;
}

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

html { scroll-behavior: smooth; }

body {
  min-height: 100%;
  overflow-x: hidden;
  background: #0d0a1a;
  color: #c2b8d4;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 400;
  line-height: 1.85;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 50%, rgba(13, 10, 26, 0.08) 50%) 0 0 / 100% 4px,
    radial-gradient(ellipse at 30% 20%, rgba(255,110,199,0.08), transparent 60%),
    radial-gradient(ellipse at 80% 72%, rgba(0,245,212,0.05), transparent 52%);
  mix-blend-mode: screen;
}

.room {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 1.5fr 1fr;
  padding: clamp(2rem, 4vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}

.room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-conic-gradient(rgba(255,110,199,0.03) 0% 25%, transparent 25% 50%) 0 0 / 40px 40px;
}

.room::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(179,136,255,0.06), transparent 70%),
    linear-gradient(180deg, #0d0a1a 0%, rgba(26, 20, 51, 0.24) 52%, #0d0a1a 100%);
}

.room-void {
  position: absolute;
  inset: 0;
  grid-column: 2;
  grid-row: 1 / -1;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.room-void::before {
  content: "";
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 50%;
  width: min(34vw, 420px);
  transform: translateX(-50%) skewX(-7deg);
  border-left: 1px solid rgba(0,245,212,0.12);
  border-right: 1px solid rgba(255,110,199,0.10);
  background: linear-gradient(90deg, transparent, rgba(26,20,51,0.34), transparent);
  box-shadow: 32px 38px 80px rgba(179,136,255,0.08);
}

.room-content { display: contents; }

.z-top-left,
.z-top-right,
.z-bottom-left,
.z-bottom-right {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.z-top-left { grid-column: 1; grid-row: 1; justify-self: start; align-self: start; }
.z-top-right { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; }
.z-bottom-left { grid-column: 1; grid-row: 3; justify-self: start; align-self: end; }
.z-bottom-right { grid-column: 3; grid-row: 3; justify-self: end; align-self: end; }

.room.visible .z-top-left,
.room.visible .z-top-right,
.room.visible .z-bottom-left,
.room.visible .z-bottom-right { opacity: 1; transform: translateY(0); }

.room.visible .z-top-right { transition-delay: 140ms; }
.room.visible .z-bottom-left { transition-delay: 320ms; }
.room.visible .z-bottom-right { transition-delay: 520ms; }

.void-spacer {
  height: 20vh;
  background: linear-gradient(180deg, #0d0a1a, #1a1433 48%, #0d0a1a);
}

.counter-numeral {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0.06em;
  color: #ff6ec7;
  text-shadow: 0 0 30px rgba(255,110,199,0.4), 0 0 60px rgba(255,110,199,0.15);
  font-variant-numeric: tabular-nums;
}

.counter-label,
.haiku {
  font-family: "Space Grotesk", "Courier New", monospace;
  font-size: clamp(0.7rem, 1vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7b6f99;
}

.counter-label { display: block; margin-top: 0.8rem; }

.haiku {
  max-width: 14rem;
  color: #c2b8d4;
  font-size: clamp(0.85rem, 1.5vw, 1.05rem);
  line-height: 1.6;
  opacity: 0.9;
  text-shadow: 18px 22px 24px rgba(255,110,199,0.08);
}

.viz-radial,
.viz-scatter,
.viz-bars {
  width: clamp(130px, 20vw, 220px);
  height: clamp(130px, 20vw, 220px);
  overflow: visible;
  filter: drop-shadow(28px 34px 18px rgba(255,110,199,0.05));
}

.bloom-circle { opacity: 0; transform-origin: center; transform: rotate(-90deg); }
.room.visible .bloom-circle { animation: bloomCircle 3.6s cubic-bezier(.16, .84, .32, 1) forwards; }

@keyframes bloomCircle {
  0% { stroke-dashoffset: var(--circumference, 440); opacity: 0; }
  35% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: .72; }
}

.scatter-point { opacity: 0; transform-origin: center; }
.room.visible .scatter-point { animation: scatterEmergence 1.8s ease-out forwards; }

@keyframes scatterEmergence {
  from { opacity: 0; transform: scale(.2); filter: drop-shadow(0 0 2px rgba(0,245,212,0.4)); }
  to { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 4px #00f5d4); }
}

.bar-rise { opacity: 0; transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); }
.room.visible .bar-rise { animation: barRise 3s ease-in-out forwards; }

@keyframes barRise {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}

.arrow-scroll {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 8px rgba(0,245,212,0.55));
  animation: arrowPulse 2.4s ease-in-out infinite;
}

@keyframes arrowPulse {
  0%, 100% { opacity: .42; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(9px); }
}

.final-mark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.4rem, 8vw, 5rem);
  color: #00f5d4;
  text-shadow: 0 0 20px rgba(0,245,212,0.45), 0 0 70px rgba(179,136,255,0.28);
  animation: finalBreathe 5s ease-in-out infinite;
}

@keyframes finalBreathe {
  0%, 100% { transform: scale(.92) rotate(0deg); opacity: .58; }
  50% { transform: scale(1.08) rotate(45deg); opacity: 1; }
}

.nav-dots {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-left: 1.5rem;
  border-left: 1px solid rgba(0,245,212,0.3);
}

.nav-dot {
  appearance: none;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #00f5d4;
  background: transparent;
  opacity: .6;
  cursor: pointer;
  transition: background .6s ease, opacity .6s ease, box-shadow .6s ease;
}

.nav-dot.active {
  background: #00f5d4;
  opacity: 1;
  box-shadow: 0 0 14px rgba(0,245,212,.75);
}

.leaf-container {
  position: absolute;
  top: -20vh;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
}

.leaf {
  display: block;
  width: clamp(40px, 8vw, 80px);
  height: auto;
  opacity: .68;
  filter: drop-shadow(0 0 5px rgba(0,245,212,.25));
}

.leaf path {
  stroke-dasharray: var(--leaf-length, 1);
  stroke-dashoffset: var(--leaf-length, 1);
}

.leaf-container.drawn .leaf path { animation: veinDraw 2s ease-out forwards; }

@keyframes veinDraw { to { stroke-dashoffset: 0; } }

@keyframes leafDrift {
  0% { transform: translateY(-10vh) translateX(0) rotate(-8deg); opacity: 0; }
  10% { opacity: var(--leaf-opacity, .55); }
  55% { transform: translateY(52vh) translateX(var(--leaf-sway, 18px)) rotate(4deg); }
  90% { opacity: var(--leaf-opacity, .55); }
  100% { transform: translateY(110vh) translateX(calc(var(--leaf-sway, 18px) * -1)) rotate(12deg); opacity: 0; }
}

@media (max-width: 767px) {
  .room {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto auto;
    gap: 4rem;
    padding: clamp(1.5rem, 7vw, 3rem);
  }

  .z-top-left,
  .z-top-right,
  .z-bottom-left,
  .z-bottom-right { grid-column: 1; justify-self: start; }

  .z-top-left { grid-row: 1; }
  .z-top-right { grid-row: 2; justify-self: end; }
  .z-bottom-left { grid-row: 4; }
  .z-bottom-right { grid-row: 5; justify-self: end; }
  .room-void::before { width: 66vw; }
  .nav-dots { display: none; }
}