/* =============================================
   WIP-MODAL.CSS — LIGHT VERSION
   Work-in-progress modal.
   Homepage only — shows once per session.
   ============================================= */


/* ── BACKDROP ─────────────────────────────── */

.wip-backdrop {
  position:   fixed;
  inset:      0;
  z-index:    1100;
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter:         blur(4px);
  -webkit-backdrop-filter: blur(4px);

  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.4s ease;
}

.wip-backdrop.is-open {
  opacity:        1;
  pointer-events: auto;
}


/* ── MODAL ────────────────────────────────── */

.wip-modal {
  position:   fixed;
  top:        50%;
  left:       50%;
  z-index:    1101;
  width:      calc(100% - 48px);
  max-width:  620px;

  background:    rgba(255, 255, 255, 0.98);
  border:        1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding:       40px 44px 36px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.10),
    0  8px 24px rgba(0, 0, 0, 0.06);

  backdrop-filter:         blur(20px);
  -webkit-backdrop-filter: blur(20px);

  transform:      translate(-50%, -50%) scale(0.96);
  opacity:        0;
  pointer-events: none;
  transition:
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity   0.45s ease;
}

.wip-modal.is-open {
  transform:      translate(-50%, -50%) scale(1);
  opacity:        1;
  pointer-events: auto;
}

.wip-modal.is-closing {
  transform: translate(-50%, -50%) scale(0.97);
  opacity:   0;
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 1, 1),
    opacity   0.3s ease;
}

/* Border tints blue while paused */
.wip-modal.is-paused {
  border-color: rgba(26, 70, 201, 0.20);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.10),
    0  8px 24px rgba(0, 0, 0, 0.06),
    0  0   0  3px rgba(26, 70, 201, 0.06);
}


/* ── CLOSE BUTTON + COUNTDOWN RING ───────── */

