/* ============================================================
   Ajyad.Tech — Custom styles (Astra-inspired light theme)
   Tailwind handles utility classes (config in js/theme.js).
   This file contains patterns Tailwind can't express:
   scroll animations, ticker, sliders, hamburger states,
   highlight marks, blobs and @keyframes.
   ============================================================ */

/* ── Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: #ffffff;
  color: #4a4860;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; }

::selection { background: #5c2ede; color: #fff; }

/* ── Highlighted word (hero headline accent) ────────────────── */
.mark-highlight {
  position: relative;
  white-space: nowrap;
  color: #5c2ede;
}
.mark-highlight svg {
  position: absolute;
  left: 0;
  bottom: -0.18em;
  width: 100%;
  height: 0.32em;
  overflow: visible;
}
.mark-highlight svg path {
  fill: none;
  stroke: #ffb300;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: drawStroke 1.2s 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes drawStroke { to { stroke-dashoffset: 0; } }

/* ── Gradient text helper ───────────────────────────────────── */
.text-gradient {
  background: linear-gradient(92deg, #5c2ede 0%, #9a4dff 55%, #ff5ca8 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Hero background blobs ──────────────────────────────────── */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  will-change: transform;
}
.blob-purple { background: rgba(92, 46, 222, 0.16); }
.blob-pink   { background: rgba(255, 92, 168, 0.12); }
.blob-gold   { background: rgba(255, 179, 0, 0.10); }

.blob-float    { animation: blobFloat 12s ease-in-out infinite; }
.blob-float-2  { animation: blobFloat 16s 2s ease-in-out infinite reverse; }
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.08); }
  66%      { transform: translate(-30px, 25px) scale(0.95); }
}

/* ── Scroll-reveal ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.active { opacity: 1; transform: translateY(0); }

/* Staggered children — add .reveal-stagger to a grid/flex parent */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-stagger.active > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.active > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.active > *:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger.active > *:nth-child(4) { transition-delay: 0.3s; }
.reveal-stagger.active > *:nth-child(5) { transition-delay: 0.4s; }
.reveal-stagger.active > *:nth-child(6) { transition-delay: 0.5s; }

/* ── Card hover lift ────────────────────────────────────────── */
.card-lift {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease;
}
.card-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(24, 16, 68, 0.14);
  border-color: rgba(92, 46, 222, 0.35);
}

/* ── Infinite ticker (trust bar) ────────────────────────────── */
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 32s linear infinite;
}
.ticker-set { flex-shrink: 0; }
.ticker-item {
  color: #7B7990;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  transition: color 0.2s;
}
.ticker-track:hover .ticker-item { color: #5C2EDE; }
.ticker-dot {
  color: #5C2EDE;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  opacity: 0.4;
}
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-track:hover,
.ticker-track:focus-within { animation-play-state: paused; }

/* ── Navbar: solid + shadow after scroll ────────────────────── */
#main-nav {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
#main-nav.scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 4px 24px rgba(24, 16, 68, 0.08);
}

/* ── Mobile menu slide ──────────────────────────────────────── */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu.open { max-height: 440px; }

