/* Ninja Dojo: the invite, the Dojo pass, the photo ring and Party TV. Ambient motion: lanterns sway,
   bamboo bends, petals drift, the moon breathes, the frog keeps leaping and the crew keeps its balance.
   The opening film lives in film.css; the "ninja" classic opening below is its short fallback. */
[data-theme="ninja"] .title, [data-theme="ninja"] .card h2, [data-theme="ninja"] .age-badge b { font-family: "Bungee", "Rubik", sans-serif; font-weight: 400; font-synthesis: none; letter-spacing: .01em; }
[data-theme="ninja"] .title { color: #fff4ec; text-shadow: 0 3px 0 #b8242c, 0 0 22px rgba(255, 143, 177, .35); }
[data-theme="ninja"] .eyebrow { color: #ffc4d4; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; }
[data-theme="ninja"] .card { border-radius: 18px; box-shadow: var(--shadow), inset 0 3px 0 #e2463f; }
[data-theme="ninja"] .btn { border-radius: 12px; font-weight: 800; letter-spacing: .02em; }
[data-theme="ninja"] .btn, [data-theme="ninja"] .card h2, [data-theme="ninja"] .title, [data-theme="ninja"] .eyebrow { overflow-wrap: anywhere; }

/* the hero's ambient life */
[data-theme="ninja"] .hero-art .nj-lan { transform-box: fill-box; transform-origin: 50% 0; animation: nj-sway 4.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }
[data-theme="ninja"] .hero-art .nj-bam { transform-box: fill-box; transform-origin: 50% 100%; animation: nj-bend 7s ease-in-out infinite; }
[data-theme="ninja"] .hero-art .nj-bam2 { animation-delay: -3.4s; }
[data-theme="ninja"] .hero-art .nj-pt { animation: nj-fall 9s linear infinite; animation-delay: calc(var(--i) * -.75s); }
[data-theme="ninja"] .hero-art .nj-moonw { transform-box: fill-box; transform-origin: center; animation: nj-breathe 6s ease-in-out infinite; }
[data-theme="ninja"] .hero-art .nj-hop { transform-box: fill-box; transform-origin: 50% 100%; animation: nj-leap 3.2s cubic-bezier(.3, .1, .3, 1) infinite; }
[data-theme="ninja"] .hero-art .nj-bal { transform-box: fill-box; transform-origin: 50% 100%; animation: nj-wobble 3.8s ease-in-out infinite; }
[data-theme="ninja"] .hero-art .nj-bal2 { animation-delay: -1.9s; }
[data-theme="ninja"] .hero-art .nj-tw { animation: nj-tw 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); }
[data-theme="ninja"] .critter .cr-eye { transform-box: fill-box; transform-origin: center; animation: nj-blink 5.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.3s - .4s); }

/* the kid's photo: the glow ring becomes a full moon with a gold rim */
[data-theme="ninja"] .kp-circle .kp-win { box-shadow: 0 0 0 3px #f4c95d, 0 0 0 calc(var(--kp-w) * .06) rgba(255, 242, 207, .16), 0 0 calc(var(--kp-w) * .28) calc(var(--kp-w) * .06) rgba(255, 236, 190, .35); }

/* the Dojo pass: indigo paper, a lacquer-red edge, gold type */
[data-theme="ninja"] .ticket { background: radial-gradient(120% 140% at 85% 0%, #3a3584, #1c1f4a 70%); color: #fff4ec; border-radius: 14px; box-shadow: 0 12px 26px rgba(14, 14, 40, .4), inset 0 0 0 2px #e2463f, inset 0 0 0 5px rgba(28, 31, 74, 0), inset 0 0 0 6px rgba(244, 201, 93, .4); }
[data-theme="ninja"] .ticket .t-main { border-right: 2px dashed rgba(255, 143, 177, .45); }
[data-theme="ninja"] .ticket small { color: #ffc4d4; letter-spacing: .2em; font-weight: 800; }
[data-theme="ninja"] .ticket b { font-family: "Bungee", sans-serif; font-weight: 400; color: #f4c95d; }
[data-theme="ninja"] .ticket .t-stub { background: radial-gradient(circle at 50% 50%, rgba(255, 179, 201, .55) 0 2px, transparent 2.5px) 0 0 / 18px 18px; }

/* the classic opening (only if the film can't load): lanterns sway in, the moon rises, the crew leaps */
[data-theme="ninja"] .op-ninja.op-run .nj-moonw { animation: nj-rise 1.8s .2s cubic-bezier(.2, .8, .2, 1) both; }
[data-theme="ninja"] .op-ninja.op-run .nj-lan { animation: nj-on .6s calc(.6s + var(--i) * .22s) ease-out both; }
[data-theme="ninja"] .op-ninja.op-run .nj-bn { animation: nj-drop .9s 1.8s cubic-bezier(.3, 1.4, .5, 1) both; }
[data-theme="ninja"] .op-ninja.op-run .nj-hop { animation: nj-leap 1s 2.4s cubic-bezier(.3, .1, .3, 1) both; }
[data-theme="ninja"] .op-card { background: rgba(255, 250, 243, .92); color: var(--cardInk); box-shadow: 0 18px 50px rgba(10, 10, 30, .4); }
[data-theme="ninja"] .op-eyebrow { color: #b8242c; }
[data-theme="ninja"] .op-ninja .op-line { color: #fff4ec; text-shadow: 0 2px 0 #1c1f4a; }
[data-theme="ninja"].tv-slide h1, [data-theme="ninja"].tv-slide h2 { font-family: "Bungee", sans-serif; font-weight: 400; text-shadow: 0 4px 0 #b8242c; }
[data-theme="ninja"].tv-bd { opacity: .92; }

@keyframes nj-sway { 50% { transform: rotate(5deg); } }
@keyframes nj-bend { 50% { transform: rotate(-1.6deg); } }
@keyframes nj-fall { 0% { transform: translate(0, -30px) rotate(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate(-60px, 60px) rotate(240deg); opacity: 0; } }
@keyframes nj-breathe { 50% { transform: scale(1.04); } }
@keyframes nj-leap { 0%, 100% { transform: translate(0, 0) rotate(0); } 15% { transform: translate(-6px, 4px) scale(1.06, .92); } 45% { transform: translate(8px, -12px) rotate(10deg); } 75% { transform: translate(2px, 0) scale(.96, 1.04); } }
@keyframes nj-wobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes nj-tw { 50% { opacity: .25; } }
@keyframes nj-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
@keyframes nj-rise { from { opacity: 0; transform: translateY(30px) scale(.8); } }
@keyframes nj-on { from { opacity: 0; transform: translateY(-12px); } }
@keyframes nj-drop { from { opacity: 0; transform: translateY(-24px); } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="ninja"] .hero-art *, [data-theme="ninja"] .critter .cr-eye { animation: none !important; }
  [data-theme="ninja"] .hero-art .nj-pt { opacity: .85; }
}