/* ===== Base ===== */
html, body { background: radial-gradient(ellipse at 50% 0%, #0b1840 0%, #070f2a 35%, #04081a 75%) fixed; }
body { background-attachment: fixed; }

/* Subtle global glow seam between sections */
section { position: relative; }

/* ===== Starfield ===== */
.starfield {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.starfield .stars {
  position: absolute;
  inset: -50%;
  background-repeat: repeat;
  opacity: 0.6;
  will-change: transform, opacity;
}
.starfield .stars-1 {
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(207,225,255,0.9), transparent 50%),
    radial-gradient(1px 1px at 90px 130px, rgba(207,225,255,0.7), transparent 50%),
    radial-gradient(1.5px 1.5px at 200px 80px, rgba(255,255,255,0.95), transparent 50%),
    radial-gradient(1px 1px at 260px 200px, rgba(180,210,255,0.7), transparent 50%),
    radial-gradient(2px 2px at 350px 250px, rgba(255,255,255,0.85), transparent 50%);
  background-size: 400px 300px;
  animation: drift1 90s linear infinite, twinkle1 4s ease-in-out infinite alternate;
}
.starfield .stars-2 {
  background-image:
    radial-gradient(1px 1px at 60px 60px, rgba(120,170,255,0.7), transparent 50%),
    radial-gradient(1px 1px at 180px 200px, rgba(207,225,255,0.6), transparent 50%),
    radial-gradient(1.5px 1.5px at 300px 100px, rgba(60,130,255,0.6), transparent 50%),
    radial-gradient(1px 1px at 450px 350px, rgba(180,210,255,0.6), transparent 50%);
  background-size: 600px 500px;
  animation: drift2 140s linear infinite, twinkle2 6s ease-in-out infinite alternate;
  opacity: 0.45;
}
.starfield .stars-3 {
  background-image:
    radial-gradient(2px 2px at 100px 100px, rgba(60,130,255,0.5), transparent 60%),
    radial-gradient(2.5px 2.5px at 400px 300px, rgba(255,200,120,0.5), transparent 60%),
    radial-gradient(2px 2px at 700px 500px, rgba(120,170,255,0.4), transparent 60%);
  background-size: 900px 700px;
  animation: drift3 220s linear infinite;
  opacity: 0.35;
}

/* Drift animations — slow parallax */
@keyframes drift1 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-400px, -300px, 0); }
}
@keyframes drift2 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-600px, 500px, 0); }
}
@keyframes drift3 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(900px, -700px, 0); }
}

/* Twinkle */
@keyframes twinkle1 {
  from { opacity: 0.55; }
  to   { opacity: 0.85; }
}
@keyframes twinkle2 {
  from { opacity: 0.30; }
  to   { opacity: 0.60; }
}

/* ===== Subtle nebula glow blobs ===== */
body::before, body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
}
body::before {
  width: 700px; height: 700px;
  left: -200px; top: 100px;
  background: radial-gradient(circle, rgba(60,130,255,0.20), transparent 60%);
}
body::after {
  width: 800px; height: 800px;
  right: -300px; top: 60vh;
  background: radial-gradient(circle, rgba(120,90,255,0.15), transparent 60%);
}

/* ===== Fade-in on load ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
section > div { animation: fadeUp 0.9s ease-out both; }
section:nth-of-type(1) > div { animation-delay: 0.1s; }
section:nth-of-type(2) > div { animation-delay: 0.2s; }
section:nth-of-type(3) > div { animation-delay: 0.3s; }

/* ===== Hero V image — premium glow stage ===== */
.vintryx-v-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 620px);
  margin-inline: auto;
  isolation: isolate;
  pointer-events: none;
}

.vintryx-v-stage::before {
  content: "";
  position: absolute;
  inset: 4% -6% 2%;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(126, 190, 255, 0.38), transparent 28%),
    radial-gradient(circle at 50% 58%, rgba(38, 108, 255, 0.44), transparent 44%),
    radial-gradient(ellipse at 50% 62%, rgba(0, 196, 255, 0.22), transparent 62%);
  filter: blur(18px);
  opacity: 1;
  animation: vintryxGlowBreathe 7.5s ease-in-out infinite;
  will-change: opacity, transform;
}

.vintryx-v-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3%;
  z-index: 0;
  width: 58%;
  height: 16%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(155, 215, 255, 0.92) 0%,
    rgba(58, 133, 255, 0.44) 34%,
    rgba(0, 157, 255, 0.16) 58%,
    transparent 74%
  );
  filter: blur(18px);
  opacity: 1;
  animation: vintryxFootlightBreathe 6.5s ease-in-out infinite;
  will-change: opacity, transform;
}

.vintryx-v-hero {
  position: relative;
  z-index: 1;
  width: clamp(280px, 38vw, 560px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 0 14px rgba(164, 213, 255, 0.6))
    drop-shadow(0 0 32px rgba(73, 139, 255, 0.54))
    drop-shadow(0 0 82px rgba(0, 148, 255, 0.28));
  transform-origin: 50% 54%;
  animation: vintryxVFloat 8s ease-in-out infinite;
  will-change: transform;
}

@keyframes vintryxVFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-7px) scale(1.012);
  }
}

@keyframes vintryxGlowBreathe {
  0%, 100% {
    opacity: 0.92;
    transform: scale(0.985);
  }

  50% {
    opacity: 1;
    transform: scale(1.025);
  }
}

@keyframes vintryxFootlightBreathe {
  0%, 100% {
    opacity: 0.82;
    transform: translateX(-50%) scaleX(0.94) scaleY(0.92);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.04) scaleY(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vintryx-v-stage::before,
  .vintryx-v-stage::after,
  .vintryx-v-hero {
    animation: none;
  }
}

@media (max-width: 768px) {
  .vintryx-v-stage {
    width: min(100%, 470px);
  }

  .vintryx-v-hero {
    width: clamp(260px, 84vw, 430px);
  }
}

/* ===== Navbar V logo ===== */
.vintryx-nav-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
  filter:
    drop-shadow(0 0 6px rgba(134, 190, 255, 0.5))
    drop-shadow(0 0 14px rgba(42, 111, 255, 0.28));
}

@media (max-width: 768px) {
  .vintryx-nav-logo {
    width: 40px;
    height: 40px;
  }
}

/* ===== Footer V logo ===== */
.vintryx-footer-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
  filter:
    drop-shadow(0 0 5px rgba(134, 190, 255, 0.38))
    drop-shadow(0 0 12px rgba(42, 111, 255, 0.2));
}

@media (max-width: 768px) {
  .vintryx-footer-logo {
    width: 40px;
    height: 40px;
  }
}

/* ===== Form polish ===== */
input:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(60,130,255,0.18); }

/* ===== Reduce motion preference ===== */
@media (prefers-reduced-motion: reduce) {
  .starfield .stars,
  section img[alt=""],
  section > div { animation: none !important; }
}