/* Cherry On Top: coming soon page.
   Layout: the striped gift box sits alone in the middle of the screen. The page is pinned while you
   scroll down a tall track, and the scrolling shakes the box until it bursts: the words fly out of it
   and land above and below it, and her goodies float all around. On phones held sideways the words
   land either side of the box instead. */
:root {
  color-scheme: light;
  /* brand palette, sampled from her Instagram */
  --paper: #FAF4E6;
  --cream: #FCF9F4;
  --cream-2: #F4F1DE;
  --blush: #EAC6CB;
  --blush-deep: #DDA9B2;
  --rose: #E8ADA0;
  --dusty: #DDB0A0;
  --marigold: #F0BD6D;
  --butter: #F7E3AD;
  --gold: #C9AD65;
  --powder: #AAC8D2;
  --powder-deep: #8DB0BD;
  --powder-light: #D5E5EA;
  --sage: #B2B78F;
  --sage-deep: #959B6E;
  --cocoa: #2D2221;
  --cocoa-soft: #6E5754;
  /* art-only tints */
  --glass: #EEF3F1;
  --milk: #F2D4D6;
  --matcha: #AAB56F;
  --matcha-foam: #CDD49B;
  --tan: #DCC28F;
  --elephant: #BDC8CE;
  --box-inner: #C9959C;

  --font-script: "Princess Sofia", "Snell Roundhand", "Apple Chancery", cursive;
  --font-body: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;

  --gutter: max(16px, 4vw);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
html { height: 100%; overscroll-behavior-y: none; }
body {
  min-height: 100%;
  background-color: var(--paper);
  /* paper grain + faint gold twinkles */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' fill='%23C9AD65' fill-opacity='.38'%3E%3Cpath d='M60 40c1.2 4.4 2.6 5.8 7 7-4.4 1.2-5.8 2.6-7 7-1.2-4.4-2.6-5.8-7-7 4.4-1.2 5.8-2.6 7-7z'/%3E%3Ccircle cx='80' cy='62' r='1.6'/%3E%3Cpath d='M300 120c.9 3.3 2 4.4 5.3 5.3-3.3.9-4.4 2-5.3 5.3-.9-3.3-2-4.4-5.3-5.3 3.3-.9 4.4-2 5.3-5.3z'/%3E%3Ccircle cx='318' cy='108' r='1.3'/%3E%3Cpath d='M180 300c1 3.8 2.3 5 6 6-3.7 1-5 2.3-6 6-1-3.7-2.3-5-6-6 3.7-1 5-2.2 6-6z'/%3E%3Ccircle cx='160' cy='316' r='1.5'/%3E%3Ccircle cx='390' cy='360' r='1.4'/%3E%3Ccircle cx='24' cy='250' r='1.2'/%3E%3C/svg%3E");
  color: var(--cocoa);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* how much scrolling it takes to burst the box; the page itself stays pinned */
.scroll-track { position: relative; height: 270vh; height: 270svh; }
.page {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-inline: var(--gutter);
  padding-block: max(14px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

/* ---------- header ---------- */
.top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.badge {
  display: block;
  width: clamp(54px, 7vw, 72px);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--blush), 0 0 0 3.5px var(--cocoa), 3px 4px 0 3px rgba(45, 34, 33, 0.12);
  transition: transform 0.25s ease;
}
.badge:hover { transform: rotate(-6deg) scale(1.04); }
.badge img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.ig-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  color: var(--cocoa);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  background: color-mix(in srgb, var(--cream) 80%, transparent);
  border: 1.5px solid var(--cocoa);
}
.ig-link svg { width: 20px; height: 20px; flex: none; }
.ig-link:hover { background: var(--cream); }

/* ---------- hero: the words above and below the box ---------- */
.hero {
  position: relative;
  z-index: 2;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(6px, 2svh, 24px) clamp(6px, 1.6svh, 18px);
}
/* while the words are flying they pass in front of the box */
.page.flying .hero { z-index: 4; pointer-events: none; }
.eyebrow {
  margin: 0 0 2px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw + 10px, 30px);
  line-height: 1.1;
  color: var(--cocoa-soft);
}
.title {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  font-weight: 400;
}
.title-text {
  font-family: var(--font-script);
  font-size: clamp(48px, min(10vw, 11svh), 104px);
  line-height: 1.1;
  color: var(--rose);
  text-wrap: balance;
}
.lettering { display: none; width: min(100%, 36rem, 64svh); height: auto; overflow: visible; }
.lettering-ready .title-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.lettering-ready .lettering { display: block; }
.lettering .u { fill: none; stroke: var(--cocoa); stroke-linejoin: round; stroke-linecap: round; }
.lettering .o { fill: var(--blush); stroke: var(--blush); stroke-linejoin: round; stroke-linecap: round; }
/* the gap the box settles into; the box itself is drawn on the stage */
.box-slot { flex: 1 1 0; width: 100%; min-height: 130px; }
.lede {
  margin: 0;
  max-width: min(100%, 34rem);
  font-size: clamp(16px, 0.5vw + 14px, 19px);
  color: var(--cocoa);
  text-wrap: pretty;
}
.ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}
/* until the script takes over, the words wait inside the box (and turn up anyway if it never does) */
.js .fly { opacity: 0; animation: fly-fallback 0.5s ease 3s forwards; }
.js.ready .fly { opacity: 1; animation: none; }
.js.ready .packed .fly { opacity: 0; pointer-events: none; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 2px solid var(--cocoa);
  color: var(--cocoa);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 3px 4px 0 var(--cocoa);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translate(-1px, -2px) rotate(-1.5deg); box-shadow: 4px 6px 0 var(--cocoa); }
