:root {
  --red: #e12d39;
  --red-deep: #a8121f;
  --cream: #fff8f1;
  --ink: #4a2a33;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --mx: 0;  /* mouse x, -1..1 */
  --my: 0;  /* mouse y, -1..1 */
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  min-height: 100svh;
  overflow-x: hidden;
  background: #f6d9cf;
  color: var(--ink);
  font-family: "Nunito", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Sky ---------- */
.sky {
  position: fixed;
  inset: -6%;
  background: url("/assets/images/clouds.jpg") center / cover no-repeat;
  transform: translate3d(calc(var(--mx) * -18px), calc(var(--my) * -12px), 0) scale(1.04);
  animation: drift 60s ease-in-out infinite alternate;
  z-index: -2;
}

@keyframes drift {
  from { background-position: 45% 50%; }
  to   { background-position: 58% 46%; }
}

.glow {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 55%, rgba(255, 248, 241, .55), transparent 70%),
    linear-gradient(to bottom, rgba(255, 255, 255, .05), rgba(255, 228, 220, .35));
  pointer-events: none;
  z-index: -1;
}

/* ---------- Layout ---------- */
.stage {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  padding: clamp(24px, 5vh, 56px) 16px 28px;
}

.masthead { text-align: center; width: 100%; max-width: 1100px; }

.title {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 11vw, 6.5rem);
  line-height: .95;
  letter-spacing: .01em;
  color: var(--red);
  text-shadow:
    0 2px 0 var(--cream),
    0 6px 0 rgba(168, 18, 31, .18),
    0 14px 30px rgba(168, 18, 31, .22);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: .28em;
}

.word { display: inline-flex; }
.word--small {
  font-size: .45em;
  font-weight: 500;
  color: var(--red-deep);
  transform: translateY(-.35em);
}

.letter {
  display: inline-block;
  animation: drop-in .8s var(--ease-spring) both;
  animation-delay: calc(var(--i) * 55ms + 150ms);
  transition: transform .35s var(--ease-spring), color .2s;
  cursor: default;
}
.letter:hover {
  transform: translateY(-.14em) rotate(calc(var(--tilt, 1) * 8deg)) scale(1.12);
  color: var(--red-deep);
}

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-.6em) scale(.6) rotate(-12deg); }
  to   { opacity: 1; transform: none; }
}

.tagline {
  margin-top: .6rem;
  font-family: "Dancing Script", cursive;
  font-size: clamp(1.35rem, 3.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  opacity: 0;
  animation: fade-up .9s ease-out 1.1s forwards;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: .8; transform: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  align-self: center;
  width: min(88vw, 760px);
  aspect-ratio: 1.3;
  margin: clamp(16px, 4vh, 40px) 0;
  perspective: 900px;
}

.cloud {
  all: unset;
  position: absolute;
  inset: 11%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform:
    rotateY(calc(var(--mx) * 7deg))
    rotateX(calc(var(--my) * -6deg));
  transition: transform .5s ease-out;
  animation: float 6s ease-in-out infinite;
  filter: drop-shadow(0 22px 30px rgba(120, 50, 60, .25));
  -webkit-tap-highlight-color: transparent;
}

.cloud:focus-visible { outline: 3px dashed var(--red); outline-offset: 10px; border-radius: 24px; }

@keyframes float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}

.cloud__halo,
.cloud__photo {
  position: absolute;
  inset: 0;
  clip-path: url(#cloud-clip);
}

.cloud__halo {
  background: var(--cream);
  transform: scale(1.06);
}

.cloud__photo {
  overflow: hidden;
  transform: scale(.995);
}

.cloud__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 18%;
  display: block;
  transition: transform .8s var(--ease-spring);
}

.cloud:hover .cloud__photo img { transform: scale(1.06); }
.cloud.is-booped { animation: float 6s ease-in-out infinite, squish .5s var(--ease-spring); }

@keyframes squish {
  0%   { scale: 1; }
  30%  { scale: 1.06 .92; }
  60%  { scale: .97 1.04; }
  100% { scale: 1; }
}

