/* Rocket demo page — comic SVG + scenario animations */

/* Comic rocket UI — colors: public/css/rocket-theme.css */

.rocket-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1rem, 3vw, 2rem);
  font-family: var(--font-sans);
  color: var(--color-text);
}

.rocket-page h1 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  margin: 0 0 0.5rem;
  text-align: center;
}

.rocket-page .rocket-lead {
  color: var(--color-muted);
  text-align: center;
  max-width: 36rem;
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}

.rocket-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.rocket-controls button {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.65rem 1.1rem;
  border-radius: 10px;
  border: 3px solid var(--rocket-ink);
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--rocket-ink);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.rocket-controls button:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--rocket-ink);
}

.rocket-controls button:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--rocket-ink);
}

.rocket-controls button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-idle {
  background: linear-gradient(
    180deg,
    #f8fafc 0%,
    #e2e8f0 100%
  );
  color: var(--rocket-ink);
}

.btn-ready {
  background: linear-gradient(
    180deg,
    #e2e8f0 0%,
    #cbd5e1 100%
  );
  color: var(--rocket-ink);
}

.btn-great {
  background: linear-gradient(
    180deg,
    var(--rocket-btn-great-a) 0%,
    var(--rocket-btn-great-b) 100%
  );
  color: var(--rocket-ink);
}

.btn-meh {
  background: linear-gradient(
    180deg,
    var(--rocket-btn-meh-a) 0%,
    var(--rocket-btn-meh-b) 100%
  );
  color: var(--rocket-ink);
}

.btn-fail {
  background: linear-gradient(
    180deg,
    var(--rocket-btn-fail-a) 0%,
    var(--rocket-btn-fail-b) 100%
  );
  color: var(--rocket-ink);
}

.rocket-stage-wrap {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 4 / 5;
  border: 4px solid var(--rocket-ink);
  border-radius: 16px;
  box-shadow: var(--rocket-stage-box-shadow);
  overflow: hidden;
}

#confetti-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.rocket-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rocket-stage--idle .crack-lines,
.rocket-stage--ready .crack-lines,
.rocket-stage--great .crack-lines,
.rocket-stage--meh .crack-lines {
  opacity: 0;
}

/* Scenario-only SVG layers */
.launch-flame {
  opacity: 0;
  visibility: hidden;
}

.rocket-stage--great .launch-flame {
  visibility: visible;
}

