/* shake.css — the "kocok" (shake can) scene, v2.
   Choreography: ramping shake (soft → med → hard) → can tips → paper launches
   in a spinning arc → unrolls → golden glow reveal. */

.shake-stage {
  position: relative;
  height: 400px;
  max-width: 440px;
  margin: 1.5rem auto;
}

/* ------------------------------- the can -------------------------------- */

.shake-grip {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 132px;
  transform-origin: 50% 85%;
  transition: transform 0.3s cubic-bezier(0.4, 1.6, 0.6, 1);
}

/* Ramping shake intensity — soft, medium, violent. */
.shake-stage.shake-soft .shake-grip { animation: canSoft 0.30s linear infinite; }
.shake-stage.shake-med  .shake-grip { animation: canMed  0.20s linear infinite; }
.shake-stage.shake-hard .shake-grip { animation: canHard 0.13s linear infinite; }

@keyframes canSoft {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25%      { transform: translateX(-50%) translate(-2px, -2px) rotate(-3deg); }
  75%      { transform: translateX(-50%) translate(2px, -1px) rotate(3deg); }
}

@keyframes canMed {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25%      { transform: translateX(-52%) translateY(-4px) rotate(-8deg); }
  50%      { transform: translateX(-48%) translateY(-6px) rotate(7deg); }
  75%      { transform: translateX(-51%) translateY(-3px) rotate(-5deg); }
}

@keyframes canHard {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  20%      { transform: translateX(-55%) translateY(-8px) rotate(-14deg); }
  45%      { transform: translateX(-45%) translateY(-11px) rotate(13deg); }
  70%      { transform: translateX(-53%) translateY(-6px) rotate(-10deg); }
  90%      { transform: translateX(-47%) translateY(-9px) rotate(9deg); }
}

/* The can tips over to let the paper out. */
.shake-stage.tipped .shake-grip {
  transform: translateX(-50%) rotate(-28deg) translateY(-6px);
}

/* ---------------------- easter egg: the runaway can ---------------------- */

/* The grip (with the hand) freezes; the CAN alone makes a break for it. */
.shake-stage.escaped .shake-grip { animation: none; }

.shake-stage.escaped .shake-can {
  animation: canEscape 2.3s cubic-bezier(0.35, 0.1, 0.4, 1) forwards;
}

/* Bounce moments (used for the clang sfx): ~0.35s, 0.85s, 1.35s, 1.85s. */
@keyframes canEscape {
  0%   { transform: translate(0, 0) rotate(0deg); }
  15%  { transform: translate(90px, -150px) rotate(160deg); }     /* launched! */
  22%  { transform: translate(130px, -90px) rotate(230deg); }     /* wall bounce */
  37%  { transform: translate(20px, -170px) rotate(380deg); }
  44%  { transform: translate(-70px, -100px) rotate(450deg); }    /* bounce */
  59%  { transform: translate(-140px, -30px) rotate(590deg); }    /* other wall */
  66%  { transform: translate(-100px, 40px) rotate(650deg); }
  80%  { transform: translate(-40px, 90px) rotate(740deg); }      /* floor hop */
  90%  { transform: translate(-95px, 108px) rotate(785deg); }
  100% { transform: translate(-110px, 112px) rotate(805deg); }    /* dead. on its side. */
}

/* The hand's emoji is swapped by JS (✋ → 😱 → 🤦); give it a little life. */
.shake-stage.escaped .shake-hand {
  animation: handPanic 0.5s ease infinite alternate;
}

@keyframes handPanic {
  from { transform: rotate(-24deg) translateY(0); }
  to   { transform: rotate(-10deg) translateY(-6px); }
}

/* When the can ran away, the paper crawls out of it on the floor instead. */
.shake-stage.escaped .shake-paper.eject {
  animation: paperLaunchFloor 0.95s cubic-bezier(0.25, 0.9, 0.35, 1) forwards;
}

@keyframes paperLaunchFloor {
  0% {
    opacity: 0;
    transform: translateX(-50%) translate(-140px, 160px) scale(0.45) rotate(0deg);
  }
  12% { opacity: 1; }
  45% {
    transform: translateX(-50%) translate(-40px, -60px) scale(1.08) rotate(430deg);
  }
  72% {
    transform: translateX(-50%) translate(8px, -14px) scale(1.02) rotate(640deg);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translate(0, 0) scale(1) rotate(720deg);
  }
}

