/*
  ╔══════════════════════════════════════════════════════════════════════╗
  ║  CS-AI Agent — Motion System v2.0                                   ║
  ║  Scroll-entry reveal · Demo micro-animations · Hero animations      ║
  ║  Uses CSS Scroll-driven Animations (Baseline 2025+)                 ║
  ║  IntersectionObserver fallback for Firefox                          ║
  ╚══════════════════════════════════════════════════════════════════════╝
*/

/* ─────────────────────────────────────────────
   1. SCROLL-ENTRY REVEAL SYSTEM
   Uses IntersectionObserver (universal fallback)
   + native CSS @supports upgrade for modern browsers
   ───────────────────────────────────────────── */

/* Elements that should animate on scroll entry */
.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition:
    opacity    0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform  0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal-up     { transform: translateY(32px); }
.reveal-left   { transform: translateX(-32px); }
.reveal-right  { transform: translateX(32px); }
.reveal-scale  { transform: scale(0.94); }
.reveal        { transform: translateY(16px); }

/* Triggered state (added by JS IntersectionObserver) */
.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered children: each .reveal-up child gets delay 0, 80ms, 160ms... */
.stagger-children > *:nth-child(1)  { transition-delay: 0ms; }
.stagger-children > *:nth-child(2)  { transition-delay: 80ms; }
.stagger-children > *:nth-child(3)  { transition-delay: 160ms; }
.stagger-children > *:nth-child(4)  { transition-delay: 240ms; }
.stagger-children > *:nth-child(5)  { transition-delay: 320ms; }
.stagger-children > *:nth-child(6)  { transition-delay: 400ms; }