.btn:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--cocoa); }
.btn-primary { background: var(--rose); }
.btn-secondary { background: var(--cream); }
.btn svg { width: 20px; height: 20px; flex: none; }
a:focus-visible, button:focus-visible {
  outline: 3px dashed var(--cocoa);
  outline-offset: 4px;
}

.foot {
  position: relative;
  z-index: 2;
  margin: 0;
  padding-top: 6px;
  text-align: center;
  font-size: 13px;
  color: var(--cocoa-soft);
}

/* ---------- the stage: box, goodies, sparkles ---------- */
.stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.box-art {
  position: absolute;
  left: 0; top: 0;
  z-index: 2;
  transform-origin: 50% 96%;
  will-change: transform;
}
.box-art > svg, .lid, .lid-bob, .lid-bob > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lid { transform-origin: 50% 50%; will-change: transform; }
.box-art .shake { opacity: 0; transition: opacity 0.15s; }
.box-art.shaking .shake { opacity: 1; }
.box-art .whoosh { opacity: 0; transition: opacity 0.3s 0.2s; }
.box-art.open .whoosh { opacity: 1; }
.box-art .tissue { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.box-art.open .tissue { transform: scaleY(1); }
.box-art .twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 2.6s ease-in-out infinite; }
.box-art .twinkle:nth-of-type(2n) { animation-delay: -1.3s; }
.box-art.open .lid-bob { animation: bob 3.8s ease-in-out infinite; }

