/*
 * Media Toolz — Optimized Animation System
 * Location: assets/css/animations.css
 * Highly optimized for mobile rendering speed and page responsiveness.
 * Focuses on GPU-accelerated transition/opacity animations; disables infinite loops.
 */

/* ===========================================
   1. GPU Utility
   =========================================== */
.gpu {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ===========================================
   2. Scroll Progress Bar
   =========================================== */
#scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #ff0000 0%, #ff5555 50%, #ff9999 100%);
  z-index: 10002;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
  transition: width 0.08s linear;
  transform-origin: left center;
}

/* ===========================================
   3. Page Transition Overlay
   =========================================== */
#page-transition-overlay {
  position: fixed;
  inset: 0;
  background: #080808;
  z-index: 10001;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
#page-transition-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* ===========================================
   4. Heavy Hero Animations (Disabled for Speed)
   =========================================== */
#hero-particles,
#hero-glow,
.hero-orb {
  display: none !important;
}

/* ===========================================
   5. Hero — Staggered Fade-In Sequence
   =========================================== */
.hero-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.hp-hero-inner {
  animation: none !important;
}

/* ===========================================
   6. Hero Badge (Simplified, No continuous glow/float)
   =========================================== */
.hp-badge {
  animation: none !important;
  box-shadow: 0 2px 8px rgba(255, 0, 0, 0.08) !important;
}

/* ===========================================
   7. Navbar — Enhanced Glassmorphism
   =========================================== */
.navbar {
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  transition: background-color 0.3s ease,
              box-shadow 0.3s ease,
              height 0.3s ease !important;
}
.navbar.scrolled {
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  background-color: rgba(8, 8, 8, 0.92) !important;
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* ===========================================
   8. Navbar — Animated Sliding Underline
   =========================================== */
.nav-underline {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #ff0000, #ff6b6b);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease;
  z-index: 1;
}
.nav-menu { position: relative; }

/* ===========================================
   9. Mobile Menu — Slide-in from Right
   =========================================== */
@media (max-width: 768px) {
  /* Nav links stagger fade-in when menu opens */
  .nav-menu .nav-link,
  .nav-menu .nav-contact-mobile,
  .nav-menu .btn,
  .nav-menu .btn-primary,
  .nav-menu .nav-cta-mobile {
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.22s ease, transform 0.22s ease, background 0.15s ease, color 0.15s ease !important;
  }
  .nav-menu.active .nav-link,
  .nav-menu.open .nav-link,
  .nav-menu.active .nav-contact-mobile,
  .nav-menu.open .nav-contact-mobile,
  .nav-menu.active .btn,
  .nav-menu.open .btn,
  .nav-menu.active .btn-primary,
  .nav-menu.open .btn-primary,
  .nav-menu.active .nav-cta-mobile,
  .nav-menu.open .nav-cta-mobile {
    opacity: 1;
    transform: translateX(0) !important;
  }
  .nav-menu.active .nav-link:nth-child(1), .nav-menu.open .nav-link:nth-child(1) { transition-delay: 0.04s !important; }
  .nav-menu.active .nav-link:nth-child(2), .nav-menu.open .nav-link:nth-child(2) { transition-delay: 0.08s !important; }
  .nav-menu.active .nav-link:nth-child(3), .nav-menu.open .nav-link:nth-child(3) { transition-delay: 0.12s !important; }
  .nav-menu.active .nav-link:nth-child(4), .nav-menu.open .nav-link:nth-child(4) { transition-delay: 0.16s !important; }
  .nav-menu.active .nav-link:nth-child(5), .nav-menu.open .nav-link:nth-child(5) { transition-delay: 0.20s !important; }
  .nav-menu.active .nav-link:nth-child(6), .nav-menu.open .nav-link:nth-child(6) { transition-delay: 0.24s !important; }
  .nav-menu.active .nav-link:nth-child(7), .nav-menu.open .nav-link:nth-child(7) { transition-delay: 0.28s !important; }
  .nav-menu.active .nav-contact-mobile,   .nav-menu.open .nav-contact-mobile,
  .nav-menu.active .btn,                  .nav-menu.open .btn,
  .nav-menu.active .btn-primary,          .nav-menu.open .btn-primary,
  .nav-menu.active .nav-cta-mobile,       .nav-menu.open .nav-cta-mobile          { transition-delay: 0.32s !important; }
}

/* ===========================================
   10. Heavy Card Glows & Tilts (Disabled)
   =========================================== */
.card-cursor-glow,
.border-trace-wrapper,
.shimmer-overlay {
  display: none !important;
}

/* ===========================================
   11. Tool Cards — Simple Icon Scale on Hover
   =========================================== */
.hp-tool-card .hp-card-icon,
.at-card .at-card-icon {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hp-tool-card:hover .hp-card-icon,
.at-card:hover .at-card-icon {
  transform: scale(1.05); /* very small, lightweight scale */
}

/* ===========================================
   12. Buttons — Ripple Effect
   =========================================== */
@keyframes rippleAnim {
  0%   { transform: scale(0); opacity: 0.4; }
  100% { transform: scale(4); opacity: 0; }
}
.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-left: -8px;
  pointer-events: none;
  animation: rippleAnim 0.5s linear forwards;
  z-index: 20;
}

/* ===========================================
   13. Buttons — Gradient Sweep (CSS only)
   =========================================== */
@keyframes sweepAnim {
  0%   { transform: translateX(-120%) skewX(-15deg); }
  100% { transform: translateX(280%)  skewX(-15deg); }
}
.hp-btn-primary,
.btn.btn-primary {
  position: relative;
  overflow: hidden;
}
.hp-btn-primary::after,
.btn.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 38%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: translateX(-120%) skewX(-15deg);
  pointer-events: none;
  border-radius: inherit;
}
.hp-btn-primary:hover::after,
.btn.btn-primary:hover::after {
  animation: sweepAnim 0.55s ease forwards;
}

