/* Knights & Dragons: waving flags and banners, flickering torches and windows, a dragon bobbing on
   its wings. The opening ("drawbridge"): the castle rises, the drawbridge lowers over the moat,
   the gate glows and the dragon swoops in from the right and puffs a little flame.
   Only transform and opacity animate; reduced motion shows the open castle, still. */
[data-theme="castle"] .hero-art .ct-flag { transform-box: fill-box; transform-origin: left center; animation: ct-wave 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.4s); }
[data-theme="castle"] .hero-art .ct-banner { transform-box: fill-box; transform-origin: center top; animation: ct-sway 3s ease-in-out infinite; animation-delay: calc(var(--i) * -1.2s); }
[data-theme="castle"] .hero-art .ct-fire { transform-box: fill-box; transform-origin: center bottom; animation: ct-flicker .45s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.2s); }
[data-theme="castle"] .hero-art .ct-win { animation: ct-glow 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
[data-theme="castle"] .hero-art .ct-dragon { animation: ct-fly 2.4s ease-in-out infinite; }
[data-theme="castle"] .hero-art .ct-puff { transform-box: fill-box; transform-origin: right center; animation: ct-puff 2.4s ease-in-out infinite; }
[data-theme="castle"] .hero-art .ct-bridge { transform-box: fill-box; transform-origin: center top; }
[data-theme="castle"] .hero-art .ct-under { display: none; }
[data-theme="castle"] .title { letter-spacing: .01em; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
[data-theme="castle"] .card { border-radius: 14px; border: 2px solid var(--line); }
[data-theme="castle"] .btn { border-radius: 12px; }

/* the opening */
[data-theme="castle"] .op-art svg { overflow: visible; }
[data-theme="castle"] .op-art .ct-under { display: inline; }
[data-theme="castle"] .op-drawbridge.op-run .ct-castle { animation: ct-rise 1.4s .3s cubic-bezier(.2, .8, .2, 1) both; }
[data-theme="castle"] .op-drawbridge.op-run .ct-bridge { animation: ct-lower 1.2s 2s cubic-bezier(.5, 0, .3, 1.25) both; }
[data-theme="castle"] .op-drawbridge.op-run .ct-gate { animation: ct-on .6s 2.9s ease-out both; }
[data-theme="castle"] .op-drawbridge.op-run .ct-dragon { animation: ct-swoop 2s 3.1s cubic-bezier(.2, .7, .3, 1) both, ct-fly 2.4s 5.1s ease-in-out infinite; }
[data-theme="castle"] .op-drawbridge.op-run .ct-puff { animation: ct-puff 2.4s 5.1s ease-in-out infinite both; }

@keyframes ct-wave { to { transform: scaleX(.75) skewY(8deg); } }
@keyframes ct-sway { 50% { transform: rotate(4deg); } }
@keyframes ct-flicker { to { transform: scale(.85, 1.2); opacity: .8; } }
@keyframes ct-glow { 50% { opacity: .55; } }
@keyframes ct-fly { 50% { transform: translateY(-4px); } }
@keyframes ct-puff { 0%, 55% { opacity: 0; transform: scale(.3); } 70% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.3) translateX(-4px); } }
@keyframes ct-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes ct-lower { from { transform: scaleY(0); } }
@keyframes ct-on { from { opacity: 0; } }
@keyframes ct-swoop { 0% { opacity: 0; transform: translate(170px, -70px) scale(.7); } 30% { opacity: 1; } 100% { transform: none; } }
/* long names (and wide display faces) wrap instead of pushing the page sideways at 320px */
[data-theme="castle"] .btn, [data-theme="castle"] .card h2, [data-theme="castle"] .title, [data-theme="castle"] .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 march; the squad blinks now and then. */
[data-theme="castle"] .op-art { transform: scale(1.5); transform-origin: 50% 70%; transition: opacity 1.2s ease, transform 5.2s cubic-bezier(.33, .05, .2, 1); }
[data-theme="castle"] .op-pal { transform: translateX(-120vw); transition-duration: 1.6s; transition-timing-function: cubic-bezier(.3, .7, .3, 1); }
[data-theme="castle"] .op-run .op-art, [data-theme="castle"] .op-run .op-pal { opacity: 1; transform: none; }
[data-theme="castle"] .op-final .op-art, [data-theme="castle"] .op-final .op-pal { opacity: 1; transform: none; transition: none; }
[data-theme="castle"] .op-run .op-pal svg { transform-origin: 50% 100%; animation: ct-march .7s calc(4.5s + var(--i) * .18s) ease-out both; }
@keyframes ct-march { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg) translateY(-3px); } 75% { transform: rotate(7deg) translateY(-3px); } }
[data-theme="castle"] .critter .cr-eye { transform-box: fill-box; transform-origin: center; animation: ct-blink 5.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.37s - .6s); }
@keyframes ct-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="castle"] .op-art svg { transform: scale(1.35); transform-origin: 50% 100%; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="castle"] .critter .cr-eye, [data-theme="castle"] .op-pal svg, [data-theme="castle"] .hero-art * { animation: none !important; }
}