/* ============================================================
   COMING SOON — css/coming-soon.css
   Cargo Centrum by Admaren Tech Pvt. Ltd.
   Dual-theme: dark (default) + light via [data-theme="light"]
   ============================================================ */

/* ── THEME TOKENS ── */

:root {
  /* Page */
  --cs-bg:              var(--clr-dark);
  --cs-dot-grid:        var(--clr-dark-dot-grid);
  --cs-dot-grid-mask:   radial-gradient(ellipse 80% 70% at 35% 30%, black 20%, transparent 80%);

  /* Orbs */
  --cs-orb1-clr:        rgba(123, 97, 255, 0.16);
  --cs-orb2-clr:        rgba(107, 78, 230, 0.13);
  --cs-orb3-clr:        rgba(155, 133, 255, 0.10);

  /* Logo */
  --cs-logo-cargo:      #ffffff;
  --cs-logo-centrum:    var(--clr-primary-light);
  --cs-logo-glow:       rgba(123, 97, 255, 0.22);

  /* Text */
  --cs-eyebrow-clr:     var(--clr-dark-text);
  --cs-sub-clr:         var(--clr-dark-text);
  --cs-bar-label-clr:   var(--clr-dark-text-muted);

  /* Heading gradient */
  --cs-title-g1:        #ffffff;
  --cs-title-g2:        #BBA5FF;
  --cs-title-g3:        #7B61FF;
  --cs-title-g4:        #9B85FF;

  /* Progress bar */
  --cs-bar-track:       var(--clr-dark-border);

  /* Products strip */
  --cs-strip-bg:        var(--clr-dark-surface);
  --cs-strip-border:    var(--clr-dark-border);
  --cs-product-clr:     var(--clr-dark-text);
  --cs-product-dot:     var(--clr-primary-light);
  --cs-product-sep:     var(--clr-dark-border);
  --cs-product-dot-dim: var(--clr-dark-border-hover);

  /* Toggle button */
  --cs-toggle-bg:       rgba(255, 255, 255, 0.08);
  --cs-toggle-bg-hv:    rgba(255, 255, 255, 0.14);
  --cs-toggle-border:   rgba(255, 255, 255, 0.12);
  --cs-toggle-clr:      rgba(255, 255, 255, 0.70);
}

[data-theme="light"] {
  /* Page */
  --cs-bg:              var(--clr-bg);
  --cs-dot-grid:        var(--clr-border-2);
  --cs-dot-grid-mask:   radial-gradient(ellipse 80% 70% at 65% 30%, black 20%, transparent 80%);

  /* Orbs (softer on white) */
  --cs-orb1-clr:        rgba(123, 97, 255, 0.09);
  --cs-orb2-clr:        rgba(107, 78, 230, 0.07);
  --cs-orb3-clr:        rgba(155, 133, 255, 0.06);

  /* Logo */
  --cs-logo-cargo:      #201c49;
  --cs-logo-centrum:    #6e2ed9;
  --cs-logo-glow:       rgba(123, 97, 255, 0.12);

  /* Text */
  --cs-eyebrow-clr:     var(--clr-text-3);
  --cs-sub-clr:         var(--clr-text-2);
  --cs-bar-label-clr:   var(--clr-text-4);

  /* Heading gradient */
  --cs-title-g1:        var(--clr-dark);
  --cs-title-g2:        #4939c2;
  --cs-title-g3:        var(--clr-primary);
  --cs-title-g4:        var(--clr-primary-light);

  /* Progress bar */
  --cs-bar-track:       var(--clr-bg-3);

  /* Products strip */
  --cs-strip-bg:        var(--clr-surface);
  --cs-strip-border:    var(--clr-border-2);
  --cs-product-clr:     var(--clr-text-2);
  --cs-product-dot:     var(--clr-primary);
  --cs-product-sep:     var(--clr-border-2);
  --cs-product-dot-dim: var(--clr-bg-4);

  /* Toggle button */
  --cs-toggle-bg:       rgba(26, 21, 53, 0.06);
  --cs-toggle-bg-hv:    rgba(26, 21, 53, 0.10);
  --cs-toggle-border:   rgba(26, 21, 53, 0.12);
  --cs-toggle-clr:      var(--clr-text-2);
}

/* ── THEME TOGGLE BUTTON ── */