/* Button glow pulse is disabled for better paint times */
.hp-btn-primary {
  animation: none !important;
}

/* ===========================================
   14. Search — Keyboard Shortcut Hint
   =========================================== */
.search-kbd-hint {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}
.search-kbd-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.68rem;
  font-family: inherit;
  color: #666;
  line-height: 1.5;
}

/* ===========================================
   15. Command Palette (Ctrl+K)
   =========================================== */
#cmd-palette {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
#cmd-palette.open {
  opacity: 1;
  pointer-events: all;
}
#cmd-palette-inner {
  width: calc(100% - 40px);
  max-width: 600px;
  background: #141414;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
#cmd-palette.open #cmd-palette-inner {
  transform: translateY(0) scale(1);
}
.cmd-header {
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.cmd-search-icon-wrap {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #555;
  font-size: 1rem;
  pointer-events: none;
}
#cmd-search-input {
  width: 100%;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  padding: 18px 50px;
  outline: none;
  box-sizing: border-box;
}
#cmd-search-input::placeholder { color: #555; }
.cmd-esc-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  color: #666;
  font-size: 0.7rem;
  padding: 3px 8px;
  cursor: pointer;
}
#cmd-results {
  max-height: 350px;
  overflow-y: auto;
  padding: 8px;
}
#cmd-results::-webkit-scrollbar {
  width: 6px;
}
#cmd-results::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.01);
  border-radius: 10px;
}
#cmd-results::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
}
#cmd-results::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}
.cmd-group-label {
  padding: 8px 12px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
}
.cmd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #ccc;
  outline: none;
  transition: background 0.1s ease;
}
.cmd-item:hover,
.cmd-item.sel { background: rgba(255,255,255,0.06); color: #fff; }
.cmd-item-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  background: rgba(255,255,255,0.05);
  flex-shrink: 0;
  color: #aaa;
}
.cmd-item-icon i { line-height: 1; }
.cmd-item-info { flex: 1; min-width: 0; }
.cmd-item-name { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-item-cat { font-size: 0.72rem; color: #666; }
.cmd-item-badge {
  font-size: 0.65rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  flex-shrink: 0;
}

/* ── Command Palette Footer hints ── */
.cmd-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.2);
}
.cmd-footer-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: #555;
  white-space: nowrap;
}
.cmd-footer-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.68rem;
  font-family: inherit;
  color: #777;
  line-height: 1.6;
  min-width: 20px;
}


