/* Mermaid Lagoon: the tail flicks, light rays breathe, kelp sways, bubbles rise and the pearl gleams.
   The classic opening ("lagoon") is the fallback if the film can't load: the sun sinks, the tail
   flicks and the pearl lights up. Only transform and opacity animate; reduced motion is still. */
[data-theme="mermaid"] { --mm-pearl: linear-gradient(100deg, #fff4f8 0%, #ffd1dc 30%, #c8f1e6 60%, #fff4f8 100%); }
[data-theme="mermaid"] .hero-art .mm-flick { transform-box: fill-box; transform-origin: 50% 100%; animation: mm-flick 3.8s ease-in-out infinite; }
[data-theme="mermaid"] .hero-art .mm-ray { animation: mm-breathe 5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
[data-theme="mermaid"] .hero-art .mm-kelp { transform-box: fill-box; transform-origin: 50% 100%; animation: mm-sway 4.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.3s); }
[data-theme="mermaid"] .hero-art .mm-bub { animation: mm-rise 6s linear infinite; animation-delay: calc(var(--i) * -.55s); }
[data-theme="mermaid"] .hero-art .mm-fish { animation: mm-swim 9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -3s); }
[data-theme="mermaid"] .hero-art .mm-shim { animation: mm-breathe 2.6s ease-in-out infinite; }
[data-theme="mermaid"] .hero-art .mm-gleam { transform-box: fill-box; transform-origin: center; animation: mm-gleam 3.2s ease-in-out infinite; }
[data-theme="mermaid"] .hero-art .mm-cloud { animation: mm-drift 14s ease-in-out infinite alternate; }
[data-theme="mermaid"] .hero-art .mm-under { display: none; }
[data-theme="mermaid"] .card { border-radius: 26px; box-shadow: var(--shadow), inset 0 0 0 1.5px rgba(46, 196, 182, .22); }
[data-theme="mermaid"] .btn { border-radius: 999px; }
[data-theme="mermaid"] .title { letter-spacing: .01em; text-shadow: 0 2px 0 rgba(255, 255, 255, .7), 0 0 18px rgba(255, 179, 198, .55); }
[data-theme="mermaid"] .eyebrow { color: var(--ink); letter-spacing: .06em; }
[data-theme="mermaid"] .divider::before, [data-theme="mermaid"] .divider::after { background: var(--mm-pearl); height: 2px; border-radius: 2px; }
[data-theme="mermaid"] .btn, [data-theme="mermaid"] .card h2, [data-theme="mermaid"] .title, [data-theme="mermaid"] .eyebrow { overflow-wrap: anywhere; }

/* the kid's photo: the glow ring becomes a pearl in its shell */
[data-theme="mermaid"] .kp-circle .kp-win { box-shadow: 0 0 0 3px #fff4f8, 0 0 0 calc(var(--kp-w) * .05) #ffd1dc, 0 0 calc(var(--kp-w) * .24) calc(var(--kp-w) * .05) rgba(168, 230, 207, .55); }

/* the Lagoon pass: pearly paper, a scalloped stub and a wave rule */
[data-theme="mermaid"] .ticket { background: linear-gradient(115deg, #fff4f8 0%, #ffe3ec 38%, #dff6ef 70%, #fff4f8 100%); color: #16324f; border-radius: 18px;
  box-shadow: 0 12px 26px rgba(22, 50, 79, .18), inset 0 0 0 1.5px rgba(46, 196, 182, .45); }
[data-theme="mermaid"] .ticket .t-main { border-right: 2px dotted rgba(46, 196, 182, .6); }
[data-theme="mermaid"] .ticket small { color: #1d6c8a; letter-spacing: .2em; font-weight: 800; }
[data-theme="mermaid"] .ticket b { font-family: "Fredoka", ui-rounded, sans-serif; font-weight: 700; color: #16324f; }
[data-theme="mermaid"] .ticket .t-stub { background: radial-gradient(circle at 50% 120%, #ffb3c6 0 38%, transparent 40%) 0 0 / 22px 18px, linear-gradient(180deg, #c8f1e6, #ffd1dc); }

/* the classic opening (only if the film can't load) */
[data-theme="mermaid"] .op-art svg { overflow: visible; }
[data-theme="mermaid"] .op-art .mm-under { display: inline; }
[data-theme="mermaid"] .op-card { background: rgba(255, 250, 252, .9); color: var(--cardInk); box-shadow: 0 18px 50px rgba(22, 50, 79, .22); }
[data-theme="mermaid"] .op-lagoon .op-line { color: #fff; text-shadow: 0 2px 12px rgba(22, 50, 79, .8); }
[data-theme="mermaid"] .op-lagoon.op-run .mm-flick { animation: mm-up 1s .6s cubic-bezier(.3, 1.4, .5, 1) both, mm-flick 3.8s 1.6s ease-in-out infinite; }
[data-theme="mermaid"] .op-lagoon.op-run .mm-ray { transform-box: fill-box; transform-origin: 50% 0; animation: mm-in 1.4s calc(1.6s + var(--i) * .15s) ease-out both; }
[data-theme="mermaid"] .op-lagoon.op-run .mm-gleam { animation: mm-pop .8s 3s cubic-bezier(.3, 1.6, .5, 1) both, mm-gleam 3.2s 3.8s ease-in-out infinite; }
[data-theme="mermaid"] .op-art { transform: scale(1.4); transform-origin: 40% 40%; transition: opacity 1.2s ease, transform 5s cubic-bezier(.33, .05, .2, 1); }
[data-theme="mermaid"] .op-pal { transform: translateY(40vh) scale(.6); opacity: 0; transition-property: transform, opacity; transition-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
[data-theme="mermaid"] .op-run .op-art, [data-theme="mermaid"] .op-run .op-pal { opacity: 1; transform: none; }
[data-theme="mermaid"] .op-final .op-art, [data-theme="mermaid"] .op-final .op-pal { opacity: 1; transform: none; transition: none; }
[data-theme="mermaid"] .critter .cr-eye { transform-box: fill-box; transform-origin: center; animation: mm-blink 5.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.3s - .7s); }
@media (max-aspect-ratio: 4/5) { [data-theme="mermaid"] .op-art svg { transform: scale(1.35); transform-origin: 50% 100%; } }

/* Party TV */
[data-theme="mermaid"].tv-bd { opacity: .92; }
[data-theme="mermaid"].tv-bd .mm-bub { animation: mm-rise 9s linear infinite; animation-delay: calc(var(--i) * -.7s); }
[data-theme="mermaid"].tv-bd .mm-kelp { transform-box: fill-box; transform-origin: 50% 100%; animation: mm-sway 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.4s); }

@keyframes mm-flick { 0%, 100% { transform: rotate(-6deg); } 40% { transform: rotate(9deg); } 55% { transform: rotate(4deg); } }
@keyframes mm-breathe { 50% { opacity: .45; } }
@keyframes mm-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes mm-rise { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px); } }
@keyframes mm-swim { to { transform: translateX(26px); } }
@keyframes mm-gleam { 50% { transform: scale(1.12); opacity: .85; } }
@keyframes mm-drift { to { transform: translateX(12px); } }
@keyframes mm-up { from { opacity: 0; transform: translateY(30px) rotate(-20deg); } }
@keyframes mm-in { from { opacity: 0; transform: scaleY(.2); } }
@keyframes mm-pop { from { opacity: 0; transform: scale(.2); } }
@keyframes mm-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="mermaid"] .hero-art *, [data-theme="mermaid"] .critter .cr-eye, [data-theme="mermaid"] .op-art *, [data-theme="mermaid"].tv-bd * { animation: none !important; }
}