/* =====================================================================================================
   06-celebrate — MOBILE build (below 1024 px). Owner: V3-CHEER-M (v3, 30 Sep). Scoped to #celebrate .v-mobile.
   V3 "less phony, less info": ONE phone. The deep blue moment sky with slow confetti, the badge-unlock recording
   standing large on the app's light hill. On the hill below: Mira's one bubble with the no-streak promise (from the
   retired 08-progress), then three real share cards fanned out as images (no share-sheet phone), one caption line.
   Tablets (768+): the same composition, larger. Motion: slow confetti + one burst + the cards fanning out
   (reduced motion: base.css stops the fall and the transitions, js never starts the burst).
   ===================================================================================================== */

#celebrate .v-mobile .cm {
  --pw: clamp(224px, 68vw, 292px);           /* the video phone: big enough to read the badge screen */
  --crest: calc(var(--pw) * .62);            /* how far the hill rises behind the phone */
  --stage-top: 30px;
  --ch: clamp(196px, 58vw, 262px);           /* share card height (Story 9:16) */
  --g: max(var(--gutter), env(safe-area-inset-left));
  --gr: max(var(--gutter), env(safe-area-inset-right));
  position: relative;
  overflow: hidden;
  background: #fff;
}

/* ---------- the deep blue sky ---------- */
#celebrate .v-mobile .cm-sky {
  position: relative;
  z-index: 1;
  background: var(--deep);
  padding-top: var(--section-y);
}
#celebrate .v-mobile .cm-head {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 var(--gr) 0 var(--g);
}
#celebrate .v-mobile .cm-head .h2 { max-width: 12em; margin: 0 auto; }
#celebrate .v-mobile .cm-head .lede { max-width: 26ch; margin: 12px auto 0; text-wrap: balance; }

#celebrate .v-mobile .cm-stage {
  position: relative;
  padding-top: var(--stage-top);
  display: flex;
  justify-content: center;
  /* a soft pool of light behind the phone so the dark frame lifts off the deep blue */
  background: radial-gradient(closest-side, color-mix(in srgb, var(--deep-bright) 40%, transparent), transparent)
    50% 34% / calc(var(--pw) * 2.4) calc(var(--pw) * 2.3) no-repeat;
}

/* confetti: each <i> is a full-height lane that slides down; the <b> inside flutters.
   Reduced motion: base.css stops every animation, each piece rests at its --y (a still frame of the same fall). */
#celebrate .v-mobile .cm-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 34px);
}
#celebrate .v-mobile .cm-f {
  position: absolute;
  top: 0;
  left: var(--x);
  width: 0;
  height: 100%;
  transform: translate3d(0, var(--y, 30%), 0);
  animation: celebrate-m-fall var(--t, 12s) linear var(--dl, 0s) infinite;
  will-change: transform;
}
#celebrate .v-mobile .cm-f-t { display: none; }
#celebrate .v-mobile .cm-fx b { position: absolute; display: block; background: var(--c); }
#celebrate .v-mobile .cm-f > b {
  top: -20px;
  left: -5px;
  animation: celebrate-m-flutter var(--ft, 2.6s) ease-in-out infinite alternate;
}
#celebrate .v-mobile .cm-c { width: 10px; height: 10px; border-radius: 50%; }
#celebrate .v-mobile .cm-p { width: 7px; height: 17px; border-radius: 3.5px; }
#celebrate .v-mobile .cm-r { width: 6px; height: 9px; border-radius: 1.5px; }
#celebrate .v-mobile .cm-s {
  width: 15px;
  height: 15px;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
#celebrate .v-mobile .cm-f > b.cm-s { animation-name: celebrate-m-twinkle; }

/* the burst starts behind the phone at the height of the badge on its screen */
#celebrate .v-mobile .cm-burst {
  position: absolute;
  left: 50%;
  top: calc(var(--stage-top) + var(--pw) * .98);
  width: 0;
  height: 0;
}
#celebrate .v-mobile .cm-burst > b { left: -5px; top: -5px; opacity: 0; }
#celebrate .v-mobile .cm-stage.is-live .cm-burst > b { animation: celebrate-m-burst 1.9s var(--bd, 0s) both; }
@keyframes celebrate-m-burst {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.5); animation-timing-function: cubic-bezier(.12, .75, .3, 1); }
  10% { opacity: 1; }
  50% { opacity: 1; transform: translate(calc(var(--bx) * var(--k, 1)), calc(var(--by) * var(--k, 1))) rotate(calc(var(--br, 220deg) * .6)) scale(1); animation-timing-function: cubic-bezier(.45, 0, .8, .5); }
  100% { opacity: 0; transform: translate(calc(var(--bx) * var(--k, 1) * 1.12), calc(var(--by) * var(--k, 1) + 110px)) rotate(var(--br, 220deg)) scale(.9); }
}
@keyframes celebrate-m-fall {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  7% { opacity: 1; }
  100% { transform: translate3d(0, 100%, 0); opacity: 1; }
}
@keyframes celebrate-m-flutter {
  from { transform: translateX(-9px) rotate(-25deg) rotateY(0deg); }
  to { transform: translateX(9px) rotate(40deg) rotateY(180deg); }
}
@keyframes celebrate-m-twinkle {
  from { transform: translateX(-6px) rotate(0deg) scale(.75); }
  to { transform: translateX(6px) rotate(45deg) scale(1.1); }
}

