/* Layer Theory Cakes — mobile-first, no dependencies */

:root {
  --cream: #fbf6ec;
  --cream-tint: #f7ead2;
  --card: #fff;
  --cocoa: #4a3426;
  --cocoa-soft: #7a5e4a;     /* 5.5:1 on cream, for secondary text */
  --honey: #e3b04b;          /* decorative accent */
  --honey-deep: #b07a1e;     /* focus outline, 3.4:1 on cream */
  --caramel: #b87a3d;        /* buttons */
  --caramel-dark: #9e6630;
  --sage: #8fa683;           /* small decorative details only */
  --line: #9c8370;           /* input borders, 3.5:1 on white */
  --radius: 18px;
  --shadow-card: 0 1px 2px rgba(74, 52, 38, 0.04), 0 8px 24px rgba(74, 52, 38, 0.06);
  --shadow-photo: 0 20px 50px rgba(74, 52, 38, 0.15);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--cocoa);
  font: 1.0625rem/1.7 var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}
h1 { font-size: clamp(2rem, 7.5vw, 3rem); }
h2 { font-size: clamp(1.55rem, 5vw, 2rem); }
p { margin: 0 0 1rem; }

.wrap {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Accessibility helpers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  padding: 0.5rem 1rem;
  background: var(--cocoa);
  color: #fff;
  border-radius: 0 0 10px 10px;
  z-index: 10;
}
.skip-link:focus { top: 0; }
:focus-visible {
  outline: 3px solid var(--honey-deep);
  outline-offset: 3px;
}

/* Hero */
.hero {
  background: linear-gradient(180deg, var(--cream-tint) 0%, var(--cream) 22rem);
  padding: 3rem 0 3.5rem;
  text-align: center;
}
.hero .wrap { max-width: 48rem; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cocoa-soft);
  margin-bottom: 1rem;
}
.tagline {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 4.2vw, 1.4rem);
  font-style: italic;
  color: var(--cocoa-soft);
}
/* "9 layers + 1 night" signature; decorative, fully drawn without animation */
.layers {
  display: block;
  margin: 0.25rem auto 0;
  overflow: visible;
}
.hero-img {
  width: 100%;
  max-width: 720px;
  margin: 2rem auto 2.5rem;
  border-radius: 20px;
  box-shadow: var(--shadow-photo);
  background: var(--cream-tint);
}

/* Buttons: white on caramel is 3.6:1, so the label is sized as WCAG "large text" (≥14pt bold) */
.button {
  display: inline-block;
  min-height: 52px;
  padding: 0.85rem 1.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--caramel);
  color: #fff;
  font: 700 1.1875rem/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(184, 122, 61, 0.25);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease);
}
.button:hover {
  background: var(--caramel-dark);
  box-shadow: 0 8px 20px rgba(158, 102, 48, 0.3);
}
.button:active { box-shadow: 0 4px 10px rgba(158, 102, 48, 0.25); }

.hero-price {
  margin: 1rem 0 0;
  font-size: 1rem;
  color: var(--cocoa-soft);
}
.hero-price strong { color: var(--cocoa); font-weight: 600; }

/* Sections */
.section { padding: 3rem 0; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.facts {
  list-style: none;
  margin: 1.5rem 0 2rem;
  padding: 0.5rem 1.25rem;
}
.facts li {
  position: relative;
  padding: 1rem 0 1rem 1.75rem;
}
.facts li + li { border-top: 1px solid #f1e8d8; }
.facts li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.5rem;
  width: 0.7rem; height: 0.7rem;
  background: var(--honey);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.price { font-size: 1.1rem; color: var(--cocoa-soft); }
.price-amount {
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--cocoa);
  margin-right: 0.3rem;
}

.story { text-align: center; }
.story .wrap::before {
  content: "";
  display: block;
  width: 3rem; height: 3px;
  margin: 0 auto 1.75rem;
  border-radius: 3px;
  background: var(--sage);
}
.story-line {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 5vw, 1.8rem);
  font-style: italic;
  margin: 0;
}

/* "Build the cake" scroll story (build-cake.js sets --p from 0 to 1; default 1 = finished cake).
   Each part has --s (start) and --d (duration) inline; --t is its own 0–1 progress. */
.build-cake {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 120px;
  padding: 8px 0;
  background: var(--cream);
}
.build-cake::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 16px;
  background: linear-gradient(var(--cream), rgba(251, 246, 236, 0));
  pointer-events: none;
}
.bc {
  --p: 1;
  display: block;
  width: auto;
  height: 100%;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}
