/* Party Pals. Styled to match the graphics Party Pals already post on Facebook:
   black starry ground, glitter rainbow, glossy balloons, gold glitter panels,
   neon-edged boxes, coloured star bullets and a pink ribbon with a yellow phone number. */

@font-face { font-family: "Fredoka"; src: url("../fonts/fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Anton"; src: url("../fonts/anton.woff2") format("woff2"); font-display: swap; }

:root {
  --night: #07040f;
  --white: #fff;
  --soft: #d9d3ea;
  --pink: #ff3fa4;
  --magenta: #C4348F;
  --purple: #6a1fb8;
  --violet: #a24bff;
  --deep: #2a0b4d;
  --cyan: #2fd0ff;
  --green: #60B040;
  --yellow: #ffe63b;
  --gold: #f4c534;
  --ink: #3b0f6e;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--white);
  font: 500 18px/1.5 "Fredoka", system-ui, sans-serif;
  overflow-x: hidden;
  background-color: var(--night);
  background-image:
    radial-gradient(circle, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle, var(--yellow) 0 1.4px, transparent 2px),
    radial-gradient(circle, var(--pink) 0 1.4px, transparent 2px),
    radial-gradient(circle, var(--cyan) 0 1.2px, transparent 1.8px),
    radial-gradient(circle, var(--violet) 0 1.6px, transparent 2.2px);
  background-size: 71px 83px, 137px 119px, 163px 151px, 97px 109px, 191px 173px;
  background-position: 0 0, 30px 50px, 80px 20px, 15px 70px, 120px 90px;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; position: relative; }

/* Placeholders: anything still to confirm with Party Pals wears a dashed outline and a tag. */
.ph { outline: 2px dashed var(--yellow); outline-offset: 4px; position: relative; }
.ph[data-ph]::after {
  content: attr(data-ph); position: absolute; top: -14px; left: 6px; z-index: 5;
  padding: 2px 7px; background: var(--yellow); color: #000;
  font: 700 10px/1.4 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.ph-photo { display: grid; place-items: center; text-align: center; padding: 24px; color: #cbbfe6; font-weight: 600;
  background: repeating-linear-gradient(45deg, #1a0f2e 0 14px, #140a24 14px 28px); }

/* ---------- Shared pieces ---------- */
.ribbon {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #7b2fd6, #4b1592); color: var(--white);
  border: 3px solid var(--gold); border-radius: 999px; padding: 8px 22px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  box-shadow: 0 4px 0 #2b0a57;
}
.ribbon .s { color: var(--pink); }
.stars { list-style: none; margin: 0; padding: 0; }
.stars li { position: relative; padding-left: 1.6em; margin: .25em 0; }
.stars li::before { content: "\2605"; position: absolute; left: 0; top: -.02em; font-size: 1.1em; }
.stars li:nth-child(4n+1)::before { color: var(--pink); }
.stars li:nth-child(4n+2)::before { color: #3d8bff; }
.stars li:nth-child(4n+3)::before { color: #2fbf4a; }
.stars li:nth-child(4n+4)::before { color: var(--violet); }

.neon {
  --n: var(--pink);
  background: rgba(30, 8, 56, .88); border: 3px solid var(--n); border-radius: 22px;
  box-shadow: 0 0 10px var(--n), 0 0 26px color-mix(in srgb, var(--n) 55%, transparent), inset 0 0 18px color-mix(in srgb, var(--n) 30%, transparent);
  padding: 22px 20px;
}
.neon.c { --n: var(--cyan); } .neon.v { --n: var(--violet); } .neon.g { --n: var(--gold); }
.neon h3 { margin: 0 0 12px; text-align: center; }

.rainbow-text {
  font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  background: linear-gradient(90deg, var(--yellow) 0 18%, #b6f03a 30%, #2fd0ff 48%, #6b8cff 58%, var(--pink) 70%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #2b0a57) drop-shadow(0 0 1px #2b0a57);
}

.bubble { position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.9) 0 6%, transparent 14%),
              radial-gradient(circle at 70% 75%, rgba(255,120,220,.45), transparent 45%),
              radial-gradient(circle at 25% 75%, rgba(80,220,255,.45), transparent 45%),
              radial-gradient(circle, transparent 58%, rgba(255,255,255,.55) 68%, rgba(255,255,255,.1) 72%);
  animation: drift 7s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(8px, -14px); } }

.twinkle { position: absolute; color: var(--gold); pointer-events: none; animation: tw 2.2s ease-in-out infinite; font-size: 22px; }
@keyframes tw { 0%, 100% { opacity: .2; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }

/* ---------- Top bar ---------- */
.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; position: relative; z-index: 5; }
.bar .mini { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 18px rgba(255,63,164,.6); display: block; }
.bar .mini img { width: 100%; height: 100%; border-radius: 50%; }
.bar .home { color: #fff; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 2px solid currentColor; font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; background: rgba(0,0,0,.35); transition: transform .2s, background .2s; }
.bar .home:hover, .bar .home:focus-visible { transform: translateX(-3px); background: rgba(0,0,0,.6); }
.bar .home::before { content: "\2190"; font-size: 1.15em; }
@media (max-width: 420px) { .bar .home .long { display: none; } }
.bar .tel { background: var(--yellow); color: #1a0533; font-weight: 700; text-decoration: none; padding: 10px 18px; border-radius: 999px; box-shadow: 0 0 18px rgba(255,230,59,.55); white-space: nowrap; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; text-align: center; padding: 10px 0 48px; }
.arc { position: absolute; left: 50%; top: 40px; width: min(1100px, 170vw); aspect-ratio: 2 / 1; translate: -50% 0; pointer-events: none;
  background:
    radial-gradient(50% 100% at 50% 100%, transparent 0 58%, #8f3bff 58% 63%, #2f8bff 63% 68%, #2fbf4a 68% 73%, #ffe63b 73% 78%, #ff9d1c 78% 83%, #ff3b3b 83% 88%, transparent 88%);
  -webkit-mask: linear-gradient(#000 60%, transparent 98%); mask: linear-gradient(#000 60%, transparent 98%); }
.arc::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: radial-gradient(circle, rgba(255,255,255,.75) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(255,255,255,.5) 0 1px, transparent 1.6px);
  background-size: 9px 11px, 13px 7px; mix-blend-mode: overlay;
  -webkit-mask: radial-gradient(50% 100% at 50% 100%, transparent 0 58%, #000 58% 88%, transparent 88%); mask: radial-gradient(50% 100% at 50% 100%, transparent 0 58%, #000 58% 88%, transparent 88%); }
.logo-big { position: relative; z-index: 2; width: clamp(260px, 44vw, 440px); margin: 24px auto 0; }
.logo-big img { width: 100%; height: auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,.6)); }
.cluster { position: absolute; z-index: 1; width: clamp(130px, 22vw, 250px); top: 60px; animation: float 5s ease-in-out infinite alternate; }
.cluster.l { left: -2%; } .cluster.r { right: -2%; animation-delay: -2.5s; }
@keyframes float { to { transform: translateY(-14px) rotate(2deg); } }
.magic { position: relative; z-index: 2; margin: 26px 0 0; font-weight: 700; font-size: clamp(24px, 4.4vw, 42px); line-height: 1.15; }
.magic b { color: var(--yellow); font-weight: 700; }
.perfect { position: relative; z-index: 2; margin: 18px 0 0; font-size: clamp(56px, 12vw, 128px); line-height: .95; }
.tag { position: relative; z-index: 2; margin: 10px 0 30px; font-size: clamp(18px, 2.6vw, 24px); color: var(--soft); }
.ctas { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.btn { display: inline-block; font-weight: 700; text-decoration: none; padding: 14px 26px; border-radius: 999px; font-size: 19px; }
.btn-y { background: var(--yellow); color: #1a0533; box-shadow: 0 0 22px rgba(255,230,59,.55); }
.btn-p { background: var(--pink); color: #fff; box-shadow: 0 0 22px rgba(255,63,164,.55); }
.btn-o { border: 3px solid var(--cyan); box-shadow: 0 0 14px rgba(47,208,255,.5); }

/* ---------- Gold glitter package panel ---------- */
section { padding: 64px 0; position: relative; }
.sec-head { text-align: center; margin: 0 0 28px; }
.sec-head h2 { margin: 12px 0 0; font-size: clamp(40px, 8vw, 76px); line-height: 1; }
.sec-head p { margin: 10px auto 0; color: var(--soft); max-width: 40ch; }

.gold {
  position: relative; max-width: 720px; margin: 0 auto; color: var(--ink); text-align: center;
  border-radius: 40px; padding: 30px clamp(18px, 5vw, 48px) 34px;
  background:
    radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,250,200,.7) 0 1.2px, transparent 2px),
    linear-gradient(140deg, #fff1a6 0%, #f4c534 22%, #e7a514 45%, #ffe27a 62%, #f0b52a 80%, #fff0a0 100%);
  background-size: 7px 9px, 13px 11px, 100% 100%;
  box-shadow: 0 0 0 6px #b97c0b, 0 0 0 10px #ffe58a, 0 0 40px rgba(244,197,52,.5);
}
.gold .ribbon { font-size: clamp(16px, 3.6vw, 24px); margin-top: -58px; }
.gold .only { margin: 18px 0 0; font: 700 clamp(26px, 5vw, 36px)/1 "Fredoka", sans-serif; letter-spacing: .04em; }
.price {
  margin: 4px 0 14px; font: 700 clamp(96px, 22vw, 170px)/.95 "Fredoka", sans-serif; letter-spacing: -.02em;
  background: linear-gradient(180deg, #8a3be0, #4a138f 60%, #6d22c4); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(3px 4px 0 #fff3b0) drop-shadow(0 0 1px #2b0a57);
}
.gold .stars { display: inline-block; text-align: left; font-size: clamp(19px, 3.4vw, 25px); font-weight: 700; line-height: 1.3; }
.gold .stars li::before { filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.pkg-info { display: grid; gap: 22px; max-width: 760px; margin: 40px auto 0; }
@media (min-width: 720px) { .pkg-info { grid-template-columns: 1.1fr 1fr; } }
.pkg-info .neon { display: flex; gap: 16px; align-items: center; }
.pkg-info .ico { flex: none; width: 58px; height: 58px; }
.times b { display: block; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }
.times p { margin: 2px 0 0; font-size: 20px; font-weight: 600; }
.times .sat { color: var(--pink); } .times .sun { color: #59e06c; }
.venue b { display: block; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
.venue strong { display: block; font-size: clamp(26px, 5vw, 34px); line-height: 1.05; }
.venue span { color: var(--cyan); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; }
.stress { text-align: center; margin: 30px 0 0; font-size: 20px; color: var(--soft); }

/* ---------- Mascot hire ---------- */
.mascots .magic2 { font-size: clamp(30px, 6vw, 56px); line-height: 1.05; margin: 0; font-weight: 700; }
.mascots .magic2 b { color: var(--yellow); font-weight: 700; }
.three { display: grid; gap: 30px 22px; margin-top: 40px; }
@media (min-width: 900px) { .three { grid-template-columns: 1fr 1.1fr 1fr; } }
.three .neon { padding-top: 34px; position: relative; }
.three .ribbon { position: absolute; top: -20px; left: 50%; translate: -50% 0; font-size: 15px; white-space: nowrap; }
.prices { font-size: clamp(22px, 4vw, 27px); font-weight: 700; }
.prices b { color: var(--yellow); }
.prices small { display: block; font-size: 15px; font-weight: 400; color: var(--soft); }
.incl { font-size: 19px; }
.notice { font-size: 16px; color: var(--soft); text-align: center; margin: 0; }
/* Mascot photos in neon frames: one wide shot on top, three portraits underneath. */
.mascot-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.mascot-pics .wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .mascot-pics { grid-template-columns: 1fr 1fr; } .mascot-pics .snap:last-child { grid-column: 1 / -1; } }
.snap { --n: var(--pink); margin: 0; overflow: hidden; border-radius: 20px; border: 4px solid var(--n); background: #000;
  box-shadow: 0 0 12px var(--n), 0 0 30px color-mix(in srgb, var(--n) 55%, transparent); }
.snap img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; transition: transform .6s cubic-bezier(.2,.9,.3,1); }
.snap.wide img { aspect-ratio: 16 / 9; object-position: 50% 60%; }
.snap:hover img { transform: scale(1.06); }
.mascot-pics .snap:nth-child(2) { --n: var(--cyan); } .mascot-pics .snap:nth-child(3) { --n: var(--yellow); } .mascot-pics .snap:nth-child(4) { --n: var(--violet); }
/* The frames hum like the neon boxes, each a little out of step. */
.snap { animation: hum 3s ease-in-out infinite alternate; }
.mascot-pics .snap:nth-child(2) { animation-delay: -.8s; } .mascot-pics .snap:nth-child(3) { animation-delay: -1.6s; } .mascot-pics .snap:nth-child(4) { animation-delay: -2.4s; }

/* ---------- Photos and reviews ---------- */
.reviews { display: grid; gap: 26px; max-width: 900px; margin: 0 auto; }
.svc { display: grid; gap: 4px 30px; max-width: 760px; margin: 0 auto; font-size: 22px; font-weight: 600; }
@media (min-width: 560px) { .svc { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { .reviews { grid-template-columns: 1fr 1fr; } }
.reviews blockquote { margin: 0; font-size: 21px; font-weight: 600; }
.reviews cite { display: block; margin-top: 10px; color: var(--yellow); font-style: normal; font-weight: 700; }

/* ---------- Footer call ribbon ---------- */
.call-ribbon {
  position: relative; max-width: 860px; margin: 0 auto; text-align: center;
  background: linear-gradient(180deg, #ff4fb0, #c4167e); border: 4px solid var(--gold); border-radius: 26px;
  padding: 22px 18px 26px; box-shadow: 0 0 30px rgba(255,63,164,.55);
  clip-path: polygon(0 0, 100% 0, 97% 50%, 100% 100%, 0 100%, 3% 50%);
}
.call-ribbon small { display: block; font-weight: 700; font-size: clamp(18px, 3.4vw, 26px); letter-spacing: .04em; text-transform: uppercase; }
.call-ribbon small .s { color: var(--yellow); }
.call-ribbon .num { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; margin-top: 6px;
  font: 400 clamp(46px, 11vw, 96px)/1 "Anton", Impact, sans-serif; color: var(--yellow); text-shadow: 0 4px 0 #6b0c45; }
.call-ribbon .ph-ico { flex: none; width: clamp(46px, 9vw, 72px); height: clamp(46px, 9vw, 72px); border-radius: 50%; background: var(--yellow); display: grid; place-items: center; box-shadow: 0 0 0 4px #6b0c45; }
.after { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }
.foot { margin-top: 56px; padding: 20px 0 40px; border-top: 1px solid #2b1a47; display: grid; gap: 10px; color: var(--soft); font-size: 15px; }
.foot .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }


/* ---------- Motion graphics ---------- */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 180deg; }

/* The rainbow draws itself in from left to right. */
.arc { animation: rainbow 1.4s cubic-bezier(.5,0,.2,1) .15s both; }
.arc { -webkit-mask: linear-gradient(#000 60%, transparent 98%), conic-gradient(from -90deg at 50% 100%, #000 var(--sweep), transparent 0);
       -webkit-mask-composite: source-in;
       mask: linear-gradient(#000 60%, transparent 98%), conic-gradient(from -90deg at 50% 100%, #000 var(--sweep), transparent 0);
       mask-composite: intersect; }
@keyframes rainbow { from { --sweep: 0deg; } to { --sweep: 180deg; } }

/* The logo pops in, then gently bobs. */
.logo-big { animation: popin .9s cubic-bezier(.3,1.6,.5,1) .7s both, bob 4s ease-in-out 1.6s infinite alternate; }
@keyframes popin { from { transform: scale(0) rotate(-25deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes bob { from { transform: translateY(0) rotate(0); } to { transform: translateY(-8px) rotate(2deg); } }

/* Balloon bunches float up into place, then drift. */
.cluster { animation: rise 1.6s cubic-bezier(.2,.8,.3,1) both, float 5s ease-in-out 1.6s infinite alternate; }
.cluster.r { animation-delay: .25s, 1.85s; }
@keyframes rise { from { transform: translateY(110vh) rotate(-6deg); } to { transform: translateY(0) rotate(0); } }

/* Hero words slide up one after another. */
.up { animation: up .8s cubic-bezier(.2,.9,.3,1.2) var(--d, 0s) both; }
@keyframes up { from { opacity: 0; transform: translateY(40px) scale(.92); } to { opacity: 1; transform: none; } }

/* "The Perfect Party" rainbow shimmers through the letters. */
.rainbow-text { background-image: linear-gradient(90deg, var(--yellow), #b6f03a, #2fd0ff, #6b8cff, var(--pink), var(--violet), var(--yellow)); background-size: 200% 100%; }
.perfect { animation: up .8s cubic-bezier(.2,.9,.3,1.2) var(--d, 0s) both, shimmer 6s linear infinite; }
.sec-head .rainbow-text { animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position: 200% 0; } }

/* Falling confetti in the hero (pieces are added by script.js). */
.confetti-fall { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.confetti-fall i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; opacity: .9;
  animation: fall var(--t, 7s) linear var(--w, 0s) infinite; }
.confetti-fall i.round { width: 9px; height: 9px; border-radius: 50%; }
@keyframes fall {
  0% { transform: translate(0, -20px) rotate(0); }
  25% { transform: translate(var(--x, 20px), 25vh) rotate(180deg); }
  50% { transform: translate(0, 50vh) rotate(360deg); }
  75% { transform: translate(calc(var(--x, 20px) * -1), 75vh) rotate(540deg); }
  100% { transform: translate(0, 105vh) rotate(720deg); }
}

/* Glitter glint sweeping across the gold panel, and the price giving a little bounce. */
.gold::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 48%, rgba(255,255,255,0) 58%) no-repeat;
  background-size: 250% 100%; animation: glint 4.5s ease-in-out 1s infinite; }
@keyframes glint { 0% { background-position: 160% 0; } 45%, 100% { background-position: -60% 0; } }
.price { animation: boing 2.6s ease-in-out infinite; display: inline-block; }
@keyframes boing { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(1.1) rotate(-3deg); } 86% { transform: scale(.97) rotate(2deg); } 93% { transform: scale(1.03); } }

/* Neon boxes hum, and flicker on as they arrive. */
.neon { animation: hum 3s ease-in-out infinite alternate; }
@keyframes hum { to { box-shadow: 0 0 16px var(--n), 0 0 40px color-mix(in srgb, var(--n) 70%, transparent), inset 0 0 22px color-mix(in srgb, var(--n) 40%, transparent); } }

/* Things slide in as you scroll (script.js adds the classes). */
.motion .reveal { opacity: 0; transform: translateY(46px) scale(.96); transition: opacity .7s ease var(--rd, 0s), transform .8s cubic-bezier(.2,.9,.3,1.15) var(--rd, 0s); }
.motion .reveal.in { opacity: 1; transform: none; }
.motion .neon.reveal.in { animation: flickon .9s steps(1) var(--rd, 0s), hum 3s ease-in-out 1s infinite alternate; }
@keyframes flickon { 0% { opacity: .2; } 15% { opacity: 1; } 25% { opacity: .35; } 40% { opacity: 1; } 55% { opacity: .6; } 70%, 100% { opacity: 1; } }

/* The call ribbon glows and the phone rings. */
.call-ribbon { animation: glow 2.4s ease-in-out infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 50px rgba(255,63,164,.85); } }
.call-ribbon .ph-ico svg { animation: ring 2.5s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes ring { 0%, 60%, 100% { transform: rotate(0); } 64% { transform: rotate(-18deg); } 68% { transform: rotate(16deg); } 72% { transform: rotate(-14deg); } 76% { transform: rotate(12deg); } 80% { transform: rotate(-6deg); } 84% { transform: rotate(0); } }
.btn-y, .bar .tel { animation: pulse 2.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 14px rgba(255,230,59,.45); } 50% { box-shadow: 0 0 34px rgba(255,230,59,.9); } }

/* ---------- Easter Bunny ---------- */
/* A drawn bunny (not a costume photo) peeks up behind a row of painted eggs. */
.bunny-row { display: grid; gap: 30px; align-items: center; justify-items: center; }
@media (min-width: 760px) { .bunny-row { grid-template-columns: 1fr 1fr; } .bunny-photo { justify-self: end; } .bunny-row .bunny-stage { justify-self: start; } }
.bunny-photo { --n: var(--yellow); width: 280px; max-width: 80vw; rotate: -3deg; }
.bunny-photo img { aspect-ratio: 555 / 1000; object-position: 50% 30%; }
.motion .bunny-photo { animation: hum 3s ease-in-out infinite alternate, sway 4s ease-in-out infinite alternate; }
@keyframes sway { from { rotate: -3deg; } to { rotate: 2deg; } }
.bunny-stage { position: relative; width: min(340px, 80%); margin: 0 auto; }
.bunny-face { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 22px rgba(255,255,255,.25)); animation: peek 3.2s ease-in-out infinite; }
@keyframes peek { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(-8px); } }
.bunny-face .ear { transform-box: fill-box; transform-origin: 50% 100%; animation: twitch 4s ease-in-out 1s infinite; }
.bunny-face .ear.r { animation-delay: 1.3s; }
@keyframes twitch { 0%, 80%, 100% { rotate: 0deg; } 85% { rotate: -10deg; } 90% { rotate: 7deg; } 95% { rotate: -3deg; } }
.bunny-face .eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 5s steps(1) 2s infinite; }
@keyframes blink { 0%, 96%, 100% { transform: none; } 97%, 99% { transform: scaleY(.1); } }
.egg-row { display: flex; justify-content: center; gap: 4%; margin-top: -16%; position: relative; }
.egg-row .egg { width: 20%; height: auto; filter: drop-shadow(0 4px 0 #2a0b4d) drop-shadow(0 0 10px rgba(255,255,255,.25)); transform-origin: 50% 100%; animation: hop 2.4s cubic-bezier(.3,0,.4,1) infinite; }
.egg-row .g2 { animation-delay: .3s; } .egg-row .g3 { animation-delay: .6s; } .egg-row .g4 { animation-delay: .9s; }
@keyframes hop { 0%, 50%, 100% { transform: none; } 20% { transform: translateY(-26px) rotate(-8deg); } 38% { transform: scale(1.08, .92); } }
.easter .three { margin-top: 56px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .motion .reveal { opacity: 1; transform: none; }
  .arc { --sweep: 180deg; }
  .confetti-fall { display: none; }
}

/* Video clips: phone-shaped reels. A swipeable row on phones, a grid on wide screens. */
.reels { display: grid; grid-auto-flow: column; grid-auto-columns: min(64vw, 250px); gap: 18px; margin-top: 36px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 14px; -webkit-overflow-scrolling: touch; }
@media (min-width: 900px) { .reels { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); max-width: 820px; margin-inline: auto; overflow: visible; } }
.reel { --n: var(--pink); position: relative; margin: 0; scroll-snap-align: center; border-radius: 22px; overflow: hidden; aspect-ratio: 9 / 16; background: #000;
  border: 3px solid var(--n); box-shadow: 0 0 18px color-mix(in srgb, var(--n) 60%, transparent); }
.reel:nth-child(3n+2) { --n: var(--cyan); } .reel:nth-child(3n) { --n: var(--yellow); }
.reel video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.reel figcaption { position: absolute; left: 0; right: 0; top: 0; padding: 12px 14px 30px; font-size: 15px; line-height: 1.3; color: #fff;
  background: linear-gradient(rgba(0,0,0,.8), transparent); pointer-events: none; }
.reel .snd { position: absolute; right: 10px; bottom: 10px; width: 46px; height: 46px; padding: 10px; border: 2px solid var(--n); border-radius: 50%;
  background: rgba(10,4,25,.7); color: #fff; cursor: pointer; box-shadow: 0 0 12px color-mix(in srgb, var(--n) 60%, transparent); }
.reel .snd svg { display: block; width: 100%; height: 100%; }
.reel .snd[aria-pressed="true"] { background: var(--n); color: #12052a; }