/* ============================================================
   קליניקול — Animations Pro
   Rules: transform + opacity only | 150-300ms micro |
          no infinite decorative | prefers-reduced-motion guard
   (ui-ux-pro-max skill compliant)
   ============================================================ */

/* ============================================================
   1. PAGE ENTRANCE — fade in on load
   ============================================================ */
body {
  animation: cl-page-in 0.35s ease-out both;
}

@keyframes cl-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   2. HERO CONTENT — stagger entrance (play once)
   ============================================================ */
.hero-main-title {
  animation: cl-rise 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.hero-main-subtitle {
  animation: cl-rise 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}

.hero-cta-wrapper {
  animation: cl-rise 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.30s both;
}

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

/* ============================================================
   3. HERO DECORATIVE ORBS — static, no animation (depth only)
   ============================================================ */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(90px);
}

.hero-orb-1 {
  width: 480px;
  height: 480px;
  top: -120px;
  right: -100px;
  background: radial-gradient(circle, rgba(93,63,211,0.07) 0%, transparent 70%);
}

.hero-orb-2 {
  width: 340px;
  height: 340px;
  bottom: -60px;
  left: 5%;
  background: radial-gradient(circle, rgba(46,139,87,0.05) 0%, transparent 70%);
}

/* Hero content must stay above orbs */
.hero-center-content {
  position: relative;
  z-index: 2;
}

/* ============================================================
   4. CTA BUTTON — attention pulse (finite: 3 plays, then stops)
      + shimmer sweep (finite: 4 plays)
   ============================================================ */
.hero-cta-btn {
  position: relative !important;
  overflow: hidden !important;
}

/* Shimmer sweep — 4 plays then done */
.hero-cta-btn::after {
  content: '';
  position: absolute;
  top: 0;
  right: -110%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 25%,
    rgba(255,255,255,0.18) 50%,
    transparent 75%
  );
  animation: cl-shimmer 3.5s cubic-bezier(0.4, 0, 0.6, 1) 0.8s 4 both;
  pointer-events: none;
}

@keyframes cl-shimmer {
  0%   { right: -110%; }
  40%, 100% { right: 120%; }
}

/* Outer ring pulse — 3 plays then stops */
.hero-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: cl-ring-pulse 2.2s ease-out 1.2s 3 both;
  pointer-events: none;
}

@keyframes cl-ring-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(93,63,211,0.42); }
  70%  { box-shadow: 0 0 0 16px rgba(93,63,211,0); }
  100% { box-shadow: 0 0 0 0 rgba(93,63,211,0); }
}

/* ============================================================
   5. SCROLL REVEAL — via JS-added classes
   ============================================================ */
.cl-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity  0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cl-reveal.cl-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger siblings 1-5 */
.cl-reveal:nth-child(2) { transition-delay: 0.07s; }
.cl-reveal:nth-child(3) { transition-delay: 0.14s; }
.cl-reveal:nth-child(4) { transition-delay: 0.21s; }
.cl-reveal:nth-child(5) { transition-delay: 0.28s; }

/* Section titles: slide + underline grow */
.cl-title-reveal h2::after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #5D3FD3, #2E8B57);
  border-radius: 2px;
  margin: 14px auto 0;
  transition: width 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.cl-title-reveal.cl-visible h2::after {
  width: 64px;
}

/* ============================================================
   6. CARD HOVER LIFTS — 250ms, transform + shadow only
   ============================================================ */
.why-card,
.pricing-card,
.testimonial-card,
.cliniko-step,
.comparison-card,
.faq-item {
  transition:
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.why-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 20px 44px rgba(93,63,211,0.13) !important;
}

.pricing-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 40px rgba(93,63,211,0.11) !important;
}

.testimonial-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.09) !important;
}

.cliniko-step:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(93,63,211,0.10) !important;
}

.comparison-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.09) !important;
}

.faq-item:hover {
  transform: translateX(-4px) !important;
}

/* ============================================================
   7. STEP ICON — scale on hover (not bounce — skill says no bounce)
   ============================================================ */
