/**
 * Content stays readable until GSAP boots (scripts load after Vue mounts).
 * GSAP then sets inline opacity/transform for entrance + scroll reveals.
 */
[data-ns-animate] {
  opacity: 1;
}

.header-one.opacity-0 {
  opacity: 1;
}

/* Landing mockups — stage + floats (Peec-style) */
.gc-mock-stage {
  position: relative;
  overflow: visible;
  isolation: isolate;
  /* room for cards that hang outside the shell */
  padding: 0.75rem 0.5rem 1rem;
}

@media (min-width: 768px) {
  .gc-mock-stage {
    padding: 0.5rem 1.25rem 1.25rem;
  }
}

.gc-mock-hero-float {
  transform: perspective(1200px) rotateX(2deg);
  transform-origin: center top;
}

.gc-mock-stage--hero {
  padding: 0.5rem 0.75rem 0.75rem;
}

@media (min-width: 768px) {
  .gc-mock-stage--hero {
    padding: 0.35rem 1rem 1rem;
  }
}

.gc-mock-hero-float--banner {
  transform: perspective(1200px) rotateX(2deg) scale(0.95);
  transform-origin: center top;
}

@media (min-width: 768px) {
  .gc-mock-hero-float--banner {
    transform: perspective(1200px) rotateX(2deg) scale(0.97);
  }
}

.gc-mock-float {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

/* Animate inner shell only — keeps rotate/transform on the anchor */
.gc-mock-float__motion {
  animation: gc-mock-float-y 5s ease-in-out infinite;
}

.gc-mock-float-delay-1 .gc-mock-float__motion {
  animation-delay: 0.6s;
}

.gc-mock-float-delay-2 .gc-mock-float__motion {
  animation-delay: 1.2s;
}

/* Hero banner */
.gc-mock-float--hero-vis {
  display: none;
}

.gc-mock-float--hero-agent {
  display: none;
}

.gc-mock-float--hero-models {
  display: none;
}

@media (min-width: 768px) {
  .gc-mock-float--hero-vis {
    display: block;
    top: 2.25rem;
    left: -0.25rem;
  }

  .gc-mock-float--hero-vis .gc-mock-float__motion {
    padding: 0.5rem 0.625rem;
  }

  .gc-mock-float--hero-vis .size-8 {
    width: 1.75rem;
    height: 1.75rem;
  }

  .gc-mock-float--hero-agent {
    display: block;
    bottom: 1.75rem;
    right: -0.25rem;
    max-width: 168px;
  }

  .gc-mock-float--hero-agent .text-tagline-2 {
    font-size: var(--text-tagline-3);
    line-height: var(--text-tagline-3--line-height);
  }
}

@media (min-width: 1024px) {
  .gc-mock-float--hero-models {
    display: block;
    top: 0;
    right: 10%;
  }
}

/* “Vì sao chọn GeoUp” column */
.gc-mock-float--why-news {
  display: none;
  transform: rotate(3deg);
}

.gc-mock-float--why-sov {
  display: none;
  transform: rotate(-2deg);
}

@media (min-width: 640px) {
  .gc-mock-float--why-news {
    display: block;
    top: 1.75rem;
    right: -0.5rem;
    width: min(200px, 52%);
  }

  .gc-mock-float--why-sov {
    display: block;
    bottom: 1.25rem;
    right: 0;
    width: min(180px, 48%);
  }
}

@media (min-width: 768px) {
  .gc-mock-float--why-news {
    right: -1rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes gc-mock-float-y {
    0%,
    100% {
      translate: 0 0;
    }
    50% {
      translate: 0 -6px;
    }
  }
}

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

  .gc-mock-hero-float,
  .gc-mock-hero-float--banner {
    transform: none;
  }
}

.gc-mock-shell {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6) inset,
    0 24px 80px -20px rgba(0, 0, 0, 0.18);
}