/*
 * VanKaapstad — Phase 1 splash / coming-soon.
 * Standalone stylesheet (does NOT load base.css). New brand direction from the
 * Claude Design handoff: Playfair Display + Kaushan Script, near-black/red with
 * blue + green accents. Scoped under .vk-sp so it can't leak into other pages.
 */

/* Bangpop — the wordmark display face (self-hosted). */
@font-face {
  font-family: 'Bangpop';
  src: url("../fonts/Bangpop.fa598f0c1a3e.woff2") format('woff2'),
       url("../fonts/Bangpop.402cd7593199.ttf") format('truetype');
  font-weight: 400 800;
  font-display: swap;
}

.vk-sp {
  --ink: #141916;        /* near-black text / dark */
  --red: #FE3428;        /* primary accent */
  --red-dark: #E42817;   /* accent hover */
  --blue: #5AC4FF;
  --green: #02D11B;
  --cream: #FBF7EE;      /* page background */
  --ink-72: rgba(20, 25, 22, 0.72);
  --ink-50: rgba(20, 25, 22, 0.50);
  --ink-20: rgba(20, 25, 22, 0.20);
  --ink-14: rgba(20, 25, 22, 0.14);
  --ink-06: rgba(20, 25, 22, 0.06);
  --maxw: 1240px;
}

* { box-sizing: border-box; }

.vk-sp {
  margin: 0;
  font-family: "Archivo", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--cream);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

.vk-sp input,
.vk-sp button { font-family: inherit; }
.vk-sp ::placeholder { color: rgba(20, 25, 22, 0.42); }
.vk-sp :focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

.vk-sp__main {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  overflow: hidden;
}

/* Tri-colour top bar */
.vk-sp__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  display: flex;
  z-index: 5;
}
.vk-sp__bar span { flex: 1; }
.vk-sp__bar span:nth-child(1) { background: var(--red); }
.vk-sp__bar span:nth-child(2) { background: var(--blue); }
.vk-sp__bar span:nth-child(3) { background: var(--green); }

/* Header: wordmark + language toggle */
.vk-sp__header {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 32px 0;
}
.vk-sp__wordmark {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-family: "Bangpop", "Archivo", sans-serif;
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.vk-sp__van { color: var(--ink); }
.vk-sp__kaap { color: var(--red); }

.vk-sp__lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 38px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 1.5px solid var(--ink-20);
  cursor: pointer;
  transition: background 0.15s ease;
}
.vk-sp__lang:hover { background: var(--ink-06); }

/* Main two-column grid */
.vk-sp__grid {
  position: relative;
  z-index: 6;
  flex: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: center;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding: 20px 32px 40px;
}

/* Left column — copy + form */
.vk-sp__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vk-sp__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: vkPulse 1.8s ease-in-out infinite;
}

.vk-sp__h1 {
  font-family: "Playfair Display", serif;
  font-weight: 900;
  font-size: clamp(64px, 9vw, 132px);
  line-height: 0.82;
  letter-spacing: -0.015em;
  margin: 24px 0 0;
  color: var(--ink);
  text-transform: uppercase;
}
.vk-sp__h1b {
  display: block;
  font-family: "Kaushan Script", cursive;
  font-weight: 400;
  text-transform: none;
  font-size: 0.55em;
  color: var(--red);
  letter-spacing: 0;
  margin-top: 6px;
}

.vk-sp__sub {
  max-width: 440px;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-72);
  margin: 26px 0 8px;
}
.vk-sp__crema {
  font-family: "Kaushan Script", cursive;
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 28px;
}

/* Signup form */
.vk-sp__form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 460px;
}
.vk-sp__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.vk-sp__email {
  flex: 1;
  min-width: 200px;
  padding: 15px 18px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  font-weight: 500;
  font-size: 16px;
  background: #fff;
  color: var(--ink);
}
.vk-sp__cta {
  padding: 15px 24px;
  border-radius: 12px;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.vk-sp__cta:hover { background: var(--red-dark); }

.vk-sp__note {
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-50);
  margin: 12px 0 0;
}
.vk-sp__err {
  font-weight: 600;
  font-size: 13px;
  color: var(--red);
  margin: 12px 0 0;
}
.vk-sp__thanks {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: #127A2E;
}
.vk-sp__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: #0A2E13;
  font-weight: 800;
  font-size: 13px;
}

/* Right column — three floating posters */
.vk-sp__art {
  position: relative;
  height: min(74vh, 620px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vk-sp__poster {
  border: 8px solid var(--cream);
  border-radius: 6px;
  will-change: transform;
}
.vk-sp__poster img {
  display: block;
  width: 100%;
  border-radius: 2px;
}
.vk-sp__poster--front {
  position: relative;
  width: 50%;
  z-index: 3;
  border-width: 9px;
  box-shadow: 0 40px 64px -22px rgba(0, 0, 0, 0.55);
}
.vk-sp__poster--left {
  position: absolute;
  left: 2%;
  top: 12%;
  width: 44%;
  z-index: 1;
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.5);
  animation: vkFloat 7s ease-in-out infinite;
}
.vk-sp__poster--right {
  position: absolute;
  right: 2%;
  bottom: 10%;
  width: 44%;
  z-index: 2;
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.5);
  animation: vkFloat2 8s ease-in-out infinite;
}

/* Footer claim bar */
.vk-sp__foot {
  position: relative;
  z-index: 6;
  border-top: 1.5px solid var(--ink-14);
  padding: 16px 32px;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20, 25, 22, 0.6);
}

@keyframes vkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes vkFloat2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(11px); } }
@keyframes vkPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* Tablet / mobile */
@media (max-width: 860px) {
  .vk-sp__grid {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 24px 32px;
  }
  .vk-sp__art {
    order: -1;
    height: min(46vh, 380px);
    margin-top: 8px;
  }
  .vk-sp__h1 { font-size: clamp(52px, 15vw, 96px); }
  .vk-sp__sub { font-size: 17px; }
  .vk-sp__foot { justify-content: center; text-align: center; }
}

@media (max-width: 460px) {
  .vk-sp__header { padding: 20px 20px 0; }
  .vk-sp__form { flex-direction: column; }
  .vk-sp__cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .vk-sp__poster,
  .vk-sp__dot { animation: none !important; }
  [data-parallax] { transform: none !important; }
}