/* ===========================================
   16. Scroll Reveal (Pure Opacity & TranslateY)
   =========================================== */
.reveal-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-item.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================
   17. Trending Carousel & Section Dividers
   =========================================== */
.trending-carousel-wrapper {
  position: relative;
  overflow: hidden;
  padding: 4px 0 8px;
  width: 100%;
}
.trending-carousel-wrapper::before,
.trending-carousel-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.trending-carousel-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #0a0a0a 0%, transparent 100%);
}
.trending-carousel-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #0a0a0a 0%, transparent 100%);
}
.trending-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: trendingScroll 32s linear infinite;
  will-change: transform;
}
.trending-track.paused {
  animation-play-state: paused;
}
@keyframes trendingScroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
.trending-track .trending-card {
  flex-shrink: 0;
  width: 268px;
}
.section-divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.05);
}
.section-divider::after {
  display: none !important;
}

/* ===========================================
   18. Footer (Subtle Pulse Disabled)
   =========================================== */
.footer::before {
  display: none !important;
}
.footer-link {
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
}
.social-icon {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease !important;
}
.social-icon:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: none !important;
}

/* ===========================================
   19. Filter Pills
   =========================================== */
.at-filter-btn {
  transition: background 0.2s ease,
              color 0.2s ease,
              transform 0.15s ease !important;
}
.at-filter-btn:active { transform: scale(0.96) !important; }
.at-pill {
  transition: transform 0.15s ease;
}
.at-pill:hover { transform: translateY(-2px); }

/* ===========================================
   20. Stats Counter
   =========================================== */
@keyframes counterPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.counter-popped {
  animation: counterPop 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  display: inline-block;
}

/* ===========================================
   21. All-Tools Cards — Entrance Animation
   =========================================== */
@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.at-card.card-anim {
  animation: cardEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ===========================================
   22. Tab Content — Smooth Transition
   =========================================== */
@keyframes tabContentFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hp-tab-content.active {
  animation: tabContentFade 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ===========================================
   23. Reduced Motion Support
   =========================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-reveal { opacity: 1 !important; transform: none !important; }
  .reveal-item { opacity: 1 !important; transform: none !important; }
}

/* ===========================================
   24. Mobile Optimisations (<768px)
   ─ Only suppress HEAVY effects.
   ─ Keep all lightweight animations active.
   =========================================== */
@media (max-width: 768px) {

  /* ─ Trending carousel: narrower fade edges, same animation ─ */
  .trending-carousel-wrapper::before,
  .trending-carousel-wrapper::after {
    width: 32px;
  }

  /* ─ Slightly faster scroll reveals on mobile ─ */
  .reveal-item {
    transition-duration: 0.4s !important;
  }

  /* ─ Slightly faster hero fade on mobile ─ */
  .hero-reveal {
    transition-duration: 0.5s !important;
  }

  /* ─ Card entrance slightly faster on mobile ─ */
  .at-card.card-anim {
    animation-duration: 0.3s !important;
  }

  /* ─ Tab fade slightly faster on mobile ─ */
  .hp-tab-content.active {
    animation-duration: 0.2s !important;
  }

  /* ─ Disable expensive backdrop blurs on very small screens ─ */
  @supports (backdrop-filter: none) {
    .navbar {
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }
  }

  /* ─ Reduce shadow intensity on mobile ─ */
  .hp-tool-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  }
  .at-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  }
}