/* /ventures — fuldskærms split. Ingen scroll. */

html:has(.ventures-page),
.ventures-page {
  height: 100%;
  overflow: hidden;
}

.ventures-page {
  background: var(--ink);
  color: #fff;
  cursor: default;
}

.vgate {
  position: relative;
  width: 100%;
  height: 100dvh;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.vgate__side {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 500ms var(--ease);
}

.vgate__side--payfriend {
  background:
    radial-gradient(120% 80% at 30% 40%, rgba(237, 68, 50, 0.28), transparent 55%),
    radial-gradient(90% 70% at 70% 80%, rgba(237, 50, 98, 0.18), transparent 50%),
    linear-gradient(155deg, #1a0808 0%, #120606 42%, #0c0c0c 100%);
  z-index: 1;
}

.vgate__side--levano {
  background:
    radial-gradient(120% 80% at 70% 35%, rgba(120, 170, 190, 0.14), transparent 55%),
    radial-gradient(80% 60% at 35% 75%, rgba(40, 90, 110, 0.22), transparent 50%),
    linear-gradient(205deg, #061018 0%, #08161c 45%, #0c0c0c 100%);
  z-index: 2;
}

/* Ambient orbs — langsom drift, ingen cards. */
.vgate__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(48px);
  opacity: 0.45;
  will-change: transform;
  animation: vgate-drift 14s ease-in-out infinite alternate;
}

.vgate__side--payfriend .vgate__orb--a {
  width: min(42vw, 380px);
  height: min(42vw, 380px);
  left: 8%;
  top: 18%;
  background: radial-gradient(circle, rgba(237, 68, 50, 0.55), transparent 70%);
}

.vgate__side--payfriend .vgate__orb--b {
  width: min(28vw, 240px);
  height: min(28vw, 240px);
  right: 18%;
  bottom: 12%;
  background: radial-gradient(circle, rgba(237, 50, 98, 0.4), transparent 70%);
  animation-duration: 18s;
  animation-delay: -4s;
}

.vgate__side--levano .vgate__orb--a {
  width: min(40vw, 360px);
  height: min(40vw, 360px);
  right: 10%;
  top: 20%;
  background: radial-gradient(circle, rgba(160, 200, 215, 0.28), transparent 70%);
}

.vgate__side--levano .vgate__orb--b {
  width: min(26vw, 220px);
  height: min(26vw, 220px);
  left: 16%;
  bottom: 14%;
  background: radial-gradient(circle, rgba(60, 120, 140, 0.35), transparent 70%);
  animation-duration: 16s;
  animation-delay: -6s;
}

@keyframes vgate-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(3%, -4%, 0) scale(1.08); }
}

.vgate__brand {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  text-align: center;
  padding: var(--gut);
  translate: -50% -50%;
  scale: 0.94;
  opacity: 0;
  transition:
    scale 700ms var(--ease),
    opacity 600ms var(--ease),
    filter 500ms var(--ease),
    top 500ms var(--ease),
    left 500ms var(--ease);
}

/* Sidder i midten af sin egen halvdel — følger --vgate-mid når kurven skubbes. */
.vgate__side--payfriend .vgate__brand {
  left: calc(var(--vgate-mid, 0.5) * 50%);
  transition-delay: 80ms;
}
.vgate__side--levano .vgate__brand {
  left: calc((var(--vgate-mid, 0.5) + 1) * 50%);
  transition-delay: 200ms;
}

.vgate[data-ready="true"] .vgate__brand {
  opacity: 1;
  scale: 1;
}

.vgate__mark {
  display: block;
  width: clamp(4.5rem, 9vw, 7.5rem);
  height: auto;
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.35));
  transition:
    transform 650ms var(--ease),
    filter 650ms var(--ease);
  will-change: transform;
}

.vgate__side--levano .vgate__mark {
  width: clamp(3.6rem, 7.2vw, 6rem);
}

