/* ==========================================================================
   Baby Dots Landing Page
   ========================================================================== */

/* --- Custom Properties --- */
:root {
  --bg: #fff;
  --bg-alt: #faf9f8;
  --text: #000;
  --text-muted: #333;
  --accent: #E53935;

  --pink: #ff5d85;
  --mint: #00def2;
  --baby-blue: #103fee;
  --lavender: #673AB7;
  --peach: #FF5722;
  --green: #4CAF50;

  --indigo: oklch(23% 0.06 278);
  --terracotta: oklch(57% 0.13 36);
  --almost-white: #fbfbfa;
  --almost-white-rgb: 251, 251, 250;

  --font-heading: 'Nunito', sans-serif;
  --font-body: 'Inter', sans-serif;

  --max-width: 720px;
  --padding-x: 1.5rem;
  --section-spacing: 4rem;
}

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

/* --- Base --- */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.page--sub {
  background-color: var(--bg-alt);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* --- Typography --- */
h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.015em;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
}

h2 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

p {
  font-family: var(--font-body);
  margin-bottom: 1rem;
  font-weight: 300;
}

.text-muted {
  color: var(--text-muted);
  font-weight: 300;
}

/* --- Layout --- */
.section {
  padding: var(--section-spacing) var(--padding-x);
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section--alt {
  background-color: var(--bg-alt);
}

/* --- Hero --- */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--bg);
  padding: 5rem var(--padding-x) 4rem;
  text-align: center;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
}

.hero h1 {
  margin-bottom: 0.5rem;
}

.hero-text-bg {
  background: white;
}

.hero-subline {
  font-size: 1.25rem;
  color: var(--text-muted);
  font-weight: 300;
  margin-bottom: 2rem;
}

.hero--compact {
  padding: 3rem var(--padding-x) 2.5rem;
}

