/* Vahndre Ventures — shared styles
   v0: placeholder homepage. Lean and intentional. */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Foundation */
  --bg: #000;
  --fg: #f5f5f5;
  --fg-muted: #b8b8b8;
  --surface: #fff;
  --surface-deep: #0e0e0e;
  --border-subtle: #2a2a2a;

  /* Splatter palette — extracted directly from the source PNGs.
     See branding/BRAND.md for the canonical reference. */
  --splat-turquoise: #4bb1f1;
  --splat-yellow:    #f3d527;
  --splat-indigo:    #2a33d7;
  --splat-pink:      #fb6ffb;
  --splat-orange:    #ee662b;

  /* Primary accent — brand indigo. The soft variant is used where
     pure indigo gets too heavy against pure black (focus rings, etc). */
  --accent:      #2a33d7;
  --accent-soft: #7c6df7;

  --tagline-size: clamp(1rem, 2.4vw, 1.35rem);
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The homepage is a single-screen visual stage — no scrolling, ever.
   Every other page (connect, 404, future content) uses default body
   scrolling. The homepage opts in by adding the `home-body` class. */
body.home-body {
  overflow: hidden;
}

img {
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- Stage ---------- */

.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vh, 40px);
  padding: 24px;
}

/* ---------- Logo container ---------- */

.logo-container {
  position: relative;
  width: min(640px, 80vmin);
  height: min(640px, 80vmin);
  aspect-ratio: 1 / 1;
}

/* ---------- Pre-click trigger ---------- */

.logo-trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
  /* Subtle idle state — invites the click without screaming */
  transition:
    transform 180ms ease,
    filter 180ms ease,
    opacity 400ms ease;
  -webkit-tap-highlight-color: transparent;
  z-index: 5;
}

.logo-trigger:hover {
  filter: brightness(1.08);
}

.logo-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 12px;
}

/* The "depressed button" feel — darken + shrink while held */
.logo-trigger:active {
  transform: scale(0.96);
  filter: brightness(0.78);
  transition-duration: 80ms;
}

.logo-trigger-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* When the animation kicks off, fade the trigger out and stop interaction */
.logo-trigger.dismissed {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Animation stage (hidden until triggered) ---------- */

.logo-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.logo-stage.active {
  opacity: 1;
}

.logo-base,
.logo-final {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-base {
  z-index: 1;
}

.logo-final {
  z-index: 4;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.logo-final.visible {
  opacity: 1;
}

.splat-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.splat-img {
  position: absolute;
  opacity: 0;
  transition: none;
  pointer-events: none;
}

/* ---------- Tagline ---------- */

.tagline {
  font-size: var(--tagline-size);
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 1.2s ease-in-out,
    transform 1.2s ease-in-out;
  max-width: 32ch;
}

.tagline.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- CTA ---------- */

.cta-connect {
  display: inline-block;
  padding: 12px 28px;
  background: transparent;
  color: var(--fg);
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  text-decoration: none;
  font-size: clamp(0.92rem, 1.6vw, 1rem);
  letter-spacing: 0.06em;
  font-weight: 500;
  cursor: pointer;
  /* Hidden until the animation finishes — same reveal timing as the
     tagline, but slightly delayed so it lands a beat after. */
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 1.2s ease-in-out,
    transform 1.2s ease-in-out,
    border-color 200ms ease,
    background 200ms ease;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}

.cta-connect.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cta-connect:hover {
  border-color: var(--accent);
  background: rgba(124, 109, 247, 0.08);
}

.cta-connect:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.cta-connect:active {
  transform: translateY(0) scale(0.97);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .logo-trigger,
  .logo-stage,
  .logo-final,
  .tagline,
  .cta-connect {
    transition-duration: 0.01ms !important;
  }
  .splat-img {
    transition: none !important;
  }
}