/* Native CSS scroll-driven enhancement (Chrome/Edge/Safari 26+) */
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
  .reveal-scroll {
    animation: ds-reveal-enter linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }

  @keyframes ds-reveal-enter {
    from {
      opacity: 0;
      transform: translateY(28px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-scroll {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────
   2. HERO ENTRANCE ANIMATIONS
   Runs on page load, not scroll
   ───────────────────────────────────────────── */
@keyframes ds-hero-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ds-hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ds-hero-slide-right {
  from { opacity: 0; transform: translateX(40px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes ds-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

/* Apply to hero elements */
.hero__badge-row,
.hero__eyebrow   { animation: ds-hero-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
.hero__title     { animation: ds-hero-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
.hero__subtitle  { animation: ds-hero-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; }
.hero__cta-row,
.hero__cta       { animation: ds-hero-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; }
.hero__trust     { animation: ds-hero-fade-in 0.6s ease 0.6s both; }
.hero__media,
.hero__demo      { animation: ds-hero-slide-right 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }

/* Gmail sidebar demo mockup — gentle float */
.gmail-sidebar-demo,
.hero__media {
  animation: ds-hero-slide-right 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both,
             ds-float 6s ease-in-out 1.5s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero__badge-row, .hero__eyebrow, .hero__title,
  .hero__subtitle, .hero__cta-row, .hero__cta,
  .hero__trust, .hero__media, .hero__demo,
  .gmail-sidebar-demo {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────
   3. DEMO / PRODUCT SIMULATION ANIMATIONS
   CSS-only: simulates the Gmail sidebar activation
   ───────────────────────────────────────────── */

/* Container */
.demo-sequence {
  position: relative;
  overflow: hidden;
}

/* Status indicator dot (pulsing green = live) */
.demo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(162, 80%, 45%);
  position: relative;
  flex-shrink: 0;
}

.demo-dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: hsl(162, 80%, 55%);
  opacity: 0;
  animation: ds-ping 1.8s ease-out infinite;
}

@keyframes ds-ping {
  0%   { transform: scale(0.8); opacity: 0.7; }
  80%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Step-by-step demo: rotating steps with CSS animation */
.demo-step {
  opacity: 0;
  transform: translateX(12px);
  transition:
    opacity    0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform  0.4s cubic-bezier(0.22, 1, 0.36, 1);
  position: absolute;
  top: 0; left: 0; right: 0;
}

.demo-step.demo-step--active {
  opacity: 1;
  transform: none;
  position: relative;
}

.demo-step.demo-step--exit {
  opacity: 0;
  transform: translateX(-12px);
  position: absolute;
}

/* Typing cursor effect for draft text */
@keyframes ds-cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.demo-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--ds-primary);
  border-radius: 1px;
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: ds-cursor-blink 0.9s ease-in-out infinite;
}

/* Skeleton shimmer (loading state in demo) */
.demo-skeleton {
  background: linear-gradient(
    90deg,
    var(--ds-bg-muted) 0%,
    hsl(210, 15%, 90%) 40%,
    var(--ds-bg-muted) 80%
  );
  background-size: 300% 100%;
  border-radius: var(--ds-radius-sm);
  animation: ds-shimmer 1.6s ease-in-out infinite;
}

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

/* Confidence badge animation */
.demo-confidence-fill {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ds-primary) 0%, var(--ds-primary-light) 100%);
  width: 0%;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.demo-confidence-fill.is-filled {
  width: 88%;
}

/* Action button shine effect */
.demo-action-btn {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.demo-action-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  transform: skewX(-15deg);
  animation: ds-shine 3s ease-in-out 2s infinite;
}

@keyframes ds-shine {
  0%   { left: -100%; }
  40%  { left: 140%; }
  100% { left: 140%; }
}

/* ─────────────────────────────────────────────
   4. GMAIL SIDEBAR MOCKUP ANIMATION
   Simulates the sidebar panel appearing
   ───────────────────────────────────────────── */
@keyframes ds-sidebar-open {
  from {
    transform: translateX(20px);
    opacity: 0;
    clip-path: inset(0 0 0 100%);
  }
  to {
    transform: translateX(0);
    opacity: 1;
    clip-path: inset(0 0 0 0%);
  }
}

.gmail-sidebar-panel {
  animation: ds-sidebar-open 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both;
}

/* Order fetch indicator */
@keyframes ds-order-fetch {
  0%   { width: 0%; }
  70%  { width: 85%; }
  100% { width: 100%; }
}

.demo-fetch-bar {
  height: 2px;
  background: var(--ds-primary);
  border-radius: 1px;
  animation: ds-order-fetch 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1s both;
  box-shadow: 0 0 8px hsl(162, 80%, 50%, 0.5);
}

/* Rule match chip bounce-in */
@keyframes ds-match-bounce {
  0%   { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(1deg);  opacity: 1; }
  80%  { transform: scale(0.96); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.demo-rule-chip {
  animation: ds-match-bounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 2s both;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ds-primary-subtle);
  border: 1px solid hsl(162, 60%, 80%);
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-primary-dark);
}

/* Draft reply fade-in + type effect */
@keyframes ds-draft-appear {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.demo-draft-area {
  animation: ds-draft-appear 0.4s var(--ds-ease-out) 2.8s both;
}

/* ─────────────────────────────────────────────
   5. MICRO-INTERACTION: HOVER GLIMMER ON CARDS
   ───────────────────────────────────────────── */
.glimmer-card {
  position: relative;
  overflow: hidden;
}

.glimmer-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 70%
  );
  transform: rotate(10deg);
  transition: none;
  opacity: 0;
  pointer-events: none;
}

.glimmer-card:hover::before {
  animation: ds-glimmer-sweep 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ds-glimmer-sweep {
  from { left: -75%; opacity: 1; }
  to   { left: 125%;  opacity: 1; }
}

/* ─────────────────────────────────────────────
   6. NUMBER COUNTER ANIMATION (data stats)
   Triggered by JS when in viewport
   ───────────────────────────────────────────── */
.ds-count-up {
  display: inline-block;
  transition: transform 0.3s var(--ds-ease-spring);
}

.ds-count-up.counting {
  animation: ds-count-pop 0.4s var(--ds-ease-spring);
}

@keyframes ds-count-pop {
  0%  { transform: scale(1); }
  50% { transform: scale(1.12); }
  100%{ transform: scale(1); }
}

/* ─────────────────────────────────────────────
   7. CTA BUTTON PULSE (draws attention)
   Only plays once on load, not looping
   ───────────────────────────────────────────── */
.ds-cta-pulse {
  position: relative;
}

.ds-cta-pulse::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: hsl(162, 70%, 55%);
  opacity: 0;
  animation: ds-cta-pulse-anim 2s ease-out 1.5s 2 both;
  z-index: -1;
}

@keyframes ds-cta-pulse-anim {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.18); }
}

/* ─────────────────────────────────────────────
   8. SCROLLBAR STYLING (Chrome / Safari)
   ───────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--ds-bg-subtle);
}

::-webkit-scrollbar-thumb {
  background: hsl(210, 15%, 78%);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(210, 15%, 65%);
}