/* ── Hamburger → X morphing lines ───────────────────────────── */
#hamburger[aria-expanded="true"] .ham-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#hamburger[aria-expanded="true"] .ham-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
#hamburger[aria-expanded="true"] .ham-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #5c2ede;
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(92, 46, 222, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.btn-primary:hover {
  background: #4a21c0;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(92, 46, 222, 0.38);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #12102b;
  font-weight: 700;
  border: 2px solid #e9e7f4;
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.btn-ghost:hover {
  border-color: #5c2ede;
  color: #5c2ede;
  transform: translateY(-2px);
}

/* ── Stars (ratings) ────────────────────────────────────────── */
.stars { display: inline-flex; gap: 2px; color: #ffb300; }

/* ── Testimonials slider (no external lib) ─────────────────────
   Structure:
     .t-slider            relative container
       .t-viewport        overflow hidden
         .t-track         flex row, JS translates X
           .t-slide (×n)  flex: 0 0 100% (md: 50%, lg: 33.33%)
       .t-prev / .t-next  arrow buttons
       .t-dots            dot navigation
------------------------------------------------------------------ */
.t-viewport { overflow: hidden; }
.t-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.t-slide { flex: 0 0 100%; padding: 0 12px; }
@media (min-width: 768px)  { .t-slide { flex-basis: 50%; } }
@media (min-width: 1024px) { .t-slide { flex-basis: 33.3333%; } }

.t-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #e9e7f4;
  background: #fff;
  color: #12102b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(24, 16, 68, 0.07);
}
.t-arrow:hover { background: #5c2ede; color: #fff; border-color: #5c2ede; }

.t-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d9d5ec;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}
.t-dot.active { background: #5c2ede; width: 24px; border-radius: 6px; }

/* ── Pulse glow (CTA ambient orb) ───────────────────────────── */
.pulse-glow { animation: pulseGlow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulseGlow {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ── CTA gradient band ──────────────────────────────────────── */
.cta-band {
  background: linear-gradient(115deg, #37188f 0%, #5c2ede 55%, #8b45f0 100%);
}

/* ── Hero mockup window ─────────────────────────────────────── */
.mockup-window {
  background: #fff;
  border: 1px solid #e9e7f4;
  border-radius: 18px;
  box-shadow: 0 40px 90px rgba(24, 16, 68, 0.16);
  overflow: hidden;
}
.mockup-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0eefa;
  background: #fafafe;
}
.mockup-dot { width: 10px; height: 10px; border-radius: 50%; }

/* Animated bars inside the mockup chart */
.chart-bar {
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #8b5cf6, #5c2ede);
  transform-origin: bottom;
  transform: scaleY(0);
}
.reveal.active .chart-bar,
.mockup-animate .chart-bar {
  animation: growBar 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.chart-bar:nth-child(2) { animation-delay: 0.12s; }
.chart-bar:nth-child(3) { animation-delay: 0.24s; }
.chart-bar:nth-child(4) { animation-delay: 0.36s; }
.chart-bar:nth-child(5) { animation-delay: 0.48s; }
.chart-bar:nth-child(6) { animation-delay: 0.60s; }
.chart-bar:nth-child(7) { animation-delay: 0.72s; }
@keyframes growBar { to { transform: scaleY(1); } }

/* Floating mini-cards around mockup */
.float-card {
  animation: floatCard 6s ease-in-out infinite;
  box-shadow: 0 16px 40px rgba(24, 16, 68, 0.14);
}
.float-card-delay { animation-delay: 3s; }
@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* ── FAQ accordion ──────────────────────────────────────────── */
.faq-item .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.open .faq-answer { max-height: 400px; }
.faq-item .faq-icon { transition: transform 0.3s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ── Material Symbols baseline fix ──────────────────────────── */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

/* ── Reduce motion preference ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { transition: none; opacity: 1; transform: none; }
  .ticker-track   { animation: none; }
  .pulse-glow     { animation: none; }
  .blob-float, .blob-float-2 { animation: none; }
  .float-card     { animation: none; }
  .chart-bar      { animation: none; transform: scaleY(1); }
  .mark-highlight svg path { animation: none; stroke-dashoffset: 0; }
  #main-nav       { transition: none; }
  .mobile-menu    { transition: none; }
  .ham-line       { transition: none; }
  .t-track        { transition: none; }
}

/* ── RTL overrides ──────────────────────────────────────────── */
html[dir="rtl"] body,
html[dir="rtl"] *:not(.material-symbols-outlined) {
  font-family: 'Cairo', sans-serif !important;
}
html[dir="rtl"] .material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
}
html[dir="rtl"] .nav-active-link {
  border-bottom: 2px solid;
  border-color: inherit;
}
/* Ticker + slider direction stays LTR even in RTL */
html[dir="rtl"] .ticker-track { direction: ltr; }
html[dir="rtl"] .t-viewport   { direction: ltr; }