/* =============================================================================
   Motty — heymotty.app
   Palette: "Petal Pop" (approved 2026-08-01)
   Type: Fredoka (display) + Plus Jakarta Sans (body)
   ============================================================================= */

:root {
  /* Petal Pop palette */
  --bg: #F6EFFC;
  --surface: #EADCF7;
  --surface-2: #F1E5FA;
  --ink: #3D1F52;
  --ink-soft: #6B4A85;
  --ink-faint: #9C82B3;
  --border: #DEC6EF;

  --accent: #B65FE0;
  --accent-hover: #A34ECF;
  --accent-ink: #FFFFFF;
  --accent-2: #FF8FC7;
  --accent-2-soft: #F7D9EE;
  --accent-3: #8FE3D0; /* seafoam — the water Motty lives in, used only in the ambient layer */

  --shadow-soft: 0 4px 18px rgba(61, 31, 82, 0.08);
  --shadow-lift: 0 14px 40px rgba(61, 31, 82, 0.14);

  --font-display: "Fredoka", ui-rounded, "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;

  --max-width: 1360px;
  --measure: 1120px; /* how wide a text-heavy section is allowed to feel, independent of --max-width */
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

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

/* ---------- Ambient ripple layer ---------------------------------------
   Fills the wide-screen gutters with soft, blurred "water rings" instead
   of stretching text to fill the space. Fixed to the viewport (not the
   page), so it reads as one continuous atmosphere behind every section
   rather than a decoration bolted onto the hero alone. Each ring is an
   unfilled circle (border only) at huge scale + heavy blur, which reads
   as a ripple rather than a blob. Content sits in a stacking context
   above it (see .site-header, main, .site-footer z-index below). */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ambient span {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  filter: blur(2px);
  opacity: 0.5;
}
.ambient span:nth-child(1) {
  width: 62vw; height: 62vw;
  top: -20vw; left: -18vw;
  border-width: 46px;
  border-color: var(--surface);
  animation: driftA 32s ease-in-out infinite;
}
.ambient span:nth-child(2) {
  width: 38vw; height: 38vw;
  top: 8vh; right: -14vw;
  border-width: 30px;
  border-color: var(--accent-2-soft);
  opacity: 0.6;
  animation: driftB 24s ease-in-out infinite;
}
.ambient span:nth-child(3) {
  width: 46vw; height: 46vw;
  bottom: -18vw; left: -10vw;
  border-width: 36px;
  border-color: var(--accent-3);
  opacity: 0.28;
  animation: driftA 38s ease-in-out infinite reverse;
}
.ambient span:nth-child(4) {
  width: 26vw; height: 26vw;
  bottom: 6vh; right: 4vw;
  border-width: 22px;
  border-color: var(--accent-2);
  opacity: 0.22;
  animation: driftB 20s ease-in-out infinite reverse;
}
@keyframes driftA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(2.5vw, 3vh) scale(1.05); }
}
@keyframes driftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-3vw, 2vh) scale(0.95); }
}
@media (max-width: 720px) {
  .ambient span:nth-child(1) { width: 90vw; height: 90vw; top: -30vw; left: -30vw; }
  .ambient span:nth-child(2) { width: 60vw; height: 60vw; }
  .ambient span:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: reduce), (max-width: 480px) {
  .ambient span { filter: blur(1px); }
}

.site-header, main, .site-footer { position: relative; z-index: 1; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

a { color: inherit; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.08; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.16; letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; line-height: 1.3; }

p { margin: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hover);
  margin: 0 0 14px;
}
.eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px var(--accent-2-soft);
}

/* ---------- Buttons & form ---------- */
button {
  font-family: var(--font-body);
  cursor: pointer;
}

