/* ============================================================
   tsundere.xyz — styles.css
   Blobitecture × Data Romanticism × Warm Earthy
   ============================================================ */

/* ----- Variables ----- */
:root {
  --bone:        #F5ECD7;
  --wheat-gold:  #E8C9A0;
  --terracotta:  #C4734A;
  --dusty-rose:  #D4A5A5;
  --deep-moss:   #3D4A2E;
  --charcoal:    #2A2A2A;
  --sienna:      #8B4513;
  --warm-cream:  #F0E2C8;
  --umber:       #A67C52;
  --cyan-jolt:   #4ECDC4;
  --coral-jolt:  #FF6B6B;

  --ff-display: 'Bricolage Grotesque', sans-serif;
  --ff-body:    'DM Sans', sans-serif;
  --ff-data:    'Space Grotesk', monospace;
}

/* ----- Reset & Base ----- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  background: var(--bone);
  font-family: var(--ff-body);
  color: var(--charcoal);
}

body {
  background: var(--bone);
}

/* ----- Audio Button ----- */
.audio-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
  font-family: var(--ff-data);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--umber);
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.3s ease;
  pointer-events: auto;
}
.audio-btn:hover {
  opacity: 0.7;
}

/* ----- Shared Section Styles ----- */
.section {
  scroll-snap-align: start;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----- Coordinate Labels (SVG text) ----- */
.coord-label {
  font-family: var(--ff-data);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.1em;
  fill: var(--umber);
  opacity: 0.5;
}

/* ----- Grid Overlay ----- */
.grid-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.city-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 39px,
    rgba(42,42,42,0.04) 39px,
    rgba(42,42,42,0.04) 40px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 39px,
    rgba(42,42,42,0.04) 39px,
    rgba(42,42,42,0.04) 40px
  );
  z-index: 0;
  pointer-events: none;
}

/* ----- Blob Containers ----- */
.blob-container {
  position: absolute;
  z-index: 2;
  overflow: hidden;
}

.blob-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px;
  text-align: center;
  height: 100%;
}

/* ----- Section 1: Arrival ----- */
.section-arrival {
  background: var(--bone);
}

