/* Kechballen swipe site — extends design system */
@import url("design-system/colors_and_type.css");

/* Reset extras */
html, body {
  background: var(--kech-black);
  color: var(--kech-white);
  overflow-x: hidden;
}

button { font: inherit; cursor: pointer; }

/* Brand button — chunky sticker */
.kbtn {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  text-transform: lowercase;
  line-height: 1;
  background: var(--kech-fuchsia);
  color: var(--kech-black);
  border: 3px solid var(--kech-black);
  border-radius: 999px;
  padding: 14px 28px 16px;
  box-shadow: 5px 5px 0 var(--kech-aqua), 5px 5px 0 3px var(--kech-black);
  transition: transform 180ms var(--ease-pop), box-shadow 180ms var(--ease-pop);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.kbtn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--kech-aqua), 7px 7px 0 3px var(--kech-black);
}
.kbtn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--kech-aqua), 2px 2px 0 3px var(--kech-black);
}
.kbtn--aqua { background: var(--kech-aqua); box-shadow: 5px 5px 0 var(--kech-fuchsia), 5px 5px 0 3px var(--kech-black); }
.kbtn--aqua:hover { box-shadow: 7px 7px 0 var(--kech-fuchsia), 7px 7px 0 3px var(--kech-black); }
.kbtn--ghost {
  background: transparent;
  color: var(--kech-aqua);
  border-color: var(--kech-aqua);
  box-shadow: none;
}
.kbtn--ghost:hover { background: var(--kech-aqua); color: var(--kech-black); }
.kbtn--small { font-size: 16px; padding: 8px 18px 10px; box-shadow: 3px 3px 0 var(--kech-black); }
.kbtn--small:hover { box-shadow: 5px 5px 0 var(--kech-black); }

/* Sticker tag (pill) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: lowercase;
  line-height: 1;
  font-size: 14px;
  background: var(--kech-aqua);
  color: var(--kech-black);
  border: 2.5px solid var(--kech-black);
  border-radius: 999px;
  padding: 5px 12px 7px;
}
.tag--fuchsia { background: var(--kech-fuchsia); }
.tag--white { background: var(--kech-white); }
.tag--mono { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 10px; }

/* Marquee */
@keyframes kech-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee {
  display: flex;
  width: max-content;
  animation: kech-marquee 30s linear infinite;
}
.marquee--reverse { animation-direction: reverse; animation-duration: 40s; }

/* Drift / float */
@keyframes kech-drift {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-10px) rotate(var(--rot, 0deg)); }
}
.drift { animation: kech-drift 4s ease-in-out infinite; }

/* Wobble (logo) */
@keyframes kech-wobble {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1.5deg); }
}

/* Blink */
@keyframes kech-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.cursor::after {
  content: "▌";
  display: inline-block;
  margin-left: 4px;
  color: var(--kech-fuchsia);
  animation: kech-blink 700ms steps(1) infinite;
}

/* Sticker shadow utility */
.sticker {
  border: 3px solid var(--kech-black);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--kech-black);
}
.sticker--fuchsia { box-shadow: 6px 6px 0 var(--kech-fuchsia), 6px 6px 0 3px var(--kech-black); }
.sticker--aqua { box-shadow: 6px 6px 0 var(--kech-aqua), 6px 6px 0 3px var(--kech-black); }

/* Page chrome */
.page {
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Halftone / noise overlay  */
.halftone {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
  background-size: 8px 8px;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Striped diagonal bg */
.stripes {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--kech-black) 0 24px,
    var(--kech-black-soft) 24px 48px
  );
}

/* Big ticker bar */
.ticker {
  background: var(--kech-fuchsia);
  border-top: 3px solid var(--kech-black);
  border-bottom: 3px solid var(--kech-black);
  padding: 16px 0 18px;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  text-transform: lowercase;
  color: var(--kech-black);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.ticker--aqua { background: var(--kech-aqua); }
.ticker--black { background: var(--kech-black); color: var(--kech-aqua); border-color: var(--kech-aqua); }

.ticker__inner > span {
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  gap: 24px;
}
.ticker__sep {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--kech-black);
  border-radius: 999px;
}
.ticker--aqua .ticker__sep { background: var(--kech-fuchsia); }
.ticker--black .ticker__sep { background: var(--kech-fuchsia); }

/* Eyebrow */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--kech-aqua);
}

/* Kech display utility */
.kech-display { font-family: var(--font-display); font-weight: 800; text-transform: lowercase; letter-spacing: -0.02em; line-height: 0.85; }

/* Range input — brutalist */
.kech-range {
  -webkit-appearance: none;
  width: 100%;
  height: 18px;
  background: transparent;
  margin: 0;
}
.kech-range::-webkit-slider-runnable-track {
  height: 14px;
  background: var(--kech-black);
  border: 3px solid var(--kech-black);
  border-radius: 999px;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 calc(11.11% - 2px),
    var(--kech-aqua) calc(11.11% - 2px) 11.11%
  );
}
.kech-range::-moz-range-track {
  height: 14px;
  background: var(--kech-black);
  border: 3px solid var(--kech-black);
  border-radius: 999px;
}
.kech-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 32px; height: 32px;
  background: var(--kech-fuchsia);
  border: 3px solid var(--kech-black);
  border-radius: 999px;
  margin-top: -12px;
  box-shadow: 3px 3px 0 var(--kech-black);
  cursor: grab;
}
.kech-range::-moz-range-thumb {
  width: 32px; height: 32px;
  background: var(--kech-fuchsia);
  border: 3px solid var(--kech-black);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--kech-black);
  cursor: grab;
}