.waitlist-form {
  display: flex;
  gap: 10px;
  max-width: 420px;
}
.waitlist-form input {
  flex: 1;
  min-width: 0;
  padding: 15px 18px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.waitlist-form input::placeholder { color: var(--ink-faint); }
.waitlist-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-2-soft);
}
.waitlist-form button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 22px;
  border-radius: 14px;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  transition: background .15s ease, transform .15s ease;
}
.waitlist-form button:hover { background: var(--accent-hover); transform: translateY(-1px); }
.waitlist-form button:active { transform: translateY(0); }
.waitlist-form button:focus-visible,
.waitlist-form input:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

.form-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-soft);
}
.form-note[data-state="success"] { color: #1D7A4A; font-weight: 600; }
.form-note[data-state="error"] { color: #C23B5A; font-weight: 600; }

@media (max-width: 480px) {
  .waitlist-form { flex-direction: column; max-width: 100%; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(246, 239, 252, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-soft); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  transition: padding .25s ease;
}
.site-header.is-scrolled .header-inner {
  padding-top: 10px;
  padding-bottom: 10px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}
.wordmark--small { font-size: 18px; }
.wordmark-dot {
  width: 12px; height: 12px;
  border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: inline-block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14.5px;
  font-weight: 600;
}
.site-nav a { text-decoration: none; color: var(--ink-soft); transition: color .15s; }
.site-nav a:hover { color: var(--ink); }
.nav-cta {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #FFF !important;
  animation: ctaPulse 2.8s ease-in-out infinite;
}
.nav-cta:hover { background: var(--accent-hover); }
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(182, 95, 224, 0.38); }
  50% { box-shadow: 0 0 0 7px rgba(182, 95, 224, 0); }
}

@media (max-width: 640px) {
  .site-nav a:not(.nav-cta) { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  padding: 76px 0 96px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.18fr;
  gap: clamp(40px, 5vw, 84px);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { order: -1; }
}

.hero-copy h1 { margin-bottom: 20px; }
.hl { color: var(--accent); position: relative; }

.hero-sub {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 32px;
}

.hero-visual { display: flex; justify-content: center; }
.mascot-frame {
  position: relative;
  width: min(640px, 48vw, 92vw);
  aspect-ratio: 1 / 1;
  border-radius: 42px;
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow: var(--shadow-lift);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: floatBob 6s ease-in-out infinite;
}
.mascot-frame::before {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-2-soft) 0%, transparent 68%);
  z-index: -1;
  animation: glowPulse 5s ease-in-out infinite;
}
@keyframes floatBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.08); }
}
@media (max-width: 900px) {
  .mascot-frame { width: min(420px, 90vw); }
}
.mascot-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.gill-badge {
  position: absolute;
  border-radius: 50%;
  filter: blur(0.5px);
}
.gill-badge--1 {
  width: 64px; height: 64px;
  top: -18px; right: -14px;
  background: var(--accent-2);
  opacity: 0.55;
  animation: badgeBob 4.2s ease-in-out infinite;
}
.gill-badge--2 {
  width: 34px; height: 34px;
  bottom: 26px; left: -16px;
  background: var(--accent);
  opacity: 0.35;
  animation: badgeBob 5.4s ease-in-out infinite reverse;
}
@keyframes badgeBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* ---------- How it works ---------- */
.how { padding: 88px 0; scroll-margin-top: 90px; }
.how > .wrap > h2 { margin-bottom: 56px; max-width: 20ch; }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step {
  display: grid;
  grid-template-columns: 64px 1fr 140px;
  gap: 28px;
  align-items: center;
  padding: 34px 8px;
  border-top: 1px solid var(--border);
}
.step:last-child { border-bottom: 1px solid var(--border); }

.step-num {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-2);
  letter-spacing: 0.04em;
}

.step-body h3 { margin-bottom: 8px; }
.step-body p { color: var(--ink-soft); max-width: 58ch; }

