/* teddy «حفلة الدبدوب» — soft palette; palettes switch with body.pal-* (data.js theme.palette) */
:root, .pal-blush {
  --bg: #fff4f2; --bg-2: #ffe1e8; --surface: #ffffff; --surface-2: #fff5f6;
  --text: #5a3e30; --muted: #8e7064;
  --accent: #c94a72; --accent-2: #ffd98a; --accent-ink: #ffffff;
  --line: rgba(201, 74, 114, .22); --line-soft: rgba(201, 74, 114, .10);
  --gift: #ff9bb5; --gift-lid: #ff86a6; --ribbon: #fff1b8; --ribbon-dark: #f5d77a;
  --b1: #ffb3c7; --b2: #ff8fab; --b3: #ffd98a; --dot: #ffc2d2;
  --fur: #c99068; --fur-line: #9c6a49; --fur-light: #f0cfae; --cheek: #ff9fb2; --bow: #ff86a6;
}
.pal-mint {
  --bg: #f0faf5; --bg-2: #d9f3e8; --surface-2: #f2fbf7;
  --accent: #1f7f69; --accent-2: #ffe08a;
  --line: rgba(31, 127, 105, .22); --line-soft: rgba(31, 127, 105, .10);
  --gift: #8fdcc0; --gift-lid: #74cfae; --ribbon: #fff3c4; --ribbon-dark: #f2d47c;
  --b1: #b5ead7; --b2: #6fcfab; --b3: #ffe08a; --dot: #b5ead7; --bow: #6fcfab;
}
.pal-sky {
  --bg: #f0f6ff; --bg-2: #dceaff; --surface-2: #f3f8ff;
  --accent: #2f6fae; --accent-2: #ffe08a;
  --line: rgba(47, 111, 174, .22); --line-soft: rgba(47, 111, 174, .10);
  --gift: #9ccbff; --gift-lid: #84bdfb; --ribbon: #fff3c4; --ribbon-dark: #f2d47c;
  --b1: #bcdcff; --b2: #7db7f5; --b3: #ffe08a; --dot: #bcdcff; --bow: #7db7f5;
}
body.teddy { background: linear-gradient(180deg, var(--bg-2), var(--bg) 600px), var(--bg); }

