/* 06-celebrate · DESKTOP (1024 px and wider) · V3-CHEER-D · v3, 30 Sep
   Full-bleed deep blue: the app's moment screen made into a section. ONE real phone (the badge unlock recording)
   stands behind the big light hill, as the badge stands on the hill in the app. Three real share cards float in the
   sky beside it (a Story on the left, a week card and a badge card on the right), with one caption. On the hill,
   Mira says the no-streak promise (folded in from the old 08-progress). Slow confetti behind everything.
   Layers: confetti (0) < text, phone, cards (2) < hill (3). Nothing is drawn over the screen or over text.
   The section's only paddings are var(--section-y). */

#celebrate .v-desktop { background: var(--sky-1); }   /* the pale Lock Screen above shows round the deep sky's curved top */
#celebrate .v-desktop .cel {
  /* the phone: at least 300 px wide so its screen reads; grows with the window's width and height */
  --pw: 300px;   /* one phone size across the page (founder: "reduce the size little") */
  --ph: calc(var(--pw) * 2.1024);         /* the drawn iPhone's height for --w = --pw */
  --show: .80;                            /* the hill meets the screen just under "A hundred days. Every one of them counts." */
  --hill-d: calc(var(--pw) * 25);         /* the hill: a huge circle, like the app's */
  --gap: clamp(44px, 5vw, 96px);          /* phone → cards */
  /* the cards' unit: the phone's width, or less on narrow windows so the right-hand cards keep ≥ 40 px from the edge */
  --cu: min(var(--pw), calc(((100vw - var(--pw)) / 2 - var(--gap) - 44px) / .96));
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--deep);
  clip-path: ellipse(165% 100% at 50% 100%);   /* the top edge is a wide arc, like the app's hills: a soft horizon, not a hard seam */
}

/* ---------- the sky: the title, with a soft light behind the phone ---------- */
#celebrate .v-desktop .cel-sky {
  position: relative;
  padding-top: var(--section-y);
  background: radial-gradient(ellipse 46% 60% at 50% 86%, rgba(61, 143, 230, .30), rgba(61, 143, 230, 0) 72%);
}
#celebrate .v-desktop .cel-head { position: relative; z-index: 2; text-align: center; }
#celebrate .v-desktop .cel-title { font-size: clamp(48px, 4.2vw, 60px); line-height: 1.06; letter-spacing: -0.028em; white-space: nowrap; }
#celebrate .v-desktop .cel-title-b { color: var(--sun); }
#celebrate .v-desktop .cel-head .lede { max-width: 640px; margin: 18px auto 0; text-wrap: balance; }

/* ---------- the stage: one phone in the middle, cards either side ---------- */
#celebrate .v-desktop .cel-stage {
  position: relative; z-index: 2;
  height: calc(var(--ph) * var(--show));
  margin-top: 52px;
  /* the phone's lower part stands behind the hill and never shows: cut it a little below the hill line */
  clip-path: inset(-50vh -50vw calc(var(--pw) * -.2) -50vw);
}
#celebrate .v-desktop .cel-phone {
  --w: var(--pw);
  position: absolute; top: 0; left: 50%; z-index: 2;
  margin: 0 0 0 calc(var(--w) / -2);
}

/* entrance, only when motion is on: the phone springs up from behind the hill; the cards drift in after it */
.js #celebrate .v-desktop .cel-stage.reveal { opacity: 1; transform: none; }
#celebrate .v-desktop .cel-phone { transition: transform 1.25s var(--spring) .05s, translate .5s var(--spring); }
@media (prefers-reduced-motion: no-preference) {
  .js #celebrate .v-desktop .cel-stage:not(.in) .cel-phone { transform: translateY(calc(var(--ph) * .3)); }
  .js #celebrate .v-desktop .cel-stage:not(.in) .cel-card { opacity: 0; transform: translateY(40px); }
}
@media (hover: hover) {
  #celebrate .v-desktop .cel-stage.in .cel-phone:hover,
  html:not(.js) #celebrate .v-desktop .cel-phone:hover { translate: 0 -8px; }
}

/* ---------- the share cards: real exported pictures, never in phones; a gentle float, a small tilt ---------- */
#celebrate .v-desktop .cel-cards { position: absolute; top: 0; bottom: 0; z-index: 1; }
#celebrate .v-desktop .cel-cards-l { right: calc(50% + var(--pw) / 2 + var(--gap)); width: calc(var(--cu) * .66); }
#celebrate .v-desktop .cel-cards-r { left: calc(50% + var(--pw) / 2 + var(--gap)); width: calc(var(--cu) * .96); }

