/* CoMade studio intro: the screen shown when the app opens (js/studio.js).
   Deliberately its own look: night-indigo background, coral + teal "makers", system font.
   Nothing here is shared with the Eggling styles. */

.studio {
  --studio-bg: #1c1a3a;
  --studio-a: #ff6f61;   /* coral maker */
  --studio-b: #2ec4b6;   /* teal maker */
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, #2b2857 0%, var(--studio-bg) 62%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-user-select: none; user-select: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.studio.out { opacity: 0; transform: scale(1.04); pointer-events: none; }

.studio-art { width: 220px; height: 150px; overflow: visible; }
.studio-art * { transform-box: fill-box; transform-origin: 50% 100%; }

/* the two makers drop in side by side and bounce */
.studio-drop-a { animation: studio-drop 0.85s cubic-bezier(0.3, 0.9, 0.4, 1) 0.15s both; }
.studio-drop-b { animation: studio-drop 0.85s cubic-bezier(0.3, 0.9, 0.4, 1) 0.32s both; }
@keyframes studio-drop {
  0% { transform: translateY(-170px) scale(0.9, 1.1); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translateY(0) scale(1.18, 0.82); }
  72% { transform: translateY(-20px) scale(0.94, 1.06); }
  88% { transform: translateY(0) scale(1.06, 0.94); }
  100% { transform: translateY(0) scale(1, 1); }
}
.studio-arm { stroke-dasharray: 40; stroke-dashoffset: 40; animation: studio-arm 0.3s ease-out 1.15s both; }
@keyframes studio-arm { to { stroke-dashoffset: 0; } }
.studio-hand { transform-origin: 50% 50%; animation: studio-hand 0.25s cubic-bezier(0.3, 1.6, 0.5, 1) 1.36s both; }
@keyframes studio-hand { from { transform: scale(0); } to { transform: scale(1); } }

/* high-five: both hop at the moment their hands meet */
.studio-hop { animation: studio-hop 0.55s cubic-bezier(0.3, 0.9, 0.4, 1) 1.42s both; }
@keyframes studio-hop {
  0% { transform: translateY(0); }
  40% { transform: translateY(-14px) scale(0.96, 1.05); }
  75% { transform: translateY(0) scale(1.05, 0.95); }
  100% { transform: translateY(0); }
}

/* happy blink after the high-five */
.studio-eye { transform-origin: 50% 50%; animation: studio-blink 0.22s ease-in-out 1.95s both; }
@keyframes studio-blink { 50% { transform: scaleY(0.12); } }

/* starburst where the hands meet, with a few sparks */
.studio-burst { transform-origin: 50% 50%; animation: studio-burst 0.8s cubic-bezier(0.3, 1.6, 0.5, 1) 1.45s both; }
@keyframes studio-burst {
  0% { transform: scale(0) rotate(-30deg); opacity: 0; }
  30% { transform: scale(1.3) rotate(10deg); opacity: 1; }
  100% { transform: scale(1.6) rotate(20deg); opacity: 0; }
}
.studio-spark { transform-origin: 50% 50%; animation: studio-spark 0.7s ease-out both; }
.studio-spark.s1 { animation-delay: 1.5s; }
.studio-spark.s2 { animation-delay: 1.58s; }
.studio-spark.s3 { animation-delay: 1.66s; }
@keyframes studio-spark {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  40% { transform: scale(1.2) rotate(45deg); opacity: 1; }
  100% { transform: scale(0.6) rotate(90deg); opacity: 0; }
}

/* soft shadows under the makers */
.studio-shadow { transform-origin: 50% 50%; animation: studio-shadow 0.85s ease-out both; }
.studio-shadow.b { animation-delay: 0.17s; }
@keyframes studio-shadow { 0% { transform: scale(0.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* wordmark: letters rise one by one */
.studio-name { margin-top: 18px; font-size: 44px; font-weight: 800; letter-spacing: -1px; color: #fff; display: flex; }
.studio-name span { display: inline-block; animation: studio-letter 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.studio-name .a { color: var(--studio-a); }
.studio-name .b { color: var(--studio-b); }
@keyframes studio-letter { 0% { transform: translateY(26px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.studio-tag { margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); animation: studio-tag 0.6s ease 2.25s both; }
@keyframes studio-tag { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .studio *, .studio-name span, .studio-tag { animation-duration: 0.01s !important; animation-delay: 0s !important; }
}