/* End-to-end customer experience demo sequence */

@keyframes demo-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes demo-msg-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes demo-phone-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes demo-portal-flash {
  0% {
    box-shadow: 0 8px 32px rgba(28, 26, 23, 0.08);
  }
  40% {
    box-shadow:
      0 8px 32px rgba(28, 26, 23, 0.08),
      0 0 0 3px rgba(212, 165, 116, 0.45);
  }
  100% {
    box-shadow: 0 8px 32px rgba(28, 26, 23, 0.08);
  }
}

@keyframes demo-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Initial hidden state */
#experience-demo .demo-reveal,
#experience-demo .demo-message,
#experience-demo .demo-phone {
  opacity: 0;
}

#experience-demo .cust-portal-live {
  display: none;
}

/* Hide dashboard column until SMS sequence is done */
#experience-demo .demo-portal-col .cust-portal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#experience-demo .cust-portal-placeholder {
  display: none;
  flex-direction: column;
  min-height: 520px;
}

#experience-demo.demo-dashboard-loading .demo-portal-col .cust-portal,
#experience-demo.demo-dashboard-ready .demo-portal-col .cust-portal {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#experience-demo.demo-dashboard-loading .cust-portal-placeholder {
  display: flex;
}

#experience-demo.demo-active .demo-reveal {
  animation: demo-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#experience-demo.demo-active .demo-reveal[data-demo-delay="0"] { animation-delay: 0ms; }
#experience-demo.demo-active .demo-reveal[data-demo-delay="1"] { animation-delay: 140ms; }
#experience-demo.demo-active .demo-reveal[data-demo-delay="2"] { animation-delay: 280ms; }
#experience-demo.demo-active .demo-reveal[data-demo-delay="3"] { animation-delay: 420ms; }
#experience-demo.demo-active .demo-reveal[data-demo-delay="4"] { animation-delay: 560ms; }

#experience-demo.demo-phone-ready .demo-phone {
  animation: demo-phone-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#experience-demo .demo-message.demo-visible {
  animation: demo-msg-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#experience-demo .phone-messages {
  scroll-behavior: smooth;
}

/* Portal skeleton (waiting state) */
.cust-portal-skeleton-hero {
  grid-column: span 2;
  background: var(--bg-warm);
  border-radius: 12px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cust-portal-skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--rule-soft) 0%,
    var(--surface-warm) 45%,
    var(--rule-soft) 90%
  );
  background-size: 200% 100%;
  animation: demo-shimmer 1.6s ease-in-out infinite;
}

.cust-portal-skeleton-line.short { width: 42%; }
.cust-portal-skeleton-line.medium { width: 72%; }

.cust-portal-skeleton-card {
  min-height: 180px;
  border-radius: 12px;
  border: 1px solid var(--rule-soft);
  background: linear-gradient(
    90deg,
    var(--bg) 0%,
    var(--surface) 45%,
    var(--bg) 90%
  );
  background-size: 200% 100%;
  animation: demo-shimmer 1.6s ease-in-out infinite;
}

.cust-portal-skeleton-card:nth-child(3) { animation-delay: 0.15s; }
.cust-portal-skeleton-card:nth-child(4) { animation-delay: 0.3s; }

/* Live dashboard reveal */
#experience-demo.demo-dashboard-ready .cust-portal-placeholder {
  display: none;
}

#experience-demo.demo-dashboard-ready .cust-portal-live {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 520px;
  animation: demo-portal-flash 0.9s ease-out;
}

#experience-demo .cust-portal--demo {
  position: relative;
  width: 100%;
}

#experience-demo.demo-dashboard-ready .demo-portal-block {
  opacity: 0;
  animation: demo-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#experience-demo.demo-dashboard-ready .demo-portal-block[data-demo-delay="0"] { animation-delay: 80ms; }
#experience-demo.demo-dashboard-ready .demo-portal-block[data-demo-delay="1"] { animation-delay: 220ms; }
#experience-demo.demo-dashboard-ready .demo-portal-block[data-demo-delay="2"] { animation-delay: 360ms; }

/* Column titles fade in with demo */
#experience-demo .customer-experience-col-title {
  opacity: 0;
  transition: opacity 0.4s ease;
}

#experience-demo.demo-active .customer-experience-col:nth-child(1) .customer-experience-col-title {
  opacity: 1;
  transition-delay: 0ms;
}

#experience-demo.demo-phone-ready .demo-phone-col .customer-experience-col-title {
  opacity: 1;
}

#experience-demo.demo-dashboard-loading .demo-portal-col .customer-experience-col-title,
#experience-demo.demo-dashboard-ready .demo-portal-col .customer-experience-col-title {
  opacity: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #experience-demo .demo-reveal,
  #experience-demo .demo-message,
  #experience-demo .demo-phone,
  #experience-demo .demo-portal-block {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }

  #experience-demo .demo-portal-col .cust-portal {
    opacity: 1 !important;
    visibility: visible !important;
  }

  #experience-demo .cust-portal-live {
    display: flex !important;
  }

  #experience-demo .cust-portal-placeholder {
    display: none !important;
  }

  .cust-portal-skeleton-line,
  .cust-portal-skeleton-card {
    animation: none !important;
  }
}