/* Pre-launch "ready" pose — extra pad smoke layer (SVG .launch-prep-smoke) */
.launch-prep-smoke {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.rocket-stage--ready .launch-prep-smoke {
  opacity: 1;
  visibility: visible;
}

.rocket-stage--ready .prep-smoke {
  transform-origin: center;
  transform-box: fill-box;
}

/*
 * Ready-for-launch smoke: same idea as idle `fume-pulse`, but faster + larger motion + more layers.
 * Period ~half of idle (1.2s); three staggered phases like the three idle puffs.
 */
.rocket-stage--ready .launch-prep-smoke > ellipse:nth-child(3n + 1) {
  animation: ready-heavy-pulse 0.58s ease-in-out infinite;
  animation-delay: 0s;
}

.rocket-stage--ready .launch-prep-smoke > ellipse:nth-child(3n + 2) {
  animation: ready-heavy-pulse 0.58s ease-in-out infinite;
  animation-delay: 0.193s;
}

.rocket-stage--ready .launch-prep-smoke > ellipse:nth-child(3n + 3) {
  animation: ready-heavy-pulse 0.58s ease-in-out infinite;
  animation-delay: 0.387s;
}

/* Idle: subtle fumes only */
.rocket-stage--idle .fume-puff {
  animation: fume-pulse 1.2s ease-in-out infinite;
}

.rocket-stage--idle .fume-puff:nth-child(2) {
  animation-delay: 0.35s;
}

.rocket-stage--idle .fume-puff:nth-child(3) {
  animation-delay: 0.7s;
}

/* Ready-for-launch: pad fumes — same heavy pulse, fifths of a cycle */
.rocket-stage--idle .fumes .fume-puff:nth-child(4),
.rocket-stage--idle .fumes .fume-puff:nth-child(5) {
  visibility: hidden;
  opacity: 0;
  animation: none;
}

.rocket-stage--ready .fumes .fume-puff:nth-child(1) {
  animation: ready-heavy-pulse 0.58s ease-in-out infinite;
  animation-delay: 0s;
}

.rocket-stage--ready .fumes .fume-puff:nth-child(2) {
  animation: ready-heavy-pulse 0.58s ease-in-out infinite;
  animation-delay: 0.116s;
}

.rocket-stage--ready .fumes .fume-puff:nth-child(3) {
  animation: ready-heavy-pulse 0.58s ease-in-out infinite;
  animation-delay: 0.232s;
}

.rocket-stage--ready .fumes .fume-puff:nth-child(4) {
  animation: ready-heavy-pulse 0.58s ease-in-out infinite;
  animation-delay: 0.348s;
  visibility: visible;
}

.rocket-stage--ready .fumes .fume-puff:nth-child(5) {
  animation: ready-heavy-pulse 0.58s ease-in-out infinite;
  animation-delay: 0.464s;
  visibility: visible;
}

/* Extra pad puffs are ready-only; hide during outcome animations */
.rocket-stage--great .fumes .fume-puff:nth-child(4),
.rocket-stage--great .fumes .fume-puff:nth-child(5),
.rocket-stage--meh .fumes .fume-puff:nth-child(4),
.rocket-stage--meh .fumes .fume-puff:nth-child(5),
.rocket-stage--fail .fumes .fume-puff:nth-child(4),
.rocket-stage--fail .fumes .fume-puff:nth-child(5) {
  visibility: hidden;
  opacity: 0;
  animation: none;
}

.rocket-stage--idle .rocket-group {
  animation: idle-bob 2.5s ease-in-out infinite;
}

.rocket-stage--ready .rocket-group {
  animation: ready-launch-jitter 0.28s linear infinite;
  transform-origin: 50% 72%;
  transform-box: fill-box;
}

@keyframes idle-core-flicker {
  from {
    opacity: 0.82;
  }
  to {
    opacity: 1;
  }
}

@keyframes idle-spark-flicker {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes idle-wisp-dance {
  from {
    transform: translateX(-1.5px);
  }
  to {
    transform: translateX(1.5px);
  }
}

@keyframes meh-flame-sway {
  from {
    transform: scaleY(0.92) rotate(-2deg);
  }
  to {
    transform: scaleY(1.08) rotate(2deg);
  }
}

/* Meh: hide exhaust while rocket is near apex (sync with meh-wobble 3.2s) */
@keyframes meh-flame-apex {
  0%,
  12% {
    opacity: 1;
    visibility: visible;
  }
  50%,
  75% {
    opacity: 0;
    visibility: hidden;
  }
  76%,
  100% {
    opacity: 1;
    visibility: hidden;
  }
}

/* Rest poses: no main engine flame (only fumes / pad smoke) */
.rocket-stage--idle .idle-flame,
.rocket-stage--ready .idle-flame {
  visibility: hidden;
  opacity: 0;
}

@keyframes fume-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 0.85;
    transform: translateY(6px) scale(1.08);
  }
}

/* Like fume-pulse, amplified (bigger + faster loop for .rocket-stage--ready) */
@keyframes ready-heavy-pulse {
  0%,
  100% {
    opacity: 0.4;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 0.98;
    transform: translateY(22px) scale(1.42);
  }
}