/* the light hill: a slice of a wide ellipse like the app's moment screens, lit along its crest */
#celebrate .v-mobile .cm-hill {
  position: absolute;
  z-index: 1;
  left: -34%;
  width: 168%;
  bottom: -2px;
  height: calc(var(--crest) + 2px);
  background: linear-gradient(180deg, var(--deep-body) 0, var(--hill) calc(var(--crest) * .7));
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55);
}

/* ---------- the one phone, standing on the hill ---------- */
#celebrate .v-mobile .cm-slot { position: relative; z-index: 2; }
#celebrate .v-mobile .cm-phone {
  --w: var(--pw);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .07),
    0 40px 70px -30px rgba(0, 0, 0, .55),
    0 22px 40px -18px rgba(var(--deep-rgb), .75);
}
/* contact shadow where the phone stands on the hill */
#celebrate .v-mobile .cm-slot::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -18px;
  width: 112%;
  height: 44px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(var(--deep-rgb), .5), rgba(var(--deep-rgb), 0)) 50% 42% / 76% 46% no-repeat,
    radial-gradient(closest-side, rgba(var(--deep-rgb), .22), rgba(var(--deep-rgb), 0));
  pointer-events: none;
}

/* ---------- on the hill: Mira's promise, then the share cards; the hill fades to white ---------- */
#celebrate .v-mobile .cm-ground {
  position: relative;
  z-index: 0;
  padding: 36px var(--gr) var(--section-y) var(--g);
  background: linear-gradient(180deg, var(--hill) 0, var(--hill) 34%, var(--sky-0) 100%);   /* RT-LOOP-M: ends on #journal's first colour, no seam */
}
#celebrate .v-mobile .cm-mira { margin: 0 auto 26px; }
#celebrate .v-mobile .cm-mira .mira-hi-say { font-size: 16px; }

/* three real share cards, fanned like a hand of cards: the 13-days Story card in front, the week and badge Post cards behind it
   (V3 lead: no card shared with #goals, so no water / meditate / read / save cards here) */
#celebrate .v-mobile .cm-share { margin: 0; text-align: center; }
#celebrate .v-mobile .cm-fan {
  --cw: calc(var(--ch) * .5625);
  position: relative;
  height: calc(var(--ch) + 18px);
  margin: 0 auto;
}
#celebrate .v-mobile .cm-card {
  position: absolute;
  left: 50%;
  top: 6px;
  display: block;
  width: var(--cw);
  height: auto;
  aspect-ratio: 1080 / 1920;
  border-radius: calc(var(--cw) * .085);
  border: 1px solid rgba(15, 26, 43, .08);
  background: var(--tint);
  box-shadow: 0 1px 2px rgba(15, 26, 43, .08), 0 20px 34px -18px rgba(var(--deep-rgb), .45);
  transform-origin: 50% 92%;
  transform: translateX(-50%);
  transition: transform .9s var(--spring) .35s;
}
#celebrate .v-mobile .cm-card-c { z-index: 2; }
/* RT-LOOP-M: the two side cards are Post cards (4:5), a touch wider, centred on the Story card's height */
#celebrate .v-mobile .cm-card-l,
#celebrate .v-mobile .cm-card-r { width: calc(var(--cw) * 1.1); aspect-ratio: 1080 / 1350; top: calc(6px + (var(--ch) - var(--cw) * 1.375) / 2); }
#celebrate .v-mobile .cm-card-l,
#celebrate .v-mobile .cm-card-r { z-index: 1; transform: translateX(-50%) scale(.9); }
#celebrate .v-mobile .cm-share.in .cm-card-l { transform: translateX(calc(-50% - var(--cw) * .7)) rotate(-8deg) scale(.9); }
#celebrate .v-mobile .cm-share.in .cm-card-r { transform: translateX(calc(-50% + var(--cw) * .7)) rotate(8deg) scale(.9); }
#celebrate .v-mobile .cm-cap {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--secondary);
}

