/* ==========================================================================
   CyberSpeed LLC — animations.css
   Scroll-triggered fades, hover effects, counters
   ========================================================================== */

/* ── Scroll-triggered Fade In ──────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
}

.fade-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for grid items */
.stagger-1 { transition-delay: 0s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.2s; }
.stagger-4 { transition-delay: 0.3s; }
.stagger-5 { transition-delay: 0.4s; }
.stagger-6 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }
.stagger-7 { transition-delay: 0.7s; }
.stagger-8 { transition-delay: 0.8s; }

/* ── Counter Animation ─────────────────────────────────────────────────── */
.counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.counter.animate {
  animation: pulse-counter 0.4s ease-out;
}

@keyframes pulse-counter {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ── Hero Section Animations ───────────────────────────────────────────── */
.hero-content h1 {
  animation: hero-title-in 0.8s ease-out;
}

.hero-content p {
  animation: hero-text-in 0.8s ease-out 0.2s both;
}

.hero-cta {
  animation: hero-cta-in 0.8s ease-out 0.4s both;
}

@keyframes hero-title-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-text-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-cta-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Hero Dubai Enhanced Animations ───────────────────────────────────── */
.hero-dubai .arabic-greeting,
.hero-dubai .urdu-greeting {
  animation: hero-greeting-in 0.8s ease-out 0.1s both;
}

.hero-dubai .hero-badge {
  animation: hero-badge-in 0.6s ease-out 0.3s both;
}

@keyframes hero-greeting-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-badge-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* Dubai Skyline Animation */
.hero-dubai .dubai-skyline {
  animation: skyline-reveal 1.2s ease-out 0.5s both;
}

@keyframes skyline-reveal {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Floating Particles */
@keyframes float-particle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-20px) rotate(5deg); }
  50% { transform: translateY(-10px) rotate(-3deg); }
  75% { transform: translateY(-15px) rotate(2deg); }
}

.float-particle {
  animation: float-particle 8s ease-in-out infinite;
}

/* ── Hero Section Animations ───────────────────────────────────────────── */
.hero-content h1 {
  animation: hero-title-in 0.8s ease-out;
}

.hero-content p {
  animation: hero-text-in 0.8s ease-out 0.2s both;
}

.hero-cta {
  animation: hero-cta-in 0.8s ease-out 0.4s both;
}

@keyframes hero-title-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-text-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-cta-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Hover Effects ─────────────────────────────────────────────────────── */
.hover-glow {
  transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow);
}

.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hover-scale {
  transition: transform var(--transition-base);
}

.hover-scale:hover {
  transform: scale(1.03);
}

/* ── Link Underline Reveal ─────────────────────────────────────────────── */
.link-reveal {
  position: relative;
  display: inline-block;
}

.link-reveal::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width var(--transition-fast);
}

.link-reveal:hover::after {
  width: 100%;
}

.link-reveal:hover {
  text-decoration: none;
}

/* ── Pulse Dot (online/status indicator) ───────────────────────────────── */
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-success);
  display: inline-block;
  position: relative;
}

.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: var(--radius-full);
  background-color: var(--color-success);
  opacity: 0.5;
  animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ── Skeleton Loading Placeholder ──────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-bg-medium) 25%,
    var(--color-bg-light) 50%,
    var(--color-bg-medium) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
  border-radius: var(--radius-md);
}

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

/* ── Logo / Brand SVG pulse ────────────────────────────────────────────── */
.brand-pulse svg {
  animation: brand-glow 3s ease-in-out infinite;
}

@keyframes brand-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(0, 212, 255, 0.2)); }
  50%      { filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.5)); }
}

/* ── Particle Canvas ───────────────────────────────────────────────────── */
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
}

/* ── Glitch Text Effect ─────────────────────────────────────────────────── */
.glitch-text {
  position: relative;
  display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-white) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glitch-text::before {
  clip-path: inset(0 0 60% 0);
  animation: glitch-anim-1 3s infinite linear alternate-reverse;
}

.glitch-text::after {
  clip-path: inset(60% 0 0 0);
  animation: glitch-anim-2 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0%, 100% { transform: translate(0); }
  20%      { transform: translate(-2px, 1px); }
  40%      { transform: translate(2px, -1px); }
  60%      { transform: translate(-1px, 0); }
  80%      { transform: translate(1px, 0); }
}

@keyframes glitch-anim-2 {
  0%, 100% { transform: translate(0); }
  25%      { transform: translate(1px, -1px); }
  50%      { transform: translate(-1px, 0); }
  75%      { transform: translate(0, 1px); }
}

