/* ---------------------------------------------------------------------------
   Polish pass.
   ------------------------------------------------------------------------- */

/* --- stray hairlines -----------------------------------------------------
   Sections used to be separated by a 1px rule. The design separates them with
   colour now, so the rule only ever survived on the sections that didn't get
   a band — a line hanging in the middle of the page under Music and Bio. */
section{ border-bottom: none; }
.footer-signup{ border-top: none; }

/* These two picked up their frame colour from the old blue palette. */
.frame{ border-color: #faf3e8 !important; }
.video-frame{ border-color: rgba(250,243,232,0.18); }
.booking .contact-grid{ border-color: rgba(94,36,57,0.22); }

/* The banner faded into the blue page it used to sit on. Each page says what
   is underneath it now. */
.site-banner::after{
  background: linear-gradient(180deg,
    rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.10) 70%, var(--banner-fade, var(--soil)) 100%);
}

/* --- clicking a nav link landed the heading under the sticky bar --------- */
html{ scroll-behavior: smooth; }
section[id]{ scroll-margin-top: 86px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

/* --- the small stuff ----------------------------------------------------- */
::selection{ background: #eab634; color: #1b2b22; }
:focus-visible{ outline: 2px solid #eab634; outline-offset: 3px; }

/* The characters were inert decoration. They lean in when you point at one. */
.critter{ pointer-events: auto; }
.critter img{ transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.critter:hover img{ transform: rotate(-6deg) translateY(-6px) scale(1.06); }
.critter-party img{ transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.critter-party img:hover{ transform: translateY(-10px) rotate(8deg) scale(1.1); }
@media (prefers-reduced-motion: reduce){
  .critter img, .critter-party img{ transition: none; }
}

/* --- the secret ----------------------------------------------------------
   Type "bud was here" and the elves in the Elf Rave band get going. They are
   already on the page doing nothing; they just start dancing. */
.release-dancers img{ transform-origin: bottom center; }
.release-dancers.dancing img{
  animation: jig var(--jig, 620ms) ease-in-out infinite;
}
/* staggered, and no two on quite the same beat, so it reads as a crowd */
.release-dancers.dancing img:nth-child(5n+1){ --jig: 600ms; animation-delay:   0ms; }
.release-dancers.dancing img:nth-child(5n+2){ --jig: 760ms; animation-delay:  90ms; }
.release-dancers.dancing img:nth-child(5n+3){ --jig: 540ms; animation-delay: 180ms; }
.release-dancers.dancing img:nth-child(5n+4){ --jig: 700ms; animation-delay: 240ms; }
.release-dancers.dancing img:nth-child(5n+5){ --jig: 650ms; animation-delay: 120ms; }

@keyframes jig{
  0%   { transform: translateY(0)     rotate(-4deg); }
  25%  { transform: translateY(-15px) rotate(3deg); }
  50%  { transform: translateY(-2px)  rotate(5deg); }
  75%  { transform: translateY(-10px) rotate(-3deg); }
  100% { transform: translateY(0)     rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce){
  .release-dancers.dancing img{ animation: none; }
}

/* --- touch targets -------------------------------------------------------
   Inline links sat at 17-21px tall, well under the ~44px a thumb wants. The
   hit area grows without moving anything on screen. */
@media (pointer: coarse){
  .track-link,
  .video-caption a,
  .booking-strip-inner a,
  .shop-buy,
  footer a,
  .nav-socials a{
    padding-block: 14px;
    margin-block: -14px;
    display: inline-block;
  }
  .nav-socials a{ padding-inline: 6px; margin-inline: -6px; }
}