/* Fonts are self-hosted (SIL Open Font License, see fonts/OFL-*.txt) so no visitor data goes to Google */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/baloo2-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/baloo2-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sancreek";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/sancreek-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sancreek";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/sancreek-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --sun: #ffc83d;
  --sun-deep: #ffab2e;
  --cream: #fff4da;
  --sand: #f6d79a;
  --sand-deep: #e9b96a;
  --terracotta: #d9642b;
  --terracotta-dark: #a8441b;
  --chili: #c8322b;
  --turquoise: #17a2a0;
  --cobalt: #1f4e96;
  --pink: #ec4d8c;
  --cactus: #5aa845;
  --cactus-dark: #2f6b2a;
  --ink: #3b2314;
  --beat: 0.5s;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Baloo 2", system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: "Sancreek", "Baloo 2", serif; font-weight: 400; line-height: 1.1; margin: 0; }
a { color: inherit; }

/* ---------- Nav ---------- */
.nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 20px 0;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Sancreek", serif;
  font-size: 1.6rem;
  text-decoration: none;
  color: var(--ink);
}
.logo svg { width: 34px; height: 40px; }

/* ---------- Papel picado ---------- */
.picado {
  position: absolute;
  inset: 0 0 auto 0;
  height: 120px;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.picado .string {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 72px;
  display: flex;
  justify-content: space-around;
  border-top: 2px solid rgba(59, 35, 20, .45);
}
.flag {
  --c: var(--pink);
  width: 58px;
  height: 64px;
  margin-top: -2px;
  background: var(--c);
  transform-origin: top center;
  animation: flutter 2.6s ease-in-out infinite alternate;
  -webkit-mask:
    radial-gradient(circle 6px at 50% 100%, transparent 96%, #000) 0 0 / 14px 100% repeat-x,
    radial-gradient(circle 9px at 50% 42%, transparent 96%, #000),
    radial-gradient(circle 3.5px at 24% 22%, transparent 96%, #000),
    radial-gradient(circle 3.5px at 76% 22%, transparent 96%, #000),
    radial-gradient(circle 3.5px at 24% 64%, transparent 96%, #000),
    radial-gradient(circle 3.5px at 76% 64%, transparent 96%, #000);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 6px at 50% 100%, transparent 96%, #000) 0 0 / 14px 100% repeat-x,
    radial-gradient(circle 9px at 50% 42%, transparent 96%, #000),
    radial-gradient(circle 3.5px at 24% 22%, transparent 96%, #000),
    radial-gradient(circle 3.5px at 76% 22%, transparent 96%, #000),
    radial-gradient(circle 3.5px at 24% 64%, transparent 96%, #000),
    radial-gradient(circle 3.5px at 76% 64%, transparent 96%, #000);
  mask-composite: intersect;
}
.flag:nth-child(5n+1) { --c: var(--pink); animation-delay: -.3s; }
.flag:nth-child(5n+2) { --c: var(--turquoise); animation-delay: -1.1s; }
.flag:nth-child(5n+3) { --c: var(--terracotta); animation-delay: -.7s; }
.flag:nth-child(5n+4) { --c: var(--cobalt); animation-delay: -1.8s; }
.flag:nth-child(5n+5) { --c: var(--chili); animation-delay: -2.2s; }
@keyframes flutter {
  from { transform: rotate(-5deg) skewX(-3deg); }
  to   { transform: rotate(5deg) skewX(3deg); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 70%, #ffe7a3 0%, var(--sun) 45%, var(--sun-deep) 100%);
  overflow: hidden;
  padding-bottom: 0;
  min-height: calc(100vh - 40px);
  min-height: calc(100svh - 40px);
  display: flex;
  flex-direction: column;
}
.hero-copy {
  position: relative;
  z-index: 3;
  text-align: center;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 92px 20px 10px;
}
.eyebrow {
  display: inline-block;
  font-weight: 800;
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .12em;
  background: var(--ink);
  color: var(--sun);
  padding: 4px 14px;
  border-radius: 999px;
  transform: rotate(-2deg);
}
.hero h1 {
  margin-top: 14px;
  font-size: clamp(2.3rem, 7.5vw, 5rem);
  letter-spacing: .02em;
  color: var(--cream);
  text-shadow:
    3px 3px 0 var(--terracotta),
    6px 6px 0 var(--chili),
    9px 9px 0 rgba(59, 35, 20, .35);
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
}
.hero p.lead {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 600;
  max-width: 560px;
  margin: 18px auto 24px;
}
.btn {
  font: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 999px;
  border: 3px solid var(--ink);
  background: var(--terracotta);
  color: var(--cream);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }

/* ---------- Stage ---------- */
.stage {
  position: relative;
  height: clamp(370px, calc(52vw + 50px), 530px);
  flex: none;
  margin-top: auto;
}
.sun {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: clamp(260px, 44vw, 440px);
  aspect-ratio: 1;
  translate: -50% 0;
  z-index: 0;
}
.sun .rays {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 244, 218, .55) 0 7.5deg, transparent 7.5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%);
  mask: radial-gradient(circle, #000 35%, transparent 70%);
  animation: spin 40s linear infinite;
}
.sun .disc {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff2b8, #ffd24f 60%, #ffb52e);
  box-shadow: 0 0 60px rgba(255, 244, 218, .8);
}
@keyframes spin { to { transform: rotate(360deg); } }

.hills {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 140px;
  z-index: 1;
}

.dancers {
  position: absolute;
  left: 0; right: 0; bottom: 60px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(0px, 1.5vw, 24px);
}
.dancer-wrap {
  width: clamp(64px, 16.5vw, 185px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dancer-wrap:nth-child(3) { width: clamp(70px, 18.5vw, 205px); }
.dancer-wrap.spin { animation: twirl .9s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes twirl {
  0%   { transform: translateY(0) rotateY(0); }
  40%  { transform: translateY(-60px) rotateY(180deg); }
  100% { transform: translateY(0) rotateY(360deg); }
}
.cactus { display: block; width: 100%; height: auto; overflow: visible; }
.cactus * { transform-box: view-box; }

/* Whole potted plant hops on the beat */
.cactus { animation: hop var(--beat) ease-in-out infinite; transform-origin: 50% 100%; }
.c2, .c4, .c5 { animation-delay: calc(var(--beat) / -2); }
@keyframes hop {
  0%, 100% { transform: translateY(0) scale(1.03, .97); }
  50%      { transform: translateY(-14px) scale(.98, 1.02); }
}

/* Plant sways in its pot */
.plant { transform-origin: 100px 262px; animation: sway calc(var(--beat) * 2) ease-in-out infinite alternate; }
.c2 .plant { transform-origin: 100px 250px; animation-name: shimmy; }
.c3 .plant { animation-direction: alternate-reverse; }
.c4 .plant { transform-origin: 100px 250px; animation-name: squish; animation-duration: var(--beat); }
.c5 .plant { transform-origin: 100px 262px; animation-name: shimmy; }
@keyframes squish {
  from { transform: scale(1.07, .93) rotate(-4deg); }
  to   { transform: scale(.95, 1.06) rotate(4deg); }
}
@keyframes sway { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes shimmy {
  0%   { transform: translateX(-6px) rotate(-5deg); }
  100% { transform: translateX(6px) rotate(5deg); }
}

/* Arms */
.arm { animation: wave var(--beat) ease-in-out infinite alternate; }
.arm-l { animation-name: wave-l; }
.c1 .arm-l { transform-origin: 78px 182px; }
.c1 .arm-r { transform-origin: 122px 152px; animation-delay: calc(var(--beat) / -1); }
.c3 .arm-l { transform-origin: 76px 168px; animation-delay: calc(var(--beat) / -1); }
.c3 .arm-r { transform-origin: 124px 142px; }
.c5 .arm-l { transform-origin: 84px 222px; animation-delay: calc(var(--beat) / -1); }
.c5 .arm-r { transform-origin: 116px 214px; }

/* Instruments */
.stick { animation: drum-l calc(var(--beat) / 2) ease-in infinite alternate-reverse; }
.stick-l { transform-origin: 54px 206px; }
.stick-r { transform-origin: 146px 206px; animation-name: drum-r; animation-delay: calc(var(--beat) / -2); }
@keyframes drum-l { from { transform: rotate(-28deg); } to { transform: rotate(0); } }
@keyframes drum-r { from { transform: rotate(28deg); } to { transform: rotate(0); } }
.c2 .arm-l { transform-origin: 70px 165px; animation-name: shake-l; animation-duration: calc(var(--beat) / 2); }
.c2 .arm-r { transform-origin: 130px 165px; animation-name: shake-r; animation-duration: calc(var(--beat) / 2); }
@keyframes wave   { from { transform: rotate(-18deg); } to { transform: rotate(22deg); } }
@keyframes wave-l { from { transform: rotate(18deg); }  to { transform: rotate(-22deg); } }
@keyframes shake-l { from { transform: rotate(8deg); }  to { transform: rotate(-14deg); } }
@keyframes shake-r { from { transform: rotate(-8deg); } to { transform: rotate(14deg); } }

/* Hats, flowers, blinking */
.hat { transform-origin: 100px 72px; animation: tip calc(var(--beat) * 2) ease-in-out infinite alternate; }
@keyframes tip { from { transform: rotate(-7deg) translateY(0); } to { transform: rotate(6deg) translateY(-4px); } }
.bloom { transform-box: fill-box; transform-origin: center; animation: bloom calc(var(--beat) * 2) ease-in-out infinite alternate; }
@keyframes bloom { from { transform: rotate(-20deg) scale(.95); } to { transform: rotate(20deg) scale(1.08); } }
.eyes { transform-origin: 100px 120px; animation: blink 4.2s infinite; }
.c2 .eyes { transform-origin: 100px 160px; animation-delay: -1.5s; }
.c3 .eyes { transform-origin: 100px 95px; animation-delay: -2.7s; }
.c5 .eyes { transform-origin: 100px 194px; animation-delay: -.8s; }
.shades { animation: bob var(--beat) ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }

/* Wild cacti on the hills */
.wilds { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wild {
  position: absolute;
  height: auto;
  color: #7c9a3c;
  opacity: .8;
  transform-origin: 50% 100%;
  animation: sway-wild 3.2s ease-in-out infinite alternate;
}
.wild:nth-child(even) { color: #6b8a33; animation-delay: -1.6s; }
@keyframes sway-wild { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.mouth-sing { transform-box: fill-box; transform-origin: center; animation: sing var(--beat) ease-in-out infinite alternate; }
@keyframes sing { from { transform: scale(.7, .5); } to { transform: scale(1, 1.1); } }

.shadow {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 70%;
  height: 14px;
  translate: -50% 0;
  border-radius: 50%;
  background: rgba(59, 35, 20, .22);
  animation: shadow var(--beat) ease-in-out infinite;
}
.dancer-wrap { position: relative; }
@keyframes shadow { 50% { transform: scaleX(.8); opacity: .6; } }

/* Music notes */
.note {
  position: absolute;
  z-index: 2;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: var(--ink);
  opacity: 0;
  animation: float-note 3.4s ease-in infinite;
}
.note:nth-of-type(1) { left: 18%; bottom: 45%; animation-delay: 0s; color: var(--chili); }
.note:nth-of-type(2) { left: 30%; bottom: 60%; animation-delay: .9s; }
.note:nth-of-type(3) { left: 66%; bottom: 55%; animation-delay: 1.7s; color: var(--cobalt); }
.note:nth-of-type(4) { left: 80%; bottom: 40%; animation-delay: 2.5s; color: var(--pink); }
.note:nth-of-type(5) { left: 50%; bottom: 72%; animation-delay: 1.3s; color: var(--terracotta); }
@keyframes float-note {
  0%   { opacity: 0; transform: translateY(20px) rotate(-10deg); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90px) translateX(20px) rotate(15deg); }
}

.controls {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.controls .btn { font-size: .9rem; padding: 8px 16px; white-space: nowrap; flex: none; }
/* Long song titles shrink with an ellipsis instead of breaking the row */
.controls .music { flex: 0 1 auto; min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.tempo { background: var(--turquoise); }
.music { background: var(--chili); }
.controls .next-song { background: var(--sun); color: var(--ink); padding: 8px 14px; }
.music[aria-pressed="true"] { background: var(--cobalt); }
.corner-btn { position: absolute; top: 12px; z-index: 4; font-size: .9rem; padding: 8px 16px; }
.ajua { right: 16px; background: var(--pink); }
.disco-btn { left: 16px; background: #5b2a86; }
.disco-btn[aria-pressed="true"] { background: linear-gradient(90deg, var(--pink), #5b2a86, var(--turquoise)); }
.hint {
  margin: 0 6px 0 0;
  font-size: .85rem;
  font-weight: 800;
  color: var(--ink);
}

/* ---------- Tile band ---------- */
.tiles {
  height: 34px;
  background:
    radial-gradient(circle at 50% 50%, var(--sun) 0 18%, transparent 19%),
    radial-gradient(circle at 0 0, var(--cobalt) 0 30%, transparent 31%),
    radial-gradient(circle at 100% 0, var(--cobalt) 0 30%, transparent 31%),
    radial-gradient(circle at 0 100%, var(--cobalt) 0 30%, transparent 31%),
    radial-gradient(circle at 100% 100%, var(--cobalt) 0 30%, transparent 31%),
    conic-gradient(from 45deg, #fdf6e6 0 25%, #dbe6f5 0 50%, #fdf6e6 0 75%, #dbe6f5 0);
  background-size: 34px 34px;
  border-block: 3px solid var(--ink);
}


/* ---------- Pop your dreams ---------- */
.dream-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: var(--pink);
  font-size: 1.15rem;
  padding: 12px 28px 12px 22px;
}
.dream-btn svg { width: 1.5em; height: 1.5em; flex: none; }
dialog.panel {
  width: min(440px, calc(100vw - 32px));
  padding: 26px 24px 22px;
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
}
dialog.panel::backdrop { background: rgba(59, 35, 20, .45); }
.panel h2 { font-size: 1.9rem; color: var(--terracotta); }
.panel p { margin: 8px 0 16px; font-weight: 600; }
.dream input {
  width: 100%;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 12px 16px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
}
.dream input:focus { outline: 3px solid var(--sun); outline-offset: 2px; }
.dream .count { text-align: right; font-size: .85rem; font-weight: 800; margin-top: 4px; opacity: .7; }
.panel .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.panel .btn { font-size: 1rem; padding: 10px 20px; }
.dream .btn.alt { background: #fff; color: var(--ink); }
dialog.dream { max-height: 90vh; overflow-y: auto; }
.dream-row { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; margin-bottom: 8px; }
.dream-row:only-child { grid-template-columns: 1fr; }
.dream-row:only-child .remove { display: none; }
.dream-row .count { grid-column: 1; }
.dream-row .remove {
  width: 40px;
  height: 40px;
  align-self: center;
  font: inherit;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
}
.dream-row .remove:hover { background: var(--sand); }
/* The spare empty row at the end has nothing to remove */
.dream-row:last-child:has(input:placeholder-shown) .remove { visibility: hidden; }

/* ---------- Privacy ---------- */
.nav-link {
  font: inherit;
  font-weight: 800;
  font-size: .95rem;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}
.nav-link:hover { border-color: var(--terracotta); }
dialog.privacy { width: min(560px, calc(100vw - 32px)); max-height: 85vh; overflow-y: auto; }
dialog.privacy:focus { outline: none; }
.privacy h3 { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.1rem; margin: 18px 0 2px; }
.privacy p { font-weight: 400; margin: 0 0 8px; }
.privacy a { color: var(--terracotta); font-weight: 600; }
.privacy p.summary { font-weight: 600; margin-bottom: 4px; }
.privacy .updated { font-size: .85rem; opacity: .7; margin-top: 16px; }

.bubble, .spark, .dream-letter, .pop-word {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  pointer-events: none;
}
.bubble-skin {
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  padding: 16%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
  color: #fff;
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 2px 0 var(--ink);
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .95) 0 5%, rgba(255, 255, 255, 0) 13%),
    radial-gradient(circle at 70% 78%, rgba(255, 255, 255, .5) 0 3%, rgba(255, 255, 255, 0) 8%),
    radial-gradient(circle, rgba(255, 255, 255, .12) 52%, rgba(var(--t1), .3) 70%, rgba(var(--t2), .38) 86%, rgba(255, 255, 255, .75) 100%);
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, .6), 0 6px 18px rgba(59, 35, 20, .15);
  animation: jelly 1.1s ease-in-out infinite alternate;
}
@keyframes jelly {
  from { transform: scale(1.04, .96) rotate(-3deg); }
  to   { transform: scale(.96, 1.04) rotate(3deg); }
}
/* Each dream's colours, as "r, g, b" so they can be used with any opacity */
.bubble, .spark, .trail-bubble { --t1: 236, 77, 140; --t2: 23, 162, 160; }
.trail-bubble {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .9);
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .95) 0 14%, transparent 22%),
    radial-gradient(circle, rgba(255, 255, 255, .1) 45%, rgba(var(--t1), .4) 75%, rgba(var(--t2), .5) 100%);
}
.spark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  border: 2px solid rgb(var(--t2));
}
.dream-letter {
  font-weight: 800;
  font-size: 1.1rem;
  white-space: pre;
  color: #fff;
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
}
.pop-word {
  z-index: 7;
  font-family: "Sancreek", serif;
  font-size: 2.6rem;
  white-space: nowrap;
  color: var(--cream);
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--chili);
}

/* ---------- Piñata ---------- */
/* Hangs on a rope from the bottom of the "Pop your dreams" button */
.dream-anchor { position: relative; display: inline-block; }
.pinata {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -44px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  transform-origin: top center;
  animation: pinata-sway 3s ease-in-out infinite alternate;
  -webkit-tap-highlight-color: transparent;
}
@keyframes pinata-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.pinata-rope { width: 2px; height: 30px; background: rgba(59, 35, 20, .6); }
.pinata svg { width: 88px; height: 88px; margin-top: -8px; overflow: visible; }
.pinata .cracks { opacity: 0; transition: opacity .2s; }
.pinata.broken { visibility: hidden; }
.candy, .confetti {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  pointer-events: none;
}
.candy { width: 13px; height: 13px; border: 2px solid var(--ink); border-radius: 4px; }
.candy.round { border-radius: 50%; }
.confetti { width: 6px; height: 11px; }

/* ---------- Disco mode ---------- */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hero.disco { background: radial-gradient(ellipse at 50% 70%, #6b2f9a 0%, #2b1446 55%, #140824 100%); }
.hero.disco .lead,
.hero.disco .logo,
.hero.disco .nav-link,
.hero.disco .hint { color: var(--cream); }
.hero.disco .pinata-rope { background: rgba(255, 244, 218, .5); }
.hero.disco .hills,
.hero.disco .wilds { filter: brightness(.4) saturate(1.3); }
.hero.disco .cactus { filter: drop-shadow(0 0 10px rgba(236, 77, 140, .55)); }
.hero.disco .sun .rays {
  background: repeating-conic-gradient(rgba(236, 77, 140, .55) 0 4deg, transparent 4deg 12deg, rgba(23, 162, 160, .55) 12deg 16deg, transparent 16deg 24deg);
  animation-duration: 10s;
}
/* The sun becomes a mirror ball */
.hero.disco .sun .disc {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .95) 0 8%, transparent 30%),
    repeating-linear-gradient(0deg, rgba(40, 20, 70, .35) 0 1.5px, transparent 1.5px 12px),
    repeating-linear-gradient(90deg, rgba(40, 20, 70, .35) 0 1.5px, transparent 1.5px 12px),
    radial-gradient(circle, #f4f2ff, #a9a3c9 70%, #6f6896);
  box-shadow: 0 0 50px rgba(255, 255, 255, .45), 0 0 120px rgba(236, 77, 140, .35);
  animation: ball-spin 4s linear infinite;
}
@keyframes ball-spin { to { background-position: 0 0, 0 0, 120px 0, 0 0; } }
/* Sweeping spotlights */
.disco-lights {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s;
  mix-blend-mode: screen;
  background: conic-gradient(from calc(145deg + var(--sweep)) at 50% -5%,
    rgba(236, 77, 140, .45) 0 6deg, transparent 6deg 18deg,
    rgba(23, 162, 160, .45) 18deg 24deg, transparent 24deg 36deg,
    rgba(255, 200, 61, .45) 36deg 42deg, transparent 42deg 54deg,
    rgba(90, 168, 69, .45) 54deg 60deg, transparent 60deg 72deg,
    rgba(130, 120, 255, .45) 72deg 78deg, transparent 78deg);
  animation: sweep 5s ease-in-out infinite alternate;
}
@keyframes sweep { from { --sweep: -25deg; } to { --sweep: 25deg; } }
.hero.disco .disco-lights { opacity: 1; }
/* Light-up dance floor */
.disco-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 3px;
  padding: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s;
  transform: perspective(300px) rotateX(35deg);
  transform-origin: bottom;
}
.hero.disco .disco-floor { opacity: 1; }
.disco-floor span {
  border-radius: 3px;
  background: var(--c);
  opacity: .15;
  animation: floor-flash calc(var(--beat) * 2) steps(1) infinite;
}
@keyframes floor-flash { 0% { opacity: .15; } 50% { opacity: .85; } }

@media (max-width: 640px) {
  .hint { display: none; }
  .picado .string { top: 64px; }
  .flag { width: 44px; height: 50px; }
  .hero-copy { padding-top: 80px; }
  /* Fewer, bigger cacti on small screens */
  .dancer-wrap.extra { display: none; }
  .dancer-wrap { width: 29vw; }
  .dancer-wrap:nth-child(3) { width: 32vw; }
  .pinata { margin-left: -30px; }
  .pinata-rope { height: 18px; }
  .pinata svg { width: 60px; height: 60px; margin-top: -5px; }
  .corner-btn { top: 8px; padding: 6px 12px; }
  .ajua { right: 10px; }
  .disco-btn { left: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-play-state: paused !important; }
  .tempo { display: none; }
}