/* Puppy Playdate: the hero's backyard plays on its own (a bouncing ball, a ticking sprinkler, flapping bunting,
   a gate that creaks ajar, a pup peeking from the doghouse). The film lives in film.css; the CLASSIC opening
   below (.op-pupgate) only plays if the film can't load. Only transform and opacity animate. */
[data-theme="puppy"] .title, [data-theme="puppy"] .card h2, [data-theme="puppy"] .age-badge b { font-family: "Baloo 2", "Nunito", sans-serif; font-weight: 800; font-synthesis: none; }
[data-theme="puppy"] .title { color: #c4572f; letter-spacing: -.005em; text-shadow: 0 3px 0 rgba(255, 255, 255, .7); }
[data-theme="puppy"] .eyebrow { color: var(--ink); font-weight: 800; }
[data-theme="puppy"] .card { border-radius: 26px; box-shadow: 0 10px 28px rgba(35, 49, 74, .1), inset 0 0 0 1px #f1e4cb; }
[data-theme="puppy"] .btn { border-radius: 999px; }
[data-theme="puppy"] .btn, [data-theme="puppy"] .card h2, [data-theme="puppy"] .title, [data-theme="puppy"] .eyebrow { overflow-wrap: anywhere; }

/* the hero's backyard */
[data-theme="puppy"] .hero-art .pp-rays { transform-box: fill-box; transform-origin: center; animation: ppi-spin 50s linear infinite; }
[data-theme="puppy"] .hero-art .pp-cloud { animation: ppi-drift 12s ease-in-out infinite alternate; }
[data-theme="puppy"] .hero-art .pp-cloud2 { animation-duration: 15s; animation-delay: -6s; }
[data-theme="puppy"] .hero-art .pp-gl, [data-theme="puppy"] .hero-art .pp-gr { transform-box: fill-box; transform: scaleX(.62); }
[data-theme="puppy"] .hero-art .pp-gl { transform-origin: left center; animation: ppi-creak 6s ease-in-out infinite; }
[data-theme="puppy"] .hero-art .pp-gr { transform-origin: right center; animation: ppi-creak 6s -.4s ease-in-out infinite; }
[data-theme="puppy"] .hero-art .pp-bounce { animation: ppi-bounce 1.15s cubic-bezier(.4, 0, .6, 1) infinite; }
[data-theme="puppy"] .hero-art .pp-shadow { transform-box: fill-box; transform-origin: center; animation: ppi-shadow 1.15s cubic-bezier(.4, 0, .6, 1) infinite; }
[data-theme="puppy"] .hero-art .pp-roll { animation: ppi-spin 2.3s linear infinite; }
[data-theme="puppy"] .hero-art .pp-drop { animation: ppi-drip 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.16s); }
[data-theme="puppy"] .hero-art .pp-flag { transform-box: fill-box; transform-origin: 50% 0; animation: ppi-flap 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
[data-theme="puppy"] .hero-art .pp-peek { animation: ppi-peek 3.6s ease-in-out infinite; }
[data-theme="puppy"] .hero-art .pp-hp { animation: ppi-hop 1.15s ease-in-out infinite; }
[data-theme="puppy"] .hero-art .pp-hp2 { animation-delay: -.5s; }

/* the kid's photo: a gold dog tag ring */
[data-theme="puppy"] .kp-circle .kp-win { box-shadow: 0 0 0 4px #fff8ec, 0 0 0 8px #ffd166, 0 8px 20px rgba(60, 40, 20, .2); }

/* the Playdate pass: a cream ticket with a collar-orange stub */
[data-theme="puppy"] .ticket { background: linear-gradient(180deg, #fffdf7, #fff1d4); color: #2c2a3f; border-radius: 20px; box-shadow: 0 10px 24px rgba(60, 40, 20, .16), inset 0 0 0 2px #f3c99a; }
[data-theme="puppy"] .ticket .t-main { border-right: 2px dashed #e8b48a; }
[data-theme="puppy"] .ticket b { font-family: "Baloo 2", sans-serif; font-weight: 800; color: #b5532f; }
[data-theme="puppy"] .ticket small { color: #5c5a6e; letter-spacing: .14em; }
[data-theme="puppy"].tv-slide h1, [data-theme="puppy"].tv-slide h2 { font-family: "Baloo 2", sans-serif; font-weight: 800; }

/* the CLASSIC opening (only if the film can't load): the gate swings open, the ball bounces, the pups hop in */
[data-theme="puppy"] .op-card { background: rgba(255, 253, 247, .9); color: var(--cardInk); box-shadow: 0 18px 50px rgba(35, 49, 74, .18); }
[data-theme="puppy"] .op-eyebrow { color: #a8461f; }
[data-theme="puppy"] .op-pupgate .op-line { color: var(--ink); text-shadow: 0 2px 0 rgba(255, 255, 255, .7); }
[data-theme="puppy"] .op-pupgate.op-run .pp-gl { animation: ppi-open 1.2s .4s cubic-bezier(.65, 0, .25, 1) both; }
[data-theme="puppy"] .op-pupgate.op-run .pp-gr { animation: ppi-open 1.2s .5s cubic-bezier(.65, 0, .25, 1) both; }
[data-theme="puppy"] .op-pupgate.op-run .pp-sunny { animation: ppi-rise 2.4s .1s cubic-bezier(.2, .8, .2, 1) both; }
[data-theme="puppy"] .op-pupgate.op-run .pp-bunt { animation: ppi-drop 1s 1.4s cubic-bezier(.2, .9, .25, 1.04) both; }
[data-theme="puppy"] .op-pupgate.op-run .op-pal svg { transform-origin: 50% 100%; animation: ppi-hop .7s calc(2.6s + var(--i) * .16s) ease-out both; }

@keyframes ppi-spin { to { rotate: 360deg; } }
@keyframes ppi-drift { to { translate: 14px 0; } }
@keyframes ppi-creak { 0%, 100% { transform: scaleX(.62); } 50% { transform: scaleX(.5); } }
@keyframes ppi-open { from { transform: scaleX(1); } to { transform: scaleX(.62); } }
@keyframes ppi-bounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 -20px; } }
@keyframes ppi-shadow { 0%, 100% { scale: 1; opacity: .35; } 50% { scale: .55; opacity: .15; } }
@keyframes ppi-drip { 0%, 100% { opacity: .15; } 50% { opacity: .95; } }
@keyframes ppi-flap { 50% { rotate: 6deg; } }
@keyframes ppi-peek { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@keyframes ppi-hop { 0%, 100% { translate: 0 0; } 45% { translate: 0 -5px; } }
@keyframes ppi-rise { from { opacity: .3; translate: 0 60px; } }
@keyframes ppi-drop { from { opacity: 0; translate: 0 -30px; } }

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