.shake-can {
  position: relative;
  width: 132px;
  height: 186px;
  border-radius: 16px / 12px;
  background: linear-gradient(90deg, #6f7c93 0%, #e6edf5 32%, #aeb9cc 55%, #5f6b82 100%);
  box-shadow: inset -8px 0 14px rgba(0, 0, 0, 0.3), inset 8px 0 12px rgba(255, 255, 255, 0.35),
              0 12px 24px rgba(0, 0, 0, 0.4);
}

.shake-can::before {
  content: '';
  position: absolute;
  top: -9px; left: 0; right: 0;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(90deg, #9aa6bc, #eef2f8 40%, #b6c1d3);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.6);
}

.can-band {
  position: absolute;
  top: 64px; left: 0; right: 0;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-gradient);
  color: #0a0e27;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  letter-spacing: 3px;
  font-size: 1rem;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.shake-hand {
  position: absolute;
  right: -34px;
  bottom: 8px;
  font-size: 72px;
  transform: rotate(-18deg);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}

/* ------------------------------ the paper -------------------------------- */

.shake-paper {
  position: absolute;
  top: 44px;
  left: 50%;
  opacity: 0;
  transform: translateX(-50%);
  z-index: 5;
}

/* Launch: fly out of the can in a spinning arc, then settle centre-stage. */
.shake-paper.eject {
  animation: paperLaunch 0.95s cubic-bezier(0.25, 0.9, 0.35, 1) forwards;
}

@keyframes paperLaunch {
  0% {
    opacity: 0;
    transform: translateX(-50%) translate(-24px, 190px) scale(0.45) rotate(0deg);
  }
  12% { opacity: 1; }
  45% {
    transform: translateX(-50%) translate(14px, -68px) scale(1.08) rotate(430deg);
  }
  72% {
    transform: translateX(-50%) translate(-4px, -18px) scale(1.02) rotate(640deg);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translate(0, 0) scale(1) rotate(720deg);
  }
}

.paper-open {
  position: relative;
  height: 76px;
  width: 30px;                 /* rolled up */
  margin: 0 auto;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff9e8 0%, #f3e6c4 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), inset 0 0 8px rgba(180, 150, 90, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: width 1s cubic-bezier(0.16, 0.8, 0.25, 1);
}

.shake-paper.unroll .paper-open {
  width: 260px;
}

/* Roller ends on each side of the scroll. */
.paper-open::before,
.paper-open::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 14px;
  height: 84px;
  border-radius: 7px;
  background: linear-gradient(180deg, #c99a5b, #8a6023);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}
.paper-open::before { left: -7px; }
.paper-open::after { right: -7px; }

.paper-name {
  padding: 0 20px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #5a3d13;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.35s ease 0.55s, transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) 0.55s;
}

.shake-paper.unroll .paper-name {
  opacity: 1;
  transform: scale(1);
}

/* Reveal: golden glow pulse. */
.shake-paper.celebrate .paper-open {
  animation: paperPop 0.7s cubic-bezier(0.3, 1.4, 0.5, 1);
  box-shadow: 0 6px 28px rgba(255, 215, 0, 0.75), 0 0 34px rgba(0, 217, 255, 0.55);
}

.shake-paper.celebrate .paper-name {
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
}

@keyframes paperPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.16) rotate(-2deg); }
  60%  { transform: scale(0.97) rotate(1deg); }
  100% { transform: scale(1); }
}

@media (max-width: 480px) {
  .shake-stage { height: 360px; }
  .shake-paper.unroll .paper-open { width: 215px; }
}

/* ---------------------- easter egg: cursed paper ------------------------- */
/* When the can ran away, the paper that crawls out looks cursed. */
.shake-paper.cursed .paper-open {
  background: linear-gradient(180deg, #2a0e1a 0%, #1a0a2e 100%);
  box-shadow: 0 6px 18px rgba(120, 0, 40, 0.55), inset 0 0 10px rgba(200, 0, 60, 0.5);
}
.shake-paper.cursed .paper-open::before,
.shake-paper.cursed .paper-open::after {
  background: linear-gradient(180deg, #6a0f2a, #2a0a1a);
}
.shake-paper.cursed .paper-name {
  color: #e8607a;
  text-shadow: 0 0 10px rgba(200, 0, 60, 0.8);
}
.shake-paper.cursed.celebrate .paper-open {
  box-shadow: 0 6px 28px rgba(200, 0, 60, 0.8), 0 0 34px rgba(120, 0, 80, 0.7);
  animation: paperPopCursed 0.7s cubic-bezier(0.3, 1.4, 0.5, 1);
}
@keyframes paperPopCursed {
  0%   { transform: scale(1) rotate(0deg); }
  35%  { transform: scale(1.16) rotate(-3deg); }
  60%  { transform: scale(0.97) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}