/* mermaid «مملكة البحر» — palettes switch with body.pal-* (data.js theme.palette) */
:root, .pal-teal {
  --bg: #effafa; --bg-2: #d4f1f1; --surface: #ffffff; --surface-2: #f2fbfb;
  --text: #24474f; --muted: #5f7c82;
  --accent: #0f7381; --accent-2: #ffd3e0; --accent-ink: #ffffff;
  --line: rgba(15, 115, 129, .24); --line-soft: rgba(15, 115, 129, .10);
  --w1: #8fe0dc; --w2: #2ea3ad; --w3: #0f5f74;
  --palace: #c9f3ef; --sand: #f4e2bf; --sand-2: #e8cf9f; --weed: #2f9e7c; --coral: #ff9fb3;
  --shell-1: #ffe4ee; --shell-2: #f6b7cc; --shell-line: #d9849f; --inner: #ffd6e4;
  --tail: #3fb6b2; --tail-2: #22918f; --top: #ffd0e0; --top-2: #f3a9c4;
  --fish1: #ffb36b; --fish2: #ffe07a; --fish3: #ff9fbd;
}
.pal-pink {
  --bg: #fff3f7; --bg-2: #ffdbe8; --surface-2: #fff5f8;
  --text: #4f2a3c; --muted: #84606f;
  --accent: #b03a6c; --accent-2: #c8f0ec;
  --line: rgba(176, 58, 108, .22); --line-soft: rgba(176, 58, 108, .10);
  --w1: #ffd0dd; --w2: #ee8fb2; --w3: #9c4479;
  --palace: #ffe6ee; --weed: #e46f9a; --coral: #ffd27a;
  --shell-1: #fff6e8; --shell-2: #ffd6a6; --shell-line: #d6a36a; --inner: #ffe9f1;
  --tail: #ee86ad; --tail-2: #cf5f8b; --top: #fff0c9; --top-2: #f0d48c;
  --fish1: #ffd27a; --fish2: #9fe3dc; --fish3: #ffffff;
}
.pal-lilac {
  --bg: #f6f2ff; --bg-2: #e6dcff; --surface-2: #f8f5ff;
  --text: #3a3060; --muted: #6e678e;
  --accent: #6747ad; --accent-2: #ffd9e6;
  --line: rgba(103, 71, 173, .22); --line-soft: rgba(103, 71, 173, .10);
  --w1: #dccdff; --w2: #a088e2; --w3: #4e3f97;
  --palace: #efe8ff; --weed: #7fcfb9; --coral: #ffb3c8;
  --shell-1: #fff0f6; --shell-2: #f2c6dc; --shell-line: #c890b0; --inner: #ffe4ef;
  --tail: #a98be6; --tail-2: #8466c9; --top: #c9f0ec; --top-2: #8fd8d0;
  --fish1: #ffc27a; --fish2: #ffe58f; --fish3: #9fe3dc;
}
body.mermaid { background: linear-gradient(180deg, var(--bg-2), var(--bg) 600px), var(--bg); }

/* ---------- intro (rendered art layers: assets in art/*.webp) ---------- */
.m-intro { display: flex; flex-direction: column; align-items: center; color: #fff; background: #1b8a96; overflow: hidden; }
.m-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.m-shafts { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; overflow: hidden; }
.m-shafts i { position: absolute; top: -10%; width: 26%; height: 90%; background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0)); transform-origin: 50% 0; animation: shaft 7s ease-in-out infinite alternate; }
.m-shafts i:nth-child(1) { left: 14%; transform: skewX(-14deg); }
.m-shafts i:nth-child(2) { left: 40%; width: 20%; transform: skewX(4deg); animation-duration: 9s; animation-delay: -3s; }
.m-shafts i:nth-child(3) { left: 66%; transform: skewX(14deg); animation-duration: 8s; animation-delay: -5s; }
@keyframes shaft { from { opacity: .25; } to { opacity: .85; } }

.m-bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.m-bubbles i {
  position: absolute; bottom: -24px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.75);
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.9) 0 18%, rgba(255,255,255,.12) 20%);
  animation: bubble linear infinite;
}
@keyframes bubble { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: .9; } 50% { transform: translate(10px, -55dvh); } 100% { transform: translate(-6px, -112dvh); opacity: .6; } }

