/* ==========================================================================
   Drop Bears — v2 scene layer
   Joel's note: "very ai like, no animation, no WARDOGS ref".
   This kills the stat-rail / four-up-facts / 01-02-03-steps formula and
   replaces it with three devices built out of the game's own mechanics,
   all of which move.
   ========================================================================== */

/* ------------------------------------------------ THE DROP (core motion) -- */
/* A drop bear drops. Everything on this site arrives from above. */

@keyframes db-drop-in {
  from { opacity: 0; transform: translateY(-64px) rotate(-2.4deg); }
  to   { opacity: var(--art-op, 1); transform: translateY(0) rotate(0deg); }
}
@keyframes db-sway {
  0%, 100% { transform: rotate(-0.7deg) translateY(0); }
  50%      { transform: rotate(0.7deg) translateY(6px); }
}
@keyframes db-lens-wake {
  0%   { opacity: .15; }
  18%  { opacity: 1; }
  26%  { opacity: .3; }
  38%  { opacity: 1; }
  100% { opacity: 1; }
}

.hero__art--bear {
  --art-op: .72;
  transform-origin: 62% 0%;
  animation: db-drop-in 1100ms cubic-bezier(.17,.84,.44,1) both,
             db-sway 7.5s ease-in-out 1100ms infinite;
}
@media (min-width: 760px)  { .hero__art--bear { --art-op: .78; } }
@media (min-width: 1100px) { .hero__art--bear { --art-op: .92; } }

/* headline drops word by word */
.drop-word { display: inline-block; }
.js .drop-word {
  opacity: 0;
  transform: translateY(-40px);
  animation: db-word 760ms cubic-bezier(.17,.84,.44,1) forwards;
  animation-delay: calc(var(--i) * 85ms + 200ms);
}
@keyframes db-word { to { opacity: 1; transform: none; } }


/* ------------------------------------------------------ reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  .hero__art--bear,
  .js .drop-word,
  .canopy.in::before {
    animation: none !important;
  }
  .hero__art--bear { opacity: var(--art-op); transform: none; }
  .js .drop-word   { opacity: 1; transform: none; }
  .canopy::before  { opacity: 1; }
  .canopy::after   { transform: scaleX(1); transition: none; }
}

/* ------------------------------------------------------------- THE DROP -- */
/* Joel: the bear should actually drop. The headline lands first, then after a
   beat it falls in from above, overshoots, settles, and stays. */

@keyframes db-fall {
  0%   { opacity: 0; transform: translateY(-125%) rotate(-7deg); }
  12%  { opacity: 1; }
  46%  { transform: translateY(3.5%) rotate(2.4deg); }     /* lands past rest */
  62%  { transform: translateY(-4.5%) rotate(-1.6deg); }   /* rebound */
  76%  { transform: translateY(1.8%) rotate(.9deg); }
  88%  { transform: translateY(-.6%) rotate(-.35deg); }
  100% { opacity: var(--art-op, 1); transform: translateY(0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .poster__bear,
  .poster__mascot { animation: none; opacity: var(--art-op); transform: none; }
}