/* Sweet Shop: the hero's candy street plays on its own (lollipops sway, sprinkles twinkle, the scoop
   tower wobbles, the treat critters bob, clouds drift). The film lives in film.css; the CLASSIC opening
   below (.op-swshower) only plays if the film can't load. Only transform and opacity animate. */
[data-theme="sweets"] .title, [data-theme="sweets"] .card h2, [data-theme="sweets"] .age-badge b { font-family: "Cherry Bomb One", "Quicksand", sans-serif; font-weight: 400; font-synthesis: none; }
[data-theme="sweets"] .title { color: #d23a6f; letter-spacing: .005em; text-shadow: 0 3px 0 rgba(255, 255, 255, .75); }
[data-theme="sweets"] .eyebrow { color: var(--ink); font-weight: 700; }
[data-theme="sweets"] .card { border-radius: 26px; box-shadow: 0 10px 28px rgba(140, 50, 90, .1), inset 0 0 0 1px #f6dfe5; }
[data-theme="sweets"] .btn { border-radius: 999px; }
[data-theme="sweets"] .btn, [data-theme="sweets"] .card h2, [data-theme="sweets"] .title, [data-theme="sweets"] .eyebrow { overflow-wrap: anywhere; }

/* the hero's candy street */
[data-theme="sweets"] .hero-art .sw-drift { animation: swi-drift 12s ease-in-out infinite alternate; }
[data-theme="sweets"] .hero-art .sw-twinkle { animation: swi-twinkle 3.2s ease-in-out infinite; }
[data-theme="sweets"] .hero-art .sw-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: swi-sway 4s ease-in-out infinite; }
[data-theme="sweets"] .hero-art .sw-sway2 { animation-delay: -1.6s; }
[data-theme="sweets"] .hero-art .sw-stack { transform-box: fill-box; transform-origin: 50% 100%; animation: swi-wobble 3.4s ease-in-out infinite; }
[data-theme="sweets"] .hero-art .sw-bob { animation: swi-bob 2.8s ease-in-out infinite; }
[data-theme="sweets"] .hero-art .sw-bob2 { animation-delay: -1.2s; }
[data-theme="sweets"] .hero-art .sw-awn { transform-box: fill-box; transform-origin: 50% 0; }

/* the Sweet ticket: candy stripes and a frosting-pink stub */
[data-theme="sweets"] .ticket { background: linear-gradient(180deg, #fffaf5, #ffe6ee); color: #3e2a2e; border-radius: 20px; box-shadow: 0 10px 24px rgba(140, 50, 90, .16), inset 0 0 0 2px #ffb3cb; }
[data-theme="sweets"] .ticket .t-main { border-right: 2px dashed #ff8fb1; }
[data-theme="sweets"] .ticket b { font-family: "Cherry Bomb One", sans-serif; font-weight: 400; color: #c22f62; }
[data-theme="sweets"] .ticket small { color: #6e5560; letter-spacing: .14em; }
[data-theme="sweets"].tv-slide h1, [data-theme="sweets"].tv-slide h2 { font-family: "Cherry Bomb One", sans-serif; font-weight: 400; }

/* the CLASSIC opening (only if the film can't load): the awning unrolls, the scoops drop, sprinkles twinkle */
[data-theme="sweets"] .op-card { background: rgba(255, 250, 245, .9); color: var(--cardInk); box-shadow: 0 18px 50px rgba(140, 50, 90, .18); }
[data-theme="sweets"] .op-eyebrow { color: #b02a5c; }
[data-theme="sweets"] .op-swshower .op-line { color: var(--ink); text-shadow: 0 2px 0 rgba(255, 255, 255, .75); }
[data-theme="sweets"] .op-swshower.op-run .sw-awn { animation: swi-unroll .9s .4s cubic-bezier(.2, .9, .25, 1.04) both; }
[data-theme="sweets"] .op-swshower.op-run .sw-stack { animation: swi-drop 1s 1.2s cubic-bezier(.45, 0, .4, 1) both; }
[data-theme="sweets"] .op-swshower.op-run .sw-twinkle { animation: swi-fall 2.2s 1.6s ease-out both; }
[data-theme="sweets"] .op-swshower.op-run .op-pal svg { transform-origin: 50% 100%; animation: swi-pop .7s calc(2.8s + var(--i) * .16s) cubic-bezier(.3, 1.5, .5, 1) both; }

@keyframes swi-drift { to { translate: 14px 0; } }
@keyframes swi-twinkle { 50% { opacity: .55; } }
@keyframes swi-sway { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes swi-wobble { 0%, 100% { rotate: 0deg; } 30% { rotate: 2deg; } 60% { rotate: -1.5deg; } }
@keyframes swi-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.5px; } }
@keyframes swi-unroll { from { scale: 1 0; } }
@keyframes swi-drop { from { opacity: 0; translate: 0 -120px; } }
@keyframes swi-fall { from { opacity: 0; translate: 0 -60px; } }
@keyframes swi-pop { from { opacity: 0; translate: 0 14px; scale: .6; } }

@media (prefers-reduced-motion: reduce) {
  [data-theme="sweets"] .hero-art *, [data-theme="sweets"] .op-pal svg { animation: none !important; }
}
