/* ===================================================================
   OminiSphere — Coming Soon page styles
   Layers on top of assets/css/styles.css (brand tokens, Bootstrap,
   fonts). Only page-specific rules live here so styles.css can stay
   untouched and shared with the main site build later.
   =================================================================== */

html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100svh; /* mobile browsers: use small viewport height so the URL bar doesn't add phantom height */
  overflow-x: hidden;
}

/* ---------- Simple top bar (no nav links yet) ---------- */
.cs-header {
  z-index: 20;
}

.cs-header .logo img {
  height: 34px;
  width: auto;
}

.cs-social-link {
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--bs-gray-200);
  border-radius: 50%;
  color: var(--bs-dark-void);
  transition: all .25s ease;
}

.cs-social-link:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

/* ---------- Hero ---------- */
.cs-hero {
  min-height: 100vh;
  min-height: 100svh; /* small viewport height — keeps hero content above the fold on iOS/Android */
  display: flex;
  align-items: center;
}

.cs-eyebrow {
  opacity: 0;
  animation: csFadeUp .8s ease forwards;
}

.cs-headline {
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem);
  line-height: 1.1;
  opacity: 0;
  animation: csFadeUp .8s ease .1s forwards;
}

.cs-subtext {
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  animation: csFadeUp .8s ease .2s forwards;
}

/* ---------- Countdown ---------- */
.cs-countdown {
  display: inline-grid;
  grid-auto-flow: column;
  gap: clamp(1.2rem, 1rem + 2vw, 2.5rem);
  padding-top: 0;
  opacity: 0;
  animation: csFadeUp .8s ease .3s forwards;
}

.cs-countdown .cs-time-block {
  text-align: center;
  min-width: 64px;
}

.cs-countdown .cs-time-block:not(:first-child) {
  border-left: 1px solid var(--bs-border-color);
  padding-left: clamp(1.2rem, 1rem + 2vw, 2.5rem);
}

.cs-countdown .num {
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--bs-dark-void);
  font-variant-numeric: tabular-nums;
}

.cs-countdown .lbl {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bs-muted);
  margin-top: .3rem;
  display: block;
}

/* ---------- WhatsApp CTA ---------- */
.cs-cta {
  display: flex;            /* block-level → starts its own line below the countdown */
  width: fit-content;
  margin-top: 10px;         /* breathing room below the countdown */
  margin-left: auto;        /* centered under the countdown */
  margin-right: auto;
  padding-right: 47px;      /* 42px base + 5px → button is 5px wider */
  opacity: 0;
  animation: csFadeUp .8s ease .4s forwards;
}

.cs-note {
  opacity: 0;
  animation: csFadeUp .8s ease .5s forwards;
}

/* ---------- What's coming ---------- */
.cs-service-card {
  border-radius: var(--bs-border-radius-lg, 24px);
  background: var(--bs-white);
  border: 1px solid var(--bs-gray-200);
  padding: 1.6rem 1.4rem;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  opacity: 0;
  transform: translateY(16px);
}

.cs-service-card.is-visible {
  animation: csFadeUp .6s ease forwards;
}

.cs-service-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--bs-light-orange);
  color: var(--bs-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}

.cs-service-icon svg,
.cs-service-icon iconify-icon {
  width: 24px;
  height: 24px;
}

.cs-service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bs-box-shadow);
  border-color: transparent;
}

.cs-service-card .badge-soon {
  font-size: .65rem;
  letter-spacing: .06em;
}

/* ---------- Footer ---------- */
.cs-footer {
  border-top: 1px solid var(--bs-gray-200);
}

/* True three-column footer: outer columns share free space equally
   (flex-basis: 0), so the middle (social icons) sits dead-center even
   when the two outer contents differ in width. */
.cs-footer-col {
  min-width: 0;
  flex: 1 1 0%;
}

@media (max-width: 767px) {
  /* Keep the stacked layout on mobile: no flex growth, content-width columns. */
  .cs-footer-col {
    flex: 0 0 auto;
  }
}

/* ---------- Motion ---------- */
@keyframes csFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-eyebrow, .cs-headline, .cs-subtext, .cs-countdown,
  .cs-cta, .cs-note, .cs-service-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 575px) {
  .cs-countdown {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
  }
  .cs-countdown .cs-time-block {
    min-width: 0; /* let 1fr columns shrink below 64px on very narrow phones instead of clipping */
  }
  .cs-countdown .cs-time-block:not(:first-child) {
    border-left: none;
    padding-left: 0;
  }
  .cs-countdown .num {
    font-size: 1.5rem;
  }
}