:root {
  --cream: #faf5ee;
  --mochi: #f0e4d4;
  --espresso: #3b2e25;
  --walnut: #6b5c52;
  --peach: #e8a87c;
  --peach-dark: #c47a52;
  --pistachio: #d6e5c8;
  --lavender: #dcd0e8;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--cream);
  color: var(--espresso);
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.7;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  position: relative;
}

/* ============================================
   SCROLL INDICATOR
   ============================================ */

#scroll-indicator {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  width: 8px;
  height: 80px;
  background: rgba(59, 46, 37, 0.1);
  border-radius: 4px;
}

#scroll-dot {
  width: 8px;
  height: 8px;
  background: var(--peach);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transition: top 0.1s ease-out;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
}

/* ============================================
   FLOWING CURVES SVG
   ============================================ */

#flowing-curves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500vh;
  z-index: 1;
  pointer-events: none;
}

#flowing-curves path {
  fill: none;
  stroke: var(--peach);
  stroke-width: 1;
  opacity: 0.4;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 0.05s linear;
}

/* ============================================
   SECTIONS
   ============================================ */

.section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: visible;
  z-index: 2;
}

/* ============================================
   CONTENT GRID (broken-grid: 8-col syncopated)
   ============================================ */

.content-grid {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr;
  gap: 3.2vw;
  padding: 8vh 5vw;
  min-height: 100vh;
  align-content: center;
}

/* ============================================
   MEGA-BLOBS
   ============================================ */

.mega-blob {
  position: absolute;
  z-index: 0;
  animation: blob-morph 20s ease-in-out infinite alternate;
}

.blob-arrival {
  width: 120vw;
  height: 110vh;
  top: -5vh;
  right: -30vw;
  background: radial-gradient(ellipse at center, rgba(243, 231, 218, 1) 0%, var(--mochi) 97%);
  border-radius: 42% 58% 62% 38% / 45% 55% 48% 52%;
}

.blob-settling {
  width: 110vw;
  height: 100vh;
  top: 0;
  left: -20vw;
  background: radial-gradient(ellipse at center, rgba(253, 249, 243, 1) 0%, var(--cream) 97%);
  border-radius: 55% 45% 38% 62% / 52% 48% 55% 45%;
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.blob-settling.visible {
  opacity: 1;
  transform: translateX(0);
}

.blob-growing {
  width: 115vw;
  height: 105vh;
  top: -2vh;
  left: -10vw;
  background: radial-gradient(ellipse at center, rgba(218, 233, 205, 1) 0%, var(--pistachio) 97%);
  border-radius: 48% 52% 56% 44% / 40% 60% 42% 58%;
  transform: scale(0.3);
  opacity: 0;
  transition: transform 1.5s ease-out, opacity 1s ease-out;
}

.blob-growing.visible {
  transform: scale(1);
  opacity: 1;
}

.blob-belonging-1 {
  width: 80vw;
  height: 90vh;
  top: -10vh;
  left: -15vw;
  background: radial-gradient(ellipse at center, rgba(224, 214, 236, 1) 0%, var(--lavender) 97%);
  border-radius: 38% 62% 52% 48% / 58% 42% 55% 45%;
}

.blob-belonging-2 {
  width: 70vw;
  height: 85vh;
  top: 10vh;
  right: -10vw;
  background: radial-gradient(ellipse at center, rgba(243, 231, 218, 1) 0%, var(--mochi) 97%);
  border-radius: 60% 40% 45% 55% / 50% 50% 48% 52%;
}

.blob-staying {
  width: 120vw;
  height: 110vh;
  top: -5vh;
  left: -10vw;
  background: radial-gradient(ellipse at center, rgba(243, 231, 218, 1) 0%, var(--mochi) 97%);
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  transition: border-radius 2s ease-in-out;
}

.blob-staying.deflating {
  border-radius: 50% 50% 10% 10% / 50% 50% 5% 5%;
  transform: scaleY(0.7);
}

@keyframes blob-morph {
  0% {
    border-radius: 42% 58% 62% 38% / 45% 55% 48% 52%;
  }
  25% {
    border-radius: 47% 53% 57% 43% / 50% 50% 53% 47%;
  }
  50% {
    border-radius: 38% 62% 55% 45% / 42% 58% 52% 48%;
  }
  75% {
    border-radius: 52% 48% 45% 55% / 55% 45% 40% 60%;
  }
  100% {
    border-radius: 45% 55% 58% 42% / 48% 52% 55% 45%;
  }
}

/* ============================================
   MICRO-BLOBS
   ============================================ */

.micro-blob {
  position: absolute;
  z-index: 1;
  animation: drift 30s linear infinite;
}

.micro-blob-1 {
  width: 100px;
  height: 90px;
  background: var(--pistachio);
  border-radius: 65% 35% 55% 45% / 40% 60% 35% 65%;
  top: 15vh;
  left: 10vw;
  opacity: 0.7;
}

.micro-blob-2 {
  width: 70px;
  height: 80px;
  background: var(--lavender);
  border-radius: 40% 60% 45% 55% / 55% 45% 60% 40%;
  bottom: 20vh;
  right: 25vw;
  opacity: 0.6;
  animation-delay: -15s;
}

@keyframes drift {
  0% { transform: rotate(0deg) translateY(0px); }
  25% { transform: rotate(4deg) translateY(-10px); }
  50% { transform: rotate(0deg) translateY(5px); }
  75% { transform: rotate(-4deg) translateY(-5px); }
  100% { transform: rotate(0deg) translateY(0px); }
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

.site-title {
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 6rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--espresso);
  grid-column: 1 / 5;
  grid-row: 1;
  transform: rotate(-1.5deg);
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
}

.section-headline {
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--espresso);
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
}

