/* monopole.systems - Styles */
/* Palette: #1A1A2E Kon, #12121F Shikkoku, #E8E4DF Kinari, #9B97A0 Nezumi, #C9A84C Kincha, #A85C6C Suou, #6C9B8A Seiji, #5E5A66 Hai, #FFFFFF */

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

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

body {
  background: #1A1A2E;
  color: #E8E4DF;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Split Container */
.split-container {
  display: flex;
  width: 100%;
  min-height: 100vh;
  position: relative;
}

/* Columns */
.column {
  width: 50%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.column-left {
  background: #1A1A2E;
  transform-origin: right center;
  transition: transform 0.15s ease-out;
}

.column-right {
  background: #12121F;
  transform-origin: left center;
  transition: transform 0.15s ease-out;
  transform: rotate(0.5deg);
  transform-origin: center top;
}

/* Divider Line */
.divider-line {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100vh;
  background: #5E5A66;
  z-index: 100;
  animation: divider-breathe 8s ease-in-out infinite;
}

@keyframes divider-breathe {
  0%, 100% { width: 2px; opacity: 0.6; }
  50% { width: 0.5px; opacity: 0.3; }
}

/* Stations */
.station {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 4rem 3rem;
}

.station-content {
  position: relative;
  z-index: 2;
  max-width: 480px;
  width: 100%;
}

/* Kanji Watermarks */
.kanji-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20rem, 40vw, 40rem);
  font-weight: 300;
  color: #E8E4DF;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 3s ease;
  line-height: 1;
}

.station.visible .kanji-watermark {
  opacity: 0.025;
}

/* Station 1 - Domain Name */
.domain-name-left,
.domain-name-right {
  text-align: center;
}

.domain-name-left .domain-text,
.domain-name-right .domain-text {
  font-family: 'Urbanist', sans-serif;
  font-weight: 200;
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  letter-spacing: 0.08em;
  line-height: 1.1;
  color: #E8E4DF;
  opacity: 0;
  transition: opacity 2s ease;
}

.station.visible .domain-name-left .domain-text,
.station.visible .domain-name-right .domain-text {
  opacity: 1;
}

/* Station Labels */
.station-label,
.station-label-right {
  margin-bottom: 2.5rem;
}

.kanji-label {
  font-family: 'Urbanist', sans-serif;
  font-weight: 200;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  letter-spacing: 0.08em;
  color: #C9A84C;
}

.label-text {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5E5A66;
  margin-left: 0.5rem;
}

.label-text-right {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5E5A66;
  margin-left: 0.5rem;
}

/* Tokonoma Grid */
.tokonoma-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.grid-line {
  height: 0.5px;
  background: #5E5A66;
  opacity: 0.2;
  width: 100%;
}

.grid-line.feathered {
  background: linear-gradient(90deg, #5E5A66 0%, #5E5A66 70%, transparent 100%);
  filter: blur(0.5px);
}

/* Systematic Text (Left) */
.systematic-text p {
  font-family: 'Work Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  letter-spacing: 0.01em;
  line-height: 1.65;
  color: #9B97A0;
}

.systematic-text.blending p {
  font-family: 'Work Sans', sans-serif;
  font-weight: 300;
  color: #9B97A0;
  font-style: normal;
}

/* Data Annotations */
.data-annotation {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0;
}

.annotation-label {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6C9B8A;
}

.annotation-value {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #5E5A66;
}

/* Vector Field Canvas */
.vector-field-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}

#vector-field-canvas {
  width: 100%;
  max-width: 400px;
  height: auto;
  aspect-ratio: 1;
}

/* Ethereal Text (Right) */
.ethereal-text {
  margin: 2rem 0;
  position: relative;
  z-index: 2;
}

.ethereal-body {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  letter-spacing: 0.015em;
  line-height: 1.7;
  color: #C8B8A8;
}

.converging-text .ethereal-body {
  font-style: italic;
  letter-spacing: 0.01em;
}

/* Organic Blobs */
.organic-blob {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
}

.blob-1 {
  width: 80%;
  top: 10%;
  right: -10%;
  opacity: 0.8;
}

.blob-2 {
  width: 60%;
  bottom: 10%;
  left: -5%;
  opacity: 0.7;
}

.blob-3 {
  width: 90%;
  top: 5%;
  left: -15%;
  opacity: 0.9;
}

.blob-4 {
  width: 65%;
  bottom: 15%;
  right: -10%;
  opacity: 0.7;
}

.blob-5 {
  width: 75%;
  top: 15%;
  left: 5%;
  opacity: 0.6;
}

.converging-blob path {
  transition: d 2s ease-in-out;
}

/* Field Line Entry SVG */
.field-line-entry {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 4s ease;
}

.station.visible .field-line-entry {
  opacity: 1;
}

/* Watercolor Field Canvas */
#watercolor-field-canvas {
  width: 100%;
  max-width: 500px;
  height: auto;
  position: relative;
  z-index: 1;
  margin: 1rem auto;
  display: block;
}