@keyframes idle-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Ready: rumble / vibration (stronger than idle bob) */
@keyframes ready-launch-jitter {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  16% {
    transform: translate(-2.5px, -5px) rotate(-2.2deg);
  }
  33% {
    transform: translate(3px, 2px) rotate(1.8deg);
  }
  50% {
    transform: translate(-2px, 4px) rotate(-1.4deg);
  }
  66% {
    transform: translate(3.5px, -4px) rotate(2.1deg);
  }
  83% {
    transform: translate(-3px, -2px) rotate(-1.6deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* Hide scenario-only elements in rest poses */
.rocket-stage--idle .launch-flame,
.rocket-stage--ready .launch-flame,
.rocket-stage--idle .fail-burst,
.rocket-stage--ready .fail-burst,
.rocket-stage--idle .meh-sweat,
.rocket-stage--ready .meh-sweat {
  opacity: 0;
  visibility: hidden;
}

/* Great success */
.rocket-stage--great .idle-flame {
  opacity: 0;
  visibility: hidden;
}

.rocket-stage--great .launch-flame {
  opacity: 1;
  visibility: visible;
  transform-origin: top center;
  transform-box: fill-box;
  animation: launch-flame-burst 4.2s cubic-bezier(0.25, 0.46, 0.2, 1) forwards;
}

.rocket-stage--great .rocket-group {
  animation: launch-soar 4.2s cubic-bezier(0.18, 0.58, 0.22, 1) forwards;
}

.rocket-stage--great .fume-puff {
  animation: fume-launch 4.2s cubic-bezier(0.25, 0.46, 0.2, 1) forwards;
}

.rocket-stage--great .launch-flame-hot {
  animation: launch-hot-shimmer 0.22s ease-in-out infinite alternate;
}

.rocket-stage--great .launch-flame-tongue {
  animation: launch-tongue-shimmer 0.18s ease-in-out infinite alternate;
}

.rocket-stage--great .launch-flame-jet-l,
.rocket-stage--great .launch-flame-jet-r {
  animation: launch-jet-pulse 0.16s ease-in-out infinite alternate;
}

@keyframes launch-hot-shimmer {
  from {
    opacity: 0.68;
  }
  to {
    opacity: 0.92;
  }
}

@keyframes launch-tongue-shimmer {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 0.92;
  }
}

@keyframes launch-jet-pulse {
  from {
    opacity: 0.75;
  }
  to {
    opacity: 0.98;
  }
}

@keyframes launch-flame-burst {
  0% {
    transform: scaleY(0.35);
    opacity: 0.92;
  }
  18% {
    transform: scaleY(1.35);
    opacity: 1;
  }
  52% {
    transform: scaleY(1.82) translateY(6px);
    opacity: 0.96;
  }
  100% {
    /* Hold: avoid extreme scale + near-zero opacity (looked pinched / ghostly at the tip) */
    transform: scaleY(1.62) translateY(12px);
    opacity: 0.52;
  }
}

@keyframes launch-soar {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  10% {
    transform: translate(0, 10px) rotate(-3deg);
  }
  /* 45% {
    transform: translate(0, min(-35vh, -320px)) rotate(0deg);
  } */
  100% {
    /* Clear the stage and viewport — vh scales with screen; px floor for small viewports */
    transform: translate(0, min(-125vh, -960px)) rotate(0deg);
  }
}

@keyframes fume-launch {
  0% {
    opacity: 0.8;
  }
  30% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    transform: translateY(40px) scale(0.3);
  }
}

/* Meh: small animated flame; plume off near top of arc */
.rocket-stage--meh .idle-flame {
  visibility: visible;
  opacity: 1;
  transform-origin: top center;
  transform-box: fill-box;
  animation:
    meh-flame-sway 0.5s ease-in-out infinite alternate,
    meh-flame-apex 3.2s ease-in-out forwards;
}

.rocket-stage--meh .idle-flame-core {
  animation: idle-core-flicker 0.55s ease-in-out infinite alternate;
}

.rocket-stage--meh .idle-flame-spark {
  animation: idle-spark-flicker 0.28s ease-in-out infinite;
}

.rocket-stage--meh .idle-flame-wisp-l {
  animation: idle-wisp-dance 0.85s ease-in-out infinite alternate;
}

.rocket-stage--meh .idle-flame-wisp-r {
  animation: idle-wisp-dance 0.85s ease-in-out infinite alternate-reverse;
}

.rocket-stage--meh .rocket-group {
  animation: meh-wobble 3.2s ease-in-out forwards;
}

.rocket-stage--meh .meh-sweat {
  opacity: 1;
  visibility: visible;
  animation: sweat-drip 3.2s ease-in-out forwards;
}

.rocket-stage--meh .fume-puff {
  animation: meh-fume 3.2s ease-in-out forwards;
}

/* Classic small hop (~35–42px); slightly higher than first version (~+5px) */
@keyframes meh-wobble {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  18% {
    transform: translate(0, -170px) rotate(-4deg);
  }
  35% {
    transform: translate(0, -178px) rotate(3deg);
  }
  55% {
    transform: translate(0, -173px) rotate(-6deg);
  }
  75% {
    transform: translate(0, 15px) rotate(5deg);
  }
  100% {
    transform: translate(0, 25px) rotate(0deg);
  }
}

@keyframes sweat-drip {
  0%,
  15% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes meh-fume {
  0%,
  40% {
    opacity: 0.7;
  }
  65% {
    opacity: 0.4;
  }
  82% {
    opacity: 0.22;
  }
  100% {
    opacity: 0;
  }
}

/* Failure: big ignition burst, then crash */
.rocket-stage--fail .idle-flame {
  opacity: 0;
  visibility: hidden;
}

.rocket-stage--fail .launch-flame {
  opacity: 1;
  visibility: visible;
  transform-origin: top center;
  transform-box: fill-box;
  animation: fail-ignition-burst 3.2s cubic-bezier(0.35, 0.02, 0.28, 1) forwards;
}

.rocket-stage--fail .fail-burst {
  opacity: 1;
  visibility: visible;
  animation: fail-smoke 3.2s ease-out forwards;
}

.rocket-stage--fail .rocket-group {
  animation: fail-crash 3.2s cubic-bezier(0.52, 0.05, 0.55, 0.98) forwards;
}

.rocket-stage--fail .fume-puff {
  animation: fail-fume-out 3.2s ease-out forwards;
}

.rocket-stage--fail .crack-lines {
  opacity: 1;
  animation: crack-show 0.28s ease-out 1.78s both;
}

@keyframes fail-ignition-burst {
  0% {
    transform: scaleY(0.2);
    opacity: 0.95;
  }
  12% {
    transform: scaleY(2.75);
    opacity: 1;
  }
  26% {
    transform: scaleY(2.35) translateY(10px);
    opacity: 1;
  }
  34% {
    transform: scaleY(0.45);
    opacity: 0.25;
  }
  40%,
  100% {
    transform: scaleY(0.08);
    opacity: 0;
  }
}

@keyframes fail-crash {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  10% {
    transform: translate(0, -24px) rotate(-11deg);
  }
  22% {
    transform: translate(0, -12px) rotate(7deg);
  }
  32% {
    transform: translate(4px, 6px) rotate(14deg);
  }
  44% {
    transform: translate(22px, 42px) rotate(38deg);
  }
  62% {
    transform: translate(10px, 92px) rotate(74deg);
  }
  100% {
    transform: translate(-6px, 112px) rotate(98deg);
  }
}

@keyframes fail-smoke {
  0%,
  46% {
    opacity: 0;
    transform: scale(0.25);
  }
  56% {
    opacity: 0.95;
    transform: scale(1.12);
  }
  78% {
    opacity: 0.55;
    transform: scale(1.32) translateY(-6px);
  }
  100% {
    opacity: 0;
    transform: scale(1.38) translateY(-10px);
  }
}

@keyframes fail-fume-out {
  0%,
  30% {
    opacity: 0.65;
  }
  38% {
    opacity: 0.35;
  }
  72% {
    opacity: 0.18;
    transform: scale(0.45) translateY(22px);
  }
  100% {
    opacity: 0;
    transform: scale(0.2) translateY(30px);
  }
}

@keyframes crack-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.9;
  }
}

.rocket-status {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--color-muted);
  text-align: center;
  min-height: 1.5em;
}

.rocket-status strong {
  color: var(--color-text);
}

.rocket-api-hint {
  margin-top: 2rem;
  padding: 1rem;
  max-width: 36rem;
  font-size: 0.8rem;
  color: var(--color-muted);
  background: var(--rocket-api-hint-bg);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.rocket-api-hint code {
  font-size: 0.78rem;
  color: var(--rocket-api-hint-code);
  word-break: break-all;
}