/* ═══════════════════════════════════════════════
   COMING-SOON.CSS — Section 6
   Edit: background gradient, glow color, timeline
         Replace gradient with a real photo:
         .coming-bg { background-image: url('../images/your-photo.jpg'); }
═══════════════════════════════════════════════ */

#coming-soon {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Background */
.coming-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #1a0802 0%, #4a2510 40%, #2a1005 100%);
  background-size: cover;
  background-position: center;
}

/* Grid pattern overlay */
.coming-pattern {
  position: absolute;
  inset: 0;
  opacity: .04;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(201,164,107,.8) 39px, rgba(201,164,107,.8) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(201,164,107,.8) 39px, rgba(201,164,107,.8) 40px);
}

/* Pulsing glow */
.coming-glow {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,164,107,.1) 0%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: .6; transform: translate(-50%,-50%) scale(1);   }
  50%       { opacity: 1;  transform: translate(-50%,-50%) scale(1.15); }
}

/* Content */
.coming-content {
  position: relative;
  z-index: 2;
  padding: var(--section-v) var(--section-h);
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.coming-content h2 {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.12;
  margin: 16px 0 28px;
}
.coming-content h2 em { font-style: italic; color: var(--gold-light); }
.coming-content p {
  font-family: var(--f-elegant);
  font-size: 1.12rem;
  color: rgba(255,255,255,.78);
  line-height: 1.85;
  max-width: 660px;
  margin: 0 auto 16px;
}
.coming-divider {
  width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 32px auto;
}

/* Timeline strip */
.timeline-strip {
  display: flex;
  justify-content: center;
  margin-top: 48px;
  border: 1px solid rgba(201,164,107,.18);
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}
.timeline-item {
  flex: 1;
  padding: 24px 20px;
  border-right: 1px solid rgba(201,164,107,.12);
  text-align: left;
}
.timeline-item:last-child { border-right: none; }

.timeline-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  margin-bottom: 12px;
  box-shadow: 0 0 12px var(--gold);
  animation: dotPulse 2s ease-in-out infinite;
}
.timeline-item:nth-child(2) .timeline-dot,
.timeline-item:nth-child(3) .timeline-dot {
  background: rgba(201,164,107,.3);
  box-shadow: none;
  animation: none;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 8px var(--gold); }
  50%       { box-shadow: 0 0 20px var(--gold), 0 0 36px rgba(201,164,107,.35); }
}

.timeline-label {
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  margin-bottom: 4px;
}
.timeline-title {
  font-family: var(--f-display);
  font-size: .92rem;
  color: rgba(255,255,255,.78);
}

/* ── Responsive ─────────────────────────── */
@media (max-width: 560px) {
  .timeline-strip  { flex-direction: column; max-width: 100%; }
  .timeline-item   { border-right: none; border-bottom: 1px solid rgba(201,164,107,.12); }
  .timeline-item:last-child { border-bottom: none; }
}