/* ==========================================================================
   Coming Soon Page — FireX Networks
   Clean, light, premium theme: centered logo with ambient CSS background
   decoration (no stock imagery).
   ========================================================================== */

:root {
  --color-bg: #f6f9fd;
  --color-text: #0a1428;
  --color-subtitle: #5b6472;

  --color-accent: #3b9bff;
  --color-accent-dark: #1f6fd1;
  --color-accent-soft: #eaf4ff;

  --font-body: "Manrope", sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
}

.coming-soon {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  color: var(--color-text);
  padding: 48px 20px;
  background-color: var(--color-bg);
}

/* ==========================================================================
   Ambient background decoration — dot-grid texture + soft floating blobs.
   Pure CSS, no imagery, so it always renders crisp at any resolution.
   ========================================================================== */

.coming-soon__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-image: radial-gradient(rgba(10, 20, 40, 0.06) 1px, transparent 1.5px);
  background-size: 24px 24px;
  transform-origin: center;
  opacity: 0;
  animation: scene-fade-in 2.4s ease-out both, ken-burns 40s ease-in-out infinite;
}

@keyframes ken-burns {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

/* Soft cinematic vignette framing the content — fades/closes in like a
   camera iris as the page loads. */
.coming-soon__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(10, 20, 40, 0.09) 100%
  );
  opacity: 0;
  animation: scene-fade-in 2.6s ease-out 0.2s both;
}

@keyframes scene-fade-in {
  to {
    opacity: 1;
  }
}

.coming-soon__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
}

.coming-soon__blob--one {
  top: -140px;
  left: -120px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
  animation: float-one 24s var(--ease-out) infinite;
}

.coming-soon__blob--two {
  bottom: -160px;
  right: -140px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, var(--color-accent-dark) 0%, transparent 70%);
  animation: float-two 28s var(--ease-out) infinite;
}

@keyframes float-one {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(30px, 24px);
  }
}

@keyframes float-two {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-28px, -22px);
  }
}

/* ==========================================================================
   Content
   ========================================================================== */

.coming-soon__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 620px;
}

.coming-soon__content > * {
  opacity: 0;
  transform: translateY(14px);
  animation: fade-up 1.4s var(--ease-out) forwards;
}

@keyframes fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.coming-soon__logo-wrap {
  position: relative;
  display: inline-block;
  width: clamp(180px, 30vw, 340px);
  margin: 0 0 clamp(20px, 3.5vh, 32px);
  /* Cinematic "rack focus" reveal — zooms in from out-of-focus to sharp,
     then settles into a slow, gentle continuous float. */
  animation: cinematic-reveal 2.8s var(--ease-out) 0.25s both,
    logo-float 12s ease-in-out 3.1s infinite;
}

.coming-soon__logo {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

/* One-time light sweep across the logo's exact silhouette, timed to land
   just as the rack-focus reveal settles — a premium "unveiling" touch. */
.coming-soon__logo-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.9) 50%,
    transparent 65%
  );
  background-size: 300% 100%;
  background-position: 130% 0;
  -webkit-mask-image: url("assets/firex-networks-logo.png");
  mask-image: url("assets/firex-networks-logo.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  animation: shine-sweep 2.2s ease-in-out 2.8s 1;
  pointer-events: none;
}

@keyframes shine-sweep {
  to {
    background-position: -130% 0;
  }
}

@keyframes cinematic-reveal {
  0% {
    opacity: 0;
    transform: scale(0.82);
    filter: blur(10px);
  }
  65% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes logo-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.coming-soon__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px) scale(0.92);
  animation: badge-pop 1.4s var(--ease-out) 2.2s both;
}

@keyframes badge-pop {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.coming-soon__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(59, 155, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(59, 155, 255, 0);
  }
}

/* ==========================================================================
   Accessibility — respect reduced-motion preference
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .coming-soon__content > *,
  .coming-soon__logo-wrap,
  .coming-soon__logo-shine,
  .coming-soon__decor,
  .coming-soon__vignette,
  .coming-soon__blob,
  .coming-soon__badge,
  .coming-soon__badge-dot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .coming-soon__logo-shine {
    display: none !important;
  }
}

/* ==========================================================================
   Responsive tweaks
   ========================================================================== */

@media (max-width: 600px) {
  .coming-soon {
    padding: 32px 18px;
  }

  .coming-soon__logo-wrap {
    width: clamp(150px, 48vw, 220px);
  }
}

@media (min-width: 1440px) {
  .coming-soon__logo-wrap {
    width: clamp(220px, 22vw, 560px);
  }
}