/* Super Yang Yang — shared "fun" animations for the home page and every game (used with /assets/fun.js) */

/* ---------- game toolbars: the title sits in a ribbon, truly centred ---------- */
.toolbar { position: relative; }
#levelTitle, #sceneTitle {
  display: inline-block; max-width: 100%; white-space: nowrap;   /* no overflow clipping: it cut the tops off the letters */
  padding: 3px 20px 4px; border-radius: 999px; line-height: 1.4;
  background: linear-gradient(180deg, #ff6a4a, #d8432b); color: #fff !important;
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: .3px;
  border: 3px solid #fff; box-shadow: 0 3px 0 #b3301c, 0 6px 14px rgba(120,40,0,.25);
  text-shadow: 0 2px 0 rgba(120,20,0,.35) !important;
  animation: ribbonIn .6s cubic-bezier(.3,1.6,.5,1) both;
}
@keyframes ribbonIn { from { transform: translateY(-30px) scale(.6); opacity: 0; } }
@media (min-width: 620px) {
  /* centre the title on the screen, whatever buttons sit either side */
  .toolbar .tb-title { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: max-content; max-width: 46vw; }
  .toolbar .tb-title + * { margin-left: auto; }
  .toolbar { min-height: 62px; }
  .toolbar:has(.moves-badge) { min-height: 88px; align-items: flex-start; }
  .toolbar:has(.dots) { min-height: 80px; align-items: flex-start; }
}

/* ---------- wavy titles (letters are wrapped by fun.js) ---------- */
.fun-wave .fw { display: inline-block; white-space: nowrap; }
.fun-wave .fl { display: inline-block; animation: letterIn .6s cubic-bezier(.3,1.7,.5,1) both, letterBob 2.8s ease-in-out infinite;
  animation-delay: calc(var(--n) * 45ms), calc(var(--n) * 90ms + .8s); }
@keyframes letterIn { from { transform: translateY(-40px) scale(.4) rotate(-20deg); opacity: 0; } }
@keyframes letterBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

/* ---------- things pop in as you scroll to them ---------- */
.fun-js .rv { opacity: 0; transform: translateY(26px) scale(.96); transition: opacity .6s ease, transform .7s cubic-bezier(.3,1.5,.5,1); transition-delay: var(--d, 0s); }
.fun-js .rv.in { opacity: 1; transform: none; }

/* ---------- hovers: things float up and glow (no shaking) ---------- */
@media (hover: hover) {
  .btn { transition: transform .3s cubic-bezier(.3,1.5,.5,1), box-shadow .3s, filter .3s; }
  .btn:hover { animation: none; transform: translateY(-4px) scale(1.05); filter: brightness(1.07); }
  .scene-card, .game-card, .book, .friend, .level { transition: transform .35s cubic-bezier(.3,1.5,.5,1), box-shadow .35s; }
  .scene-card:hover, .game-card:hover, .book:hover, .friend:hover, .level:hover {
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 18px 30px rgba(120,60,0,.2), 0 0 0 4px rgba(255,210,63,.6);
  }
  .game-feature a img { transition: transform .35s cubic-bezier(.3,1.5,.5,1), box-shadow .35s; }
  .game-feature a:hover img { transform: translateY(-6px); box-shadow: 0 14px 24px rgba(120,60,0,.22); }
  .family figure img { transition: scale .35s cubic-bezier(.3,1.5,.5,1), filter .35s; }
  .family figure:hover img { scale: 1.07; filter: drop-shadow(0 0 14px rgba(255,210,63,.9)); }
  .cast figure:hover span { transform: translateY(-6px) scale(1.12) !important; box-shadow: 0 0 0 3px #ffd23f, 0 8px 14px rgba(59,42,30,.25); }
}

/* family gently sways on the home page */
.family figure img { animation: sway 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.family figure:nth-child(2) img { animation-delay: -.7s; }
.family figure:nth-child(3) img { animation-delay: -1.4s; }
.family figure:nth-child(4) img { animation-delay: -2.1s; }
.family figure:nth-child(5) img { animation-delay: -2.8s; }
@keyframes sway { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }
/* play buttons breathe so kids spot them */
.nav-play, .hero-buttons .btn.yellow, .game-feature .btn, .start-btn { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.06); } }

/* ---------- tap sparkles ---------- */
.fun-tap { position: fixed; z-index: 90; width: 0; height: 0; pointer-events: none; }
.fun-tap b { position: absolute; left: -9px; top: -9px; font-size: 18px; line-height: 18px; color: var(--c); text-shadow: 0 0 6px #fff;
  animation: tapFly .7s ease-out forwards; }
@keyframes tapFly { from { transform: translate(0, 0) scale(.4); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(160deg); opacity: 0; } }

/* ---------- cheer text that pops up where you tapped ---------- */
.fun-cheer {
  position: fixed; z-index: 95; pointer-events: none; transform: translate(-50%, -50%);
  font: 900 clamp(1.4rem, 4vw, 2.2rem)/1 var(--font-display); color: #fff; white-space: nowrap;
  -webkit-text-stroke: 1.5px #d8432b; text-shadow: 0 3px 0 #d8432b, 0 6px 12px rgba(0,0,0,.25);
  animation: cheer 1.3s cubic-bezier(.3,1.6,.5,1) forwards;
}
@keyframes cheer { 0% { transform: translate(-50%, -50%) scale(.2) rotate(-12deg); opacity: 0; } 25% { transform: translate(-50%, -80%) scale(1.15) rotate(4deg); opacity: 1; }
  70% { transform: translate(-50%, -120%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -170%) scale(.9); opacity: 0; } }

/* ---------- full-screen star shower for wins ---------- */
.fun-shower { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.fun-shower b { position: absolute; top: -40px; left: var(--x); font-size: var(--s); color: var(--c); text-shadow: 0 0 8px rgba(255,255,255,.9);
  animation: fall var(--t) cubic-bezier(.3,.1,.6,1) forwards; animation-delay: var(--dl); }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(540deg); } }

/* devices set to "reduce motion" keep the gentle animations; only the full-screen star shower goes */
@media (prefers-reduced-motion: reduce) {
  .fun-shower { display: none; }
}
.tb-title > small { display: block; margin-top: 4px; }
.tb-title .dots { margin-top: 6px; }
@media (max-width: 619px) {
  /* phones: buttons on top, the title ribbon centred on its own row underneath */
  .toolbar { flex-wrap: wrap; row-gap: 4px; }
  .toolbar .tb-title { order: 9; flex: 1 0 100%; }
  .toolbar .tb-title + * { margin-left: auto; }
}