/* =========================================
   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 ── */
/* Stroke width and the drop-shadow radii below are expressed in the logo's own
   user units (viewBox 75.67 wide), so they are ~20x smaller than the values the
   previous 1518-wide wordmark used. Rendered size on screen is unchanged. */
.cs-path {
  fill: transparent;
  stroke: transparent;
  stroke-width: 0.1px;
  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 0.5px #ff6600) drop-shadow(0 0 1.2px #ff0000);
  }
  80% {
    stroke: #ffaa00;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 0.3px #ff4400);
  }
  100% {
    stroke: rgba(255, 100, 0, 0.3);
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 0.1px rgba(255, 50, 0, 0));
  }
}

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

/* Sequential stagger — 9 paths, ordered to sweep left → right across "SAIKOU".
   The wordmark SVG lists paths right-to-left, so each nth-child delay below is
   mapped to the glyph's actual left-to-right position. Overall span (0.10s →
   2.20s cut, 2.80s → 4.20s fill) matches the previous wordmark, so the divider
   and tagline timings still land the same. */
.cs-path:nth-child(9) { animation: cs-laser-cut 1.6s ease-out 0.10s forwards, cs-laser-fill 0.8s ease-out 2.80s forwards; } /* S (lower) */
.cs-path:nth-child(8) { animation: cs-laser-cut 1.6s ease-out 0.36s forwards, cs-laser-fill 0.8s ease-out 2.98s forwards; } /* S (upper) */
.cs-path:nth-child(7) { animation: cs-laser-cut 1.6s ease-out 0.62s forwards, cs-laser-fill 0.8s ease-out 3.15s forwards; } /* A (diagonal) */
.cs-path:nth-child(6) { animation: cs-laser-cut 1.6s ease-out 0.88s forwards, cs-laser-fill 0.8s ease-out 3.33s forwards; } /* A (stem) */
.cs-path:nth-child(5) { animation: cs-laser-cut 1.6s ease-out 1.14s forwards, cs-laser-fill 0.8s ease-out 3.50s forwards; } /* I */
.cs-path:nth-child(4) { animation: cs-laser-cut 1.6s ease-out 1.40s forwards, cs-laser-fill 0.8s ease-out 3.68s forwards; } /* K */
.cs-path:nth-child(3) { animation: cs-laser-cut 1.6s ease-out 1.66s forwards, cs-laser-fill 0.8s ease-out 3.85s forwards; } /* O (upper) */
.cs-path:nth-child(2) { animation: cs-laser-cut 1.6s ease-out 1.92s forwards, cs-laser-fill 0.8s ease-out 4.03s forwards; } /* O (lower) */
.cs-path:nth-child(1) { animation: cs-laser-cut 1.6s ease-out 2.20s forwards, cs-laser-fill 0.8s ease-out 4.20s forwards; } /* U */

/* ── 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; }
}