.box-hit {
  position: absolute;
  z-index: 4;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 18px;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.goodie {
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.goodie[hidden] { display: none; }
.goodie.out { z-index: 4; }
.goodie.dragging { z-index: 6; cursor: grabbing; }
.goodie svg { display: block; width: 100%; height: 100%; overflow: visible; }

.hint {
  position: absolute;
  z-index: 4;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(20px, 1.4vw + 12px, 26px);
  line-height: 1;
  color: var(--cocoa);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.hint.show { opacity: 1; transform: none; animation: nudge 2.4s ease-in-out 0.5s infinite; }

.cue {
  position: absolute;
  z-index: 4;
  left: 0; top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  transform: translate(-50%, -100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.cue.show { opacity: 1; }
.cue-line {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(22px, 1.2vw + 14px, 28px);
  line-height: 1;
  color: var(--cocoa);
  white-space: nowrap;
}
.cue-text { display: inline-block; }
.cue-arrow { width: 16px; height: 22px; flex: none; animation: cue-bob 1.3s ease-in-out infinite; }
.cue-meter {
  display: block;
  width: 116px;
  height: 12px;
  border: 2px solid var(--cocoa);
  border-radius: 999px;
  background: var(--cream);
  box-shadow: 2px 2px 0 var(--cocoa);
  overflow: hidden;
}
.cue-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: repeating-linear-gradient(-45deg, var(--blush) 0 5px, var(--rose) 5px 10px);
}
.foot { transition: opacity 0.4s ease; }
.hint svg { width: 44px; height: 30px; overflow: visible; }
.hint.flip { flex-direction: row-reverse; }
.hint.flip svg { transform: scaleX(-1); }

@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-7px) rotate(1.2deg); } }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.6); } }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 4px -3px; } }
@keyframes cue-bob { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }
@keyframes fly-fallback { to { opacity: 1; } }

/* ---------- wide screens: a little more scrolling to burst it ---------- */
@media (min-width: 760px) and (min-aspect-ratio: 5/4) {
  .scroll-track { height: 290vh; height: 290svh; }
}

/* ---------- short laptop screens: tighten up so the box keeps a good size ---------- */
@media (min-width: 760px) and (max-height: 760px) {
  .badge { width: 58px; }
  .hero { padding-block: 4px 8px; }
  .eyebrow { font-size: 24px; }
  .lede { font-size: 17px; line-height: 1.5; }
  .ctas { margin-top: 10px; }
  .btn { min-height: 44px; padding-block: 8px; }
}

/* ---------- small phones ---------- */
@media (max-height: 700px) and (max-width: 759px) {
  .hero { padding-block: 4px 6px; }
  .eyebrow { font-size: 21px; }
  .lede { font-size: 15px; line-height: 1.45; }
  .ctas { margin-top: 10px; }
  .btn { min-height: 44px; padding-block: 8px; }
}

/* ---------- phones on their side: the words land either side of the box ---------- */
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
  .page { padding-block: max(8px, env(safe-area-inset-top, 0px)) max(6px, env(safe-area-inset-bottom, 0px)); }
  .badge { width: 46px; }
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(120px, min(24vw, 46svh), 220px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
    grid-template-areas: ". slot ." "eyebrow slot lede" "title slot ctas" ". slot .";
    column-gap: 3vw;
    align-items: start;
    padding-block: 0;
  }
  .eyebrow { grid-area: eyebrow; align-self: end; justify-self: end; text-align: right; font-size: 20px; margin: 0; }
  .title { grid-area: title; justify-content: flex-end; }
  .title-text { font-size: 44px; }
  .lettering { width: min(100%, 22rem); }
  .box-slot { grid-area: slot; align-self: stretch; min-height: 0; }
  .lede { grid-area: lede; align-self: end; justify-self: start; text-align: left; font-size: 14px; line-height: 1.4; }
  .ctas { grid-area: ctas; justify-self: start; justify-content: flex-start; margin-top: 8px; }
  .btn { min-height: 40px; padding: 6px 14px; font-size: 14px; }
  .foot { font-size: 12px; padding-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .box-art.open .lid-bob, .box-art .twinkle, .hint.show { animation: none; }
  .btn, .badge { transition: none; }
  /* no scroll-to-burst: the box is simply open */
  .scroll-track { height: auto; }
  .page { position: relative; height: auto; min-height: 100vh; min-height: 100svh; }
  .cue { display: none; }
}

.lettering .star { fill: var(--marigold); stroke: var(--cocoa); stroke-width: 2.2px; stroke-linejoin: round; }
.lettering .spark { fill: var(--gold); }