/* ==========================================================================
   TR Store - Modern Animations & Micro-interactions
   Shared animation library for the whole license system.
   Respects prefers-reduced-motion for accessibility.
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes tr-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes tr-fade-up {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes tr-fade-down {
  from { opacity: 0; transform: translate3d(0, -24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes tr-fade-left {
  from { opacity: 0; transform: translate3d(-28px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes tr-fade-right {
  from { opacity: 0; transform: translate3d(28px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

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

@keyframes tr-pop-in {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes tr-blur-in {
  from { opacity: 0; filter: blur(12px); transform: translate3d(0,16px,0); }
  to   { opacity: 1; filter: blur(0);    transform: translate3d(0,0,0); }
}

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

@keyframes tr-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--rgba-6-182-212-0-35); }
  50%      { box-shadow: 0 0 0 10px var(--rgba-6-182-212-0); }
}

@keyframes tr-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes tr-float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(1deg); }
}

@keyframes tr-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes tr-aurora-drift {
  0%   { transform: translate3d(0,0,0) rotate(0deg); opacity: 0.55; }
  50%  { transform: translate3d(40px,-20px,0) rotate(4deg); opacity: 0.85; }
  100% { transform: translate3d(0,0,0) rotate(0deg); opacity: 0.55; }
}

@keyframes tr-spin-slow {
  to { transform: rotate(360deg); }
}

@keyframes tr-count-pop {
  0%   { transform: scale(0.96); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes tr-icon-bounce {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-3px); }
  60%      { transform: translateY(1px); }
}

@keyframes tr-border-trail {
  0%   { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}

/* ---------- Page entrance ---------- */

/* Hero text & CTA entrance */
body.tr-anim-ready .hero h1 {
  animation: tr-blur-in 0.9s cubic-bezier(0.22,1,0.36,1) both;
}

body.tr-anim-ready .hero > div > p,
body.tr-anim-ready .hero p:not(.hero-badge) {
  animation: tr-fade-up 0.9s cubic-bezier(0.22,1,0.36,1) 0.15s both;
}

body.tr-anim-ready .hero-badge {
  animation: tr-pop-in 0.7s cubic-bezier(0.34,1.56,0.64,1) both;
}

body.tr-anim-ready .hero-actions {
  animation: tr-fade-up 0.9s cubic-bezier(0.22,1,0.36,1) 0.3s both;
}

body.tr-anim-ready .validation-demo {
  animation: tr-fade-up 0.9s cubic-bezier(0.22,1,0.36,1) 0.5s both;
}

