/* Robot Lab: gears turning, flasks bubbling, LEDs blinking, a waving robot with level meters and a
   hovering drone. The opening ("assemble"): the robot's parts drop onto the stand one by one,
   the arms swing on, the head clicks into place and its eyes power up.
   Only transform and opacity animate; reduced motion shows the finished robot, still. */
[data-theme="robots"] .rb-gear { transform-box: fill-box; transform-origin: center; animation: rb-spin 8s linear infinite; }
[data-theme="robots"] .rb-rev { animation-direction: reverse; animation-duration: 5s; }
[data-theme="robots"] .hero-art .rb-bub { animation: rb-rise 1.8s ease-in infinite; animation-delay: calc(var(--i) * -.37s); }
[data-theme="robots"] .hero-art .rb-led { animation: rb-blink 1.4s steps(1) infinite; animation-delay: calc(var(--i) * -.5s); }
[data-theme="robots"] .hero-art .rb-meter { transform-box: fill-box; transform-origin: center bottom; animation: rb-meter .9s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -.3s); }
[data-theme="robots"] .hero-art .rb-arm-r { transform-box: fill-box; transform-origin: left bottom; animation: rb-wave 1.6s ease-in-out infinite; }
[data-theme="robots"] .hero-art .rb-eyes { transform-box: fill-box; transform-origin: center; animation: rb-look 4.6s ease-in-out infinite; }
[data-theme="robots"] .hero-art .rb-hover { animation: rb-hover 2.2s ease-in-out infinite alternate; }
[data-theme="robots"] .rb-prop { transform-box: fill-box; transform-origin: center; animation: rb-prop .18s linear infinite alternate; }
[data-theme="robots"] .hero-art .rb-wave { animation: rb-scan 1.6s ease-in-out infinite alternate; }
[data-theme="robots"] .hero-art .rb-tip { animation: rb-blink 1s steps(1) infinite; }
[data-theme="robots"] .hero-art .rb-under { display: none; }
[data-theme="robots"] .title { letter-spacing: .02em; text-shadow: 0 0 16px rgba(51, 209, 198, .45); }
[data-theme="robots"] .card { border-radius: 16px; }
[data-theme="robots"] .btn { border-radius: 12px; }

/* the opening */
[data-theme="robots"] .op-art svg { overflow: visible; }
[data-theme="robots"] .op-art .rb-under { display: inline; }
[data-theme="robots"] .op-assemble.op-run .rb-legs { animation: rb-drop .6s .6s cubic-bezier(.5, 0, .4, 1.4) both; }
[data-theme="robots"] .op-assemble.op-run .rb-body { animation: rb-drop .6s 1.1s cubic-bezier(.5, 0, .4, 1.4) both; }
[data-theme="robots"] .op-assemble.op-run .rb-arm-l { transform-box: fill-box; transform-origin: right top; animation: rb-arm .5s 1.8s cubic-bezier(.3, 1.6, .5, 1) both; }
[data-theme="robots"] .op-assemble.op-run .rb-arm-r { animation: rb-arm .5s 2s cubic-bezier(.3, 1.6, .5, 1) both, rb-wave 1.6s 3.6s ease-in-out infinite; }
[data-theme="robots"] .op-assemble.op-run .rb-head { animation: rb-drop .6s 2.4s cubic-bezier(.5, 0, .4, 1.4) both; }
[data-theme="robots"] .op-assemble.op-run .rb-eyes { animation: rb-power .8s 3.1s steps(4, jump-none) both, rb-look 4.6s 4s ease-in-out infinite; }
[data-theme="robots"] .op-assemble.op-run .rb-gear { animation-duration: 2s; }

@keyframes rb-spin { to { transform: rotate(360deg); } }
@keyframes rb-rise { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-26px); } }
@keyframes rb-blink { 50% { opacity: .2; } }
@keyframes rb-meter { from { transform: scaleY(.35); } }
@keyframes rb-wave { 50% { transform: rotate(-14deg); } }
@keyframes rb-look { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } 70% { transform: translateX(2px); } }
@keyframes rb-hover { to { transform: translateY(-5px); } }
@keyframes rb-prop { to { transform: scaleX(.4); } }
@keyframes rb-scan { to { transform: translateX(-4px); } }
@keyframes rb-drop { from { opacity: 0; transform: translateY(-120px); } 40% { opacity: 1; } }
@keyframes rb-arm { from { opacity: 0; transform: rotate(-80deg) scale(.6); } }
@keyframes rb-power { from { opacity: 0; } }
/* long names (and wide display faces) wrap instead of pushing the page sideways at 320px */
[data-theme="robots"] .btn, [data-theme="robots"] .card h2, [data-theme="robots"] .title, [data-theme="robots"] .eyebrow { overflow-wrap: anywhere; }
/* film: the camera opens close on the hero beat and pulls back as the story plays; the squad
   makes its own entrance, then lands its land; the squad blinks now and then. */
[data-theme="robots"] .op-art { transform: scale(1.55); transform-origin: 50% 76%; transition: opacity 1.2s ease, transform 5.2s cubic-bezier(.33, .05, .2, 1); }
[data-theme="robots"] .op-pal { transform: translateY(-110vh); transition-duration: .7s; transition-timing-function: cubic-bezier(.55, 0, .7, .4); }
[data-theme="robots"] .op-run .op-art, [data-theme="robots"] .op-run .op-pal { opacity: 1; transform: none; }
[data-theme="robots"] .op-final .op-art, [data-theme="robots"] .op-final .op-pal { opacity: 1; transform: none; transition: none; }
[data-theme="robots"] .op-run .op-pal svg { transform-origin: 50% 100%; animation: rb-land .7s calc(4.5s + var(--i) * .18s) ease-out both; }
@keyframes rb-land { 0% { transform: scale(1.18, .78); } 45% { transform: scale(.94, 1.08); } 100% { transform: none; } }
[data-theme="robots"] .critter .cr-eye { transform-box: fill-box; transform-origin: center; animation: rb-blink 5.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.37s - .6s); }
@keyframes rb-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
/* phones in portrait: the scene steps forward so it fills the screen */
@media (max-aspect-ratio: 4/5) { [data-theme="robots"] .op-art svg { transform: scale(1.35); transform-origin: 50% 100%; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="robots"] .critter .cr-eye, [data-theme="robots"] .op-pal svg, [data-theme="robots"] .hero-art *, [data-theme="robots"] .rb-gear, [data-theme="robots"] .rb-prop { animation: none !important; }
}