.vgate__name {
  font-size: clamp(1.85rem, 4.2vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
  transition:
    letter-spacing 650ms var(--ease),
    transform 650ms var(--ease),
    text-shadow 650ms var(--ease);
}

.vgate__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.15rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.14em;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 500ms var(--ease),
    transform 500ms var(--ease),
    color 400ms var(--ease);
}

/* Hover / fokus: den valgte side vokser visuelt; den anden dæmpes. */
.vgate__side:hover .vgate__mark,
.vgate__side:focus-visible .vgate__mark,
.vgate[data-active="payfriend"] .vgate__side--payfriend .vgate__mark,
.vgate[data-active="levano"] .vgate__side--levano .vgate__mark {
  transform: scale(1.05) translateY(-2px);
  filter: drop-shadow(0 14px 36px rgba(0, 0, 0, 0.35));
}

.vgate__side--payfriend:hover .vgate__mark,
.vgate__side--payfriend:focus-visible .vgate__mark,
.vgate[data-active="payfriend"] .vgate__side--payfriend .vgate__mark {
  filter:
    drop-shadow(0 0 16px rgba(237, 68, 50, 0.28))
    drop-shadow(0 14px 36px rgba(0, 0, 0, 0.32));
}

.vgate__side--levano:hover .vgate__mark,
.vgate__side--levano:focus-visible .vgate__mark,
.vgate[data-active="levano"] .vgate__side--levano .vgate__mark {
  filter:
    drop-shadow(0 0 16px rgba(180, 210, 220, 0.22))
    drop-shadow(0 14px 36px rgba(0, 0, 0, 0.32));
}

.vgate__side:hover .vgate__name,
.vgate__side:focus-visible .vgate__name,
.vgate[data-active="payfriend"] .vgate__side--payfriend .vgate__name,
.vgate[data-active="levano"] .vgate__side--levano .vgate__name {
  letter-spacing: 0.01em;
  transform: translateY(-1px);
}

.vgate__side:hover .vgate__hint,
.vgate__side:focus-visible .vgate__hint,
.vgate[data-active="payfriend"] .vgate__side--payfriend .vgate__hint,
.vgate[data-active="levano"] .vgate__side--levano .vgate__hint {
  opacity: 1;
  transform: translateY(0);
  color: rgba(255, 255, 255, 0.85);
}

.vgate[data-active="payfriend"] .vgate__side--levano,
.vgate[data-active="levano"] .vgate__side--payfriend {
  filter: brightness(0.9) saturate(0.95);
}

.vgate[data-active="payfriend"] .vgate__side--levano .vgate__brand,
.vgate[data-active="levano"] .vgate__side--payfriend .vgate__brand {
  scale: 0.97;
  opacity: 0.78;
}

.vgate__seam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

/* ---------- Mobile: vandret split, bølget søm ---------- */

@media (max-width: 720px) {
  .vgate__side--payfriend .vgate__brand {
    left: 50%;
    top: calc(var(--vgate-mid, 0.5) * 50%);
  }
  .vgate__side--levano .vgate__brand {
    left: 50%;
    top: calc((var(--vgate-mid, 0.5) + 1) * 50%);
  }

  .vgate__brand {
    gap: 0.9rem;
  }

  .vgate__name {
    font-size: clamp(1.5rem, 7vw, 2.1rem);
  }

  .vgate__mark {
    width: clamp(3.5rem, 16vw, 5rem);
  }

  .vgate__side--levano .vgate__mark {
    width: clamp(2.8rem, 13vw, 4rem);
  }

  .vgate__hint {
    opacity: 0.7;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vgate__orb {
    animation: none;
  }

  .vgate__brand,
  .vgate__mark,
  .vgate__name,
  .vgate__hint,
  .vgate__side {
    transition: none !important;
  }

  .vgate[data-ready="true"] .vgate__brand {
    opacity: 1;
    scale: 1;
  }
}