.cliniko-step-icon {
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.cliniko-step:hover .cliniko-step-icon {
  transform: scale(1.12) !important;
}

/* ============================================================
   8. BUTTON HOVER — subtle lift across all CTAs
   ============================================================ */
.btn-primary,
.cta-button-purple,
.hero-cta-btn,
.register-button,
.mobile-menu-btn.register {
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

.btn-primary:hover,
.cta-button-purple:hover,
.hero-cta-btn:hover,
.register-button:hover,
.mobile-menu-btn.register:hover {
  transform: translateY(-3px) !important;
}

/* ============================================================
   9. NAV LINKS — underline slide-in
   ============================================================ */
.nav-links a {
  position: relative !important;
}

.nav-links a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  right: 0 !important;
  left: auto !important;
  width: 0 !important;
  height: 2px !important;
  background: #5D3FD3 !important;
  border-radius: 1px !important;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nav-links a:hover::after {
  width: 100% !important;
  right: auto !important;
  left: 0 !important;
}

/* ============================================================
   10. FLOATING TAGS (showcase) — entrance once on load
   ============================================================ */
.floating-tag {
  animation: cl-tag-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.tag-recording  { animation-delay: 0.6s; }
.tag-ai-summary { animation-delay: 0.85s; }

@keyframes cl-tag-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================================
   11. macOS WINDOW — shadow deepen on hover
   ============================================================ */
.macos-window {
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.macos-window:hover {
  box-shadow: 0 40px 80px rgba(93,63,211,0.17) !important;
}

/* ============================================================
   12. TEMPLATE PILLS — scale on hover
   ============================================================ */
.template-pill {
  transition:
    transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: default !important;
}

.template-pill:hover {
  transform: translateY(-2px) scale(1.04) !important;
}

/* ============================================================
   13. FAQ ICON — rotate on active
   ============================================================ */
.faq-icon {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-block !important;
}

.faq-question.active .faq-icon {
  transform: rotate(180deg) !important;
}

/* ============================================================
   14. NAVBAR — smooth glass on scroll
   ============================================================ */
.navbar {
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    backdrop-filter 0.3s ease !important;
}

/* ============================================================
   15. FOOTER LINKS — nudge right (RTL: left)
   ============================================================ */
.footer-section a {
  display: inline-block !important;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.footer-section a:hover {
  transform: translateX(-4px) !important;
}

/* ============================================================
   16. TRUST BAR ITEMS — lift on hover
   ============================================================ */
.trust-item {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.trust-item:hover {
  transform: translateY(-4px) !important;
}

/* ============================================================
   17. PRICING — popular card entrance glow (finite: 2 plays)
   ============================================================ */
.pricing-card.popular {
  animation: cl-card-glow 2s ease-out 1s 2 both;
}

@keyframes cl-card-glow {
  0%   { box-shadow: none; }
  50%  { box-shadow: 0 0 0 3px rgba(99,102,241,0.25), 0 16px 40px rgba(93,63,211,0.14); }
  100% { box-shadow: none; }
}

/* ============================================================
   18. SECTION TITLE DOTS — scale entrance
   ============================================================ */
.dot {
  display: inline-block;
  animation: cl-dot-pop 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.dot:nth-child(2) { animation-delay: 0.08s; }

@keyframes cl-dot-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ============================================================
   19. ALL INTERACTIVE ELEMENTS — ensure cursor-pointer
   ============================================================ */
button,
[onclick],
.why-card,
.pricing-card,
.testimonial-card,
.template-pill,
.faq-question,
.comparison-card {
  cursor: pointer !important;
}

/* ============================================================
   20. STEP ARROWS — visible stroke
   ============================================================ */
.cliniko-step-arrow svg path {
  stroke: #9B8EC4 !important;
  stroke-width: 2.5px !important;
}

/* ============================================================
   22. CURSOR GLOW — soft radial bloom that follows the pointer
   ============================================================ */
#cl-cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(93,63,211,0.07) 0%, transparent 65%);
  pointer-events: none;
  z-index: 9998;
  will-change: transform;
  transition: opacity 0.4s ease;
}

/* ============================================================
   23. CLIP-PATH REVEAL — why-card image panels wipe in
       (triggered by parent's cl-visible, no separate observer)
   ============================================================ */

.why-card.cl-visible .why-card-img {
  animation: cl-wipe-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.why-card.cl-visible:nth-child(2) .why-card-img,
.why-card.cl-visible:nth-child(4) .why-card-img {
  animation-delay: 0.4s;
}

@keyframes cl-wipe-in {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ============================================================
   24. TYPEWRITER CURSOR BLINK
   ============================================================ */
.cl-typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  background: #5D3FD3;
  margin-right: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
  animation: cl-blink 0.75s step-end infinite;
}

@keyframes cl-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ============================================================
   25. PREFERS-REDUCED-MOTION GUARD
      (skill rule: always respect this)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}