/* Block Builders: the invite, the Builder pass, the block-frame photo and Party TV.
   Ambient motion: the island floats, the clouds drift, blocks of water tumble off the edge and the
   Builder Buddies hop. The opening film lives in film.css; ".op-build" below is its short fallback. */
[data-theme="blocks"] .title, [data-theme="blocks"] .card h2, [data-theme="blocks"] .age-badge b { font-family: "Bungee", Impact, sans-serif; font-weight: 400; font-synthesis: none; }
[data-theme="blocks"] .title { color: #1b2a44; letter-spacing: .01em; text-shadow: .04em .05em 0 #ffcf3d, .08em .1em 0 #e98b3a; }
[data-theme="blocks"] .eyebrow { color: #1b2a44; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; }
[data-theme="blocks"] .card { border-radius: 14px; box-shadow: 0 6px 0 #d3e6f3, var(--shadow), inset 0 0 0 2px #d3e6f3; }
[data-theme="blocks"] .btn { border-radius: 10px; font-weight: 800; box-shadow: inset 0 -4px 0 rgba(27, 42, 68, .22); }
[data-theme="blocks"] .btn, [data-theme="blocks"] .card h2, [data-theme="blocks"] .title, [data-theme="blocks"] .eyebrow { overflow-wrap: anywhere; }

/* the hero's ambient life */
[data-theme="blocks"] .hero-art .bb-bob { animation: bb-float 5.4s ease-in-out infinite; }
[data-theme="blocks"] .hero-art .bb-bob2 { animation: bb-float 6.2s -2s ease-in-out infinite; }
[data-theme="blocks"] .hero-art .bb-bob3 { animation: bb-float 4.8s -1s ease-in-out infinite; }
[data-theme="blocks"] .hero-art .bb-drift { animation: bb-drift 16s ease-in-out infinite alternate; }
[data-theme="blocks"] .hero-art .bb-drift2 { animation-duration: 22s; animation-direction: alternate-reverse; }
[data-theme="blocks"] .hero-art .bb-wd { animation: bb-tumble 1.6s linear infinite; animation-delay: calc(var(--i) * -.4s); }
[data-theme="blocks"] .hero-art .bb-hop { transform-box: fill-box; transform-origin: 50% 100%; animation: bb-hop 2.6s ease-in-out infinite; }
[data-theme="blocks"] .hero-art .bb-hop2 { animation-delay: -.9s; }
[data-theme="blocks"] .hero-art .bb-hop3 { animation-delay: -1.7s; }
[data-theme="blocks"] .critter .cr-eye { transform-box: fill-box; transform-origin: center; animation: bb-blink 5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.1s - .6s); }

/* the kid's photo: the stamp gets a chunky cube border */
[data-theme="blocks"] .kp-stamp .kp-win, [data-theme="blocks"] .kp-oval .kp-win { box-shadow: 0 0 0 3px #1b2a44, 0 0 0 calc(var(--kp-w) * .06) #6fcf5a, 0 calc(var(--kp-w) * .03) 0 calc(var(--kp-w) * .06) #4fae48, 0 10px 22px rgba(27, 42, 68, .22); }

/* the Builder pass: a sky-blue ticket with a stacked block stub */
[data-theme="blocks"] .ticket { background: #ffffff; color: #1b2a44; border-radius: 12px; box-shadow: 0 6px 0 #4fae48, 0 14px 28px rgba(27, 42, 68, .2), inset 0 0 0 3px #6fcf5a; }
[data-theme="blocks"] .ticket .t-main { border-right: 2px dashed rgba(27, 42, 68, .25); }
[data-theme="blocks"] .ticket small { color: #2f7d2a; letter-spacing: .2em; font-weight: 800; }
[data-theme="blocks"] .ticket b { font-family: "Bungee", Impact, sans-serif; font-weight: 400; color: #1b2a44; }
[data-theme="blocks"] .ticket .t-stub { background: linear-gradient(#5cc8ff 0 25%, #6fcf5a 25% 50%, #e98b3a 50% 75%, #8b93a1 75%); }

/* the classic opening (only if the film can't load): the island drops in, the sign stamps down */
[data-theme="blocks"] .op-build.op-run .bb-t { transform-box: fill-box; transform-origin: 50% 100%; animation: bb-drop .6s calc(.2s + var(--g) * .16s) cubic-bezier(.3, .9, .4, 1) both; }
[data-theme="blocks"] .op-build.op-run .bb-key { transform-box: fill-box; transform-origin: 50% 100%; animation: bb-drop .6s 2.2s cubic-bezier(.3, .9, .4, 1) both; }
[data-theme="blocks"] .op-build.op-run .bb-sign { transform-box: fill-box; transform-origin: 50% 100%; animation: bb-drop .7s 2.4s cubic-bezier(.34, 1.4, .64, 1) both; }
[data-theme="blocks"] .op-card { background: rgba(255, 255, 255, .95); color: var(--cardInk); border-radius: 14px; box-shadow: 0 6px 0 #4fae48, 0 18px 44px rgba(27, 42, 68, .22), inset 0 0 0 2px #6fcf5a; }
[data-theme="blocks"] .op-eyebrow { color: #2f7d2a; }
[data-theme="blocks"] .op-build .op-line { font-family: "Bungee", Impact, sans-serif; font-weight: 400; color: #1b2a44; text-shadow: 0 2px 0 rgba(255, 255, 255, .8); }
[data-theme="blocks"].tv-slide h1, [data-theme="blocks"].tv-slide h2 { font-family: "Bungee", Impact, sans-serif; font-weight: 400; color: #1b2a44; text-shadow: .04em .05em 0 #ffcf3d, .08em .1em 0 #e98b3a; }
[data-theme="blocks"].tv-bd { opacity: .95; }

@keyframes bb-float { 50% { transform: translateY(-3px); } }
@keyframes bb-drift { to { transform: translateX(14px); } }
@keyframes bb-tumble { 0% { transform: translateY(-14px); opacity: 0; } 15% { opacity: 1; } 80% { opacity: .9; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes bb-hop { 0%, 60%, 100% { transform: translateY(0) scale(1, 1); } 70% { transform: translateY(0) scale(1.08, .92); } 82% { transform: translateY(-6px) scale(.96, 1.05); } 92% { transform: translateY(0) scale(1.04, .96); } }
@keyframes bb-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
@keyframes bb-drop { 0% { opacity: 0; transform: translateY(-60px); } 55% { opacity: 1; transform: translateY(0) scale(1.1, .86); } 78% { transform: translateY(-3px) scale(.97, 1.04); } 100% { opacity: 1; transform: translateY(0) scale(1, 1); } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="blocks"] .hero-art *, [data-theme="blocks"] .critter .cr-eye { animation: none !important; }
}