/* ═══════════════════════════════════════
   DictaScribe — Animations & Transitions
   ═══════════════════════════════════════ */

/* ── Scroll Reveal ── */
.reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-rotate { will-change: opacity, transform; }
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .7s var(--transition), transform .9s var(--transition); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-30px); transition: opacity .7s var(--transition), transform .8s var(--transition); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(30px); transition: opacity .7s var(--transition), transform .8s var(--transition); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(.94); transition: opacity .7s ease, transform .7s ease; }
.reveal-scale.visible { opacity: 1; transform: scale(1); }
.reveal-rotate { opacity: 0; transform: translateY(30px) rotate(2deg); transition: opacity .8s var(--transition), transform .8s var(--transition); }
.reveal-rotate.visible { opacity: 1; transform: translateY(0) rotate(0); }

/* Stagger delays */
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }
.d5 { transition-delay: .5s; }
.d6 { transition-delay: .6s; }

/* ── Parallax Layers ── */
.parallax-slow { will-change: transform; }
.parallax-fast { will-change: transform; }

/* ── Gradient Border Animation ── */
.gradient-border {
  position: relative; border-radius: var(--radius-lg); padding: 2px;
  background: linear-gradient(135deg, var(--indigo), var(--cyan), var(--indigo));
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
}
.gradient-border > * { background: var(--card); border-radius: calc(var(--radius-lg) - 2px); }
@keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* ── Number Counter ── */
.counter { font-variant-numeric: tabular-nums; }

/* ── Typing Effect ── */
.typing-cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--indigo); animation: cursor-blink .8s infinite; vertical-align: text-bottom; margin-left: 3px; }
@keyframes cursor-blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

/* ── Smooth Image Load ── */
.img-reveal { opacity: 0; transition: opacity .6s ease; }
.img-reveal.loaded { opacity: 1; }

/* ── Hover Glow ── */
.glow-hover { transition: box-shadow .4s var(--transition); }
.glow-hover:hover { box-shadow: 0 0 40px rgba(79,70,229,.15), var(--shadow-lg); }

/* ── Marquee for trust bar ── */
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-track { display: flex; gap: 48px; animation: marquee 30s linear infinite; width: max-content; }

/* ── Stats count up ── */
.stat-number { opacity: 1; transform: translateY(0); }

/* ── Ripple on click ── */
.ripple { position: relative; overflow: hidden; }
.ripple::before {
  content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: rgba(255,255,255,.15); transform: scale(0); transition: transform .5s, opacity .7s;
  top: 50%; left: 50%; margin: -150px 0 0 -150px; opacity: 0;
}
.ripple:active::before { transform: scale(1); opacity: 1; transition: 0s; }

/* ═══════════════════════════════════════
   Advanced Animations v2
   ═══════════════════════════════════════ */

/* ── 1. Reveal Blur ── */
.reveal-blur {
  opacity: 0;
  filter: blur(10px);
  transition: opacity .8s var(--transition), filter .8s var(--transition);
}
.reveal-blur.visible {
  opacity: 1;
  filter: blur(0);
}

/* ── 2. Hover Shine ── */
.hover-shine {
  position: relative;
  overflow: hidden;
}
.hover-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,.25) 45%,
    rgba(255,255,255,.4) 50%,
    rgba(255,255,255,.25) 55%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: none;
  pointer-events: none;
}
.hover-shine:hover::after {
  animation: shine-sweep .7s ease forwards;
}
@keyframes shine-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ── 3. Stagger Children ── */
.stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--transition), transform .5s var(--transition);
}
.stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}
.stagger > *:nth-child(1)  { transition-delay: .05s; }
.stagger > *:nth-child(2)  { transition-delay: .10s; }
.stagger > *:nth-child(3)  { transition-delay: .15s; }
.stagger > *:nth-child(4)  { transition-delay: .20s; }
.stagger > *:nth-child(5)  { transition-delay: .25s; }
.stagger > *:nth-child(6)  { transition-delay: .30s; }
.stagger > *:nth-child(7)  { transition-delay: .35s; }
.stagger > *:nth-child(8)  { transition-delay: .40s; }
.stagger > *:nth-child(9)  { transition-delay: .45s; }
.stagger > *:nth-child(10) { transition-delay: .50s; }
.stagger > *:nth-child(11) { transition-delay: .55s; }
.stagger > *:nth-child(12) { transition-delay: .60s; }

/* ── 4. Text Shimmer ── */
.text-shimmer {
  background: linear-gradient(
    120deg,
    currentColor 0%,
    currentColor 40%,
    rgba(255,255,255,.9) 50%,
    currentColor 60%,
    currentColor 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-shimmer-move 3s linear infinite;
}
@keyframes text-shimmer-move {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ── 5. Card Lift ── */
.card-lift {
  transition: transform .35s var(--transition), box-shadow .35s var(--transition);
}
.card-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 36px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08);
}

/* ── 6. Border Flow ── */
.border-flow {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 2px;
}
.border-flow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--border-angle, 0deg), var(--indigo), var(--cyan), var(--indigo));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-rotate 3s linear infinite;
  pointer-events: none;
}
@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes border-rotate {
  to { --border-angle: 360deg; }
}

/* ── 7. Slide-in Variants (with bounce) ── */
@keyframes slide-in-left {
  0%   { opacity: 0; transform: translateX(-60px); }
  70%  { transform: translateX(8px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right {
  0%   { opacity: 0; transform: translateX(60px); }
  70%  { transform: translateX(-8px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-top {
  0%   { opacity: 0; transform: translateY(-60px); }
  70%  { transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in-bottom {
  0%   { opacity: 0; transform: translateY(60px); }
  70%  { transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.slide-in-left   { animation: slide-in-left   .7s var(--transition) both; }
.slide-in-right  { animation: slide-in-right  .7s var(--transition) both; }
.slide-in-top    { animation: slide-in-top    .7s var(--transition) both; }
.slide-in-bottom { animation: slide-in-bottom .7s var(--transition) both; }

/* ── 8. Typewriter ── */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--indigo);
  width: 0;
  animation:
    typewriter-expand 3s steps(40, end) forwards,
    typewriter-blink .75s step-end infinite;
}
@keyframes typewriter-expand {
  to { width: 100%; }
}
@keyframes typewriter-blink {
  0%, 100% { border-color: var(--indigo); }
  50%      { border-color: transparent; }
}

/* ── 9. Morph Blob ── */
.morph-blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: morph-blob 8s ease-in-out infinite;
}
@keyframes morph-blob {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%  { border-radius: 50% 60% 40% 60% / 30% 70% 50% 60%; }
  75%  { border-radius: 40% 30% 60% 50% / 60% 40% 60% 30%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* ── 10. Scale Bounce ── */
@keyframes scale-bounce {
  0%   { opacity: 0; transform: scale(0); }
  60%  { transform: scale(1.12); }
  80%  { transform: scale(.95); }
  100% { opacity: 1; transform: scale(1); }
}
.scale-bounce {
  animation: scale-bounce .6s cubic-bezier(.34,1.56,.64,1) both;
}