.belonging-headline {
  grid-column: 2 / 7;
  grid-row: 1;
  transform: rotate(2deg);
}

/* ============================================
   TYPEWRITER
   ============================================ */

.typewriter-container {
  position: relative;
}

.typewriter-1 {
  grid-column: 1 / 6;
  grid-row: 2;
  margin-top: 2rem;
  transform: rotate(0.5deg);
}

.typewriter-2 {
  grid-column: 2 / 7;
  grid-row: 1;
  transform: rotate(1deg);
}

.typewriter-3 {
  grid-column: 1 / 6;
  grid-row: 1;
  transform: rotate(-0.5deg);
}

.typewriter-4 {
  grid-column: 1 / 7;
  grid-row: 2;
  transform: rotate(-1deg);
}

.typewriter-5 {
  grid-column: 2 / 7;
  grid-row: 1;
  transform: rotate(0.5deg);
  align-self: center;
}

.typewriter-text {
  font-family: 'Courier Prime', monospace;
  font-weight: 400;
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  line-height: 1.6;
  color: var(--peach-dark);
}

.cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--peach-dark);
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: blink 0.8s step-end infinite;
}

.cursor.hidden {
  display: none;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ============================================
   BODY TEXT BLOCKS
   ============================================ */

.body-text-block {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.7;
  color: var(--walnut);
}

.text-blob {
  background: var(--mochi);
  border-radius: 30px;
  padding: 2rem 2.5rem;
}

.settling-text {
  grid-column: 3 / 8;
  grid-row: 2;
  transform: rotate(-1deg);
  margin-top: 2rem;
}

.growing-text {
  grid-column: 2 / 7;
  grid-row: 2;
  transform: rotate(1.5deg);
  margin-top: 2rem;
}

.overlap-text {
  grid-column: 5 / 9;
  grid-row: 2 / 4;
  transform: rotate(0.8deg);
  margin-top: -1rem;
}

/* ============================================
   ILLUSTRATIONS
   ============================================ */

.illustration {
  position: absolute;
  z-index: 6;
  opacity: 0;
  transition: opacity 1s ease-out;
}

.illustration.visible {
  opacity: 1;
}

.illustration svg {
  width: 100%;
  height: 100%;
}

.illustration-cup {
  width: clamp(100px, 15vw, 180px);
  height: clamp(100px, 15vw, 180px);
  bottom: 15vh;
  right: 12vw;
}

.illustration-window {
  width: clamp(120px, 16vw, 200px);
  height: clamp(130px, 18vw, 220px);
  top: 25vh;
  right: 8vw;
}

.illustration-loaf {
  width: clamp(120px, 16vw, 200px);
  height: clamp(100px, 14vw, 170px);
  bottom: 18vh;
  left: 8vw;
}

.illustration-flower {
  width: clamp(100px, 14vw, 170px);
  height: clamp(120px, 16vw, 200px);
  top: 20vh;
  left: 10vw;
}

.illustration-book {
  width: clamp(140px, 18vw, 220px);
  height: clamp(100px, 14vw, 170px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* SVG illustration animations */

.steam {
  transition: stroke-dashoffset 1.5s ease-out;
}

.illustration-cup.visible .steam-1 { stroke-dashoffset: 0; transition-delay: 0s; }
.illustration-cup.visible .steam-2 { stroke-dashoffset: 0; transition-delay: 0.7s; }
.illustration-cup.visible .steam-3 { stroke-dashoffset: 0; transition-delay: 1.4s; }

.curtain-left, .curtain-right {
  transform-origin: top center;
}

.illustration-window.visible .curtain-left {
  animation: sway-left 4s ease-in-out infinite alternate;
}

.illustration-window.visible .curtain-right {
  animation: sway-right 4s ease-in-out infinite alternate;
  animation-delay: 0.5s;
}

@keyframes sway-left {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(2deg); }
}

@keyframes sway-right {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-2deg); }
}