.m-fish { position: absolute; z-index: 1; width: 62px; height: auto; animation: swim 19s linear infinite; filter: drop-shadow(0 4px 6px rgba(0,50,70,.25)); will-change: transform; }
.m-fish-1 { top: 27%; left: 0; animation-delay: -4s; }
.m-fish-2 { top: 38%; left: 0; width: 46px; animation-duration: 26s; animation-name: swimR; animation-delay: -14s; }
@keyframes swim { from { transform: translateX(-30vw); } to { transform: translateX(120vw); } }
@keyframes swimR { from { transform: translateX(120vw) scaleX(-1); } to { transform: translateX(-30vw) scaleX(-1); } }

.m-greet { position: relative; z-index: 3; text-align: center; margin-top: 4vh; transition: opacity .5s ease, transform .5s var(--ease); text-shadow: 0 2px 10px rgba(0, 40, 60, .25); }
.m-hello { margin: 0; font: 600 17px/1.5 var(--f-ui); color: #fff; opacity: .95; }
.m-line { margin: 2px 0 0; font: 900 clamp(25px, 7.6vw, 33px)/1.35 var(--f-display); color: #fff; text-wrap: balance; }

.m-stage { position: relative; z-index: 3; flex: 1; width: 100%; max-width: 440px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10dvh; }
.m-clam { --w: min(64vw, 270px, 33dvh); position: relative; z-index: 3; width: var(--w); height: calc(var(--w) * .74); padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; margin-left: 24vw; }
.m-clam:focus-visible { outline-offset: 10px; border-radius: 40px; }
.m-art { position: absolute; inset: 0; display: block; perspective: calc(var(--w) * 2.4); perspective-origin: 50% 0%; }
.m-art > img, .m-art > span, .m-art > i { position: absolute; display: block; }
.m-cshadow { left: 4%; right: 4%; bottom: -3%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,40,55,.45), rgba(0,40,55,0)); }
.m-bowl { left: 0; top: 0; width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(0,50,70,.3)); }
.m-glow { left: -14%; top: -30%; width: 128%; height: 120%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,251,226,.95), rgba(255,236,170,.5) 45%, rgba(255,255,255,0)); opacity: 0; transform: scale(.4); transition: opacity 1.4s ease .3s, transform 1.6s var(--ease) .3s; pointer-events: none; mix-blend-mode: screen; }
.m-pearl { left: 36%; top: 32%; width: 28%; height: auto; transition: transform .9s var(--spring), opacity .5s ease; filter: drop-shadow(0 0 14px rgba(255,244,200,.9)); }
.m-lid { left: 6%; width: 88%; height: auto; top: calc(var(--w) * -.66); transform-origin: 50% 100%; transform: rotateX(-130deg); transition: transform 1.9s cubic-bezier(.3, .7, .2, 1); animation: peek 3.4s ease-in-out infinite 1s; filter: drop-shadow(0 6px 10px rgba(0,50,70,.25)); }
@keyframes peek { 0%, 70%, 100% { transform: rotateX(-130deg); } 80% { transform: rotateX(-118deg); } 90% { transform: rotateX(-128deg); } }
.m-tw { left: 8%; top: -6%; width: 22px; height: 22px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 1.8s ease-in-out infinite; opacity: .9; }
.m-tw2 { left: auto; right: 6%; top: 4%; width: 16px; height: 16px; animation-delay: -.9s; }
@keyframes twinkle { 50% { opacity: .2; transform: scale(.6); } }

/* mermaid: two cross-faded poses, gentle float */
.m-maid { position: absolute; z-index: 2; left: max(1vw, calc(50% - 205px)); bottom: calc(10dvh + 6px); width: min(40vw, 160px, 20dvh); animation: maidBob 3.8s ease-in-out infinite; pointer-events: none; }
.m-maid img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgba(0,50,70,.25)); }
.m-maid-cheer { position: absolute; left: 0; bottom: 0; opacity: 0; transition: opacity .5s ease; }
.m-maid-wave { transition: opacity .5s ease; }
.no-maid .m-maid { display: none; }
@keyframes maidBob { 50% { transform: translateY(-8px) rotate(-1.2deg); } }
.m-star { position: absolute; z-index: 2; right: 7vw; bottom: calc(10dvh - 16px); width: min(13vw, 52px); height: auto; animation: starWob 5s ease-in-out infinite; filter: drop-shadow(0 3px 4px rgba(0,50,70,.3)); }
@keyframes starWob { 50% { transform: rotate(8deg) scale(1.04); } }

