/* applause.css — the payoff screen. Owned by S4.

   Every beat of the choreography is a @keyframes animation whose start time is
   an inline --d custom property written by js/applause.js, so the whole sequence
   retimes from G.config.ui.applauseMs and cancels the instant the DOM is torn
   down. Only transform and opacity are animated — nothing here touches layout,
   because this may run on an old iPad.

   Stacking order inside .apl:
     0  .apl__wash / .apl__glow   background bloom
     1  .apl__stage              pets
     2  .apl__msg / .apl__cheer  the message
     3  .apl__hearts             flying hearts (inside the stage)
     5  .apl__skip               the tap-anywhere-to-skip catcher
     6  .apl__cta                the continue button, above the catcher      */

/* ---- the screen itself -------------------------------------------------- */
/* Overrides .screen's reading padding and scroll; this one is a full-bleed
   stage. Id beats class, so no !important needed. */
#screen-applause {
  padding: 0;
  overflow: hidden;
}

.apl {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
  overflow: hidden;
}

/* ---- 0.0s — the warm wash blooms in ------------------------------------- */
.apl__wash {
  position: absolute;
  left: -10%; right: -10%; top: -10%; bottom: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 40%,
      #FFFDF2 0%,
      #FFF0CE 32%,
      rgba(255, 216, 190, 0.72) 58%,
      rgba(255, 246, 233, 0) 82%),
    linear-gradient(180deg, var(--c-bg-2) 0%, var(--c-bg) 70%);
  animation: apl-bloom 900ms var(--ease-pop) both;
}
@keyframes apl-bloom {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}

/* A slow, soft breathing halo behind the pets. Warm, not harsh. */
.apl__glow {
  position: absolute;
  z-index: 0;
  left: 50%; top: 42%;
  width: 86vmin; height: 86vmin;
  margin: -43vmin 0 0 -43vmin;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 240, 200, 0.55) 42%,
    rgba(255, 240, 200, 0) 70%);
  animation: apl-glow 2600ms ease-out 250ms both;
  opacity: 0;
}
@keyframes apl-glow {
  0%   { opacity: 0;   transform: scale(0.70); }
  40%  { opacity: 0.9; transform: scale(1.02); }
  100% { opacity: 0.55; transform: scale(1.1); }
}

/* ---- 0.3s — the pets bounce in ------------------------------------------ */
.apl__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  display: flex;
  justify-content: center;
}

.apl__pets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 6px 4px;
  margin: 0 auto;
}

/* The slot is the only static box: it carries the shallow arc, so the arc never
   fights with the entry or clap transforms. */
.apl__slot {
  position: relative;
  flex: 0 0 auto;
  transform: translateY(var(--arcY, 0px));
}

.apl__pop {
  position: relative;
  display: block;
  animation: apl-pop 620ms var(--ease-pop) both;
  animation-delay: var(--d, 0ms);
}
@keyframes apl-pop {
  from { opacity: 0; transform: translateY(96px) scale(0.66); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- 0.8s — they clap ---------------------------------------------------- */
/* G.pets.render(..., { mood: 'clap' }) does the paws; this adds the whole-body
   lift and lean that reads as applause from across the room. */
.apl__clap {
  display: block;
  transform-origin: 50% 92%;
  animation: apl-clap 520ms ease-in-out infinite;
  animation-delay: var(--d, 0ms);
}
@keyframes apl-clap {
  0%, 100% { transform: translateY(0)    rotate(-2.5deg); }
  50%      { transform: translateY(-7px) rotate(2.5deg); }
}

.apl__clap svg,
.apl__clap img {
  display: block;
  max-width: 100%;
}

/* Fallback when G.pets has not loaded — the screen still reads as pets. */
.apl__emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Small sparkle bursts either side of the paws. */
.apl__spark {
  position: absolute;
  top: 46%;
  font-size: 17px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  animation: apl-spark 980ms ease-out infinite;
  animation-delay: var(--d, 0ms);
}
.apl__spark--l { left: -6px; }
.apl__spark--r { right: -6px; top: 58%; }
@keyframes apl-spark {
  0%   { opacity: 0; transform: scale(0.3) rotate(0deg); }
  30%  { opacity: 1; transform: scale(1.15) rotate(14deg); }
  70%  { opacity: 0.7; transform: scale(0.95) rotate(28deg); }
  100% { opacity: 0; transform: scale(0.6) rotate(44deg); }
}

/* ---- 1.0s — the hearts fly ----------------------------------------------
   Three nested spans, same delay and duration on each, so the transforms
   compose into an arc instead of a straight line:
     .apl__hrise   translateY on a fast-out / floaty-at-the-top curve
     .apl__hdrift  translateX + rotate on a slow-in curve (the lean)
     .apl__hpop    the launch pop and the fade at the top
   The .apl__heart box is 48x48 and centred on its (left, top) point so the
   glyph launches from the middle of a pet, not from its corner.              */
.apl__hearts {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 3;
  pointer-events: none;
}

.apl__heart {
  position: absolute;
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  display: block;
}

.apl__hrise,
.apl__hdrift,
.apl__hpop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  animation-duration: var(--dur, 1500ms);
  animation-delay: var(--d, 0ms);
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

.apl__hrise {
  animation-name: apl-rise;
  /* fast out of the pet, then floaty as it slows near the top */
  animation-timing-function: cubic-bezier(0.11, 0.72, 0.26, 1);
}
@keyframes apl-rise {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--rise, -260px)); }
}