.cs-toggle {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: 1px solid var(--cs-toggle-border);
  background: var(--cs-toggle-bg);
  color: var(--cs-toggle-clr);
  cursor: pointer;
  transition: background var(--ease-base), border-color var(--ease-base), color var(--ease-base);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cs-toggle:hover {
  background: var(--cs-toggle-bg-hv);
}

.cs-toggle-icon {
  position: absolute;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Dark mode → show sun icon (click to go light) */
[data-theme="dark"]  .cs-toggle-sun  { opacity: 1; transform: scale(1);   }
[data-theme="dark"]  .cs-toggle-moon { opacity: 0; transform: scale(0.7); }

/* Light mode → show moon icon (click to go dark) */
[data-theme="light"] .cs-toggle-sun  { opacity: 0; transform: scale(0.7); }
[data-theme="light"] .cs-toggle-moon { opacity: 1; transform: scale(1);   }

/* ── PAGE SHELL ── */

.cs-page {
  min-height: 100vh;
  background: var(--cs-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: var(--space-12) var(--space-7);
  text-align: center;
  transition: background 0.3s ease;
}

/* Dot-grid overlay */
.cs-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--cs-dot-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
  mask-image: var(--cs-dot-grid-mask);
  -webkit-mask-image: var(--cs-dot-grid-mask);
  transition: opacity 0.3s ease;
}

/* ── BACKGROUND ORBS ── */

.cs-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.cs-orb--1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--cs-orb1-clr) 0%, transparent 70%);
  top: -280px;
  right: -180px;
  filter: blur(60px);
  animation: orbDrift1 20s ease-in-out infinite alternate;
}

.cs-orb--2 {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, var(--cs-orb2-clr) 0%, transparent 70%);
  bottom: -200px;
  left: -160px;
  filter: blur(70px);
  animation: orbDrift2 26s ease-in-out infinite alternate;
}

.cs-orb--3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--cs-orb3-clr) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(40px);
  animation: orbPulse 8s ease-in-out infinite;
}

@keyframes orbDrift1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-100px, 70px) scale(1.12); }
}

@keyframes orbDrift2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(90px, -70px) scale(1.08); }
}

@keyframes orbPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.3); }
}

/* ── FLOATING PARTICLES ── */

.cs-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.cs-particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-xs);
  background: var(--clr-primary);
  opacity: 0;
  animation: particleFloat var(--dur, 12s) var(--delay, 0s) ease-in-out infinite;
}

.cs-particles span:nth-child(1)  { left: 10%; bottom: -10px; --dur: 14s; --delay: 0s;   --drift: -30px; }
.cs-particles span:nth-child(2)  { left: 20%; bottom: -10px; --dur: 18s; --delay: 2s;   --drift:  20px; }
.cs-particles span:nth-child(3)  { left: 35%; bottom: -10px; --dur: 13s; --delay: 4s;   --drift: -40px; }
.cs-particles span:nth-child(4)  { left: 48%; bottom: -10px; --dur: 16s; --delay: 1s;   --drift:  10px; }
.cs-particles span:nth-child(5)  { left: 60%; bottom: -10px; --dur: 20s; --delay: 3s;   --drift: -20px; }
.cs-particles span:nth-child(6)  { left: 72%; bottom: -10px; --dur: 15s; --delay: 5s;   --drift:  35px; }
.cs-particles span:nth-child(7)  { left: 82%; bottom: -10px; --dur: 17s; --delay: 0.5s; --drift: -15px; }
.cs-particles span:nth-child(8)  { left: 90%; bottom: -10px; --dur: 12s; --delay: 2.5s; --drift:  25px; }
.cs-particles span:nth-child(9)  { left: 5%;  bottom: -10px; --dur: 19s; --delay: 6s;   --drift:  40px; }
.cs-particles span:nth-child(10) { left: 25%; bottom: -10px; --dur: 11s; --delay: 3.5s; --drift: -50px; }
.cs-particles span:nth-child(11) { left: 55%; bottom: -10px; --dur: 22s; --delay: 7s;   --drift:  15px; }
.cs-particles span:nth-child(12) { left: 78%; bottom: -10px; --dur: 16s; --delay: 1.5s; --drift: -35px; }

@keyframes particleFloat {
  0%   { transform: translateY(0)      translateX(0)            scale(0); opacity: 0;   }
  5%   {                                                                   opacity: 0.7; }
  50%  { transform: translateY(-45vh)  translateX(var(--drift)) scale(1); opacity: 0.4; }
  95%  {                                                                   opacity: 0.1; }
  100% { transform: translateY(-100vh) translateX(var(--drift)) scale(0); opacity: 0;   }
}

/* ── MAIN CONTENT ── */

.cs-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7);
  max-width: 620px;
  width: 100%;
}

/* ── LOGO WRAPPER ── */

.cs-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}

/* Soft glow beneath the logo */
.cs-logo::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 32px;
  background: var(--cs-logo-glow);
  filter: blur(22px);
  border-radius: 50%;
  animation: glowPulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scaleX(1);    }
  50%       { opacity: 1;   transform: translateX(-50%) scaleX(1.15); }
}

/* ── SVG LOGO ── */

.cs-logo-svg {
  width: 220px;
  height: auto;
  display: block;
}