.m-hint { position: absolute; z-index: 4; bottom: 3.4dvh; inset-inline: 0; margin: 0; text-align: center; font: 600 15px/1.4 var(--f-ui); color: #fff; text-shadow: 0 1px 6px rgba(0, 30, 50, .4); animation: hint 1.8s ease-in-out infinite; transition: opacity .3s; }
@keyframes hint { 50% { opacity: .55; transform: translateY(-3px); } }

/* pearl -> name + age */
.m-reveal { position: absolute; z-index: 5; inset-inline: 0; top: max(56px, 9dvh); display: grid; justify-items: center; pointer-events: none; }
.m-orb {
  position: relative; display: grid; place-items: center; width: min(44vw, 178px, 22dvh); aspect-ratio: 1; border-radius: 50%;
  background: url(art/pearl.webp) center / 100% 100% no-repeat;
  box-shadow: 0 0 0 6px rgba(255,255,255,.35), 0 0 46px 16px rgba(255, 246, 214, .75);
  opacity: 0; transform: translate(var(--fx, 0), var(--fy, 40dvh)) scale(.12);
  transition: transform 1.2s cubic-bezier(.2, .9, .3, 1), opacity .4s ease;
}

.m-orb-age { font: 900 clamp(70px, 21vw, 96px)/1 var(--f-display); color: var(--accent); padding-top: 6px; text-shadow: 0 2px 0 rgba(255,255,255,.85), 0 0 14px rgba(255,255,255,.7); }
.m-name {
  margin: 14px 0 0; padding: 8px 26px 10px; border-radius: 18px; background: rgba(255,255,255,.94); color: var(--accent);
  font: 900 clamp(28px, 9vw, 38px)/1.2 var(--f-display); text-align: center; max-width: 92%; overflow-wrap: anywhere;
  box-shadow: 0 10px 26px rgba(0, 40, 60, .22); border: 2px solid rgba(255,255,255,.9);
  opacity: 0; transform: translateY(14px) scale(.92); transition: opacity .6s ease .75s, transform .7s var(--spring) .75s;
}
.m-name small { display: block; font: 600 14px/1.4 var(--f-ui); color: var(--muted); }

.m-burst { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.m-burst i { position: absolute; border-radius: 50%; animation: burst ease-out forwards; }
@keyframes burst { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }

/* --- opened state --- */
.m-intro.is-open .m-greet { opacity: 0; transform: translateY(-14px); }
.m-intro.is-open .m-hint { opacity: 0; animation: none; }
.m-intro.is-open .m-clam { cursor: default; }
.m-intro.is-open .m-lid { animation: none; transform: rotateX(12deg); }
.m-intro.is-open .m-glow, .m-hero-art .m-glow { opacity: 1; transform: none; }
.m-intro.is-pearl .m-pearl { transform: translateY(calc(var(--w) * -.16)) scale(1.35); }
.m-intro.is-pearl .m-maid-wave { opacity: 0; }
.m-intro.is-pearl .m-maid-cheer { opacity: 1; animation: cheer 1.1s ease-in-out infinite alternate; }
@keyframes cheer { to { transform: translateY(-6px) scale(1.02); } }
.m-intro.is-reveal .m-pearl { opacity: 0; }
.m-intro.is-reveal .m-orb { opacity: 1; transform: none; }
.m-intro.is-reveal .m-name { opacity: 1; transform: none; }
.m-intro.is-done .m-orb { animation: orbFloat 3.4s ease-in-out infinite; }
@keyframes orbFloat { 50% { transform: translateY(-7px); } }

/* ---------- details card skin ---------- */
.mermaid .card-frame { border: 2px solid var(--line); border-radius: 34px; box-shadow: 0 0 0 6px var(--surface-2), 0 16px 40px rgba(15, 90, 110, .14); }
.mermaid .card-hero svg { width: 170px; }
.mermaid .cd { border-radius: 24px; }
.mermaid .facts li { border-radius: 22px; }
.mermaid .age-badge { background: radial-gradient(circle at 34% 30%, #fff 0 18%, var(--accent-2) 70%); box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0,0,0,.12); }
.m-hero-art { --w: 190px; position: relative; display: block; width: var(--w); height: calc(var(--w) * .74); margin: 118px auto 0; }
.m-hero-art .m-art { position: absolute; inset: 0; }
.m-hero-art .m-lid { animation: none; transform: rotateX(12deg); }
.m-hero-art .m-pearl { transform: none; }
.m-hero-art .m-tw { display: none; }
.mermaid .card-hero { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .m-shafts i, .m-fish, .m-star, .m-maid, .m-lid, .m-tw, .m-hint, .m-intro.is-pearl .m-maid-cheer, .m-intro.is-done .m-orb { animation: none !important; }
  .m-fish { display: none; }
  .m-lid, .m-glow, .m-pearl, .m-maid img { transition-duration: .01s !important; transition-delay: 0s !important; }
}