.apl__hdrift {
  animation-name: apl-drift;
  /* barely moves at first, then leans away — this is what makes it an arc */
  animation-timing-function: cubic-bezier(0.55, 0.02, 0.62, 0.75);
}
@keyframes apl-drift {
  from { transform: translateX(0) rotate(0deg); }
  to   { transform: translateX(var(--drift, 0px)) rotate(var(--rot, 0deg)); }
}

.apl__hpop {
  animation-name: apl-heartpop;
  animation-timing-function: ease-out;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55);
}
@keyframes apl-heartpop {
  0%   { opacity: 0; transform: scale(0.25); }
  10%  { opacity: 1; transform: scale(1.25); }
  20%  { opacity: 1; transform: scale(1); }
  75%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.82); }
}

/* ---- 1.6s — the message lands ------------------------------------------- */
.apl__msg {
  position: relative;
  z-index: 2;
  max-width: 560px;
  padding: 0 var(--sp-2);
  animation: apl-land 620ms var(--ease-pop) both;
  animation-delay: var(--d, 0ms);
}
@keyframes apl-land {
  from { opacity: 0; transform: translateY(28px) scale(0.84); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.apl__eyebrow {
  font-size: var(--fs-big);
  font-weight: 700;
  color: var(--c-ink-soft);
  letter-spacing: 0.01em;
}

.apl__title {
  font-size: var(--fs-huge);
  line-height: 1.1;
  margin: var(--sp-2) 0 var(--sp-3);
  color: var(--c-ink);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.apl__earn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  box-shadow: var(--shadow);
  color: var(--c-heart);
  font-size: var(--fs-big);
  font-weight: 700;
  animation: apl-earn 520ms var(--ease-pop) both;
  animation-delay: var(--d, 0ms);
}
@keyframes apl-earn {
  from { opacity: 0; transform: scale(0.4); }
  70%  { opacity: 1; transform: scale(1.14); }
  to   { opacity: 1; transform: scale(1); }
}
.apl__earn-i { font-size: 1.05em; }

.apl__cheer {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  color: var(--c-ink-soft);
  animation: apl-fade 480ms ease both;
  animation-delay: var(--d, 0ms);
}
@keyframes apl-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- 2.5s — the continue button ----------------------------------------- */
.apl__cta {
  position: relative;
  z-index: 6;                 /* above .apl__skip, so it gets its own taps */
  pointer-events: none;       /* ...but only once it is actually visible */
  animation: apl-land 560ms var(--ease-pop) both;
  animation-delay: var(--d, 0ms);
}
.apl__cta.is-on { pointer-events: auto; }

.apl__yay {
  animation: apl-breathe 2400ms ease-in-out 400ms infinite;
}
@keyframes apl-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}
.apl__yay:active { animation: none; }

/* ---- tap anywhere to skip ----------------------------------------------- */
.apl__skip {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 5;
  background: transparent;
  cursor: pointer;
}
.apl__skip:focus { outline: none; }

/* ---- the end state ------------------------------------------------------
   Added by JS on skip: every beat jumps to where it would have ended up, with
   one short fade so it does not feel like a glitch. The pets keep clapping. */
.apl.is-done .apl__wash,
.apl.is-done .apl__pop {
  animation: none;
  opacity: 1;
  transform: none;
}
.apl.is-done .apl__slot { transform: translateY(var(--arcY, 0px)); }
.apl.is-done .apl__hearts { display: none; }
.apl.is-done .apl__clap,
.apl.is-done .apl__spark { animation-delay: 0ms; }

.apl.is-done .apl__msg,
.apl.is-done .apl__earn,
.apl.is-done .apl__cheer,
.apl.is-done .apl__cta {
  animation: apl-fade 200ms ease both;
  animation-delay: 0ms;
  opacity: 1;
  transform: none;
}
.apl.is-done .apl__yay { animation: none; }

/* ---- short / landscape screens ------------------------------------------ */
@media (max-height: 560px) {
  .apl { gap: var(--sp-2); padding: var(--sp-3); }
  .apl__title { font-size: var(--fs-big); margin: var(--sp-1) 0 var(--sp-2); }
  .apl__eyebrow { font-size: var(--fs-body); }
  .apl__cheer { display: none; }
  .apl__yay { font-size: var(--fs-big); }
}

/* ---- reduced motion ------------------------------------------------------
   Same end state, one calm fade, nothing flying anywhere. tokens.css has a
   global rule; this scopes it properly for this screen. js/applause.js also
   skips building the flying hearts at all when this matches. */
@media (prefers-reduced-motion: reduce) {
  .apl__hearts { display: none !important; }
  .apl__glow {
    animation: none !important;
    opacity: 0.6 !important;
    transform: none !important;
  }
  .apl__wash,
  .apl__pop,
  .apl__clap,
  .apl__spark,
  .apl__msg,
  .apl__earn,
  .apl__cheer,
  .apl__cta,
  .apl__yay {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .apl__slot { transform: translateY(var(--arcY, 0px)) !important; }
  .apl__spark { opacity: 0.9 !important; }
  .apl { animation: apl-fade 220ms ease both; }
}