body.tr-anim-ready .stats-row .stat-item {
  animation: tr-fade-up 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
body.tr-anim-ready .stats-row .stat-item:nth-child(1) { animation-delay: 0.55s; }
body.tr-anim-ready .stats-row .stat-item:nth-child(2) { animation-delay: 0.65s; }
body.tr-anim-ready .stats-row .stat-item:nth-child(3) { animation-delay: 0.75s; }
body.tr-anim-ready .stats-row .stat-item:nth-child(4) { animation-delay: 0.85s; }

/* Hero glow ambient animation */
.hero-glow {
  animation: tr-aurora-drift 14s ease-in-out infinite;
}

/* Sidebar slide in */
body.tr-anim-ready .sidebar {
  animation: tr-fade-right 0.55s cubic-bezier(0.22,1,0.36,1) both;
}

body.tr-anim-ready .page-header {
  animation: tr-fade-down 0.55s cubic-bezier(0.22,1,0.36,1) both;
}

/* Nav items stagger */
body.tr-anim-ready .sidebar-nav .nav-item {
  opacity: 0;
  animation: tr-fade-right 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
body.tr-anim-ready .sidebar-nav .nav-item:nth-child(1) { animation-delay: 0.12s; }
body.tr-anim-ready .sidebar-nav .nav-item:nth-child(2) { animation-delay: 0.18s; }
body.tr-anim-ready .sidebar-nav .nav-item:nth-child(3) { animation-delay: 0.24s; }
body.tr-anim-ready .sidebar-nav .nav-item:nth-child(4) { animation-delay: 0.30s; }
body.tr-anim-ready .sidebar-nav .nav-item:nth-child(5) { animation-delay: 0.36s; }
body.tr-anim-ready .sidebar-nav .nav-item:nth-child(6) { animation-delay: 0.42s; }
body.tr-anim-ready .sidebar-nav .nav-item:nth-child(7) { animation-delay: 0.48s; }
body.tr-anim-ready .sidebar-nav .nav-item:nth-child(8) { animation-delay: 0.54s; }

/* Dashboard stats cards stagger (only at entrance, not scroll) */
body.tr-anim-ready .main-content .stats-grid .stat-card {
  opacity: 0;
  animation: tr-fade-up 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
body.tr-anim-ready .main-content .stats-grid .stat-card:nth-child(1) { animation-delay: 0.08s; }
body.tr-anim-ready .main-content .stats-grid .stat-card:nth-child(2) { animation-delay: 0.16s; }
body.tr-anim-ready .main-content .stats-grid .stat-card:nth-child(3) { animation-delay: 0.24s; }
body.tr-anim-ready .main-content .stats-grid .stat-card:nth-child(4) { animation-delay: 0.32s; }
body.tr-anim-ready .main-content .stats-grid .stat-card:nth-child(5) { animation-delay: 0.40s; }
body.tr-anim-ready .main-content .stats-grid .stat-card:nth-child(6) { animation-delay: 0.48s; }

/* ---------- Scroll reveal (managed by animations.js) ---------- */
.tr-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
              transform 0.7s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}

.tr-reveal.tr-reveal-left  { transform: translate3d(-28px, 0, 0); }
.tr-reveal.tr-reveal-right { transform: translate3d(28px, 0, 0); }
.tr-reveal.tr-reveal-scale { transform: scale(0.94); }

.tr-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Staggered scroll reveal for grids */
.tr-reveal.feature-card,
.tr-reveal.pricing-card,
.tr-reveal.step,
.tr-reveal.stat-card {
  transition-duration: 0.7s;
}

/* ---------- Interactive micro-animations ---------- */

/* Buttons: subtle press + shine (no ripple) */

/* Feature / pricing / stat cards lift */
.feature-card,
.pricing-card,
.stat-card,
.card {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.3s ease,
              border-color 0.3s ease,
              background 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
}

/* Feature card icon float on hover */
.feature-card:hover .feature-icon,
.pricing-card:hover .pricing-price {
  animation: tr-float 1.4s ease-in-out infinite;
}

/* Stat icons pop on hover */
.stat-card:hover .stat-icon {
  animation: tr-icon-bounce 0.6s ease;
}

/* Nav item icon slight bounce */
.nav-item:hover .nav-icon {
  animation: tr-icon-bounce 0.55s ease;
}

/* Pricing card featured animated border */
.pricing-card.featured {
  position: relative;
}
.pricing-card.featured::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg,
    var(--rgba-6-182-212-0-0),
    var(--rgba-6-182-212-0-55),
    var(--rgba-34-211-238-0-0));
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(var(--hex-000) 0 0) content-box, linear-gradient(var(--hex-000) 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: tr-border-trail 4s linear infinite;
}
.pricing-card.featured:hover::after { opacity: 1; }

/* Sidebar logo float on hover */
.sidebar-logo-icon {
  transition: transform 0.3s ease;
}
.sidebar-logo:hover .sidebar-logo-icon {
  animation: tr-float 2s ease-in-out infinite;
}

/* Brand logo hover on landing */
.landing-logo-icon {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.landing-logo:hover .landing-logo-icon {
  transform: rotate(-8deg) scale(1.08);
}

/* Nav active indicator subtle glow pulse */
.nav-item.active::before {
  animation: tr-pulse-glow 2.4s ease-in-out infinite;
}

/* Table rows: smooth highlight + row slide */
tbody tr {
  transition: background-color 0.2s ease, transform 0.2s ease;
}
tbody tr:hover {
  transform: translateX(2px);
}

/* Inputs: smooth focus grow */
.search-input,
.form-input,
.filter-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  transition: border-color 0.2s ease,
              box-shadow 0.2s ease,
              background 0.25s ease,
              transform 0.15s ease;
}
.search-input:focus,
.form-input:focus,
.filter-select:focus,
input:focus,
textarea:focus,
select:focus {
  transform: translateY(-1px);
}

/* License key copy-flash */
.license-key {
  transition: transform 0.2s ease,
              background 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.3s ease,
              color 0.2s ease;
}
.license-key:hover { transform: translateY(-1px); }
.license-key.tr-copied {
  animation: tr-pop-in 0.45s cubic-bezier(0.34,1.56,0.64,1);
  background: var(--rgba-52-211-153-0-15);
  border-color: var(--rgba-52-211-153-0-45);
  color: var(--hex-34d399);
}

/* Badges subtle hover */
.badge {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.badge:hover { transform: translateY(-1px); }

/* Live status indicator pulse */
#live-status .fa-circle,
.badge-success .fa-circle {
  animation: tr-pulse-glow 1.8s ease-in-out infinite;
  border-radius: 50%;
}

/* ---------- Toast / Modal polish ---------- */
.toast {
  animation: tr-fade-left 0.35s cubic-bezier(0.34,1.56,0.64,1) both !important;
}

/* Modal inner fade */
.modal-overlay.active .modal > * {
  animation: tr-fade-up 0.35s cubic-bezier(0.22,1,0.36,1) both;
}
.modal-overlay.active .modal > *:nth-child(1) { animation-delay: 0.05s; }
.modal-overlay.active .modal > *:nth-child(2) { animation-delay: 0.12s; }
.modal-overlay.active .modal > *:nth-child(3) { animation-delay: 0.19s; }

/* ---------- Skeleton / shimmer loader ---------- */
.tr-skeleton {
  background: linear-gradient(90deg,
    var(--rgba-6-182-212-0-06) 0%,
    var(--rgba-6-182-212-0-18) 50%,
    var(--rgba-6-182-212-0-06) 100%);
  background-size: 200% 100%;
  animation: tr-shimmer 1.4s linear infinite;
  border-radius: 8px;
  color: transparent !important;
}

html[data-theme="light"] .tr-skeleton {
  background: linear-gradient(90deg,
    var(--rgba-8-145-178-0-08) 0%,
    var(--rgba-8-145-178-0-22) 50%,
    var(--rgba-8-145-178-0-08) 100%);
  background-size: 200% 100%;
}

/* ---------- Animated gradient text for section titles ---------- */
.hero h1 span,
.section-header h2 span {
  background: linear-gradient(120deg, var(--hex-22d3ee), var(--hex-06b6d4), var(--hex-22d3ee));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tr-gradient-shift 6s ease-in-out infinite;
}

/* ---------- Page transitions ---------- */
body.tr-page-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ---------- Modal overlay entrance enhancement ---------- */
.modal-overlay {
  transition: opacity 0.25s ease, backdrop-filter 0.25s ease;
}

/* ---------- Link underline grow ---------- */
.landing-nav-links a,
.landing-footer a {
  position: relative;
  transition: color 0.2s ease;
}
.landing-nav-links a::after,
.landing-footer a::after {
  content: '';
  position: absolute;
  left: 10%; right: 10%;
  bottom: -5px;
  height: 2px;
  background: linear-gradient(90deg, var(--hex-22d3ee), var(--hex-06b6d4));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.landing-nav-links a:hover::after,
.landing-footer a:hover::after {
  transform: scaleX(1);
}

/* ---------- Floating helper ---------- */
.tr-float { animation: tr-float-slow 5s ease-in-out infinite; }

/* ---------- Animated number counter assist ---------- */
.tr-count-animate {
  display: inline-block;
  animation: tr-count-pop 0.45s cubic-bezier(0.34,1.56,0.64,1);
}

/* ---------- Accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .tr-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}