.hero--compact .hero-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.hero-dots {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-dot {
  position: absolute;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 1px 1px 8px rgba(115,125,150,0.2);
  will-change: transform;
  animation:
    dot-float infinite ease-in-out,
    dot-color 86.1s infinite linear;
}

.hero-dot--dark {
  background-color: #1c1e1c;
  animation: dot-float infinite ease-in-out;
}

/* Stagger float duration only; color is synced (same duration, no delay) */
.hero-dot:nth-child(1)  { animation-duration: 18s, 86.1s;   animation-delay: 0s, 0s; }
.hero-dot:nth-child(2)  { animation-duration: 22s;           animation-delay: 1.2s; }
.hero-dot:nth-child(3)  { animation-duration: 16s, 86.1s;   animation-delay: 3s, 0s; }
.hero-dot:nth-child(4)  { animation-duration: 25s;           animation-delay: 2s; }
.hero-dot:nth-child(5)  { animation-duration: 20s, 86.1s;   animation-delay: 4.5s, 0s; }
.hero-dot:nth-child(6)  { animation-duration: 21s;           animation-delay: 0.6s; }
.hero-dot:nth-child(7)  { animation-duration: 24s, 86.1s;   animation-delay: 2.5s, 0s; }
.hero-dot:nth-child(8)  { animation-duration: 19s;           animation-delay: 3.8s; }
.hero-dot:nth-child(9)  { animation-duration: 22s, 86.1s;   animation-delay: 1.5s, 0s; }
.hero-dot:nth-child(10) { animation-duration: 25s;           animation-delay: 2.8s; }
.hero-dot:nth-child(11) { animation-duration: 17s, 86.1s;   animation-delay: 0.8s, 0s; }
.hero-dot:nth-child(12) { animation-duration: 23s;           animation-delay: 4.2s; }
.hero-dot:nth-child(13) { animation-duration: 18s, 86.1s;   animation-delay: 2.2s, 0s; }
.hero-dot:nth-child(14) { animation-duration: 21s;           animation-delay: 1.4s; }
.hero-dot:nth-child(15) { animation-duration: 20s, 86.1s;   animation-delay: 3.5s, 0s; }
.hero-dot:nth-child(16) { animation-duration: 24s;           animation-delay: 0.3s; }
.hero-dot:nth-child(17) { animation-duration: 17s, 86.1s;   animation-delay: 4s, 0s; }
.hero-dot:nth-child(18) { animation-duration: 20s;           animation-delay: 0.9s; }
.hero-dot:nth-child(19) { animation-duration: 19s, 86.1s;   animation-delay: 3.2s, 0s; }
.hero-dot:nth-child(20) { animation-duration: 25s;           animation-delay: 2.4s; }
.hero-dot:nth-child(21) { animation-duration: 16s, 86.1s;   animation-delay: 1.8s, 0s; }

@keyframes dot-float {
  0%, 100% {
    transform: translateY(0) translateX(0) scale(1);
  }
  25% {
    transform: translateY(-50px) translateX(20px) scale(1.06);
  }
  50% {
    transform: translateY(-80px) translateX(-15px) scale(1);
  }
  75% {
    transform: translateY(-35px) translateX(25px) scale(0.96);
  }
}

/* 7 colors × (12s hold + 0.3s fade) = 86.1s total cycle */
@keyframes dot-color {
  0%      { background-color: var(--accent); }
  13.9%   { background-color: var(--accent); }
  14.3%   { background-color: var(--pink); }
  28.2%   { background-color: var(--pink); }
  28.6%   { background-color: var(--baby-blue); }
  42.5%   { background-color: var(--baby-blue); }
  42.9%   { background-color: var(--lavender); }
  56.8%   { background-color: var(--lavender); }
  57.1%   { background-color: var(--mint); }
  71.1%   { background-color: var(--mint); }
  71.4%   { background-color: var(--peach); }
  85.4%   { background-color: var(--peach); }
  85.7%   { background-color: var(--green); }
  99.7%   { background-color: var(--green); }
  100%    { background-color: var(--accent); }
}


/* --- Store Badges --- */
.store-badges {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
}

.store-badge img {
  width: 140px;
  height: auto;
  display: block;
}

/* --- App Preview --- */
.app-preview-grid {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  margin-top: 2.5rem;
  perspective: 900px;
}

.app-preview-phone {
  position: relative;
  width: 170px;
  flex-shrink: 0;
  transition: transform 0.4s ease;
}

.app-preview-phone:nth-child(1) {
  transform: rotateY(12deg) rotateX(2deg) rotateZ(-1deg);
}

.app-preview-phone:nth-child(2) {
  transform: rotateX(3deg) translateY(-10px) scale(1.05);
  z-index: 1;
}

.app-preview-phone:nth-child(3) {
  transform: rotateY(-12deg) rotateX(2deg) rotateZ(1deg);
}

.phone-frame {
  display: block;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.15));
}

.phone-screen {
  position: absolute;
  top: 2.25%;
  left: 4.75%;
  width: 90.5%;
  height: 95.5%;
  border-radius: 16px;
  overflow: hidden;
}

.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Story --- */
.story p {
  font-size: 1.125rem;
  max-width: 600px;
}

/* --- How It Works --- */
.steps {
  display: flex;
  gap: 1.5rem;
  margin-top: 2rem;
}

.step {
  flex: 1;
  text-align: center;
  padding: 1.5rem 1rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--accent);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

.step-note {
  font-family: var(--font-body);
  margin-bottom: 0.25rem;
  font-weight: 400;
  font-size: 1rem;
}

/* --- Key Features --- */
.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}

