/* ==========================================================================
   Flo Softplush – link page
   Two moods: "rave" (lights off, neon club) and "plush" (lights on, felt & stitches)
   ========================================================================== */

@font-face {
  font-family: "Fredoka";
  src: url("../assets/fonts/fredoka-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../assets/fonts/nunito-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@property --sew {
  syntax: "<angle>";
  inherits: false;
  initial-value: 360deg;
}

/* ---------- Tokens ---------- */
:root {
  /* Flo's colours */
  --fur: #f7f5f8;
  --blue: #1f3fd1;
  --green: #2fd43a;
  --nose: #e2389b;
  --red: #d8203a;
  --neon: #ffd23f;
  --violet: #b44dff;

  --font-display: "Fredoka", "Baloo 2", "Varela Round", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;

  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

[data-mode="rave"] {
  --bg: #14061f;
  --bg-2: #2a0d45;
  --ink: #fbf7ff;
  --ink-soft: #d4c6ee;
  --line: #2b1640;

  --chip-bg: rgba(255, 255, 255, .08);
  --chip-line: rgba(255, 255, 255, .28);

  --patch-bg: rgba(34, 12, 58, .9);
  --patch-ink: #fff;
  --patch-sub: #cbb8ea;
  --patch-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8);

  --acc-dj: #ff5cb8;
  --acc-x: #7d96ff;
  --acc-tg: #54f06c;
  --acc-dj-bg: rgba(255, 92, 184, .16);
  --acc-x-bg: rgba(125, 150, 255, .16);
  --acc-tg-bg: rgba(84, 240, 108, .14);
  --seam-glow: 0 0 6px currentColor;

  --ring: rgba(255, 255, 255, .92);
  --ring-glow: 0 0 0 6px rgba(255, 255, 255, .06), 0 0 38px rgba(180, 77, 255, .75), 0 0 90px rgba(255, 92, 184, .35);
  --seam-ring: #fff;

  --felt-opacity: .12;
  --felt-blend: soft-light;

  --bubble-bg: #fff;
  --bubble-ink: #2b1640;
}

[data-mode="plush"] {
  --bg: #fff3ea;
  --bg-2: #ffe4f0;
  --ink: #3a1d4f;
  --ink-soft: #6c5a7c;
  --line: #3a1d4f;

  --chip-bg: rgba(255, 255, 255, .7);
  --chip-line: rgba(58, 29, 79, .35);

  --patch-bg: #fffaf6;
  --patch-ink: #3a1d4f;
  --patch-sub: #6c5a7c;
  --patch-shadow: 0 3px 0 rgba(58, 29, 79, .12), 0 12px 24px -14px rgba(58, 29, 79, .45);

  --acc-dj: #c2187a;
  --acc-x: #2a46d6;
  --acc-tg: #1c8f33;
  --acc-dj-bg: #ffd6ea;
  --acc-x-bg: #dbe3ff;
  --acc-tg-bg: #d3f5d8;
  --seam-glow: none;

  --ring: #fff;
  --ring-glow: 0 4px 0 rgba(58, 29, 79, .12), 0 16px 40px -10px rgba(194, 24, 122, .35);
  --seam-ring: #9b7fb0;

  --felt-opacity: .3;
  --felt-blend: multiply;

  --bubble-bg: #3a1d4f;
  --bubble-ink: #fff;
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background:
    radial-gradient(120% 70% at 50% -10%, var(--bg-2), transparent 70%),
    var(--bg);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

[data-mode="plush"] body {
  background:
    radial-gradient(60% 45% at 8% 4%, rgba(91, 124, 255, .16), transparent 70%),
    radial-gradient(55% 40% at 100% 38%, rgba(47, 212, 58, .14), transparent 70%),
    radial-gradient(70% 45% at 40% 104%, rgba(226, 56, 155, .16), transparent 70%),
    var(--bg);
}

button { font: inherit; color: inherit; }
img, svg { display: block; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible {
  outline: 3px solid var(--neon);
  outline-offset: 3px;
  border-radius: 12px;
}
[data-mode="plush"] :focus-visible { outline-color: var(--nose); }

/* ---------- Stage (background) ---------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.beams {
  position: absolute;
  inset: 0;
  transition: opacity .6s ease;
}
[data-mode="plush"] .beams { opacity: 0; }

.beam {
  position: absolute;
  top: -40px;
  width: 120vh;
  height: 120vh;
  margin-left: -60vh;
  transform-origin: 50% 0;
  /* soft-edged cone without a blur filter (cheap to animate) */
  background: conic-gradient(from 180deg at 50% 0, var(--c) 0deg, var(--c) 4deg, transparent 13deg, transparent 347deg, var(--c) 356deg, var(--c) 360deg);
  -webkit-mask: linear-gradient(#000 0%, transparent 80%);
  mask: linear-gradient(#000 0%, transparent 80%);
  opacity: .38;
  mix-blend-mode: screen;
  will-change: transform;
  animation: sweep var(--t) ease-in-out infinite alternate;
}
.beam::before { /* lamp head */
  content: "";
  position: absolute;
  left: 50%;
  top: 28px;
  width: 26px;
  height: 18px;
  margin-left: -13px;
  border-radius: 6px 6px 12px 12px;
  background: var(--c);
  box-shadow: 0 0 22px 8px var(--c);
}
.beam--1 { --c: #ffd23f; --t: 7s; --from: -28deg; --to: 18deg; left: 12%; }
.beam--2 { --c: #ff2d55; --t: 9s; --from: 22deg; --to: -14deg; left: 38%; animation-delay: -3s; }
.beam--3 { --c: #2fd43a; --t: 8s; --from: -18deg; --to: 26deg; left: 64%; animation-delay: -5s; }
.beam--4 { --c: #4f6bff; --t: 10s; --from: 30deg; --to: -22deg; left: 90%; animation-delay: -1s; }

@keyframes sweep {
  from { transform: rotate(var(--from)); }
  to { transform: rotate(var(--to)); }
}

.blobs {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
[data-mode="plush"] .blobs { opacity: 1; }
.blobs span {
  position: absolute;
  border-radius: 46% 54% 52% 48% / 50% 44% 56% 50%;
  border: 2px dashed rgba(58, 29, 79, .12);
  animation: blob 18s ease-in-out infinite alternate;
}
.blobs span:nth-child(1) { width: 280px; height: 240px; left: -90px; top: 18%; background: rgba(91, 124, 255, .1); }
.blobs span:nth-child(2) { width: 220px; height: 260px; right: -80px; top: 52%; background: rgba(47, 212, 58, .1); animation-delay: -6s; }
.blobs span:nth-child(3) { width: 180px; height: 160px; left: 30%; bottom: -70px; background: rgba(226, 56, 155, .1); animation-delay: -11s; }
@keyframes blob {
  to { transform: translate(18px, -24px) rotate(14deg) scale(1.06); }
}

[data-mode="rave"] .felt { display: none; }

.particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.felt {
  position: absolute;
  inset: 0;
  opacity: var(--felt-opacity);
  mix-blend-mode: var(--felt-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .5 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Top bar: language + pull cord ---------- */
.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 16px 0;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.lang {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 2px dashed var(--chip-line);
}
.lang button {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .3s ease;
}
.lang button[aria-pressed="true"] { color: #fff; }
.lang-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 44px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), #6a3dff 50%, var(--green));
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  transition: transform .45s var(--ease-bounce);
}
[lang="de"] .lang-thumb { transform: translateX(44px); }

.pullcord {
  position: relative;
  margin-top: -14px;
  margin-right: 6px;
  padding: 0 4px 6px;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  touch-action: manipulation;
}
.cord-swing {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 0;
  animation: cord-sway 5s ease-in-out infinite;
}
.cord {
  width: 6px;
  height: 58px;
  background: radial-gradient(circle, var(--chain, #c9c3d6) 1.7px, transparent 2.2px) 0 0 / 6px 6px repeat-y;
}
[data-mode="plush"] .cord { --chain: #8d7aa0; }
.knob {
  width: 40px;
  height: 40px;
  margin-top: -2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2a1145;
  border: 2px dashed var(--neon);
  color: var(--neon);
  box-shadow: 0 0 0 3px rgba(255, 210, 63, .12), 0 0 22px rgba(255, 210, 63, .55);
  transition: background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.knob svg { width: 22px; height: 22px; fill: currentColor; }
[data-mode="plush"] .knob {
  background: #ffd6ea;
  border-color: var(--nose);
  color: var(--nose);
  box-shadow: 0 3px 0 rgba(58, 29, 79, .15);
}
.cord-label {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.pullcord:hover .cord-swing { animation-duration: 1.6s; }
.pullcord.is-pulled .cord-swing { animation: cord-pull .7s var(--ease-out); }
.pullcord:focus-visible { outline-offset: -2px; }

@keyframes cord-sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}
@keyframes cord-pull {
  0% { transform: translateY(0) scaleY(1); }
  25% { transform: translateY(18px) scaleY(1.06); }
  55% { transform: translateY(-6px) scaleY(.98); }
  75% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

/* ---------- Page column ---------- */
.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 84px 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- Hero: neon paw + avatar ---------- */
.hero {
  position: relative;
  width: min(82vw, 320px);
  aspect-ratio: 300 / 285;
  margin: 0;
}

.paw-sign {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.paw-sign use,
.paw-sign path { vector-effect: non-scaling-stroke; }

[data-mode="rave"] .paw-sign {
  filter: drop-shadow(0 0 3px var(--neon)) drop-shadow(0 0 14px rgba(180, 77, 255, .9));
  animation: neon-on 1.8s steps(1, end) .25s both, neon-buzz 4s ease-in-out 2.1s infinite;
}
[data-mode="rave"] .tube { fill: rgba(255, 210, 63, .05); stroke: var(--neon); stroke-width: 6; }
[data-mode="rave"] .core { fill: none; stroke: #fff8d6; stroke-width: 1.8; }
[data-mode="rave"] .claws { fill: none; stroke: #f4e9ff; stroke-width: 5; stroke-linecap: round; }

[data-mode="plush"] .paw-sign { filter: drop-shadow(0 3px 0 rgba(58, 29, 79, .12)); }
[data-mode="plush"] .tube { fill: #ffc4df; stroke: #c2187a; stroke-width: 2.5; stroke-dasharray: 7 6; stroke-linecap: round; }
[data-mode="plush"] .core { display: none; }
[data-mode="plush"] .claws { display: none; }

@keyframes neon-on {
  0% { opacity: 0; }
  10% { opacity: .9; }
  14% { opacity: .1; }
  22% { opacity: 1; }
  27% { opacity: .25; }
  33% { opacity: 1; }
  60% { opacity: .55; }
  63% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes neon-buzz {
  0%, 100% { opacity: 1; }
  48% { opacity: .9; }
  50% { opacity: .72; }
  52% { opacity: .95; }
}

.avatar {
  position: absolute;
  left: 23.33%;
  top: 34.39%;
  width: 53.33%;
  height: 56.14%;
  --nose-x: 44%;
  --nose-y: 47%;
  animation: plop .9s var(--ease-out) .1s both;
}
[data-mode="plush"] .avatar { --nose-x: 60.3%; --nose-y: 55.5%; }

.avatar-imgs {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--fur);
  border: 5px solid var(--ring);
  box-shadow: var(--ring-glow);
  animation: breathe 4.5s ease-in-out 1.2s infinite;
  transition: box-shadow .5s ease;
}
.avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .5s ease;
}
[data-mode="rave"] .avatar-img--plush,
[data-mode="plush"] .avatar-img--rave { opacity: 0; }

.seam {
  position: absolute;
  left: 6px;
  top: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  overflow: visible;
  pointer-events: none;
  -webkit-mask: conic-gradient(#000 var(--sew), transparent 0);
  mask: conic-gradient(#000 var(--sew), transparent 0);
  animation: sew 1.1s var(--ease-out) var(--sew-delay, .3s) both;
}
.seam rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-dasharray: 7 6;
  stroke-linecap: round;
}
.seam--ring {
  z-index: 2;
  left: -9px;
  top: -9px;
  width: calc(100% + 18px);
  height: calc(100% + 18px);
  color: var(--seam-ring);
  --sew-delay: .7s;
  animation: sew 1.4s var(--ease-out) var(--sew-delay) both, spin-seam 40s linear 2s infinite;
}
.seam--ring rect { stroke-width: 2.4; stroke-dasharray: 8 7; }
[data-mode="rave"] .seam--ring { filter: drop-shadow(0 0 4px rgba(255, 255, 255, .8)); }

@keyframes sew {
  from { --sew: 0deg; }
  to { --sew: 360deg; }
}
@keyframes spin-seam {
  to { transform: rotate(360deg); }
}
@keyframes plop {
  0% { transform: translateY(-70%) scale(.6); opacity: 0; }
  45% { transform: translateY(0) scale(1.08, .9); opacity: 1; }
  62% { transform: translateY(-6%) scale(.96, 1.05); }
  80% { transform: translateY(0) scale(1.02, .98); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

.avatar.is-booped .avatar-imgs { animation: squish .55s var(--ease-out); }
@keyframes squish {
  0% { transform: scale(1); }
  20% { transform: scale(1.12, .86); }
  45% { transform: scale(.94, 1.07); }
  70% { transform: scale(1.03, .97); }
  100% { transform: scale(1); }
}

.snoot {
  position: absolute;
  z-index: 3;
  left: var(--nose-x);
  top: var(--nose-y);
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: left .5s var(--ease-out), top .5s var(--ease-out);
}
.snoot::after { /* "boop me" hint ring */
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 2px solid var(--nose);
  box-shadow: 0 0 10px var(--nose);
  animation: snoot-ping 1.8s ease-out 2.4s infinite;
  opacity: 0;
}
.has-booped .snoot::after { display: none; }
@keyframes snoot-ping {
  0% { transform: scale(.5); opacity: .95; }
  80%, 100% { transform: scale(1.7); opacity: 0; }
}

.bubble {
  position: absolute;
  z-index: 4;
  right: -18%;
  top: -6%;
  margin: 0;
  padding: 6px 12px;
  max-width: 190px;
  border-radius: 16px 16px 16px 4px;
  background: var(--bubble-bg);
  color: var(--bubble-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  transform-origin: 0 100%;
  opacity: 0;
  transform: scale(.4) rotate(-8deg);
  pointer-events: none;
}
.bubble.is-long { white-space: normal; width: 190px; }
.bubble.is-shown { animation: bubble 1.7s var(--ease-bounce) both; }
@keyframes bubble {
  0% { opacity: 0; transform: scale(.4) rotate(-8deg); }
  14% { opacity: 1; transform: scale(1.05) rotate(3deg); }
  22% { transform: scale(1) rotate(0); }
  82% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: translateY(-10px) scale(.9); }
}

.boop-hint {
  position: absolute;
  left: -7%;
  bottom: -3%;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-soft);
  transform: rotate(-9deg);
  animation: hint-in .6s var(--ease-bounce) 2.6s both, hint-wobble 3s ease-in-out 3.2s infinite;
  pointer-events: none;
  transition: opacity .4s ease;
}
.has-booped .boop-hint { animation: none; opacity: 0; }
@keyframes hint-in {
  from { opacity: 0; transform: rotate(-9deg) scale(.6); }
  to { opacity: 1; transform: rotate(-9deg) scale(1); }
}
@keyframes hint-wobble {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(-5deg) translateY(-2px); }
}

/* ---------- Name, chips, bio ---------- */
.name {
  margin: 18px 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 9vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: .01em;
  text-shadow: -2px 0 0 rgba(31, 63, 209, .9), 2px 0 0 rgba(47, 212, 58, .85);
  animation: rise .7s var(--ease-out) .55s both;
}
[data-mode="rave"] .name { text-shadow: -2px 0 0 #3d5cff, 2px 0 0 #2fd43a, 0 0 22px rgba(180, 77, 255, .7); }
[data-mode="plush"] .name { text-shadow: -2px 0 0 rgba(31, 63, 209, .35), 2px 0 0 rgba(47, 212, 58, .45); }
.name .ltr {
  display: inline-block;
  transition: transform .3s var(--ease-bounce);
}
.name .ltr.is-hop { animation: hop .5s var(--ease-bounce); }
@keyframes hop {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px) rotate(-6deg); }
}

.chips {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  animation: rise .7s var(--ease-out) .7s both;
}
.chips li:not(.chip) { display: contents; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 2px dashed var(--chip-line);
  background: var(--chip-bg);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
.chip--truck {
  cursor: pointer;
  transition: transform .3s var(--ease-bounce), border-color .3s ease;
}
.chip--truck:hover { transform: translateY(-2px) rotate(-2deg); border-color: var(--neon); }
[data-mode="plush"] .chip--truck:hover { border-color: var(--blue); }
.chip--truck:active { transform: scale(.95); }
.chip--pm .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(47, 212, 58, .7);
  animation: pm-pulse 2s ease-out infinite;
}
@keyframes pm-pulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 212, 58, .7); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(47, 212, 58, 0); }
}

.bio {
  margin: 16px 0 4px;
  max-width: 34ch;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-soft);
  animation: rise .7s var(--ease-out) .85s both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Link patches ---------- */
.links { width: 100%; margin-top: 20px; }
.links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.patch {
  --acc: var(--acc-x);
  --acc-bg: var(--acc-x-bg);
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 12px 16px 12px 12px;
  border-radius: 21px;
  background: var(--patch-bg);
  color: var(--patch-ink);
  text-decoration: none;
  text-align: left;
  box-shadow: var(--patch-shadow);
  transition: transform .35s var(--ease-bounce), box-shadow .35s ease;
}
.links li { animation: patch-in .75s var(--ease-bounce) 1s both; }
.links li:nth-child(2) { animation-delay: 1.15s; }
.links li:nth-child(3) { animation-delay: 1.3s; }
.patch--dj { --acc: var(--acc-dj); --acc-bg: var(--acc-dj-bg); }
.patch--x { --acc: var(--acc-x); --acc-bg: var(--acc-x-bg); }
.patch--tg { --acc: var(--acc-tg); --acc-bg: var(--acc-tg-bg); }
.patch--dj .seam { --sew-delay: 1.2s; }
.patch--x .seam { --sew-delay: 1.35s; }
.patch--tg .seam { --sew-delay: 1.5s; }

[data-mode="plush"] .patch { background: var(--acc-bg); }
[data-mode="rave"] .patch {
  background: linear-gradient(100deg, var(--acc-bg), transparent 60%), var(--patch-bg);
}

.patch .seam { color: var(--acc); }
[data-mode="rave"] .patch .seam { filter: drop-shadow(0 0 3px var(--acc)); }

.patch:hover,
.patch:focus-visible {
  animation: jelly .6s var(--ease-out) both;
  box-shadow: var(--patch-shadow), 0 0 0 0 transparent;
}
[data-mode="rave"] .patch:hover,
[data-mode="rave"] .patch:focus-visible {
  box-shadow: var(--patch-shadow), 0 0 28px -4px var(--acc);
}
.patch:hover .seam rect,
.patch:focus-visible .seam rect { animation: needle .9s linear infinite; }
.patch:active { transform: scale(.97); }
.patch:focus-visible { outline-offset: 4px; border-radius: 21px; }

@keyframes patch-in {
  0% { opacity: 0; transform: translateY(26px) rotate(-3deg) scale(.92); }
  60% { opacity: 1; transform: translateY(-4px) rotate(.8deg) scale(1.01); }
  100% { opacity: 1; transform: none; }
}
@keyframes jelly {
  0% { transform: scale(1); }
  30% { transform: scale(1.035, .95); }
  50% { transform: scale(.985, 1.03); }
  70% { transform: scale(1.012, .99); }
  100% { transform: scale(1.015) translateY(-2px); }
}
@keyframes needle {
  to { stroke-dashoffset: -26; }
}

.patch-icon {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--acc);
  color: #fff;
  outline: 2px dashed rgba(255, 255, 255, .75);
  outline-offset: -5px;
  transform: rotate(-4deg);
  transition: transform .4s var(--ease-bounce);
}
[data-mode="plush"] .patch-icon { box-shadow: 0 2px 0 rgba(58, 29, 79, .18); }
.patch-icon svg { width: 24px; height: 24px; fill: currentColor; }
.patch-icon--img { overflow: hidden; background: #8b2bd6; }
.patch-icon--img img { width: 100%; height: 100%; object-fit: cover; }
.patch-icon--img::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 11px;
  border: 2px dashed rgba(255, 255, 255, .8);
}
.patch-icon--img { outline: 0; }
.patch:hover .patch-icon { transform: rotate(5deg) scale(1.06); }
.patch--tg:hover .patch-icon--plane svg { animation: fly .9s var(--ease-out); }
@keyframes fly {
  0% { transform: none; }
  40% { transform: translate(14px, -14px) scale(.7); opacity: 0; }
  41% { transform: translate(-14px, 14px) scale(.7); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

.patch-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.patch-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.2;
}
.patch-sub {
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--patch-sub);
}

.patch-end {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--acc);
  fill: currentColor;
}
.paw-step {
  width: 24px;
  height: 24px;
  transform: rotate(90deg);
  opacity: .85;
  transition: transform .35s var(--ease-bounce), opacity .3s ease;
}
.patch:hover .paw-step { transform: rotate(90deg) translateY(-6px); opacity: 1; animation: step .7s ease-in-out infinite; }
@keyframes step {
  0%, 100% { transform: rotate(80deg) translateY(-4px); }
  50% { transform: rotate(100deg) translateY(-8px); }
}

.vinyl { width: 38px; height: 38px; }
.vinyl-disc { fill: #17101f; stroke: var(--acc); stroke-width: 1.5; }
.vinyl-groove { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.vinyl-label { fill: var(--acc); }
.vinyl-hole { fill: #17101f; }
.vinyl-shine { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.6; stroke-linecap: round; }
.vinyl { animation: spin 3.6s linear infinite paused; }
.patch:hover .vinyl,
.patch:focus-visible .vinyl { animation-play-state: running; animation-duration: 1.1s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Footer ---------- */
.foot {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: rise .7s var(--ease-out) 1.6s both;
}
.boops {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-soft);
}
.boops svg { width: 18px; height: 18px; fill: var(--nose); }
.boops.is-bump .boops-text { animation: bump .45s var(--ease-bounce); }
@keyframes bump {
  40% { transform: scale(1.18); color: var(--nose); }
}
.boops-text { display: inline-block; }

.woven {
  margin: 0;
  padding: 5px 12px 6px;
  display: grid;
  justify-items: center;
  border-radius: 3px;
  background: #121014;
  color: #f2f0f4;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9px;
  line-height: 1.15;
  letter-spacing: .08em;
  outline: 1px dashed rgba(255, 255, 255, .35);
  outline-offset: -3px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  transform: rotate(-3deg);
  transition: transform .4s var(--ease-bounce);
}
.woven b { color: #ff3047; font-size: 12px; letter-spacing: .1em; }
.woven:hover { transform: rotate(3deg) scale(1.08); }

.made {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  opacity: .85;
}
.made a { color: inherit; }

/* ---------- Truck ---------- */
.road {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  height: 0;
  pointer-events: none;
}
.truck {
  position: absolute;
  left: 0;
  bottom: max(6px, env(safe-area-inset-bottom));
  width: clamp(210px, 52vw, 280px);
  visibility: hidden;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
}
.truck.is-driving { visibility: visible; }
.truck-bob { position: relative; animation: bob .35s ease-in-out infinite alternate; }
.truck-svg { width: 100%; height: auto; overflow: visible; }
@keyframes bob { to { transform: translateY(-2px); } }

.t-shadow { fill: rgba(0, 0, 0, .28); }
.t-trailer { fill: #fbfaff; stroke: #2b1640; stroke-width: 3; }
.t-seam { fill: none; stroke: #a594b6; stroke-width: 1.6; stroke-dasharray: 6 5; }
.t-patch { fill: #1f3fd1; }
.t-patch-seam { fill: none; stroke: #fff; stroke-width: 1.2; stroke-dasharray: 3 2.5; }
.t-text { font-family: var(--font-display); font-weight: 700; font-size: 24px; fill: #2b1640; }
.t-sub { font-family: var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: 4px; fill: #8a77a0; }
.t-paw { fill: #e2389b; }
.t-chassis { fill: #2b2235; }
.t-pipe { fill: #c9c3d6; stroke: #2b1640; stroke-width: 2; }
.t-cab { fill: #2b4bff; stroke: #2b1640; stroke-width: 3; }
.t-stripe { fill: #2fd43a; }
.t-window { fill: #bfe8ff; }
.t-window-line { fill: none; stroke: #2b1640; stroke-width: 2.5; }
.t-ears { fill: #fff; stroke: #2b1640; stroke-width: 1.4; stroke-linejoin: round; }
.t-ear-blue { fill: #1f3fd1; }
.t-ear-green { fill: #2fd43a; }
.t-head { fill: #fff; stroke: #2b1640; stroke-width: 1.4; }
.t-eye-blue { fill: #1f3fd1; }
.t-eye-green { fill: #1fa62c; }
.t-nose { fill: #e2389b; }
.t-driver { animation: driver 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes driver {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(5deg) translateY(-1px); }
}
.t-handle { fill: #1a2f9e; }
.t-light { fill: #ffe066; }
.t-bumper { fill: #c9c3d6; stroke: #2b1640; stroke-width: 2; }
.t-tire { fill: #1c1724; }
.t-hub { fill: #d9d4e2; }
.t-spoke { stroke: #1c1724; stroke-width: 2.5; }
.t-wheel { transform-box: fill-box; transform-origin: center; animation: spin .45s linear infinite; }
.t-beam { opacity: 0; transition: opacity .4s ease; }
[data-mode="rave"] .t-beam { opacity: 1; mix-blend-mode: screen; }
[data-mode="rave"] .t-light { filter: drop-shadow(0 0 4px #ffe066); }

.t-puff { transform-box: fill-box; transform-origin: center; animation: puff 1.3s ease-out infinite; opacity: 0; }
.t-puff--2 { animation-delay: .43s; }
.t-puff--3 { animation-delay: .86s; }
[data-mode="plush"] .t-puff { fill: #fff; stroke: #c8bcd6; stroke-width: 1.2; }
[data-mode="rave"] .t-puff { fill: #ff5cb8; filter: drop-shadow(0 0 4px #ff5cb8); }
[data-mode="rave"] .t-puff--2 { fill: #7d96ff; filter: drop-shadow(0 0 4px #7d96ff); }
[data-mode="rave"] .t-puff--3 { fill: #54f06c; filter: drop-shadow(0 0 4px #54f06c); }
@keyframes puff {
  0% { opacity: .9; transform: translate(0, 0) scale(.5); }
  100% { opacity: 0; transform: translate(-26px, -16px) scale(2); }
}

.honk {
  position: absolute;
  right: 4%;
  top: -30px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 12px 12px 4px 12px;
  background: var(--bubble-bg);
  color: var(--bubble-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  transform: scale(.5);
  transform-origin: 100% 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.honk.is-shown { animation: bubble 1.4s var(--ease-bounce) both; transform-origin: 100% 100%; }

/* ---------- FX layer (paw stamps, confetti) ---------- */
.fx {
  position: fixed;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  overflow: hidden;
}
.fx-bit {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  fill: currentColor;
  will-change: transform, opacity;
}

.flash {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: #fff8ef;
  opacity: 0;
}
.flash.is-dark { background: #14061f; }
.flash.is-on { animation: flash .6s ease-out; }
@keyframes flash {
  0% { opacity: 0; }
  30% { opacity: .9; }
  100% { opacity: 0; }
}

/* View-transition circular reveal (driven from JS) */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* ---------- Small screens ---------- */
@media (max-width: 380px) {
  .patch { gap: 12px; padding-right: 12px; }
  .patch-icon { width: 46px; height: 46px; }
  .patch-title { font-size: 1.05rem; }
  .patch-sub { font-size: .85rem; }
  .chip { font-size: 13px; padding: 3px 10px; }
  .bubble { right: -10%; font-size: 14px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
  .beams,
  .particles { display: none; }
  .bubble.is-shown,
  .honk.is-shown { animation: none !important; opacity: 1; transform: none; }
}