#celebrate .v-desktop .cel-card {
  position: absolute; display: block;
  border-radius: calc(var(--cu) * .05);
  background: var(--deep-bright);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), 0 30px 60px -24px rgba(0, 0, 0, .55), 0 12px 24px -12px rgba(0, 0, 0, .35);
  rotate: var(--tilt, 0deg);
  transition: opacity .9s var(--ease) var(--cd, 0s), transform .9s var(--ease) var(--cd, 0s), scale .45s var(--spring), box-shadow .45s var(--ease);
  animation: celebrate-d-float var(--fdur, 7s) ease-in-out var(--fdel, 0s) infinite alternate;
}
/* Story (1080 × 1920), a little lower than the phone's top, leaning in */
#celebrate .v-desktop .cel-story { width: 100%; top: calc(var(--cu) * .2); right: 0; --tilt: -4deg; --cd: .35s; --fdur: 7.5s; }
/* week (1080 × 1350) up high, badge (1080 × 1350) lower and further out; they never overlap */
#celebrate .v-desktop .cel-week { width: calc(var(--cu) * .6); top: calc(var(--cu) * .06); left: 0; --tilt: 4deg; --cd: .5s; --fdur: 6.5s; --fdel: -2s; }
#celebrate .v-desktop .cel-badge { width: calc(var(--cu) * .5); top: calc(var(--cu) * .9); left: calc(var(--cu) * .42); --tilt: -3deg; --cd: .62s; --fdur: 8s; --fdel: -4s; }
@keyframes celebrate-d-float { from { translate: 0 -5px; } to { translate: 0 6px; } }  /* translate: the rise-in owns transform */
@media (hover: hover) {
  #celebrate .v-desktop .cel-stage.in .cel-card:hover { scale: 1.035; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 70px -24px rgba(0, 0, 0, .6), 0 14px 28px -12px rgba(0, 0, 0, .38); }
}

/* the one caption, under the week card, beside the badge card */
#celebrate .v-desktop .cel-cap {
  position: absolute; left: 0; top: calc(var(--cu) * 1.02); width: calc(var(--cu) * .4);
  color: var(--deep-body); font-weight: 400; line-height: 1.4; text-wrap: balance;
  transition: opacity .9s var(--ease) .8s;
}
@media (prefers-reduced-motion: no-preference) {
  .js #celebrate .v-desktop .cel-stage:not(.in) .cel-cap { opacity: 0; }
}

/* ---------- confetti: small rounded pieces in the art's colours, falling slowly behind everything ---------- */
#celebrate .v-desktop .cel-confetti {
  position: absolute; z-index: 0;
  top: 0; left: 0; right: 0; bottom: -120px;
  overflow: hidden; pointer-events: none;
  /* calm clearings around the title + lede and around the card caption (sized by the js) */
  -webkit-mask-image:
    radial-gradient(ellipse var(--mw, 0px) var(--mh, 0px) at 50% var(--my, 0px), transparent 88%, #000 100%),
    radial-gradient(ellipse var(--cw, 0px) var(--ch, 0px) at var(--cx, 0px) var(--cy, 0px), transparent 80%, #000 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    radial-gradient(ellipse var(--mw, 0px) var(--mh, 0px) at 50% var(--my, 0px), transparent 88%, #000 100%),
    radial-gradient(ellipse var(--cw, 0px) var(--ch, 0px) at var(--cx, 0px) var(--cy, 0px), transparent 80%, #000 100%);
          mask-composite: intersect;
}
#celebrate .v-desktop .cel-confetti .cf {
  position: absolute; top: 0; left: var(--x); width: 0; height: 100%;
  transform: translateY(var(--y0));
  animation: celebrate-d-fall var(--dur) linear var(--delay) infinite;
}
#celebrate .v-desktop .cel-confetti .cf b {
  position: absolute; top: 0; left: 0; display: block;
  width: var(--bw); height: var(--bh); border-radius: var(--br);
  background: var(--c);
  transform: rotate(var(--rot));
  animation: celebrate-d-flutter var(--fl) ease-in-out var(--delay) infinite alternate;
}
@keyframes celebrate-d-fall {
  0% { transform: translateY(-3%); opacity: 0; }
  6% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 1; }
}
@keyframes celebrate-d-flutter {
  from { transform: translateX(calc(var(--sway) * -1)) rotate(var(--rot)) rotateX(0deg); }
  to { transform: translateX(var(--sway)) rotate(calc(var(--rot) + var(--spin))) rotateX(var(--flip)); }
}