.illustration-loaf .dough {
  transform-origin: bottom center;
  transform: scaleY(0.7);
  transition: transform 1.5s ease-out;
}

.illustration-loaf.visible .dough {
  transform: scaleY(1);
}

.hand-line-1, .hand-line-2 {
  transition: stroke-dashoffset 3s ease-out;
}

.illustration-flower.visible .hand-line-1 {
  stroke-dashoffset: 0;
  transition-delay: 0.5s;
}

.illustration-flower.visible .hand-line-2 {
  stroke-dashoffset: 0;
  transition-delay: 1s;
}

.flutter-page {
  transform-origin: left center;
}

.illustration-book.visible .flutter-1 {
  animation: flutter 3s ease-in-out infinite alternate;
}

.illustration-book.visible .flutter-2 {
  animation: flutter 3s ease-in-out infinite alternate;
  animation-delay: 0.5s;
}

.illustration-book.visible .flutter-3 {
  animation: flutter 3s ease-in-out infinite alternate;
  animation-delay: 1s;
}

@keyframes flutter {
  0% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-1deg) translateY(-1px); }
  100% { transform: rotate(1deg) translateY(1px); }
}

/* ============================================
   SECTION-SPECIFIC BACKGROUNDS
   ============================================ */

#section-arrival {
  background: var(--cream);
}

#section-settling {
  background: var(--mochi);
}

#section-growing {
  background: var(--cream);
}

#section-belonging {
  background: var(--cream);
}

#section-staying {
  background: var(--cream);
}

/* ============================================
   RESPONSIVE (mobile < 768px)
   ============================================ */

@media (max-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 6vh 6vw;
  }

  .site-title {
    grid-column: 1;
    transform: rotate(-0.75deg);
  }

  .typewriter-1,
  .typewriter-2,
  .typewriter-3,
  .typewriter-4,
  .typewriter-5 {
    grid-column: 1;
    grid-row: auto;
    transform: rotate(0) !important;
  }

  .settling-text,
  .growing-text,
  .overlap-text {
    grid-column: 1;
    grid-row: auto;
    transform: rotate(0) !important;
    margin-top: 1rem;
  }

  .belonging-headline {
    grid-column: 1;
    transform: rotate(1deg);
  }

  .illustration {
    position: relative;
    margin: 2rem auto;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  .illustration-book {
    transform: none;
  }

  .mega-blob {
    width: 150vw !important;
  }

  .micro-blob {
    width: 60px !important;
    height: 55px !important;
  }

  #scroll-indicator {
    right: 10px;
  }
}

/* ============================================
   RESPONSIVE (wide > 1440px)
   ============================================ */

@media (min-width: 1441px) {
  .content-grid {
    grid-template-columns: 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr;
    max-width: 1600px;
    margin: 0 auto;
  }

  .mega-blob {
    width: 130vw;
  }
}