.step-visual {
  justify-self: end;
  width: 120px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* mini step illustrations — deliberately simple, no stock icon set */
.waveform {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 56px;
}
.waveform span {
  width: 5px;
  border-radius: 3px;
  background: var(--accent);
  opacity: 0.85;
  transform-origin: bottom;
}
.waveform span:nth-child(1) { height: 18px; }
.waveform span:nth-child(2) { height: 40px; }
.waveform span:nth-child(3) { height: 26px; }
.waveform span:nth-child(4) { height: 56px; background: var(--accent-2); }
.waveform span:nth-child(5) { height: 34px; }
.waveform span:nth-child(6) { height: 48px; }
.waveform span:nth-child(7) { height: 22px; }
.waveform span:nth-child(8) { height: 30px; }

.mini-card {
  position: absolute;
  width: 108px;
  height: 68px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-soft);
}
.step-visual--cards { position: relative; }
.mini-card--back {
  background: var(--surface);
  color: var(--ink-faint);
  transform: rotate(-7deg) translate(-10px, 6px);
}
.mini-card--front {
  background: #FFFFFF;
  color: var(--ink);
  border: 1.5px solid var(--accent-2-soft);
  transform: rotate(4deg) translate(6px, -6px);
}

.score-ring {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--pct, 87) * 1%), var(--surface) 0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.score-ring span {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}

@media (max-width: 720px) {
  .step { grid-template-columns: 44px 1fr; }
  .step-visual { display: none; }
}

/* ---------- Meet Motty ---------- */
.meet {
  padding: 88px 0;
  background: var(--surface-2);
  scroll-margin-top: 90px;
}
.meet-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 800px) {
  .meet-grid { grid-template-columns: 1fr; }
}
.meet-frame {
  width: min(280px, 70vw);
  aspect-ratio: 1 / 1;
  border-radius: 36px;
  background: linear-gradient(160deg, #FFFFFF 0%, var(--surface) 100%);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.meet-copy p {
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 58ch;
  margin-top: 18px;
}

/* ---------- Waitlist CTA (footer section) ---------- */
.waitlist-cta {
  padding: 96px 0 88px;
  scroll-margin-top: 90px;
}
.waitlist-cta-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 800px) {
  .waitlist-cta-grid { grid-template-columns: 1fr; }
  .waitlist-cta-visual { order: -1; }
}
.waitlist-cta-inner {
  max-width: 640px;
  text-align: left;
}
.waitlist-cta-inner h2 { margin-bottom: 14px; }
.waitlist-cta-inner > p {
  color: var(--ink-soft);
  font-size: 16px;
  margin-bottom: 30px;
}
.waitlist-cta-visual { display: flex; justify-content: center; }
.cta-frame {
  width: min(240px, 60vw);
  aspect-ratio: 1 / 1;
  border-radius: 36px;
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 28px 0 40px;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-inner p {
  font-size: 13px;
  color: var(--ink-soft);
}
.footer-inner p a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.footer-inner p a:hover { color: var(--ink); }

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: #FFFFFF;
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
}
.cookie-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 16px;
  padding-bottom: 16px;
}
.cookie-banner p {
  font-size: 13.5px;
  color: var(--ink-soft);
  max-width: 62ch;
}
.cookie-banner a { color: var(--accent-hover); }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner-actions button {
  padding: 9px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  border: 1.5px solid var(--border);
  background: #FFFFFF;
  color: var(--ink);
}
.cookie-banner-actions button[data-cookie-accept] {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-ink);
}
.cookie-banner-actions button[data-cookie-accept]:hover { background: var(--accent-hover); }
.cookie-banner-actions button[data-cookie-decline]:hover { border-color: var(--ink-faint); }

/* ---------- Scroll-reveal base state (GSAP animates these) ---------- */
[data-reveal-item] {
  opacity: 0;
  transform: translateY(18px);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal-item] { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
  .ambient span,
  .mascot-frame,
  .mascot-frame::before,
  .gill-badge,
  .nav-cta,
  .waveform span {
    animation: none !important;
  }
}