/* ── Typing Cursor ──────────────────────────────────────────────────────── */
.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background-color: var(--color-accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursor-blink 0.8s step-end infinite;
}

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

/* ── Scanning Line ──────────────────────────────────────────────────────── */
.scan-line {
  position: relative;
  overflow: hidden;
}

.scan-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.4), transparent);
  animation: scan-sweep 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes scan-sweep {
  0%   { top: 0; }
  100% { top: 100%; }
}

/* ── Morphing Gradient Background ───────────────────────────────────────── */
.bg-morph {
  position: relative;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-bg-dark) 50%, var(--color-primary) 100%);
}

.bg-morph::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 153, 204, 0.04) 0%, transparent 50%);
  animation: morph-shift 12s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes morph-shift {
  0%   {
    background:
      radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.04) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(0, 153, 204, 0.04) 0%, transparent 50%);
  }
  100% {
    background:
      radial-gradient(circle at 70% 20%, rgba(0, 212, 255, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 30% 80%, rgba(0, 153, 204, 0.03) 0%, transparent 50%);
  }
}

/* ── Advanced Reveal Animations ────────────────────────────────────────── */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

.reveal-rotate {
  opacity: 0;
  transform: rotateY(15deg) translateX(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-rotate.is-visible {
  opacity: 1;
  transform: rotateY(0) translateX(0);
}

/* Staggered reveal for grids */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ── Advanced Hover Effects ────────────────────────────────────────────── */
.hover-3d {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s ease;
  transform-style: preserve-3d;
}

.hover-3d:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-8px);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 60px rgba(0, 212, 255, 0.15);
}

.hover-border-gradient {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hover-border-gradient::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-dubai-gold), var(--color-accent));
  background-size: 200% 200%;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: border-flow 3s linear infinite;
  z-index: -1;
}

.hover-border-gradient:hover::before {
  opacity: 1;
}

@keyframes border-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Magnetic Button Effect ────────────────────────────────────────────── */
.magnetic-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.magnetic-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-accent), var(--color-dubai-gold));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.magnetic-btn:hover::before {
  opacity: 1;
}

.magnetic-btn span {
  position: relative;
  z-index: 1;
}

/* ── Floating Label Animation ──────────────────────────────────────────── */
.form-floating-label {
  position: relative;
}

.form-floating-label input,
.form-floating-label textarea {
  width: 100%;
  padding: var(--space-4) var(--space-4);
  font-size: var(--fs-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-medium);
  color: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-floating-label label {
  position: absolute;
  top: 50%;
  left: var(--space-4);
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  pointer-events: none;
  transition: all var(--transition-fast);
  transform-origin: left center;
}

.form-floating-label input:focus,
.form-floating-label textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
  outline: none;
}

.form-floating-label input:focus + label,
.form-floating-label textarea:focus + label,
.form-floating-label input:not(:placeholder-shown) + label,
.form-floating-label textarea:not(:placeholder-shown) + label {
  top: var(--space-2);
  left: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-accent);
  transform: translateY(-50%);
}

/* ── Morphing Cards ────────────────────────────────────────────────────── */
.morph-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-medium);
  border: 1px solid var(--color-border);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.morph-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent);
  transform: skewX(-15deg);
  transition: left 0.6s ease;
}

.morph-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

.morph-card:hover::before {
  left: 100%;
}

/* ── Scroll Progress Indicator ─────────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-dubai-gold));
  transform-origin: left;
  transform: scaleX(0);
  z-index: 9999;
  transition: transform 0.1s linear;
}

/* ── Parallax Background ───────────────────────────────────────────────── */
.parallax-bg {
  position: relative;
  overflow: hidden;
}

.parallax-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--parallax-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: -1;
  will-change: transform;
}

/* ── Shimmer Text ──────────────────────────────────────────────────────── */
.shimmer-text {
  background: linear-gradient(90deg, var(--color-white), var(--color-accent), var(--color-dubai-gold), var(--color-white));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

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

/* ── Number Count Up ───────────────────────────────────────────────────── */
.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ── Page Transition ───────────────────────────────────────────────────── */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--color-primary);
  z-index: 9999;
  transform: scaleY(0);
  transform-origin: top;
  pointer-events: none;
}