.blob-arrival {
  width: 580px;
  height: 580px;
  clip-path: url(#blob-1);
  background: var(--warm-cream);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ----- Section 2: City Layer ----- */
.section-city {
  background: var(--bone);
}

.blob-city {
  width: 600px;
  height: 560px;
  clip-path: url(#blob-2);
  background: rgba(196, 115, 74, 0.6);
  top: 50%;
  left: -40px;
  transform: translateY(-50%);
}

.dot-matrix {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.transit-overlay,
.annotation-overlay,
.topo-overlay,
.scatter-overlay,
.scatter-resolution {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ----- Section 3: Field Layer ----- */
.section-field {
  background: var(--deep-moss);
}

.blob-field {
  width: 560px;
  height: 580px;
  clip-path: url(#blob-3);
  background: var(--dusty-rose);
  top: 50%;
  right: -40px;
  left: auto;
  transform: translateY(-50%);
}

.scanline-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(61,74,46,0.03) 2px,
    rgba(61,74,46,0.03) 4px
  );
}

/* ----- Section 4: Tension ----- */
.section-tension {
  background: transparent;
}

.section-tension::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: var(--charcoal);
  z-index: 0;
}

.section-tension::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: var(--warm-cream);
  z-index: 0;
}

.blob-tension {
  width: 560px;
  height: 540px;
  clip-path: url(#blob-4);
  background: linear-gradient(90deg, rgba(212,165,165,0.7) 0%, var(--dusty-rose) 100%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  mix-blend-mode: normal;
}

.blob-tension-inner {
  gap: 24px;
}

.building-silhouette {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 80px;
  background: var(--charcoal);
  clip-path: polygon(
    0% 100%,
    0% 60%,
    4% 60%,
    4% 30%,
    8% 30%,
    8% 50%,
    12% 50%,
    12% 10%,
    14% 10%,
    14% 40%,
    18% 40%,
    18% 25%,
    20% 25%,
    20% 45%,
    24% 45%,
    24% 15%,
    27% 15%,
    27% 5%,
    30% 5%,
    30% 35%,
    34% 35%,
    34% 20%,
    38% 20%,
    38% 40%,
    42% 40%,
    42% 30%,
    46% 30%,
    46% 55%,
    50% 55%,
    50% 100%
  );
  z-index: 1;
}

.glitch-lines-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.split-annotations {
  display: flex;
  gap: 48px;
  margin-top: 16px;
}

.urban-annotation {
  color: var(--charcoal);
}

.pastoral-annotation {
  color: var(--deep-moss);
}

/* ----- Section 5: Resolution ----- */
.section-resolution {
  background: linear-gradient(160deg, var(--bone) 0%, var(--wheat-gold) 100%);
}

.blob-outline-container {
  position: absolute;
  width: 580px;
  height: 580px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blob-outline-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.blob-resolution-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 60px;
  text-align: center;
}

/* ----- Typography ----- */
.display-headline {
  font-family: var(--ff-display);
  font-size: clamp(72px, 10vw, 130px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  position: relative;
}

/* Arrival headline color */
.section-arrival .display-headline {
  color: var(--charcoal);
}

/* Field headline color on dark background */
.section-field .display-headline {
  color: var(--bone);
}

/* Glitch text RGB split */
.glitch-text {
  position: relative;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
}

.glitch-text::before {
  color: var(--cyan-jolt);
  mix-blend-mode: screen;
  transform: translateX(-2px);
}

.glitch-text::after {
  color: var(--coral-jolt);
  mix-blend-mode: screen;
  transform: translateX(2px);
}

.glitch-text.glitching::before,
.glitch-text.glitching::after {
  opacity: 0.5;
}

/* Variable weight letter animation */
.letter-wave {
  display: inline-block;
  font-variation-settings: 'wght' 200;
  transition: font-variation-settings 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.letter-wave.bold {
  font-variation-settings: 'wght' 700;
}

.body-text {
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--charcoal);
  max-width: 320px;
}

.section-field .body-text {
  color: var(--charcoal);
}

.annotation-label {
  font-family: var(--ff-data);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--umber);
  opacity: 0.8;
}

.annotation-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.italic-botanical {
  font-style: italic;
}

.data-label {
  font-family: var(--ff-data);
  font-size: 13px;
  font-weight: 300;
  color: var(--sienna);
  letter-spacing: 0.06em;
}

.minimal-link {
  font-family: var(--ff-data);
  font-size: 13px;
  font-weight: 300;
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-color: var(--terracotta);
  text-underline-offset: 4px;
  letter-spacing: 0.1em;
}

/* ----- Blob Outline (Section 1) ----- */
.blob-outline {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.blob-outline-1 {
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ----- Glitch Animations ----- */
@keyframes glitch-slice {
  0%, 90%, 100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
  91% {
    transform: translateX(-4px);
    clip-path: inset(30% 0 40% 0);
  }
  93% {
    transform: translateX(6px);
    clip-path: inset(60% 0 10% 0);
  }
  95% {
    transform: translateX(-2px);
    clip-path: inset(10% 0 70% 0);
  }
}

@keyframes glitch-slice-fast {
  0%, 88%, 100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
  89% {
    transform: translateX(5px);
    clip-path: inset(20% 0 50% 0);
  }
  91% {
    transform: translateX(-3px);
    clip-path: inset(55% 0 15% 0);
  }
  93% {
    transform: translateX(4px);
    clip-path: inset(5% 0 80% 0);
  }
}

.glitch-target {
  animation: glitch-slice 5s infinite;
}

.blob-outline-resolution {
  animation: glitch-slice 7s infinite 2s;
}

/* ----- Blob Breathing (CSS path animation) ----- */
@keyframes blob-breathe {
  0%, 100% {
    d: path("M300,50 C432,24 558,84 570,210 C582,336 522,432 426,486 C330,540 192,546 114,474 C36,402 18,294 42,198 C66,102 168,76 300,50 Z");
  }
  50% {
    d: path("M300,44 C438,16 570,80 582,214 C594,348 528,444 432,498 C336,552 186,558 108,480 C30,402 12,288 36,192 C60,96 162,72 300,44 Z");
  }
}

@keyframes blob-breathe-2 {
  0%, 100% {
    d: path("M-30,90 C48,36 168,24 276,60 C372,96 432,168 444,264 C456,360 408,444 324,492 C240,540 108,552 24,504 C-60,456 -72,348 -48,240 C-24,144 -30,90 -30,90 Z");
  }
  50% {
    d: path("M-36,86 C42,30 162,16 270,54 C368,90 428,164 442,262 C456,360 406,448 318,498 C230,548 96,560 12,510 C-72,460 -84,350 -58,240 C-32,136 -36,86 -36,86 Z");
  }
}

.blob-path-1a {
  animation: blob-breathe 10s ease-in-out infinite;
}

/* Glitch lines for section 4 seam */
.glitch-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--cyan-jolt) 48%, var(--coral-jolt) 52%, transparent 100%);
  opacity: 0;
  z-index: 5;
}

@keyframes glitch-line-flash {
  0%, 100% { opacity: 0; transform: translateY(0); }
  50% { opacity: 0.6; transform: translateY(var(--shift, 3px)); }
}

/* ----- Dot matrix city block dots ----- */
.city-dot {
  /* defined via JS */
}

/* ----- Resolution scatter ----- */
.resolution-dot {
  /* defined via JS */
}

/* ----- Tension section headline color overrides ----- */
.section-tension .display-headline {
  color: var(--warm-cream);
  text-shadow: 0 0 40px rgba(245,236,215,0.3);
}

/* ----- Resolution headline ----- */
.section-resolution .display-headline {
  color: var(--charcoal);
  font-size: clamp(56px, 8vw, 110px);
}