/* The funky zone: deliberately loud, unlike the rest of the site. */
.funk-hints { padding: 8vh 20px 4vh; text-align: center; color: var(--muted, #6b7a90); }
.funk-hint { margin: 0; min-height: 34vh; display: flex; align-items: center; justify-content: center; font-weight: 600; opacity: .55; }
.funk-hint-1 { font-size: .95rem; }
.funk-hint-2 { font-size: 1.15rem; opacity: .7; }
.funk-hint-3 { font-size: 1.4rem; opacity: .9; }

.funk {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 0 0 90px; color: #1a0b2e;
  background: linear-gradient(135deg, #ff2e93, #ff8a00, #ffe600, #2bff88, #00d4ff, #7b2fff, #ff2e93);
  background-size: 400% 400%; animation: funk-bg 14s ease infinite;
}
@keyframes funk-bg { 50% { background-position: 100% 50%; } }

.funk-ticker { overflow: hidden; background: #1a0b2e; padding: 10px 0; border-bottom: 4px solid #1a0b2e; transform: rotate(-1.2deg) scale(1.04); margin: 18px 0 40px; }
.funk-ticker-in { display: flex; width: max-content; font-size: 2rem; white-space: nowrap; animation: funk-marquee 60s linear infinite; }
.funk-ticker-in > div { display: flex; gap: 28px; padding-right: 28px; flex: none; }
@keyframes funk-marquee { to { transform: translateX(-50%); } }

.funk-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; text-align: center; }
.funk-title {
  margin: 0 0 12px; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 800;
  font-size: clamp(2rem, 7vw, 4.2rem); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance;
  color: #fff; -webkit-text-stroke: 2px #1a0b2e; paint-order: stroke fill;
  text-shadow: 5px 5px 0 #1a0b2e; transform: rotate(-1.5deg);
}
.funk-intro { max-width: 36ch; margin: 0 auto 44px; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: clamp(1.1rem, 2.6vw, 1.35rem); font-weight: 600; line-height: 1.4; }

.funk-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 24px; }
.funk-grid > li { flex: 1 1 300px; max-width: 400px; }
.funk-card {
  padding: 40px 30px 38px; min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 4px solid #1a0b2e; border-radius: 22px;
  box-shadow: 8px 8px 0 #1a0b2e; transition: transform .18s ease, box-shadow .18s ease;
}
.funk-card:nth-child(odd)  { transform: rotate(-2deg); }
.funk-card:nth-child(even) { transform: rotate(1.8deg) translateY(10px); }
.funk-card:hover { transform: rotate(0) scale(1.06) translateY(-4px); box-shadow: 12px 12px 0 #1a0b2e; z-index: 2; }
.funk-c0 { background: #fff36b; } .funk-c1 { background: #ff9bd2; } .funk-c2 { background: #8ff5ff; } .funk-c3 { background: #b6ff7a; } .funk-c4 { background: #ffb36b; }
.funk-emoji { display: inline-block; font-size: 5.6rem; line-height: 1.1; animation: funk-wiggle 2.6s ease-in-out infinite; filter: drop-shadow(3px 4px 0 rgba(26, 11, 46, .25)); }
.funk-card:nth-child(2n) .funk-emoji { animation-delay: -.7s; } .funk-card:nth-child(3n) .funk-emoji { animation-delay: -1.4s; }
@keyframes funk-wiggle { 0%, 100% { transform: rotate(-9deg) scale(1); } 50% { transform: rotate(9deg) scale(1.12); } }
.funk-card:hover .funk-emoji { animation-duration: .5s; }
.funk-card h3 { margin: 12px 0 12px; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 800; font-size: 1.7rem; line-height: 1.15; letter-spacing: -.01em; color: #1a0b2e; }
.funk-card p { margin: 0; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1.2rem; font-weight: 600; line-height: 1.45; color: #1a0b2e; }

.funk-back { margin: 56px 0 0; }
.funk-back a { display: inline-block; padding: 12px 22px; border: 4px solid #1a0b2e; border-radius: 999px; background: #fff; color: #1a0b2e; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: .95rem; font-weight: 800; text-decoration: none; box-shadow: 5px 5px 0 #1a0b2e; transition: transform .15s; }
.funk-back a:hover { transform: translate(-2px, -2px) rotate(-2deg); }
.funk a:focus-visible { outline: 4px solid #1a0b2e; outline-offset: 3px; }

@media (max-width: 560px) { .funk-card:nth-child(n) { transform: rotate(-1deg); } .funk-card:nth-child(even) { transform: rotate(1deg); } .funk-ticker-in { font-size: 1.6rem; } }
@media (prefers-reduced-motion: reduce) {
  .funk, .funk-ticker-in, .funk-emoji { animation: none; }
  .funk-card, .funk-back a { transition: none; }
}
.funk-back s { text-decoration-thickness: 3px; text-decoration-color: #ff2e93; opacity: .6; }
/* ---------- The elastic teaser (assets/js/funk.js) ---------- */
/* Without JavaScript or with reduced motion: the static hints above. With it: the stretch zone instead. */
.funk-stretch { display: none; }
.funk-js .funk-hints { display: none; }
/* It starts 130px up, over the empty space under the footer, so the hint is on screen as soon as you reach the end.
   It's transparent and ignores clicks, so the footer links stay usable. */
.funk-js .funk-stretch { display: block; position: relative; height: 230vh; margin-top: -130px; pointer-events: none; }
.funk-stretch-stick {
  --heat: 0;
  position: sticky; top: 0; height: 100vh; height: 100svh;
  /* the text starts near the top, right below the end of the page, and gets pulled down from there */
  display: flex; align-items: flex-start; justify-content: center; padding-top: 78px; box-sizing: border-box; overflow: hidden;   /* 78px: below the sticky menu bar */
}
.funk-pill {
  margin: 0; padding: 0; white-space: nowrap;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 800; font-size: 10rem; line-height: 1.2;
  /* Drawn 10x bigger and shrunk back to 1rem: when funk.js stretches it, browsers (Safari especially) scale a sharp
     image down instead of blowing a tiny one up, so the text stays crisp. Keep FUNK_BASE in funk.js equal to this 10. */
  transform: scale(0.1);
  /* just the words: they start like the quiet hints and darken (light mode) or brighten (dark mode) as they grow */
  color: color-mix(in srgb, var(--ink, #14213d) calc(var(--heat) * 100%), var(--muted, #55607a));
  transform-origin: 50% 0; will-change: transform;   /* anchored at its top: it stretches downward */
}
.funk-pill.is-popped { animation: funk-pop .22s ease-out forwards; }
@keyframes funk-pop { to { opacity: 0; filter: blur(3px); } }   /* the swell itself is done in funk.js, from where the text is */

/* The burst: the section's own emojis fly out from the pill */
.funk-burst { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.funk-burst span {
  position: absolute; font-size: var(--size, 2rem); line-height: 1; transform: translate(-50%, -50%);
  animation: funk-fly 1.1s cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes funk-fly {
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(.6); opacity: 0; }
}

/* Landing: the title arrives with a jelly bounce */
.funk.is-arriving .funk-title { animation: funk-jelly .9s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes funk-jelly {
  0% { transform: rotate(-1.5deg) scale(.6, 1.4); }
  35% { transform: rotate(-1.5deg) scale(1.18, .82); }
  60% { transform: rotate(-1.5deg) scale(.94, 1.06); }
  100% { transform: rotate(-1.5deg) scale(1); }
}

/* Liquid Glass (2026-10): the cards become coloured glass over the moving rainbow, still tilted and loud.
   Each card keeps its colour as a tint (--fc); browsers without color-mix() keep the solid colours above. */
.funk-c0 { --fc: #fff36b; } .funk-c1 { --fc: #ff9bd2; } .funk-c2 { --fc: #8ff5ff; } .funk-c3 { --fc: #b6ff7a; } .funk-c4 { --fc: #ffb36b; }
@supports (color: color-mix(in srgb, red, blue)) {
  .funk-card {
    border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 30px;
    background:
      radial-gradient(120% 70% at 20% 0%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 55%),
      linear-gradient(160deg, color-mix(in srgb, var(--fc) 90%, transparent), color-mix(in srgb, var(--fc) 70%, transparent));
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    backdrop-filter: blur(20px) saturate(1.2);
    box-shadow: inset 0 1px 0 #fff, inset 0 -16px 30px -20px rgba(255, 255, 255, .9), 0 26px 44px -20px rgba(26, 11, 46, .55);
  }
  .funk-card:hover { box-shadow: inset 0 1px 0 #fff, inset 0 -16px 30px -20px rgba(255, 255, 255, .9), 0 34px 56px -20px rgba(26, 11, 46, .6); }
}