/* Dot colours — preserve original SVG palette */
.cs-logo-svg .cls-3  { fill: #7133de; }
.cs-logo-svg .cls-5  { fill: #802ed5; }
.cs-logo-svg .cls-8  { fill: #3f58df; }
.cs-logo-svg .cls-9  { fill: #2563eb; }
.cs-logo-svg .cls-10 { fill: #4939c2; }
.cs-logo-svg .cls-11 { fill: #4f6ef7; }
.cs-logo-svg .cls-12 { fill: #9345e9; }

/* Text — restore font metrics removed with defs block; theme-aware colours */
.cs-logo-svg .cls-6,
.cs-logo-svg .cls-7 {
  font-family: 'Nunito', sans-serif;
  font-size: 28px;
  font-weight: 700;
}

.cs-logo-svg .cls-6 { fill: var(--cs-logo-cargo);   }   /* CARGO */
.cs-logo-svg .cls-7 { fill: var(--cs-logo-centrum); }   /* CENTRUM */

/* Letter-spacing helpers from original SVG */
.cs-logo-svg .cls-1 { letter-spacing: 0em; }
.cs-logo-svg .cls-2 { letter-spacing: 0em; }
.cs-logo-svg .cls-4 { letter-spacing: -0.01em; }

/* Animate each dot rect — transform-box/origin fix SVG scale origin (defaults 0 0) */
.cs-logo-svg rect {
  transform-box: fill-box;
  transform-origin: center;
  animation: dotBreath 6s ease-in-out infinite;
}

.cs-logo-svg rect:nth-of-type(1) { animation-delay: 0.00s; }
.cs-logo-svg rect:nth-of-type(2) { animation-delay: 0.20s; }
.cs-logo-svg rect:nth-of-type(3) { animation-delay: 0.40s; }
.cs-logo-svg rect:nth-of-type(4) { animation-delay: 0.15s; }
.cs-logo-svg rect:nth-of-type(5) { animation-delay: 0.55s; }
.cs-logo-svg rect:nth-of-type(6) { animation-delay: 0.70s; }
.cs-logo-svg rect:nth-of-type(7) { animation-delay: 0.85s; }

@keyframes dotBreath {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.3; transform: scale(0.72); }
}

/* ── EYEBROW ── */

.cs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--cs-eyebrow-clr);
  margin: 0;
}

.cs-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-primary);
  display: block;
  animation: dotBreath 6s ease-in-out infinite;
}

/* ── HEADING ── */

.cs-title {
  font-family: var(--font-heading);
  font-size: clamp(40px, 7vw, 72px);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  margin: 0;
  background: linear-gradient(
    135deg,
    var(--cs-title-g1) 0%,
    var(--cs-title-g2) 40%,
    var(--cs-title-g3) 70%,
    var(--cs-title-g4) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientSweep 5s ease-in-out infinite alternate;
}

@keyframes gradientSweep {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* ── SUBTEXT ── */

.cs-sub {
  font-family: var(--font-body);
  font-size: clamp(var(--text-md), 2vw, var(--text-xl));
  color: var(--cs-sub-clr);
  line-height: var(--leading-loose);
  max-width: 520px;
  margin: 0;
}

/* ── PROGRESS BAR ── */

.cs-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 360px;
}

.cs-bar {
  width: 100%;
  height: 4px;
  background: var(--cs-bar-track);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.cs-bar-fill {
  height: 100%;
  width: 65%;
  background: var(--gradient-cta);
  border-radius: var(--radius-full);
  animation: barPulse 3s ease-in-out infinite;
}

.cs-bar-shine {
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: shineSlide 3s ease-in-out infinite;
}

@keyframes barPulse {
  0%, 100% { width: 62%; opacity: 0.9; }
  50%       { width: 68%; opacity: 1;   }
}

@keyframes shineSlide {
  0%   { left: -60%;  }
  100% { left: 120%;  }
}

.cs-bar-label {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--cs-bar-label-clr);
}

/* ── PRODUCTS STRIP ── */

.cs-products {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  background: var(--cs-strip-bg);
  border: 1px solid var(--cs-strip-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
}

.cs-product {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--cs-product-clr);
}

.cs-product-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cs-product-dot);
  animation: dotBreath 6s ease-in-out infinite;
}

.cs-product:nth-child(1) .cs-product-dot { animation-delay: 0s;   }
.cs-product:nth-child(3) .cs-product-dot { animation-delay: 0.4s; }

.cs-product-dot--dim {
  background: var(--cs-product-dot-dim);
  animation: none;
  opacity: 0.5;
}

.cs-product-sep {
  width: 1px;
  height: 14px;
  background: var(--cs-product-sep);
}

/* ── RESPONSIVE ── */

@media (max-width: 600px) {
  .cs-toggle {
    top: var(--space-4);
    right: var(--space-4);
  }

  .cs-content {
    gap: var(--space-6);
  }

  .cs-logo-svg {
    width: 170px;
  }

  .cs-products {
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
  }
}