/* the one-time burst when the badge lands: pops out from behind the phone, then drifts down */
#celebrate .v-desktop .cel-burst { position: absolute; inset: 0; }
#celebrate .v-desktop .cel-burst .cb { position: absolute; left: var(--ox, 50%); top: var(--oy, 50%); width: 0; height: 0; opacity: 0; }
#celebrate .v-desktop .cel-burst.go .cb { animation: celebrate-d-burst var(--bdur) var(--bdelay) both; }
#celebrate .v-desktop .cel-burst .cb b {
  position: absolute; display: block;
  left: calc(var(--bw) / -2); top: calc(var(--bh) / -2);
  width: var(--bw); height: var(--bh); border-radius: var(--br);
  background: var(--c);
  transform: rotate(var(--rot));
}
#celebrate .v-desktop .cel-burst.go .cb b { animation: celebrate-d-flutter var(--fl) ease-in-out infinite alternate; }
@keyframes celebrate-d-burst {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(.5); animation-timing-function: cubic-bezier(.12, .75, .3, 1); }
  42% { opacity: 1; transform: translate(var(--bx), var(--by)) rotate(calc(var(--bspin) * .6)) scale(1); animation-timing-function: cubic-bezier(.45, 0, .85, .55); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--bx) * 1.18), calc(var(--by) + var(--bfall))) rotate(var(--bspin)) scale(1); }
}

/* ---------- the hill, and Mira standing on it ---------- */
#celebrate .v-desktop .cel-ground {
  position: relative; z-index: 3;
  display: flow-root;
  padding-bottom: var(--section-y);
}
/* the hill, with a faint contact shadow where the phone stands in it; its light blue fades towards the journal's pale sky */
#celebrate .v-desktop .cel-ground::before {
  content: ""; position: absolute; z-index: -1; left: 50%; border-radius: 50%;
  top: 0; width: var(--hill-d); height: var(--hill-d); margin-left: calc(var(--hill-d) / -2);
  background:
    radial-gradient(ellipse calc(var(--pw) * .7) 22px at 50% 0, rgba(var(--deep-rgb), .24), rgba(var(--deep-rgb), 0)),
    linear-gradient(var(--hill) 0, var(--hill) 40px, var(--sky-0) 190px);
}
#celebrate .v-desktop .cel-mira { margin: 44px auto 0; gap: 14px; }
#celebrate .v-desktop .cel-mira .mira-hi-star { width: 88px; }
#celebrate .v-desktop .cel-mira .mira-hi-say { font-size: 19px; padding: 14px 20px; border-radius: 18px; max-width: none; }
#celebrate .v-desktop .cel-mira .mira-hi-say small {
  display: block; margin-top: 4px;
  font-size: 15px; font-weight: 400; color: var(--secondary);
}

/* ---------- reduced motion: nothing is hidden or moved; no float, no burst ---------- */
@media (prefers-reduced-motion: reduce) {
  #celebrate .v-desktop .cel-card { animation: none; }
  #celebrate .v-desktop .cel-burst { display: none; }
}

/* ==== ONE TYPE SCALE (founder 30 Sep: "in some places size is big, in some size is small"; the hero is the reference) ====
   Section h2 44/500/1.08/-0.03em at every desktop width · lede 19/350/1.5 in --body · in-section titles 26/500 · body and lists 17/350/1.5 (scaled down 30 Sep: "reduce the size little").
   Kept identical in every desktop section file; RT-LOOP-D. */
#celebrate .v-desktop .cel-title { font-size: 44px; font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; }
#celebrate .v-desktop .cel-head .lede { font-size: 19px; font-weight: 350; line-height: 1.5; }   /* on the deep sky it keeps --deep-body (the .on-deep lede colour) */
#celebrate .v-desktop .cel-mira .mira-hi-say { font-size: 17px; line-height: 1.4; }

/* 30 Sep (founder: "when page is scrolled this screen turns from white"): the phone screen is the app's deep blue from the
   first paint, and the poster loads with the page, so it never flashes white before the recording starts. */
#celebrate .screen:has(> video) { background: #0B3A8F; }
#celebrate .screen > video { background: #0B3A8F; }

/* ==== CUTE PASS (founder 30 Sep: "reduce the size little and make the entire site cute") · RT-LOOP-D ====
   Rounder shapes, the app's pastel tints instead of lines, tiny playful motion on the art (never under reduced motion). */
#celebrate .v-desktop .cel-mira .mira-hi-say { border-radius: 22px; }
@media (prefers-reduced-motion: no-preference) {
  #celebrate .v-desktop .cel-mira .mira-hi-star { animation: celebrate-d-bob 4.5s ease-in-out infinite alternate; transform-origin: 50% 90%; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #celebrate .v-desktop .cel-mira:hover .mira-hi-star { animation: celebrate-d-hop .6s var(--spring); }
}
@keyframes celebrate-d-bob { from { translate: 0 -3px; } to { translate: 0 3px; } }
@keyframes celebrate-d-hop { 35% { translate: 0 -8px; rotate: -6deg; } 70% { rotate: 4deg; } }