.bc-night, .bc-star, .bc-moon, .bc-layer, .bc-cream, .bc-crumb {
  --t: clamp(0, (var(--p) - var(--s)) / var(--d), 1);
  opacity: var(--t);
}
.bc-day { fill: var(--cream-tint); }
.bc-night { fill: #4b4766; }
.bc-star { fill: #f5e9cf; }
.bc-moon {
  fill: #f3e3b5;
  transform: translateY(calc((1 - var(--t)) * 8px));
}
.bc-plate { fill: #fffaf0; stroke: #e8d3a8; stroke-width: 1.5; }
.bc-layer { transform: translateY(calc((1 - var(--t)) * -28px)); }
.bc-cream {
  fill: #f5e1b8;
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleX(var(--t));
}
.bc-crumb { transform: translateY(calc((1 - var(--t)) * -36px)); }

/* Waitlist form */
.lead { font-size: 1.15rem; color: var(--cocoa-soft); }

.form {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.75rem;
  padding: 1.5rem 1.25rem;
}
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 600; padding-left: 0.25rem; }
.req { font-weight: 400; color: var(--cocoa-soft); font-size: 0.9rem; }
.form input {
  width: 100%;
  min-height: 50px;
  padding: 0.7rem 1.15rem;
  font: inherit;
  color: inherit;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.form input:focus-visible {
  outline: none;
  background: var(--card);
  border-color: var(--caramel-dark);
  box-shadow: 0 0 0 4px rgba(227, 176, 75, 0.45);
}
.form .button { width: 100%; margin-top: 0.5rem; }
.note { font-size: 0.95rem; color: var(--cocoa-soft); text-align: center; margin: 0; }

/* Honeypot: hidden from people, visible to naive bots */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Thanks page */
.thanks {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  background: linear-gradient(180deg, var(--cream-tint) 0%, var(--cream) 60%);
  padding: 3rem 0;
}

.footer {
  padding: 2.5rem 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--cocoa-soft);
}
.footer p { margin: 0; }

/* Motion: CSS only, opacity/transform only (no layout shift), all skipped for reduced motion.
   Load animations fill "backwards" so they release transform afterwards (button hover still works). */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes photo-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: none; }
}
@keyframes layer-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes moon-in {
  from { opacity: 0; transform: translateX(-4px) rotate(-20deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero .wrap > *,
  .thanks .wrap > * {
    animation: fade-up 0.8s var(--ease) backwards;
  }
  .hero .wrap > :nth-child(2), .thanks .wrap > :nth-child(2) { animation-delay: 0.08s; }
  .hero .wrap > :nth-child(3), .thanks .wrap > :nth-child(3) { animation-delay: 0.16s; }
  .hero .wrap > .layers { animation: none; }
  .hero .wrap > .hero-img { animation: photo-in 1s var(--ease) 0.2s backwards; }
  .hero .wrap > .button { animation-delay: 0.4s; }
  .hero .wrap > .hero-price { animation-delay: 0.5s; }

  /* Signature: 9 layers stack bottom-to-top 120ms apart, then the moon (~2s total) */
  .layers rect {
    animation: layer-in 0.45s var(--ease) backwards;
    animation-delay: calc(0.3s + var(--i) * 120ms);
  }
  .layers .moon {
    transform-box: fill-box;
    transform-origin: center;
    animation: moon-in 0.6s ease-out 1.5s backwards;
  }

  /* Buttons lift on hover and settle on press (pointer devices only, so taps don't stick) */
  @media (hover: hover) {
    .button:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 26px rgba(158, 102, 48, 0.32);
    }
    .button:active {
      transform: none;
      box-shadow: 0 4px 10px rgba(158, 102, 48, 0.25);
      transition-duration: 0.08s;
    }
  }

  /* Browsers without scroll-driven animations just show the content. */
  @supports (animation-timeline: view()) {
    .section .wrap > * {
      animation: fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    /* Each fact rises in, and its honey bullet pops, as that item scrolls in: a natural stagger */
    .facts li {
      view-timeline: --fact block;
      animation: fade-up linear both;
      animation-timeline: --fact;
      animation-range: entry 25% cover 30%;
    }
    .facts li::before {
      animation: pop-in linear both;
      animation-timeline: --fact;
      animation-range: entry 35% cover 35%;
    }
  }
}

@media (min-width: 40rem) {
  .hero { padding: 5rem 0 5.5rem; }
  .section { padding: 4.125rem 0; }
  .facts { padding: 0.75rem 2rem; }
  .form { padding: 2.25rem 2.25rem 2rem; }
  .form .button { width: auto; justify-self: start; }
  .note { text-align: left; }
}

/* Desktop: the cake sits sticky beside the content instead of in a bar above it */
@media (min-width: 60rem) {
  .build {
    display: grid;
    grid-template-columns: minmax(0, 40rem) 17rem;
    column-gap: 3rem;
    justify-content: center;
    padding: 0 1.25rem;
  }
  .build-cake {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    top: max(1.5rem, calc(50vh - 6.5rem));
    height: auto;
    margin-top: 4.125rem;
    padding: 0;
    background: none;
  }
  .build-cake::after { content: none; }
  .build-content { grid-column: 1; grid-row: 1; }
  .bc { width: 100%; height: auto; }
}