/* Station 5 - Unified */
.station-5-content-left,
.station-5-content-right {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.unified-domain {
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  letter-spacing: 0.08em;
  line-height: 1.1;
  opacity: 0;
  transition: opacity 2s ease 1s;
}

.station.visible .unified-domain {
  opacity: 1;
}

.domain-systematic {
  font-family: 'Work Sans', sans-serif;
  font-weight: 300;
  color: #E8E4DF;
}

.domain-organic {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  color: #C8B8A8;
}

/* Enso Circle */
.enso-circle {
  width: 80%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.enso-path {
  stroke-dasharray: 920;
  stroke-dashoffset: 920;
  transition: stroke-dashoffset 3s ease-in-out;
}

.station.visible .enso-path {
  stroke-dashoffset: 60;
}

/* Divider dissolve at Station 5 */
.divider-line.dissolving {
  animation: divider-dissolve 2s ease forwards;
}

@keyframes divider-dissolve {
  0% { opacity: 0.6; width: 2px; }
  100% { opacity: 0; width: 0px; }
}

/* Progress Indicator */
.progress-indicator {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.progress-indicator.visible {
  opacity: 1;
}

.progress-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5E5A66;
  transition: background-color 0.4s ease;
}

.progress-dot.active {
  background: #C9A84C;
}

/* Station 4 background shifts */
.station-4.bg-shift .column-left {
  background: #1E1E32;
}

.station-4.bg-shift .column-right {
  background: #16162A;
}

body.station-4-active .column-left {
  background: #1E1E32;
}

body.station-4-active .column-right {
  background: #16162A;
}

/* Tilt 3D */
.column-left.tilt-active {
  transform: perspective(1200px) rotateY(calc(var(--tiltX, 0) * 1deg)) rotateX(calc(var(--tiltY, 0) * 0.5deg));
}

.column-right.tilt-active {
  transform: perspective(1200px) rotateY(calc(var(--tiltX, 0) * -1deg)) rotateX(calc(var(--tiltY, 0) * -0.5deg));
}

/* Station 3 stronger tilt */
body.station-3-active .column-left.tilt-active {
  transform: perspective(1200px) rotateY(calc(var(--tiltX, 0) * 1.75deg)) rotateX(calc(var(--tiltY, 0) * 0.875deg));
}

body.station-3-active .column-right.tilt-active {
  transform: perspective(1200px) rotateY(calc(var(--tiltX, 0) * -1.75deg)) rotateX(calc(var(--tiltY, 0) * -0.875deg));
}

/* Station 4 reduced tilt */
body.station-4-active .column-left.tilt-active {
  transform: perspective(1200px) rotateY(calc(var(--tiltX, 0) * 0.5deg)) rotateX(calc(var(--tiltY, 0) * 0.25deg));
}

body.station-4-active .column-right.tilt-active {
  transform: perspective(1200px) rotateY(calc(var(--tiltX, 0) * -0.5deg)) rotateX(calc(var(--tiltY, 0) * -0.25deg));
}

/* Station 5 - merge columns */
body.station-5-active .column-left,
body.station-5-active .column-right {
  background: #1A1A2E;
}

body.station-5-active .column-right {
  transform: rotate(0deg);
}

/* Divider faster pulse at Station 3 */
body.station-3-active .divider-line {
  animation: divider-breathe-fast 4s ease-in-out infinite;
}

@keyframes divider-breathe-fast {
  0%, 100% { width: 2px; opacity: 0.7; }
  50% { width: 0.5px; opacity: 0.3; }
}

/* Responsive */
@media (max-width: 768px) {
  .split-container {
    flex-direction: column;
  }
  
  .column {
    width: 100%;
  }
  
  .column-right {
    transform: none;
  }
  
  .divider-line {
    display: none;
  }
  
  .station {
    padding: 3rem 1.5rem;
  }
  
  .station-content {
    max-width: 100%;
  }
  
  .organic-blob {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
  }
  
  .kanji-watermark {
    font-size: clamp(10rem, 30vw, 20rem);
  }
  
  .column-left.tilt-active,
  .column-right.tilt-active {
    transform: none;
  }
}

/* Blob morphing animation */
@keyframes blob-morph-1 {
  0%, 100% { d: path('M200,50 C280,50 350,120 350,200 C350,280 280,350 200,350 C120,350 50,280 50,200 C50,120 120,50 200,50 Z'); }
  33% { d: path('M210,60 C290,40 360,130 340,210 C320,290 260,360 190,340 C110,320 40,270 60,190 C80,110 130,80 210,60 Z'); }
  66% { d: path('M190,55 C270,60 340,140 350,220 C360,300 290,340 210,350 C130,360 60,290 50,210 C40,130 110,50 190,55 Z'); }
}

@keyframes blob-morph-2 {
  0%, 100% { d: path('M150,30 C220,40 270,100 260,170 C250,240 190,280 130,270 C70,260 30,200 40,130 C50,60 80,20 150,30 Z'); }
  50% { d: path('M160,40 C230,30 280,90 270,160 C260,230 200,270 140,280 C80,270 30,210 35,140 C40,70 90,50 160,40 Z'); }
}

.blob-path {
  animation: blob-morph-1 15s ease-in-out infinite;
}

.blob-2 .blob-path {
  animation: blob-morph-2 18s ease-in-out infinite;
}

.blob-morph-active {
  animation: blob-morph-1 12s ease-in-out infinite;
}

/* Watercolor wash for station 5 */
body.station-5-active::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(201,168,76,0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 50;
  animation: wash-fade 3s ease forwards;
}

@keyframes wash-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}