/* Text input */
.kech-input, .kech-textarea {
  font-family: var(--font-body);
  font-size: 16px;
  background: var(--kech-white);
  color: var(--kech-black);
  border: 3px solid var(--kech-black);
  border-radius: 14px;
  padding: 14px 18px;
  width: 100%;
  outline: none;
  font-weight: 600;
}
.kech-input:focus, .kech-textarea:focus {
  box-shadow: 4px 4px 0 var(--kech-fuchsia);
  transform: translate(-1px, -1px);
}
.kech-textarea { min-height: 90px; resize: vertical; }
.kech-input::placeholder, .kech-textarea::placeholder { color: rgba(25,20,20,0.4); font-weight: 500; }

/* Section heading layout */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* Diagonal sticker rotations */
.tilt-l { transform: rotate(-3deg); }
.tilt-r { transform: rotate(3deg); }
.tilt-l-sm { transform: rotate(-1.5deg); }
.tilt-r-sm { transform: rotate(1.5deg); }

/* Fade-up entry */
@keyframes kech-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.rise { animation: kech-rise 600ms var(--ease-pop) both; }

/* Pop entry */
@keyframes kech-pop {
  0% { opacity: 0; transform: scale(0.5) rotate(-8deg); }
  60% { transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(var(--final-rot, 0deg)); }
}
.pop { animation: kech-pop 500ms var(--ease-pop) both; }

/* Stamp animation (LIKE/NAH/FIRE) */
@keyframes kech-stamp {
  0% { opacity: 0; transform: scale(2) rotate(var(--stamp-rot, -8deg)); }
  60% { opacity: 1; transform: scale(0.9) rotate(var(--stamp-rot, -8deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--stamp-rot, -8deg)); }
}

/* Ornament bob — gentle hover */
@keyframes kech-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Fire burst — radiates outward from center over the card */
@keyframes kech-fire-burst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
  10%  { opacity: 1; transform: translate(calc(-50% + var(--dx) * 0.45), calc(-50% + var(--dy) * 0.45)) scale(1.1) rotate(var(--r, 0deg)); }
  60%  { opacity: 1; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--r, 0deg)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * 1.1), calc(-50% + var(--dy) * 1.1 - 16px)) scale(0.6) rotate(var(--r, 0deg)); }
}
@keyframes kech-fire-flash {
  0%   { opacity: 0; }
  18%  { opacity: 0.7; }
  100% { opacity: 0; }
}
@keyframes kech-fire-stamp {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-14deg); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(-8deg); }
  35%  { transform: translate(-50%, -50%) scale(0.95) rotate(-6deg); }
  80%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-6deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05) rotate(-4deg); }
}

/* Scrollbar — kill */
::-webkit-scrollbar { width: 0; background: transparent; }

/* Dotted divider */
.dotted-rule {
  border: none;
  border-top: 3px dotted var(--kech-aqua);
  margin: 24px 0;
}

/* Grid background variant — diamonds */
.bg-diamonds {
  background-color: var(--kech-black);
  background-image:
    linear-gradient(45deg, var(--kech-black-soft) 25%, transparent 25%),
    linear-gradient(-45deg, var(--kech-black-soft) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--kech-black-soft) 75%),
    linear-gradient(-45deg, transparent 75%, var(--kech-black-soft) 75%);
  background-size: 32px 32px;
  background-position: 0 0, 0 16px, 16px -16px, -16px 0;
}

/* Grid background — fuchsia field */
.bg-fuchsia-field {
  background-color: var(--kech-fuchsia);
  background-image:
    radial-gradient(circle at 25% 25%, var(--kech-aqua) 6px, transparent 7px),
    radial-gradient(circle at 75% 75%, var(--kech-black) 6px, transparent 7px);
  background-size: 56px 56px;
}

/* Grid background — aqua field */
.bg-aqua-field {
  background-color: var(--kech-aqua);
  background-image:
    radial-gradient(circle at 50% 50%, var(--kech-fuchsia) 8px, transparent 9px);
  background-size: 40px 40px;
}

/* Vertical edge stripe */
.edge-stripe {
  position: absolute;
  top: 0; bottom: 0;
  width: 28px;
  background-image: repeating-linear-gradient(
    0deg,
    var(--kech-fuchsia) 0 14px,
    var(--kech-black) 14px 28px
  );
  border: 3px solid var(--kech-black);
}

/* Modal/popup fade-in voor email-prompt overlay */
@keyframes kech-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Hide decorative floating stickers on mobile (overlap met body content) */
@media (max-width: 600px) {
  .floating-sticker { display: none !important; }
}

/* Respect users with vestibular sensitivity (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}