/* speech bubble */
.bubble {
  position: absolute;
  top: -6%;
  right: 4%;
  padding: .45em .9em;
  border-radius: 999px;
  background: var(--cream);
  color: var(--red);
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  box-shadow: 0 8px 20px rgba(120, 50, 60, .18);
  opacity: 0;
  transform: translateY(10px) scale(.6) rotate(-6deg);
  transition: opacity .25s, transform .45s var(--ease-spring);
  pointer-events: none;
  white-space: nowrap;
}
.bubble.is-on { opacity: 1; transform: translateY(0) scale(1) rotate(4deg); }

/* ---------- Icon orbit ---------- */
.orbit { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.icon {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  translate: -50% -50%;
  pointer-events: auto;
  cursor: pointer;
  /* idle bob, offset per icon */
  animation:
    pop-in .7s var(--ease-spring) both,
    bob var(--dur) ease-in-out var(--delay) infinite;
  animation-delay: calc(var(--n) * 45ms + 600ms), var(--delay);
}

.icon__glyph {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--red);
  -webkit-mask: var(--src) center / contain no-repeat;
          mask: var(--src) center / contain no-repeat;
  rotate: var(--rot);
  transition: scale .3s var(--ease-spring), background-color .2s;
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .6));
}

.icon:hover .icon__glyph {
  animation: wiggle .55s ease-in-out infinite;
  scale: 1.35;
  background: var(--red-deep);
}

.icon.is-popped .icon__glyph { animation: boing .45s var(--ease-spring); }

@keyframes pop-in {
  from { opacity: 0; scale: 0; }
  to   { opacity: 1; scale: 1; }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-16deg); }
  40%      { transform: rotate(13deg); }
  60%      { transform: rotate(-9deg); }
  80%      { transform: rotate(6deg); }
}

@keyframes boing {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.7) rotate(-10deg); }
  100% { transform: scale(1); }
}

/* ---------- Particles & trail ---------- */
.particle,
.pawprint {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  background: var(--red);
  -webkit-mask: var(--src) center / contain no-repeat;
          mask: var(--src) center / contain no-repeat;
  z-index: 10;
}

.particle {
  width: var(--s);
  height: var(--s);
  animation: burst .9s cubic-bezier(.2, .8, .3, 1) forwards;
}

@keyframes burst {
  0%   { opacity: 1; transform: translate(var(--x0), var(--y0)) scale(.4) rotate(0); }
  100% { opacity: 0; transform: translate(var(--x1), var(--y1)) scale(1) rotate(var(--r)); }
}

.pawprint {
  width: 16px;
  height: 16px;
  opacity: .35;
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  animation: fade-paw 1.2s ease-out forwards;
}

@keyframes fade-paw { to { opacity: 0; } }

/* ---------- Footer hint ---------- */
.hint {
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  color: var(--red-deep);
  opacity: .65;
  letter-spacing: .04em;
  animation: fade-up .9s ease-out 1.6s both, nudge 3s ease-in-out 3s infinite;
}

@keyframes nudge {
  0%, 85%, 100% { transform: none; }
  90% { transform: translateX(-3px) rotate(-2deg); }
  95% { transform: translateX(3px) rotate(2deg); }
}

/* ---------- Sound toggle ---------- */
.sound-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 20;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 248, 241, .85);
  color: var(--red);
  box-shadow: 0 6px 18px rgba(120, 50, 60, .18);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: transform .35s var(--ease-spring), background-color .2s;
}
.sound-toggle:hover { transform: scale(1.1) rotate(-6deg); background: var(--cream); }
.sound-toggle:active { transform: scale(.92); }
.sound-toggle:focus-visible { outline: 3px dashed var(--red); outline-offset: 3px; }
.sound-toggle .cross { display: none; }
.sound-toggle.is-muted { color: var(--red-deep); opacity: .75; }
.sound-toggle.is-muted .waves { display: none; }
.sound-toggle.is-muted .cross { display: inline; }

@media (max-width: 560px) {
  .hero { aspect-ratio: 1; width: min(94vw, 460px); }
  .cloud { inset: 18% 6%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .sky, .cloud { transform: none; }
}