/* ----------------------------------------------------------------
	Joy Layer — tiny playful touches (no layout changes)
	Palette: yellow #ffbf00 · pink #ff5087 · blue #0b6ef8 · mint #4ecdc4
-----------------------------------------------------------------*/

/* Selecting text feels on-brand */
::selection {
  background: #ff5087;
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  /* 1. Springy buttons — every pill button gets a happy little jump */
  .button {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
      background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }

  .button:hover {
    transform: translateY(-2px) scale(1.05) rotate(-1deg);
  }

  .button:active {
    transform: scale(0.93);
    transition-duration: 0.1s;
  }

  /* 2. Game cards lift and tilt like a board game box being picked up */
  #games .card {
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 0.45s ease;
  }

  #games .col:nth-child(odd) .card:hover {
    transform: translateY(-10px) rotate(-1deg);
  }

  #games .col:nth-child(even) .card:hover {
    transform: translateY(-10px) rotate(1deg);
  }

  #games .card:hover {
    box-shadow: 0 1.75rem 3rem rgba(0, 0, 0, 0.3) !important;
  }

  #games .card picture img {
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  #games .card:hover picture img {
    transform: scale(1.06) rotate(2deg);
  }

  /* 3. Logo wobbles hello on hover */
  #logo a:hover img {
    animation: joy-wobble 0.6s ease-in-out;
  }

  @keyframes joy-wobble {
    0%,
    100% {
      transform: rotate(0deg) scale(1);
    }
    25% {
      transform: rotate(-7deg) scale(1.06);
    }
    65% {
      transform: rotate(5deg) scale(1.03);
    }
  }

  /* 4. Promo banner sock swings gently */
  .joy-swing {
    display: inline-block;
    animation: joy-swing 2.4s ease-in-out infinite;
    transform-origin: 50% 0;
  }

  @keyframes joy-swing {
    0%,
    100% {
      transform: rotate(-12deg);
    }
    50% {
      transform: rotate(12deg);
    }
  }

  /* 5. Game cards pop in with a bounce as you scroll to them
        (.joy-pop is only added by js/joy.js, so no-JS visitors lose nothing) */
  .joy-pop {
    opacity: 0;
    transform: translateY(28px) scale(0.94);
  }

  .joy-pop.joy-pop-in {
    animation: joy-pop-in 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  @keyframes joy-pop-in {
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Confetti particles for js/joy.js bursts */
  .joy-confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    pointer-events: none;
    z-index: 9999;
  }
}

/* 6. Hand-drawn squiggle under section headings */
#games h2::after {
  content: "";
  display: block;
  width: 170px;
  height: 14px;
  margin: 0.5rem auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 14'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%230b6ef8'/%3E%3Cstop offset='0.35' stop-color='%23ff5087'/%3E%3Cstop offset='0.7' stop-color='%23ffbf00'/%3E%3Cstop offset='1' stop-color='%234ecdc4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 9 Q 14 1 24 8 T 45 8 T 66 8 T 87 8 T 108 8 T 129 8 T 150 8 T 167 7' fill='none' stroke='url(%23g)' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
}