.feature-card {
  padding: 1.25rem;
  background: #fff;
  border-left: 4px solid var(--pink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.feature-card:nth-child(2) { border-left-color: var(--mint); }
.feature-card:nth-child(3) { border-left-color: var(--lavender); }
.feature-card:nth-child(4) { border-left-color: var(--peach); }
.feature-card:nth-child(5) { border-left-color: var(--baby-blue); }
.feature-card:nth-child(6) { border-left-color: var(--green); }

.feature-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.feature-card h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.feature-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* --- Why It Works --- */
.why p {
  font-size: 1.125rem;
  max-width: 600px;
}

/* --- Pricing --- */
.pricing {
  text-align: center;
}

.pricing-note {
  margin-top: 1.25rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}


/* --- Footer --- */
.footer {
  padding: 3rem var(--padding-x);
  text-align: center;
  /* background-color: var(--bg-alt); */
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
  color: var(--text);
  text-decoration: none;
  display: block;
}

.footer-brand:hover {
  text-decoration: none;
  color: var(--text);
}

.footer-links {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.footer-links a {
  color: var(--text-muted);
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 300;
  margin-top: 4rem;
}

.footer-social {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.footer-social a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-social a:hover {
  color: var(--accent);
  text-decoration: none;
}

.social-icon {
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

/* --- Music Credits page --- */
.music-intro {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.music-credit h2 {
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
  margin-top: 1.5rem;
}

/* --- Scroll-driven section reveals --- */
@keyframes section-reveal {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@supports (animation-timeline: view()) {
  .section,
  .footer {
    animation: section-reveal linear both;
    animation-duration: auto;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
}

/* --- Feature card hover --- */
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* --- Blob dividers between sections --- */
.section--alt,
.section--alt + .section:not(.section--alt) {
  position: relative;
  overflow: visible;
}

.section--alt::before,
.section--alt + .section:not(.section--alt)::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

/* Entering alt sections — each gets a unique organic curve */
.app-preview::before {
  top: -20px;
  height: 40px;
  background: var(--bg-alt);
  border-radius: 55% 45% 0 0 / 100% 100% 0 0;
}

.how-it-works::before {
  top: -32px;
  height: 56px;
  background: var(--bg-alt);
  border-radius: 35% 65% 0 0 / 100% 80% 0 0;
}

.why::before {
  top: -18px;
  height: 36px;
  background: var(--bg-alt);
  border-radius: 70% 30% 0 0 / 100% 100% 0 0;
}

/* Leaving alt sections — distinct curves back to white */
.app-preview + .section:not(.section--alt)::before {
  top: -28px;
  height: 48px;
  background: var(--bg);
  border-radius: 40% 60% 0 0 / 80% 100% 0 0;
}

.how-it-works + .section:not(.section--alt)::before {
  top: -22px;
  height: 44px;
  background: var(--bg);
  border-radius: 65% 35% 0 0 / 100% 90% 0 0;
}

.why + .section:not(.section--alt)::before {
  top: -26px;
  height: 46px;
  background: var(--bg);
  border-radius: 45% 55% 0 0 / 90% 100% 0 0;
}

/* --- Focus styles --- */
a:focus-visible,
.store-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.social-icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 50%;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Responsive --- */
@media (max-width: 540px) {
  h1 {
    font-size: 1.875rem;
  }

  h2 {
    font-size: 1.375rem;
  }

  .hero {
    padding: 3.5rem var(--padding-x) 3rem;
  }

  .hero--compact {
    padding: 2rem var(--padding-x) 1.75rem;
  }

  .hero--compact .hero-title {
    font-size: 1.375rem;
  }

  .hero-subline {
    font-size: 1.1rem;
  }

  .steps {
    flex-direction: column;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .app-preview-grid {
    flex-direction: column;
    align-items: center;
    perspective: none;
  }

  .app-preview-phone {
    width: 150px;
  }

  .app-preview-phone:nth-child(1),
  .app-preview-phone:nth-child(2),
  .app-preview-phone:nth-child(3) {
    transform: none;
  }

  .section {
    padding: 3rem var(--padding-x);
  }

  .footer-links {
    flex-direction: column;
    gap: 0.75rem;
  }
}