/* ---------- intro (rendered art layers in art/*.webp) ---------- */
.t-intro { padding: 0; background: #f6c9cf; display: grid; place-items: center; }
.tb-fill { position: absolute; inset: -30px; background: #f6c9cf url(art/bg.webp) center / cover; filter: blur(20px); transform: scale(1.06); }
.tb-scene { position: relative; width: min(100vw, 100dvh * .6); height: 100dvh; overflow: hidden; }
.tb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.tb-dots { position: absolute; inset: 0; pointer-events: none; }
.tb-dots i { position: absolute; width: 9px; height: 9px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: tbTw 2.8s ease-in-out infinite; opacity: .85; }
@keyframes tbTw { 50% { opacity: .2; transform: scale(.5); } }

.tb-greet { position: relative; z-index: 3; text-align: center; margin-top: max(4dvh, calc(env(safe-area-inset-top) + 18px)); padding-inline: 16px; transition: opacity .5s, transform .5s var(--ease); color: #fff; text-shadow: 0 2px 10px rgba(160, 60, 90, .8), 0 0 3px rgba(160,60,90,.5); }
.tb-hello { margin: 0; font: 600 17px/1.5 var(--f-ui); }
.tb-line { margin: 2px 0 0; font: 900 clamp(26px, 8vw, 34px)/1.35 var(--f-display); text-wrap: balance; }

.tb-bear { --w: min(92vw, 400px, 46dvh); position: absolute; z-index: 3; left: 50%; bottom: 4.5dvh; width: var(--w); height: calc(var(--w) * 1.166); transform: translateX(-50%); padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; animation: tbBob 3.6s ease-in-out infinite; touch-action: manipulation; }
.tb-bear:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 30px; }
@keyframes tbBob { 50% { transform: translateX(-50%) translateY(-5px) rotate(.6deg); } }
.tb-bear img { position: absolute; left: 0; top: 0; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 14px 10px rgba(120, 60, 60, .35)); transition: opacity .35s, transform .6s var(--spring); }
.tb-open { opacity: 0; transform: scale(.85); transform-origin: 50% 90%; }
.tb-hint { position: absolute; z-index: 5; bottom: 1.4dvh; inset-inline: 0; margin: 0; text-align: center; font: 700 15px/1.4 var(--f-ui); color: #fff; text-shadow: 0 1px 8px rgba(150, 50, 80, .7); animation: tbHint 1.8s ease-in-out infinite; transition: opacity .3s; }
@keyframes tbHint { 50% { opacity: .6; transform: translateY(-3px); } }

.tb-cluster { position: absolute; z-index: 4; left: 50%; top: 12dvh; width: min(80%, 340px); transform: translateX(-50%); pointer-events: none; opacity: 0; }
.tb-cluster-in { position: relative; transform: translateY(70dvh) scale(.3); transform-origin: 50% 100%; opacity: 0; transition: transform 2.2s cubic-bezier(.2, .8, .25, 1), opacity .6s ease; }
.tb-cluster img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 10px rgba(120, 60, 60, .3)); }
.tb-age { position: absolute; left: 36%; top: 13%; width: 28%; display: grid; place-items: center; text-align: center; font: 900 clamp(44px, 14vw, 66px)/1 var(--f-display); color: #1f8a70; text-shadow: 0 2px 0 rgba(255,255,255,.8), 0 0 14px rgba(255,255,255,.7); }
.tb-tag { position: absolute; left: 50%; top: 50%; margin: 0; transform: translateX(-50%) rotate(-3deg); padding: 8px 20px 10px; border-radius: 16px; background: #fff; color: var(--accent); text-align: center; font: 900 clamp(24px, 7.6vw, 34px)/1.2 var(--f-display); box-shadow: 0 8px 20px rgba(150, 60, 80, .3); border: 2px solid var(--accent-2); max-width: 94vw; overflow-wrap: anywhere; white-space: nowrap; }
.tb-tag::before { content: ''; position: absolute; left: 50%; top: -22px; width: 2px; height: 22px; background: #fff; }
.tb-tag small { display: block; font: 600 13px/1.4 var(--f-ui); color: var(--muted); }
.tb-confetti { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.tb-confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: tbFall linear forwards; }
@keyframes tbFall { to { transform: translate3d(var(--dx), 110dvh, 0) rotate(var(--rot)); } }

/* states */
.t-intro.is-open .tb-closed { opacity: 0; transform: scale(1.06); }
.t-intro.is-open .tb-open { opacity: 1; transform: none; }
.t-intro.is-open .tb-bear { animation: none; cursor: default; pointer-events: none; }
.t-intro.is-open .tb-hint, .t-intro.is-open .tb-greet { opacity: 0; animation: none; }
.t-intro.is-open .tb-cluster { opacity: 1; }
.t-intro.is-open .tb-cluster-in { transform: none; opacity: 1; transition-delay: .35s; }
.t-intro.is-floating .tb-cluster-in { animation: tbFloat 3.4s ease-in-out infinite; }
@keyframes tbFloat { 50% { transform: translateY(-9px) rotate(-1deg); } }

/* ---------- details card skin ---------- */
.teddy .card-hero img { width: 200px; height: auto; margin-inline: auto; filter: drop-shadow(0 6px 6px rgba(150,70,70,.25)); }

@media (prefers-reduced-motion: reduce) {
  .tb-bear, .tb-hint, .tb-dots i, .t-intro.is-floating .tb-cluster-in { animation: none !important; }
  .tb-bear img, .tb-cluster-in { transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* ---------- details card skin ---------- */
.teddy .card-frame { border: 2px dashed var(--line); border-radius: 32px; box-shadow: 0 16px 40px rgba(201, 74, 114, .10); }
.teddy .card-hero svg { width: 170px; }
.teddy .cd { border-radius: 22px; }
.teddy .facts li { border-radius: 20px; }