/* =========================================
   SAIKOUWORKS — Coming Soon Overlay
   ========================================= */

.cs-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050507;
  overflow: hidden;
}

/* Full-bleed background SVG */
.cs-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Centred content stack */
.cs-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vw, 52px);
  padding: clamp(24px, 5vw, 80px);
  width: 100%;
  max-width: 1100px;
}

/* Logo SVG */
.cs-logo {
  width: 100%;
  max-width: 860px;
  height: auto;
  overflow: visible;
  display: block;
  margin: 0 auto;
}

/* ── Path draw animation ── */
.cs-path {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2px;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
}

@keyframes cs-laser-cut {
  0% {
    stroke: rgba(255, 200, 50, 0);
    stroke-dashoffset: 100;
    filter: drop-shadow(0 0 0px rgba(255, 100, 0, 0));
  }
  15% {
    stroke: #ffffff;
    filter: drop-shadow(0 0 10px #ff6600) drop-shadow(0 0 24px #ff0000);
  }
  80% {
    stroke: #ffaa00;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 6px #ff4400);
  }
  100% {
    stroke: rgba(255, 100, 0, 0.3);
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 2px rgba(255, 50, 0, 0));
  }
}

@keyframes cs-laser-fill {
  0%   { fill: transparent; filter: drop-shadow(0 0 20px rgba(255, 100, 0, 0.4)); }
  100% { fill: #F2F2F2;     filter: none; }
}

/* Sequential stagger — 15 paths, ordered to sweep left → right across
   "SAIKOUWORKS". The wordmark SVG lists paths out of visual order, so each
   nth-child delay below is mapped to the glyph's actual left-to-right position. */
.cs-path:nth-child(1)  { animation: cs-laser-cut 1.6s ease-out 0.25s forwards, cs-laser-fill 0.8s ease-out 2.90s forwards; } /* S */
.cs-path:nth-child(2)  { animation: cs-laser-cut 1.6s ease-out 0.10s forwards, cs-laser-fill 0.8s ease-out 2.80s forwards; } /* S */
.cs-path:nth-child(3)  { animation: cs-laser-cut 1.6s ease-out 2.20s forwards, cs-laser-fill 0.8s ease-out 4.20s forwards; } /* S (WORKS) */
.cs-path:nth-child(4)  { animation: cs-laser-cut 1.6s ease-out 2.05s forwards, cs-laser-fill 0.8s ease-out 4.10s forwards; } /* S (WORKS) */
.cs-path:nth-child(5)  { animation: cs-laser-cut 1.6s ease-out 0.55s forwards, cs-laser-fill 0.8s ease-out 3.10s forwards; } /* A */
.cs-path:nth-child(6)  { animation: cs-laser-cut 1.6s ease-out 0.40s forwards, cs-laser-fill 0.8s ease-out 3.00s forwards; } /* A */
.cs-path:nth-child(7)  { animation: cs-laser-cut 1.6s ease-out 0.70s forwards, cs-laser-fill 0.8s ease-out 3.20s forwards; } /* I */
.cs-path:nth-child(8)  { animation: cs-laser-cut 1.6s ease-out 1.00s forwards, cs-laser-fill 0.8s ease-out 3.40s forwards; } /* O (SAIKOU) */
.cs-path:nth-child(9)  { animation: cs-laser-cut 1.6s ease-out 1.45s forwards, cs-laser-fill 0.8s ease-out 3.70s forwards; } /* O (WORKS) */
.cs-path:nth-child(10) { animation: cs-laser-cut 1.6s ease-out 1.15s forwards, cs-laser-fill 0.8s ease-out 3.50s forwards; } /* U */
.cs-path:nth-child(11) { animation: cs-laser-cut 1.6s ease-out 0.85s forwards, cs-laser-fill 0.8s ease-out 3.30s forwards; } /* K (SAIKOU) */
.cs-path:nth-child(12) { animation: cs-laser-cut 1.6s ease-out 1.90s forwards, cs-laser-fill 0.8s ease-out 4.00s forwards; } /* K (WORKS) */
.cs-path:nth-child(13) { animation: cs-laser-cut 1.6s ease-out 1.30s forwards, cs-laser-fill 0.8s ease-out 3.60s forwards; } /* W */
.cs-path:nth-child(14) { animation: cs-laser-cut 1.6s ease-out 1.60s forwards, cs-laser-fill 0.8s ease-out 3.80s forwards; } /* R */
.cs-path:nth-child(15) { animation: cs-laser-cut 1.6s ease-out 1.75s forwards, cs-laser-fill 0.8s ease-out 3.90s forwards; } /* R */

/* ── Divider line ── */
.cs-divider {
  width: clamp(120px, 20vw, 240px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
  opacity: 0;
  animation: cs-fade-in 1.2s ease-out 4.8s forwards;
}

/* ── "COMING SOON" text ── */
.cs-tagline {
  font-family: 'Rajdhani', 'Arial', sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 2.4vw, 30px);
  color: #F2F2F2;
  letter-spacing: 0.1em;
  white-space: nowrap;
  margin: 0;
  opacity: 0;
  animation: cs-text-reveal 2.4s cubic-bezier(0.16, 1, 0.3, 1) 5.0s forwards;
}

@keyframes cs-text-reveal {
  0%   { opacity: 0; letter-spacing: 0.1em; filter: blur(6px); }
  40%  { opacity: 0.6; filter: blur(1px); }
  100% { opacity: 1; letter-spacing: 0.55em; filter: blur(0px); }
}

@keyframes cs-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}