:root { --ink:#1d1d1b; --cream:#f6f1e8; --coral:#ff765f; --yellow:#ffd35a; --mint:#b6e6cf; --pastel-green:#cce8b8; --lavender:#c9b8ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:'Space Grotesk',sans-serif; }
.page-shell { max-width:1440px; margin:auto; padding:0 5.5vw; overflow:hidden; }
.topbar { height:102px; display:flex; align-items:center; justify-content:space-between; border-bottom:1.5px solid var(--ink); font:500 11px 'DM Mono',monospace; letter-spacing:.08em; }
.brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; font-weight:700; letter-spacing:.04em; font-size:14px; }
.brand-mark { display:grid; place-items:center; width:27px; height:27px; background:var(--coral); border-radius:50%; font-size:16px; }
.brand-dot { color:var(--coral); }.topbar-meta { opacity:.75; }.live-dot { display:inline-block; width:7px; height:7px; margin-right:7px; background:#4bc476; border-radius:50%; }.slash { margin:0 12px; opacity:.5; }
.hero { min-height:455px; padding:77px 0 60px; position:relative; isolation:isolate; }.hero-carousel { position:absolute; z-index:-1; inset:0 0 58px; overflow:hidden; opacity:.82; }.hero-carousel:after { content:''; position:absolute; inset:0; background:rgba(246,241,232,.2); }.hero > :not(.hero-carousel) { position:relative; z-index:1; }.carousel-slide { position:absolute; inset:0; opacity:0; animation:carousel-fade 12s infinite; }.slide-one { background:radial-gradient(circle at 63% 40%, var(--yellow) 0 11%, transparent 11.5%), radial-gradient(circle at 28% 68%, var(--coral) 0 17%, transparent 17.5%), linear-gradient(135deg, var(--mint), var(--lavender)); }.slide-two { background:radial-gradient(ellipse at 70% 35%, var(--coral) 0 16%, transparent 16.5%), radial-gradient(circle at 25% 65%, var(--yellow) 0 13%, transparent 13.5%), linear-gradient(145deg, var(--lavender), var(--mint)); animation-delay:4s; }.slide-three { background:radial-gradient(circle at 48% 42%, var(--pastel-green) 0 20%, transparent 20.5%), radial-gradient(circle at 75% 75%, var(--yellow) 0 12%, transparent 12.5%), linear-gradient(125deg, var(--coral), var(--lavender)); animation-delay:8s; }.carousel-dots { position:absolute; z-index:2; right:18px; bottom:18px; display:flex; gap:6px; }.carousel-dots span { width:7px; height:7px; border:1px solid var(--ink); border-radius:50%; }.carousel-dots .active { background:var(--ink); }
@keyframes carousel-fade { 0%,30% { opacity:1; } 33%,100% { opacity:0; } }
.science-bubble { position:absolute; display:grid; place-items:center; border:2px solid var(--ink); border-radius:50%; color:var(--ink); font:600 18px 'DM Mono',monospace; box-shadow:5px 5px 0 rgba(29,29,27,.16); }
.bubble-flask { width:78px; height:78px; right:15%; bottom:20%; background:var(--pastel-green); font-size:34px; transform:rotate(-12deg); }
.bubble-code { width:58px; height:58px; right:29%; bottom:31%; background:var(--yellow); transform:rotate(9deg); }
.bubble-math { width:108px; height:108px; right:6%; bottom:5%; background:var(--coral); font-size:14px; transform:rotate(-8deg); }
.bubble-monitor { width:72px; height:72px; right:39%; bottom:10%; background:var(--lavender); font-size:36px; transform:rotate(7deg); }
.bubble-wire { right:40%; bottom:43%; color:var(--coral); border:0; box-shadow:none; font-size:30px; transform:rotate(-18deg); }
.bubble-plus { width:42px; height:42px; right:9%; bottom:45%; background:var(--mint); font-size:27px; }
.eyebrow,.tag,.project-count,footer { font:500 11px 'DM Mono',monospace; letter-spacing:.1em; }.eyebrow { display:flex; align-items:center; gap:12px; }.eyebrow-line { display:inline-block; width:31px; border-top:2px solid var(--coral); }
h1 { margin:20px 0 15px; font-size:clamp(65px,10vw,140px); line-height:.83; letter-spacing:-.085em; font-weight:700; }.title-accent { color:var(--coral); position:relative; }.title-accent:after { content:''; position:absolute; height:10px; left:4px; right:7px; bottom:-3px; background:var(--yellow); z-index:-1; transform:rotate(-2deg); }.title-star { color:var(--yellow); font-size:.48em; vertical-align:top; margin-left:7px; }
.intro { font-size:17px; line-height:1.45; margin:27px 0 0; }.scroll-cue { position:absolute; right:0; bottom:10px; color:inherit; text-decoration:none; font:500 11px 'DM Mono',monospace; letter-spacing:.08em; display:flex; align-items:center; gap:10px; }.scroll-arrow { width:32px; height:32px; display:grid; place-items:center; background:var(--ink); color:var(--cream); border-radius:50%; font-size:18px; }
.projects-section { padding:0 0 105px; }.section-heading { display:flex; justify-content:space-between; align-items:center; border-top:1.5px solid var(--ink); padding:18px 0 22px; }.section-heading>div { display:flex; align-items:center; gap:18px; }.section-number { color:var(--coral); font:500 12px 'DM Mono',monospace; }.section-heading h2 { margin:0; font-size:23px; letter-spacing:-.04em; }.project-count { opacity:.6; }
.project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:25px; }.project-card { min-height:385px; padding:20px; color:var(--ink); text-decoration:none; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; }.project-card:hover { transform:translateY(-6px) rotate(-.5deg); box-shadow:8px 8px 0 var(--ink); }.game-card { background:var(--coral); }.notes-card { background:var(--yellow); }.garden-card { background:var(--pastel-green); }.radio-card { background:var(--lavender); }.card-top,.card-bottom { display:flex; justify-content:space-between; align-items:center; }.open-icon,.card-arrow { font-size:24px; }.project-card h3 { margin:0; font-size:29px; letter-spacing:-.06em; }.project-card p { margin:7px 0 0; font-size:13px; }.card-bottom { margin-top:auto; border-top:1.5px solid var(--ink); padding-top:14px; }
.game-art,.notes-art,.garden-art,.radio-art { flex:1; min-height:210px; margin:19px 0; position:relative; overflow:hidden; }.game-art { background:#5b43aa; }.pixel { position:absolute; color:var(--yellow); }.planet { font-size:150px; left:31%; top:18%; color:#ef684f; transform:rotate(-25deg); text-shadow:15px 13px 0 #312278; }.spark { font-size:32px; }.spark-one{top:19%;left:17%}.spark-two{right:16%;bottom:17%}.rocket { right:27%; top:22%; font-size:48px; color:var(--cream); transform:rotate(35deg); }.notes-art { background:#e67d58; padding:28px; }.scribble { display:block; font-size:38px; line-height:1; font-weight:600; transform:rotate(-7deg); }.tape { position:absolute; width:110px; height:33px; background:#f8d46d99; transform:rotate(19deg); right:16%; top:25%; }.garden-art { background:#e8f2d2; }.sun { position:absolute; right:12%; top:7%; font-size:70px; color:#f1a544; }.stem { position:absolute; bottom:-15px; width:8px; height:145px; background:#43956c; transform:rotate(10deg); }.stem-one{left:35%}.stem-two{left:61%;height:110px;transform:rotate(-15deg)}.flower { position:absolute; font-size:62px; color:#ef765e; }.flower-one{left:26%;top:31%}.flower-two{left:54%;top:49%;color:#a66fe0}.radio-art { background:#352c62; display:grid; place-items:center; }.radio-label { color:var(--yellow); font:500 22px 'DM Mono',monospace; letter-spacing:.12em; }.wave { position:absolute; border:2px solid var(--yellow); border-radius:50%; width:180px; height:180px; }.wave-one{width:115px;height:115px}.wave-two{width:260px;height:260px}.wave-three{width:390px;height:390px}
footer { display:flex; justify-content:space-between; padding:20px 0 25px; border-top:1.5px solid var(--ink); opacity:.6; }
@media (max-width:700px) { .page-shell{padding:0 20px}.topbar{height:76px}.topbar-meta{display:none}.hero{padding-top:55px;min-height:460px}.hero-carousel{opacity:.62}.desktop-break{display:none}.intro{font-size:15px}.scroll-cue{left:0;right:auto;bottom:45px}.project-grid{grid-template-columns:1fr;gap:18px}.project-card{min-height:350px}.section-heading{align-items:flex-start}.project-count{font-size:9px;margin-top:5px}footer{font-size:9px} }
.blank-card { min-height:385px; }.blank-one { background:var(--yellow); }.blank-two { background:var(--mint); }.blank-three { background:var(--lavender); }.blank-four { background:var(--pastel-green); }.blank-five { background:var(--coral); }.blank-six { background:var(--yellow); }.blank-seven { background:var(--mint); }.blank-eight { background:var(--lavender); }.blank-nine { background:var(--pastel-green); }
.game-card.is-animating .planet { animation:planet-bounce 5.4s linear infinite; }
.game-card.is-animating .rocket { animation:rocket-bounce 4.1s linear infinite 1.1s; }
.game-card.is-animating .spark-one { animation:spark-bounce-one 3.6s linear infinite .4s; }
.game-card.is-animating .spark-two { animation:spark-bounce-two 4.8s linear infinite 1.7s; }
.triangle-extra { right:13%; top:18%; color:var(--cream); font-size:26px; transform:rotate(18deg); }
.circle-extra { left:15%; bottom:19%; color:var(--yellow); font-size:22px; }
.game-card.is-animating .triangle-extra { animation:triangle-bounce 3.9s linear infinite .8s; }
.game-card.is-animating .circle-extra { animation:circle-bounce 4.6s linear infinite 1.4s; }
@keyframes planet-bounce { 0% { transform:translate(0,0) rotate(-25deg); } 25% { transform:translate(72px,-64px) rotate(-8deg); } 50% { transform:translate(-82px,-52px) rotate(-37deg); } 75% { transform:translate(-70px,72px) rotate(-18deg); } 100% { transform:translate(0,0) rotate(-25deg); } }
@keyframes rocket-bounce { 0% { transform:translate(0,0) rotate(35deg); } 25% { transform:translate(-72px,62px) rotate(12deg); } 50% { transform:translate(76px,60px) rotate(58deg); } 75% { transform:translate(66px,-72px) rotate(27deg); } 100% { transform:translate(0,0) rotate(35deg); } }
@keyframes spark-bounce-one { 0% { transform:translate(0,0); } 25% { transform:translate(78px,48px); } 50% { transform:translate(-48px,82px); } 75% { transform:translate(-78px,-42px); } 100% { transform:translate(0,0); } }
@keyframes spark-bounce-two { 0% { transform:translate(0,0) rotate(0); } 25% { transform:translate(-80px,-48px) rotate(35deg); } 50% { transform:translate(36px,-84px) rotate(-25deg); } 75% { transform:translate(82px,-24px) rotate(18deg); } 100% { transform:translate(0,0) rotate(0); } }
@keyframes triangle-bounce { 0% { transform:translate(0,0) rotate(18deg); } 33% { transform:translate(-72px,58px) rotate(48deg); } 66% { transform:translate(-94px,-45px) rotate(-15deg); } 100% { transform:translate(0,0) rotate(18deg); } }
@keyframes circle-bounce { 0% { transform:translate(0,0); } 33% { transform:translate(74px,-46px); } 66% { transform:translate(104px,48px); } 100% { transform:translate(0,0); } }

/* Minimal abstract carousel backgrounds */
.slide-one { background:linear-gradient(115deg, var(--lavender) 0 34%, transparent 34%), linear-gradient(25deg, var(--mint) 0 45%, var(--yellow) 45% 72%, var(--coral) 72%); }
.slide-two { background:linear-gradient(115deg, var(--mint) 0 29%, var(--lavender) 29% 63%, transparent 63%), linear-gradient(25deg, var(--mint) 0 45%, var(--yellow) 45% 72%, var(--coral) 72%); }
.slide-three { background:linear-gradient(115deg, var(--mint) 0 58%, var(--lavender) 58% 88%, transparent 88%), linear-gradient(25deg, var(--mint) 0 45%, var(--yellow) 45% 72%, var(--coral) 72%); }
.slide-one { opacity:1; animation:none; }
.title-accent:after { transform-origin:left center; animation:line-reveal .9s ease-out both; }
@keyframes line-reveal { from { transform:scaleX(0) rotate(-2deg); } to { transform:scaleX(1) rotate(-2deg); } }
.title-accent:after { animation-duration:.5s; }
.title-star { display:inline-block; transform:scale(0); animation:star-zoom .35s cubic-bezier(.2,1.4,.4,1) .5s both; }
@keyframes star-zoom { from { transform:scale(0) rotate(-25deg); } to { transform:scale(1) rotate(0); } }
.hero-carousel { display:none; }
.scroll-cue { transform:translateY(28px); }
@media (max-width:700px) { .scroll-cue { transform:translateY(18px); } }
.projects-section { margin-top:-35px; }
@media (max-width:700px) { .projects-section { margin-top:-20px; } }
.projects-section { margin-top:30px; }
@media (max-width:700px) { .projects-section { margin-top:10px; } }
.placeholder-art { flex:1; min-height:210px; margin:19px 0; display:grid; place-items:center; border:1.5px dashed var(--ink); background:rgba(246,241,232,.2); font-size:48px; font-weight:300; opacity:.72; }
.blank-one .placeholder-art { display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(4,1fr); background-color:rgba(246,241,232,.18); background-image:linear-gradient(to right, rgba(29,29,27,.35) 1px, transparent 1px), linear-gradient(to bottom, rgba(29,29,27,.35) 1px, transparent 1px); background-size:20% 25%; font-size:0; }
.blank-one .placeholder-art { border:0; }
.blank-one .placeholder-art { background-color:#050706; background-image:linear-gradient(to right, #39ff88 0 2px, transparent 2px), linear-gradient(to bottom, #39ff88 0 2px, transparent 2px); background-size:20% 25%; box-shadow:inset 0 0 18px rgba(57,255,136,.28), 0 0 8px rgba(57,255,136,.2); }
.blank-one .placeholder-art { background-color:#000000; }
.blank-one .placeholder-art { opacity:1; background-color:#000000; }
.blank-one .placeholder-art { grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); background-size:25% 25%; }
.blank-one .placeholder-art { opacity:.95; background-image:linear-gradient(to right, #ff3eb5 0 3px, transparent 3px), linear-gradient(to bottom, #ff3eb5 0 3px, transparent 3px); background-size:25% 25%; box-shadow:inset 0 0 18px rgba(255,62,181,.3), 0 0 8px rgba(255,62,181,.25); }
.blank-one .placeholder-art { grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(5,1fr); background-size:33.333% 20%; }
.blank-one .placeholder-art { grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(3,1fr); background-size:20% 33.333%; }
.blank-one .placeholder-art { opacity:1; background-color:rgba(0,0,0,.9); }
.blank-one .placeholder-art { border:3px solid #ff3eb5; box-sizing:border-box; }
.blank-one .placeholder-art { background-color:rgba(0,0,0,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.blank-one .placeholder-art { background-color:rgba(0,0,0,.7); }
.blank-one .placeholder-art { box-shadow:inset 0 0 10px #ff3eb5, 0 0 8px #ff3eb5, 0 0 20px rgba(255,62,181,.65); }
.blank-one .placeholder-art { background-image:linear-gradient(to right, rgba(255,62,181,.38) 0 6px, transparent 6px), linear-gradient(to bottom, rgba(255,62,181,.38) 0 6px, transparent 6px), linear-gradient(to right, #ff3eb5 0 3px, transparent 3px), linear-gradient(to bottom, #ff3eb5 0 3px, transparent 3px); background-size:20% 33.333%; }
.blank-one { background:#f6b6c9; }
.blank-one .placeholder-art { position:relative; } .mark { position:absolute; transform:translate(-50%,-50%); font:700 34px/1 "Space Grotesk",sans-serif; text-shadow:0 0 5px currentColor, 0 0 14px currentColor; } .mark-x { color:#fff; } .mark-o { color:#39ffb0; } .x-one { left:16.666%; top:16.666%; } .o-one { left:50%; top:16.666%; } .x-two { left:83.333%; top:50%; } .o-two { left:16.666%; top:83.333%; } .x-three { left:83.333%; top:83.333%; }
.x-one { left:10%; top:16.666%; } .o-one { left:30%; top:16.666%; } .x-two { left:70%; top:50%; } .o-two { left:50%; top:83.333%; } .x-three { left:90%; top:83.333%; }
.x-four { left:50%; top:16.666%; } .o-four { left:70%; top:16.666%; } .x-five { left:90%; top:16.666%; } .o-five { left:10%; top:50%; } .x-six { left:30%; top:50%; } .o-six { left:50%; top:50%; } .o-seven { left:90%; top:50%; } .x-seven { left:30%; top:83.333%; } .o-eight { left:70%; top:83.333%; }
.x-eight { left:50%; top:83.333%; }
.o-two { left:10%; top:83.333%; } .x-eight { left:50%; top:83.333%; }
.blank-one .mark { opacity:0; transform:translate(-50%,-50%) scale(.25); transition:opacity .18s ease, transform .28s cubic-bezier(.2,1.5,.4,1); } .blank-one .placeholder-art:hover .mark { opacity:1; transform:translate(-50%,-50%) scale(1); }
.blank-one .placeholder-art:hover .mark:nth-child(1) { transition-delay:.05s; } .blank-one .placeholder-art:hover .mark:nth-child(2) { transition-delay:.15s; } .blank-one .placeholder-art:hover .mark:nth-child(3) { transition-delay:.25s; } .blank-one .placeholder-art:hover .mark:nth-child(4) { transition-delay:.35s; } .blank-one .placeholder-art:hover .mark:nth-child(5) { transition-delay:.45s; } .blank-one .placeholder-art:hover .mark:nth-child(6) { transition-delay:.55s; } .blank-one .placeholder-art:hover .mark:nth-child(7) { transition-delay:.65s; } .blank-one .placeholder-art:hover .mark:nth-child(8) { transition-delay:.75s; } .blank-one .placeholder-art:hover .mark:nth-child(9) { transition-delay:.85s; } .blank-one .placeholder-art:hover .mark:nth-child(10) { transition-delay:.95s; } .blank-one .placeholder-art:hover .mark:nth-child(11) { transition-delay:1.05s; } .blank-one .placeholder-art:hover .mark:nth-child(12) { transition-delay:1.15s; } .blank-one .placeholder-art:hover .mark:nth-child(13) { transition-delay:1.25s; } .blank-one .placeholder-art:hover .mark:nth-child(14) { transition-delay:1.35s; } .blank-one .placeholder-art:hover .mark:nth-child(15) { transition-delay:1.45s; }
.blank-one .placeholder-art .mark { transition-duration:.5s; }
.blank-one .placeholder-art:hover .mark:nth-child(1){transition-delay:.1s}.blank-one .placeholder-art:hover .mark:nth-child(2){transition-delay:.3s}.blank-one .placeholder-art:hover .mark:nth-child(3){transition-delay:.5s}.blank-one .placeholder-art:hover .mark:nth-child(4){transition-delay:.7s}.blank-one .placeholder-art:hover .mark:nth-child(5){transition-delay:.9s}.blank-one .placeholder-art:hover .mark:nth-child(6){transition-delay:1.1s}.blank-one .placeholder-art:hover .mark:nth-child(7){transition-delay:1.3s}.blank-one .placeholder-art:hover .mark:nth-child(8){transition-delay:1.5s}.blank-one .placeholder-art:hover .mark:nth-child(9){transition-delay:1.7s}.blank-one .placeholder-art:hover .mark:nth-child(10){transition-delay:1.9s}.blank-one .placeholder-art:hover .mark:nth-child(11){transition-delay:2.1s}.blank-one .placeholder-art:hover .mark:nth-child(12){transition-delay:2.3s}.blank-one .placeholder-art:hover .mark:nth-child(13){transition-delay:2.5s}.blank-one .placeholder-art:hover .mark:nth-child(14){transition-delay:2.7s}.blank-one .placeholder-art:hover .mark:nth-child(15){transition-delay:2.9s}
.blank-one .placeholder-art:hover .mark:not(.revealed) { opacity:0 !important; transform:translate(-50%,-50%) scale(.25); } .blank-one .placeholder-art .mark.revealed { opacity:1 !important; transform:translate(-50%,-50%) scale(1); }
.blank-one .placeholder-art .mark { transition-delay:0s !important; }
.blank-two .placeholder-art { background:linear-gradient(135deg, #ffffff, #b9e6d0); }
.blank-two .placeholder-art { border:0; } .blank-two .placeholder-art::before { width:190px; height:62px; }
.blank-two .placeholder-art { font-size:0; border:0; }
.blank-two .placeholder-art { background:linear-gradient(135deg, #ffffff 0%, #b9e6d0 30%, #ffd6a5 58%, #f7b8c8 78%, #e5d6ff 100%); }
.blank-two .placeholder-art { background:linear-gradient(135deg, #ffffff 0%, #effcf4 24%, #c9f0dc 48%, #a8dfc4 70%, #e8fff1 100%); }
.blank-two .placeholder-art { position:relative; } .blank-two .placeholder-art::before { content:"🍽️  🍲  🥗"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:38px; letter-spacing:4px; white-space:nowrap; }
.blank-two .placeholder-art::before { content:"🍽️      🍲      🥗\A\A  🍜      🍰      🍕\A\A     🍓      🥐"; width:92%; text-align:center; white-space:pre; line-height:1.25; font-size:30px; letter-spacing:0; }
.blank-two .placeholder-art::before { content:none; } .blank-two .placeholder-art { position:relative; overflow:hidden; } .food-emoji { position:absolute; font-size:30px; line-height:1; } .food-1 { left:8%; top:12%; } .food-2 { left:41%; top:7%; } .food-3 { right:8%; top:18%; } .food-4 { left:18%; top:48%; } .food-5 { left:58%; top:39%; } .food-6 { right:12%; top:57%; } .food-7 { left:33%; bottom:9%; } .food-8 { right:34%; bottom:7%; }
.food-9 { left:5%; top:78%; } .food-10 { right:6%; top:39%; } .food-11 { left:75%; bottom:10%; } .food-12 { left:67%; top:12%; }
.blank-two .placeholder-art { opacity:1; } .blank-two .food-emoji { opacity:1; }
.blank-two .placeholder-art { border:3px solid #39ffb0; box-shadow:0 0 8px #39ffb0, inset 0 0 12px rgba(57,255,176,.35); box-sizing:border-box; }
.blank-two .placeholder-art { box-shadow:none; }
.blank-two .placeholder-art { border:0; }
.blank-two .food-emoji { font-size:40px; }
.food-1 { left:8%; top:12%; } .food-2 { left:34%; top:9%; } .food-3 { left:63%; top:14%; } .food-4 { right:7%; top:11%; } .food-5 { left:19%; top:45%; } .food-6 { left:48%; top:42%; } .food-7 { right:17%; top:48%; } .food-8 { left:9%; bottom:10%; } .food-9 { left:35%; bottom:8%; } .food-10 { right:7%; top:39%; } .food-11 { left:73%; bottom:10%; } .food-12 { left:56%; top:69%; }
.blank-two.food-moving .food-emoji { animation:food-drift 4.6s linear infinite; animation-play-state:running; } .blank-two .food-emoji { animation-play-state:paused; } .food-2 { animation-delay:.25s !important; } .food-3 { animation-delay:.5s !important; } .food-4 { animation-delay:.75s !important; } .food-5 { animation-delay:1s !important; } .food-6 { animation-delay:1.25s !important; } .food-7 { animation-delay:1.5s !important; } .food-8 { animation-delay:1.75s !important; } .food-9 { animation-delay:2s !important; } .food-10 { animation-delay:2.25s !important; } .food-11 { animation-delay:2.5s !important; } .food-12 { animation-delay:2.75s !important; } @keyframes food-drift { 0% { transform:translate(0,0) rotate(-4deg); } 25% { transform:translate(22px,-16px) rotate(7deg); } 50% { transform:translate(-18px,20px) rotate(-8deg); } 75% { transform:translate(20px,25px) rotate(5deg); } 100% { transform:translate(0,0) rotate(-4deg); } }
.blank-two.food-moving .food-emoji { animation-duration:2.6s; } @keyframes food-drift { 0% { transform:translate(0,0) rotate(-6deg); } 25% { transform:translate(46px,-34px) rotate(12deg); } 50% { transform:translate(-40px,42px) rotate(-14deg); } 75% { transform:translate(42px,50px) rotate(10deg); } 100% { transform:translate(0,0) rotate(-6deg); } }
.blank-one:hover .mark:not(.revealed) { opacity:0 !important; transform:translate(-50%,-50%) scale(.25); } .blank-one:hover .mark.revealed { opacity:1 !important; transform:translate(-50%,-50%) scale(1); }
.whack-title-art { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; overflow:hidden; background:linear-gradient(145deg,#f8c7d0,#f6bf79); } .mini-title { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; max-width:78%; font:700 37px/0.82 Impact, "Arial Black", sans-serif; letter-spacing:1px; color:#fffdf1; -webkit-text-stroke:1.5px #2d2030; text-shadow:0 4px 0 #d76c76; } .mini-title-part { display:inline-block; opacity:0; animation:mini-title-pop .42s cubic-bezier(.2,1.5,.4,1) forwards; } .mini-title-part:nth-child(1){animation-delay:.05s}.mini-title-part:nth-child(2){animation-delay:.2s}.mini-title-part:nth-child(3){animation-delay:.35s}.mini-title-part:nth-child(4){animation-delay:.5s}.mini-mole { transform:translateX(5px); } .mini-mascot { flex:0 0 47px; width:47px; height:53px; border-radius:50% 50% 44% 44%; background:radial-gradient(circle at 35% 38%,#2d2030 0 7%,transparent 8%),radial-gradient(circle at 65% 38%,#2d2030 0 7%,transparent 8%),radial-gradient(ellipse at 50% 59%,#f39a9a 0 7%,transparent 8%),#9a604e; box-shadow:inset 0 4px 0 rgba(255,255,255,.16),-5px 7px 7px rgba(45,25,37,.4); opacity:0; animation:mini-mascot-pop .45s cubic-bezier(.2,1.5,.4,1) .75s forwards; } @keyframes mini-title-pop { from{opacity:0;transform:translateY(12px) scale(.45)} to{opacity:1;transform:translateY(0) scale(1)} } @keyframes mini-mascot-pop { from{opacity:0;transform:translateY(16px) scale(.4) rotate(-8deg)} to{opacity:1;transform:translateY(0) scale(1) rotate(-8deg)} }
.whack-title-art { opacity:1; border:0; }
.whack-title-art { background:linear-gradient(155deg,#ffffff 0% 58%,#f2ecf7 100%); transform:perspective(700px) rotateX(2deg); transform-origin:center bottom; box-shadow:inset 0 -12px 20px rgba(82,60,88,.12); }
.blank-four .mini-title-part { opacity:0; animation:none; } .blank-four .mini-mascot { opacity:0; animation:none; } .blank-four:hover .mini-title-part { animation:mini-title-pop .42s cubic-bezier(.2,1.5,.4,1) forwards; } .blank-four:hover .mini-title-part:nth-child(1){animation-delay:.05s}.blank-four:hover .mini-title-part:nth-child(2){animation-delay:.2s}.blank-four:hover .mini-title-part:nth-child(3){animation-delay:.35s}.blank-four:hover .mini-title-part:nth-child(4){animation-delay:.5s} .blank-four:hover .mini-mascot { animation:mini-mascot-pop .45s cubic-bezier(.2,1.5,.4,1) .75s forwards; }
.blank-four .mini-title-part { opacity:1; } .blank-four .mini-mascot { opacity:1; }
.blank-four:hover .mini-title-part { animation:mini-title-pop .42s cubic-bezier(.2,1.5,.4,1) both; } .blank-four:hover .mini-title-part:nth-child(1){animation-delay:.2s}.blank-four:hover .mini-title-part:nth-child(2){animation-delay:.35s}.blank-four:hover .mini-title-part:nth-child(3){animation-delay:.5s}.blank-four:hover .mini-title-part:nth-child(4){animation-delay:.65s} .blank-four:hover .mini-mascot { animation:mini-mascot-pop .45s cubic-bezier(.2,1.5,.4,1) .95s both; }
.blank-four .mini-title-part { transform:translateY(0) scale(1); } .blank-four .mini-mascot { transform:translateY(0) scale(1) rotate(-8deg); }
.whack-title-art { position:relative; } .tiny-mole { position:absolute; z-index:3; width:22px; height:18px; border-radius:50% 50% 44% 44%; opacity:0; transform:translateY(10px) scale(.5); box-shadow:inset 0 3px 0 rgba(255,255,255,.25), 0 3px 3px rgba(45,25,37,.3); transition:opacity .3s ease, transform .3s cubic-bezier(.2,1.5,.4,1); } .tiny-mole::before { content:""; position:absolute; left:5px; top:6px; width:3px; height:3px; border-radius:50%; background:#2d2030; box-shadow:8px 0 #2d2030; } .tiny-normal { background:#9a604e; } .tiny-golden { background:#e9ae35; } .tiny-red { background:#d94757; } .tiny-mole.visible { opacity:1; transform:translateY(0) scale(1); }
.tiny-mole.visible { transition:none; transform:translateY(0) scale(1); }
.tiny-mole { width:27px; height:22px; } .tiny-mole::before { left:6px; top:7px; }
.tiny-mole { width:34px; height:28px; } .tiny-mole::before { left:8px; top:9px; width:4px; height:4px; box-shadow:10px 0 #2d2030; }
.tiny-mole { width:42px; height:34px; } .tiny-mole::before { left:10px; top:11px; width:5px; height:5px; box-shadow:12px 0 #2d2030; }
.blank-two .placeholder-art { background-color:#171936; background-image:radial-gradient(circle at 8% 16%, #ffffff 0 1px, transparent 1.5px), radial-gradient(circle at 23% 72%, #c9f7ff 0 1px, transparent 1.5px), radial-gradient(circle at 42% 28%, #ffffff 0 1px, transparent 1.5px), radial-gradient(circle at 61% 82%, #fff3a6 0 1px, transparent 1.5px), radial-gradient(circle at 78% 18%, #ffffff 0 1px, transparent 1.5px), radial-gradient(circle at 92% 64%, #c9f7ff 0 1px, transparent 1.5px), linear-gradient(135deg,#171936,#302554 55%,#15152c); background-size:auto; }
.blank-two .placeholder-art { background-color:#090b24; background-image:radial-gradient(ellipse at 22% 22%, rgba(114,92,210,.42) 0 10%, transparent 38%), radial-gradient(ellipse at 78% 72%, rgba(42,143,180,.3) 0 8%, transparent 36%), radial-gradient(ellipse at 58% 38%, rgba(206,80,154,.2) 0 7%, transparent 30%), radial-gradient(circle at 8% 16%,#fff 0 1px,transparent 1.5px), radial-gradient(circle at 23% 72%,#c9f7ff 0 1px,transparent 1.5px), radial-gradient(circle at 42% 28%,#fff 0 1px,transparent 1.5px), radial-gradient(circle at 61% 82%,#fff3a6 0 1px,transparent 1.5px), radial-gradient(circle at 78% 18%,#fff 0 1px,transparent 1.5px), radial-gradient(circle at 92% 64%,#c9f7ff 0 1px,transparent 1.5px), linear-gradient(135deg,#080a20,#241b4d 55%,#090b24); }
.blank-two .placeholder-art { background-image:radial-gradient(circle at 14% 38%,#ffffff 0 1px,transparent 1.5px),radial-gradient(circle at 31% 12%,#d8faff 0 1px,transparent 1.5px),radial-gradient(circle at 37% 88%,#fff3b0 0 1px,transparent 1.5px),radial-gradient(circle at 53% 61%,#ffffff 0 1px,transparent 1.5px),radial-gradient(circle at 68% 33%,#d8faff 0 1px,transparent 1.5px),radial-gradient(circle at 84% 86%,#ffffff 0 1px,transparent 1.5px),radial-gradient(circle at 96% 28%,#fff3b0 0 1px,transparent 1.5px),radial-gradient(ellipse at 22% 22%,rgba(114,92,210,.42) 0 10%,transparent 38%),radial-gradient(ellipse at 78% 72%,rgba(42,143,180,.3) 0 8%,transparent 36%),radial-gradient(ellipse at 58% 38%,rgba(206,80,154,.2) 0 7%,transparent 30%),linear-gradient(135deg,#080a20,#241b4d 55%,#090b24); }
.blank-three { background:var(--yellow); } .blank-six { background:var(--lavender); }
.blank-one .mark.initial { opacity:1 !important; transform:translate(-50%,-50%) scale(1); }
.blank-three .placeholder-art { position:relative; overflow:hidden; font-size:0; border:0; background:linear-gradient(to bottom,#8ed8f0 0% 72%,#b8e58b 72% 100%); } .blank-three .placeholder-art::before { content:""; position:absolute; left:18%; top:22%; width:72px; height:24px; border-radius:30px; background:#ffffff; box-shadow:38px 12px 0 6px #ffffff, 184px -10px 0 2px #f9ffff, 218px 5px 0 8px #ffffff, -16px 54px 0 3px rgba(255,255,255,.9), 24px 48px 0 8px rgba(255,255,255,.9); } .blank-three .placeholder-art::after { content:""; position:absolute; left:0; right:0; bottom:0; height:28%; background:linear-gradient(to bottom,#69b85c 0 12%,#3b8c4d 12% 100%); border-top:4px solid #2e7043; box-shadow:inset 0 8px 0 rgba(255,255,255,.18); }
.scene-tree { position:absolute; z-index:1; bottom:25%; width:18px; height:68px; background:#785039; border-radius:4px 4px 2px 2px; } .scene-tree::before { content:""; position:absolute; left:50%; top:-32px; width:58px; height:58px; transform:translateX(-50%); border-radius:50%; background:#3d9b59; box-shadow:inset -8px -7px 0 rgba(35,113,64,.2); } .tree-small { left:12%; height:46px; width:14px; } .tree-small::before { width:42px; height:42px; top:-24px; background:#65b967; } .tree-tall { left:42%; height:104px; width:21px; } .tree-tall::before { width:78px; height:78px; top:-48px; background:#338c51; } .tree-mid { right:18%; height:72px; width:17px; } .tree-mid::before { width:62px; height:62px; top:-36px; background:#4aa65c; } .tree-far { right:4%; bottom:27%; height:38px; width:11px; opacity:.8; } .tree-far::before { width:36px; height:36px; top:-22px; background:#74c66d; }
.blank-three .placeholder-art { opacity:1; }
.blank-three .scene-tree { will-change:transform; } .blank-three .placeholder-art:hover .scene-tree { animation:tree-scroll 4.8s linear infinite; } .blank-three .placeholder-art .moving-tree { left:108% !important; animation:tree-scroll 4.8s linear forwards; } @keyframes tree-scroll { from { transform:translateX(0); } to { transform:translateX(-480px); } }
.blank-three:hover .scene-tree { animation:tree-scroll 4.8s linear infinite; }
.blank-three .scene-tree { animation-play-state:paused; } .blank-three:hover .scene-tree { animation-play-state:running; }
.blank-three .scene-tree { animation:tree-scroll 4.8s linear infinite; animation-play-state:paused; } .blank-three:hover .scene-tree { animation-play-state:running; }
.title-star { font-family:"Space Grotesk", Arial, sans-serif; font-variant-emoji:text; font-size:clamp(30px, 5vw, 68px); line-height:1; }
.blank-five .placeholder-art { position:relative; overflow:hidden; font-size:0; border:7px solid #fffdf9; border-bottom:0; border-radius:28px 28px 0 0; background:linear-gradient(160deg,#bfe8e5,#e6faf4 66%,#c6ede5); box-shadow:inset 0 0 0 1px rgba(66,138,132,.11); } .blank-five .placeholder-art::before { content:""; position:absolute; left:50%; top:12%; width:86%; height:105%; transform:translateX(-50%); clip-path:polygon(43% 0,57% 0,92% 100%,8% 100%); background:repeating-linear-gradient(to bottom,rgba(244,211,145,.45) 0 10px,transparent 10px 34px),#fff8df; border:3px solid #f3d792; box-sizing:border-box; } .blank-five .placeholder-art::after { content:""; position:absolute; left:50%; top:68%; width:52px; height:52px; transform:translate(-50%,-50%); border:3px solid rgba(255,255,255,.75); border-radius:50%; background:radial-gradient(circle at 34% 28%,#fff8f3 0 9%,#ffc2ad 25%,#f38777 76%); box-shadow:0 12px 0 -4px rgba(89,124,106,.2); }
.blank-five .placeholder-art { border-radius:0; opacity:1; }
.blank-five .placeholder-art { border:7px solid #fffdf9; }
.blank-five:hover .placeholder-art::before { animation:tread-scroll .65s linear infinite; } @keyframes tread-scroll { from { background-position:0 0; } to { background-position:0 34px; } }
.blank-five:hover .placeholder-art::after { animation:runner-ball-bounce .45s ease-in-out infinite; } @keyframes runner-ball-bounce { 0%,100% { transform:translate(-50%,-50%); } 50% { transform:translate(-50%,-68%); } }

.open-icon, .card-arrow {
  font-family: Arial, Helvetica, sans-serif;
  font-variant-emoji: text;
  font-synthesis: none;
}