.wip-close-wrap {
  position:        absolute;
  top:             16px;
  right:           16px;
  width:           36px;
  height:          36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* Ring orbit: viewBox 36×36, cx/cy=18, r=16
   Arc sits 2px outside the 32px button edge     */
.wip-ring {
  position:       absolute;
  inset:          -2px;
  width:          calc(100% + 4px);
  height:         calc(100% + 4px);
  overflow:       visible;
  pointer-events: none;
  transform:      rotate(-90deg);
  z-index:        0;
}

.wip-ring__track {
  fill:   none;
  stroke: none;
}

.wip-ring__bar {
  fill:              none;
  stroke:            none;       /* JS sets this to blue in startRing() */
  stroke-width:      2;
  stroke-linecap:    round;
  transform-origin:  center;
  stroke-dasharray:  0;
  stroke-dashoffset: 0;
}

/* Kill any inherited stroke/fill from global CSS */
.wip-ring circle {
  fill:   none;
  stroke: inherit; /* overridden per-element above */
}
.wip-ring .wip-ring__track { stroke: none !important; }
.wip-ring .wip-ring__bar   { stroke: none !important; } /* overridden by JS inline style */

/* ── CLOSE BUTTON — all states explicit ─────
   Nuclear reset: no border, no outline,
   no box-shadow, no SVG stroke leaking in.
   ─────────────────────────────────────────── */

.wip-close {
  /* Layout */
  position:        relative;
  z-index:         2;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  flex-shrink:     0;

  /* Shape */
  border-radius:   50%;

  /* Hard reset — no browser defaults leaking */
  border:          0 none transparent !important;
  outline:         0 none transparent !important;
  box-shadow:      none !important;
  -webkit-appearance: none;
  appearance:      none;

  /* Visual */
  background:      rgba(0, 0, 0, 0.05);
  color:           rgba(0, 0, 0, 0.38);
  font-size:       12px;
  line-height:     1;
  cursor:          pointer;

  transition:
    background 0.18s ease,
    color      0.18s ease;
}

/* Hover */
.wip-close:hover {
  background: rgba(0, 0, 0, 0.09);
  color:      rgba(0, 0, 0, 0.75);
  border:     0 none transparent !important;
  outline:    0 none transparent !important;
  box-shadow: none !important;
}

/* Active / click */
.wip-close:active {
  background: rgba(0, 0, 0, 0.14);
  color:      #0f0f0f;
  border:     0 none transparent !important;
  outline:    0 none transparent !important;
  box-shadow: none !important;
  transform:  scale(0.92);
}

/* Focus — keyboard nav only, no mouse ring */
.wip-close:focus-visible {
  outline:    2px solid var(--blue, #1a46c9) !important;
  outline-offset: 3px;
  box-shadow: none !important;
}

/* Paused state — parent sets .is-paused */
.wip-modal.is-paused .wip-close {
  color: rgba(0, 0, 0, 0.55);
  background: rgba(26, 70, 201, 0.05);
  border:     0 none transparent !important;
  box-shadow: none !important;
}


/* ── CONTENT ──────────────────────────────── */

.wip-kicker {
  display:        flex;
  align-items:    center;
  gap:            10px;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--blue, #1a46c9);
  margin-bottom:  20px;
}

.wip-kicker::before {
  content:       "";
  display:       block;
  width:         20px;
  height:        1.5px;
  background:    var(--blue, #1a46c9);
  border-radius: 2px;
  flex-shrink:   0;
}

.wip-title {
  font-size:      clamp(2.4rem, 5vw, 3.8rem);
  font-weight:    300;
  letter-spacing: -0.06em;
  line-height:    0.95;
  color:          var(--text-primary, #0f0f0f); /* line 1 — black */
  margin-bottom:  20px;
}

/* Typed phrase — blue */
.wip-title .wip-title__line2,
.wip-title .wip-tw { color: var(--blue, #1a46c9); }

/* Static first line — dark. Higher specificity than span rule above */
.wip-title .wip-title__line1 { color: var(--text-primary, #0f0f0f); }

/* Typewriter cursor */
.wip-cursor {
  display:     inline-block;
  color:       var(--blue, #1a46c9);
  font-weight: 300;
  margin-left: 1px;
  animation:   wipCursorBlink 0.9s step-end infinite;
}

/* Pause hint */
.wip-pause-hint {
  transition: opacity 0.2s ease;
}

.wip-desc {
  font-size:     15px;
  line-height:   1.7;
  color:         var(--text-secondary, #444444);
  max-width:     460px;
  margin-bottom: 32px;
}

.wip-desc strong {
  color:       var(--text-primary, #0f0f0f);
  font-weight: 500;
}


/* ── ACTIONS ──────────────────────────────── */

.wip-actions {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
}

.wip-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         11px 22px;
  background:      var(--blue, #1a46c9);
  color:           #ffffff;
  border:          1.5px solid var(--blue, #1a46c9);
  border-radius:   999px;
  font-family:     inherit;
  font-size:       13px;
  font-weight:     500;
  letter-spacing:  0.01em;
  text-decoration: none;
  cursor:          pointer;
  transition:
    background   0.18s ease,
    border-color 0.18s ease,
    transform    0.18s ease;
}

.wip-cta:hover {
  background:   #1339a8;
  border-color: #1339a8;
  transform:    translateY(-1px);
}

.wip-dismiss {
  font-size:   13px;
  font-weight: 400;
  color:       rgba(0, 0, 0, 0.35);
  background:  none;
  border:      none;
  cursor:      pointer;
  font-family: inherit;
  padding:     4px 0;
  transition:  color 0.18s ease;
}

.wip-dismiss:hover { color: rgba(0, 0, 0, 0.65); }


/* ── COUNTDOWN ────────────────────────────── */

.wip-countdown {
  display:        block;
  font-size:      10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          rgba(0, 0, 0, 0.28);
  margin-top:     20px;
  padding-top:    16px;
  border-top:     1px solid var(--border, rgba(0, 0, 0, 0.07));
}

#wipCountdownNum {
  color:       var(--text-secondary, #444444);
  font-weight: 600;
}


/* ── RESPONSIVE ───────────────────────────── */

@media (max-width: 768px) {
  .wip-modal {
    width:   calc(100% - 32px);
    padding: 28px 24px 24px;
  }

  .wip-title { font-size: clamp(2rem, 8vw, 2.8rem); }

  .wip-actions { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .wip-modal,
  .wip-backdrop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .wip-modal     { transition: opacity 0.3s ease !important; }
  .wip-ring__bar { animation:  none !important; }
  .wip-cursor    { animation:  none !important; opacity: 1; }
}