.page-transition.active {
  animation: page-transition-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.page-transition.leave {
  animation: page-transition-out 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes page-transition-in {
  0%   { transform: scaleY(0); transform-origin: top; }
  100% { transform: scaleY(1); transform-origin: top; }
}

@keyframes page-transition-out {
  0%   { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── Reduced Motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .fade-up,
  .fade-in,
  .fade-left,
  .fade-right,
  .scale-in,
  .reveal-on-scroll,
  .reveal-scale,
  .reveal-rotate {
    opacity: 1;
    transform: none;
  }

  .particle-canvas,
  #particle-canvas {
    display: none;
  }
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
}

.fade-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for grid items */
.stagger-1 { transition-delay: 0s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.2s; }
.stagger-4 { transition-delay: 0.3s; }
.stagger-5 { transition-delay: 0.4s; }
.stagger-6 { transition-delay: 0.5s; }
.stagger-7 { transition-delay: 0.6s; }
.stagger-8 { transition-delay: 0.7s; }

/* ── Counter Animation ─────────────────────────────────────────────────── */
.counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.counter.animate {
  animation: pulse-counter 0.4s ease-out;
}

@keyframes pulse-counter {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ── Hero Section Animations ───────────────────────────────────────────── */
.hero-content h1 {
  animation: hero-title-in 0.8s ease-out;
}

.hero-content p {
  animation: hero-text-in 0.8s ease-out 0.2s both;
}

.hero-cta {
  animation: hero-cta-in 0.8s ease-out 0.4s both;
}

@keyframes hero-title-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-text-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-cta-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Hover Effects ─────────────────────────────────────────────────────── */
.hover-glow {
  transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow);
}

.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hover-scale {
  transition: transform var(--transition-base);
}

.hover-scale:hover {
  transform: scale(1.03);
}

/* ── Link Underline Reveal ─────────────────────────────────────────────── */
.link-reveal {
  position: relative;
  display: inline-block;
}

.link-reveal::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width var(--transition-fast);
}

.link-reveal:hover::after {
  width: 100%;
}

.link-reveal:hover {
  text-decoration: none;
}

/* ── Pulse Dot (online/status indicator) ───────────────────────────────── */
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-success);
  display: inline-block;
  position: relative;
}

.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: var(--radius-full);
  background-color: var(--color-success);
  opacity: 0.5;
  animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ── Skeleton Loading Placeholder ──────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-bg-medium) 25%,
    var(--color-bg-light) 50%,
    var(--color-bg-medium) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
  border-radius: var(--radius-md);
}

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

/* ── Logo / Brand SVG pulse ────────────────────────────────────────────── */
.brand-pulse svg {
  animation: brand-glow 3s ease-in-out infinite;
}

@keyframes brand-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(0, 212, 255, 0.2)); }
  50%      { filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.5)); }
}

/* ── Particle Canvas ───────────────────────────────────────────────────── */
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
}

/* ── Glitch Text Effect ─────────────────────────────────────────────────── */
.glitch-text {
  position: relative;
  display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-white) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glitch-text::before {
  clip-path: inset(0 0 60% 0);
  animation: glitch-anim-1 3s infinite linear alternate-reverse;
}

.glitch-text::after {
  clip-path: inset(60% 0 0 0);
  animation: glitch-anim-2 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0%, 100% { transform: translate(0); }
  20%      { transform: translate(-2px, 1px); }
  40%      { transform: translate(2px, -1px); }
  60%      { transform: translate(-1px, 0); }
  80%      { transform: translate(1px, 0); }
}

@keyframes glitch-anim-2 {
  0%, 100% { transform: translate(0); }
  25%      { transform: translate(1px, -1px); }
  50%      { transform: translate(-1px, 0); }
  75%      { transform: translate(0, 1px); }
}

/* ── Typing Cursor ──────────────────────────────────────────────────────── */
.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background-color: var(--color-accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursor-blink 0.8s step-end infinite;
}

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

/* ── Scanning Line ──────────────────────────────────────────────────────── */
.scan-line {
  position: relative;
  overflow: hidden;
}

.scan-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.4), transparent);
  animation: scan-sweep 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes scan-sweep {
  0%   { top: 0; }
  100% { top: 100%; }
}

/* ── Morphing Gradient Background ───────────────────────────────────────── */
.bg-morph {
  position: relative;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-bg-dark) 50%, var(--color-primary) 100%);
}

.bg-morph::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 153, 204, 0.04) 0%, transparent 50%);
  animation: morph-shift 12s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes morph-shift {
  0%   {
    background:
      radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.04) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(0, 153, 204, 0.04) 0%, transparent 50%);
  }
  100% {
    background:
      radial-gradient(circle at 70% 20%, rgba(0, 212, 255, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 30% 80%, rgba(0, 153, 204, 0.03) 0%, transparent 50%);
  }
}

/* ── Reduced Motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .fade-up,
  .fade-in,
  .fade-left,
  .fade-right,
  .scale-in {
    opacity: 1;
    transform: none;
  }
}