/* no JS: the cards are fanned from the start */
html:not(.js) #celebrate .v-mobile .cm-card-l { transform: translateX(calc(-50% - var(--cw) * .7)) rotate(-8deg) scale(.9); }
html:not(.js) #celebrate .v-mobile .cm-card-r { transform: translateX(calc(-50% + var(--cw) * .7)) rotate(8deg) scale(.9); }

/* ---------- the smallest phones (320–359): the fanned cards keep clear of the edges ---------- */
@media (max-width: 359.98px) {
  #celebrate .v-mobile .cm { --ch: 180px; }
}

/* ---------- 480–767: a roomier stage ---------- */
@media (min-width: 480px) {
  #celebrate .v-mobile .cm { --pw: clamp(292px, 54vw, 320px); --ch: clamp(262px, 48vw, 300px); }
  #celebrate .v-mobile .cm-burst { --k: 1.2; }
}

/* ---------- tablets 768–1023: the same composition, larger, with more confetti ---------- */
@media (min-width: 768px) {
  #celebrate .v-mobile .cm {
    --pw: clamp(280px, min(38vw, calc((100vh - 190px) / 2.17)), 360px);   /* RT-LOOP-M: the whole phone fits the screen */
    --crest: calc(var(--pw) * .6);
    --stage-top: 36px;
    --ch: clamp(270px, 30vw, 300px);
  }
  #celebrate .v-mobile .cm-burst { --k: 1.5; }
  #celebrate .v-mobile .cm-head .lede { max-width: 34ch; margin-top: 16px; }
  #celebrate .v-mobile .cm-stage { background-size: calc(var(--pw) * 3.6) calc(var(--pw) * 2.4); }
  #celebrate .v-mobile .cm-f-t { display: block; }
  #celebrate .v-mobile .cm-hill { left: -14%; width: 128%; }
  #celebrate .v-mobile .cm-ground { padding-top: 52px; }
  #celebrate .v-mobile .cm-mira { margin-bottom: 40px; }
  #celebrate .v-mobile .cm-mira .mira-hi-star { width: 70px; }
  #celebrate .v-mobile .cm-mira .mira-hi-say { font-size: 17px; padding: 10px 18px; }
  #celebrate .v-mobile .cm-share.in .cm-card-l { transform: translateX(calc(-50% - var(--cw) * .82)) rotate(-7deg) scale(.9); }
  #celebrate .v-mobile .cm-share.in .cm-card-r { transform: translateX(calc(-50% + var(--cw) * .82)) rotate(7deg) scale(.9); }
}

/* phones turned sideways: keep the phone shorter than the screen */
@media (orientation: landscape) and (max-height: 560px) {
  #celebrate .v-mobile .cm { --pw: clamp(170px, 40vh, 220px); --ch: clamp(200px, 56vh, 260px); }
}

@media (prefers-reduced-motion: reduce) {
  #celebrate .v-mobile .cm-card { transition: none; }
}

/* ---- RT-LOOP-M · ONE TYPE SCALE (founder 30 Sep; the hero is the reference): h2 30/1.1/-0.025em (28 under 360,
   40 on tablets) · lede 17/1.5/350 (19 on tablets) · labels 14/600 accent · in-section titles 22 · body 16–17 ---- */
#celebrate .v-mobile .cm-head .h2 { font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; }
#celebrate .v-mobile .cm-head .lede { font-size: 17px; line-height: 1.5; font-weight: 350; }
@media (max-width: 359.98px) { #celebrate .v-mobile .cm-head .h2 { font-size: 28px; } }
@media (min-width: 768px) { #celebrate .v-mobile .cm-head .h2 { font-size: 40px; } #celebrate .v-mobile .cm-head .lede { font-size: 19px; } }
#celebrate .v-mobile .cm-cap { font-size: 16px; }

/* 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; }

/* ---- RT-LOOP-M · cute pass: the phone and the share cards ~15% smaller, the hill a little tighter, so the section
   stays near 1.5 screens; the bubble is rounder ---- */
#celebrate .v-mobile .cm { --pw: clamp(206px, 60vw, 256px); --ch: clamp(160px, 50vw, 222px); }
#celebrate .v-mobile .cm-ground { padding-top: 28px; }
#celebrate .v-mobile .cm-mira { margin-bottom: 20px; }
#celebrate .v-mobile .cm-mira .mira-hi-say { border-radius: 20px; }
#celebrate .v-mobile .cm-cap { margin-top: 14px; }
@media (min-width: 480px) { #celebrate .v-mobile .cm { --pw: clamp(256px, 48vw, 290px); --ch: clamp(222px, 42vw, 260px); } }
@media (min-width: 768px) {
  #celebrate .v-mobile .cm { --pw: clamp(260px, min(34vw, calc((100vh - 200px) / 2.17)), 320px); --ch: clamp(240px, 27vw, 270px); }
  #celebrate .v-mobile .cm-ground { padding-top: 40px; }
}