/* ============================================================
   Keldivo — Site-Wide Animation Layer
   ----------------------------------------------------------
   This file contains ONLY animations: @keyframes definitions
   and the small utility/selector rules that trigger them. It
   does not define any layout, color, or typography — those all
   still live in style.css. Load this file AFTER style.css on
   every page (linked from both _Layout.cshtml and
   _BareLayout.cshtml).

   SECTION 1 — Site-wide (applies automatically to existing
               classes on every page: sidebar, topbar, cards,
               dropdowns, toasts, auth pages, etc.)
   SECTION 2 — Landing-page-only (kv-* utility classes that are
               wired manually into Views/Home/Index.cshtml)
   ============================================================ */

/* ============================================================
   SECTION 1 — SITE-WIDE
   ============================================================ */

/* ---------------------------------------------------------- */
/* Keyframes (site-wide)                                       */
/* ---------------------------------------------------------- */
@keyframes kv-slide-in-left {
  from { transform: translateX(-100%); opacity: 0.6; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes kv-slide-down {
  from { transform: translateY(-16px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes kv-pop-in {
  0%   { opacity: 0; transform: scale(0.94) translateY(10px); }
  100% { opacity: 1; transform: scale(1)    translateY(0); }
}
@keyframes kv-fade-in-simple {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kv-badge-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
@keyframes kv-avatar-ring {
  0%, 100% { box-shadow: 0 0 0 0 hsl(255 85% 60% / 0.3); }
  50%      { box-shadow: 0 0 0 4px hsl(255 85% 60% / 0); }
}

/* ---------------------------------------------------------- */
/* Page shell entrance — sidebar / topbar / main content        */
/* ---------------------------------------------------------- */
.sidebar {
  animation: kv-slide-in-left 0.35s cubic-bezier(.16,1,.3,1) both;
}
.topbar {
  animation: kv-slide-down 0.35s cubic-bezier(.16,1,.3,1) both;
}
.main-content > .page-content,
#dashboard-root > .main-content {
  animation: kv-fade-in-simple 0.4s ease both;
}

/* ---------------------------------------------------------- */
/* Sidebar nav links — subtle hover lift                        */
/* ---------------------------------------------------------- */
.sidebar-nav a {
  transition: background 0.15s, opacity 0.15s, transform 0.15s;
}
.sidebar-nav a:hover {
  transform: translateX(3px);
}
.nav-badge {
  animation: kv-badge-pulse 2.4s ease-in-out infinite;
}

/* ---------------------------------------------------------- */
/* Cards — soft lift + shadow on hover, site-wide                */
/* ---------------------------------------------------------- */
.glass-card,
.stat-card-gradient {
  transition: transform 0.25s cubic-bezier(.16,1,.3,1), box-shadow 0.25s ease;
}
.glass-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}
.stat-card-gradient:hover {
  transform: translateY(-3px) scale(1.01);
}

/* ---------------------------------------------------------- */
/* Dropdowns / notification panel — pop in when opened          */
/* ---------------------------------------------------------- */
.dropdown-content.active,
.notif-panel.active {
  animation: kv-pop-in 0.18s cubic-bezier(.16,1,.3,1) both;
  transform-origin: top;
}

/* ---------------------------------------------------------- */
/* Toasts — pop in (replaces plain slide-up from style.css)     */
/* ---------------------------------------------------------- */
.toast {
  animation: kv-pop-in 0.28s cubic-bezier(.16,1,.3,1) both;
}

/* ---------------------------------------------------------- */
/* Avatars — gentle glow ring on hover                           */
/* ---------------------------------------------------------- */
.avatar {
  transition: transform 0.2s ease;
}
.sidebar-user:hover .avatar,
.avatar:hover {
  animation: kv-avatar-ring 1.4s ease-in-out infinite;
}

/* ---------------------------------------------------------- */
/* Badges — pop in on mount                                     */
/* ---------------------------------------------------------- */
.badge {
  animation: kv-pop-in 0.3s cubic-bezier(.34,1.56,.64,1) both;
}

/* ---------------------------------------------------------- */
/* Buttons — universal shine on hover for primary CTAs           */
/* (kv-shine-btn itself is defined once, in Section 2 below)    */
/* ---------------------------------------------------------- */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: translateX(-120%) skewX(-15deg);
  pointer-events: none;
}
.btn-primary:hover::after {
  animation: kv-shine-sweep .9s ease;
}

/* ---------------------------------------------------------- */
/* Auth pages (Login / Register / Onboarding) — brand + form     */
/* ---------------------------------------------------------- */
.auth-brand {
  animation: kv-fade-in-simple 0.5s ease both;
}
.auth-form-wrap,
.auth-root form {
  animation: kv-fade-in-up 0.5s cubic-bezier(.16,1,.3,1) .1s both;
}

/* ---------------------------------------------------------- */
/* Page-level fade-in for bare pages (NotFound, etc.)            */
/* ---------------------------------------------------------- */
body > .page-content {
  animation: kv-fade-in-simple 0.4s ease both;
}

/* ============================================================
   SECTION 2 — LANDING PAGE ONLY (kv-* utility classes)
   ============================================================ */

/* ---------------------------------------------------------- */
/* Keyframes                                                   */
/* ---------------------------------------------------------- */
@keyframes kv-fade-in-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kv-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kv-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes kv-nav-drop {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kv-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes kv-shield-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(1.5deg); }
}
@keyframes kv-glow-breathe {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.08); }
}
@keyframes kv-badge-glow {
  0%, 100% { box-shadow: 0 0 0 0 hsl(255 85% 60% / 0.35); }
  50%      { box-shadow: 0 0 0 6px hsl(255 85% 60% / 0); }
}
@keyframes kv-shine-sweep {
  0%   { transform: translateX(-120%) skewX(-15deg); }
  100% { transform: translateX(220%) skewX(-15deg); }
}
@keyframes kv-bounce-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes kv-count-pop {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes kv-grid-drift {
  from { background-position: 0 0; }
  to   { background-position: 48px 48px; }
}

/* ---------------------------------------------------------- */
/* Scroll-reveal (paired with a tiny IntersectionObserver)     */
/* ---------------------------------------------------------- */
.kv-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.kv-reveal.kv-in-view {
  opacity: 1;
  transform: translateY(0);
}
.kv-delay-1.kv-in-view { transition-delay: .08s; }
.kv-delay-2.kv-in-view { transition-delay: .16s; }
.kv-delay-3.kv-in-view { transition-delay: .24s; }
.kv-delay-4.kv-in-view { transition-delay: .32s; }
.kv-delay-5.kv-in-view { transition-delay: .40s; }
.kv-delay-6.kv-in-view { transition-delay: .48s; }

/* ---------------------------------------------------------- */
/* Hero entrance — plays immediately on load, no scroll needed */
/* ---------------------------------------------------------- */
.kv-hero-nav      { animation: kv-nav-drop .6s cubic-bezier(.16,1,.3,1) both; }
.kv-hero-eyebrow   { animation: kv-fade-in-up .6s cubic-bezier(.16,1,.3,1) .05s both,
                                 kv-badge-glow 2.6s ease-in-out 1s infinite; }
.kv-hero-title     { animation: kv-fade-in-up .7s cubic-bezier(.16,1,.3,1) .15s both; }
.kv-hero-subtitle  { animation: kv-fade-in-up .7s cubic-bezier(.16,1,.3,1) .28s both; }
.kv-hero-actions   { animation: kv-fade-in-up .7s cubic-bezier(.16,1,.3,1) .40s both; }
.kv-hero-shield-wrap { animation: kv-scale-in .8s cubic-bezier(.16,1,.3,1) .50s both; }
.kv-hero-trust     { animation: kv-fade-in-up .7s cubic-bezier(.16,1,.3,1) .60s both; }

/* ---------------------------------------------------------- */
/* Animated gradient headline                                  */
/* ---------------------------------------------------------- */
.kv-gradient-animated {
  background-size: 200% auto;
  animation: kv-gradient-shift 6s ease-in-out infinite;
}

/* ---------------------------------------------------------- */
/* Background grid + glow motion                                */
/* ---------------------------------------------------------- */
.kv-grid-animated  { animation: kv-grid-drift 6s linear infinite; }
.kv-glow-breathing { animation: kv-glow-breathe 5s ease-in-out infinite; }

/* ---------------------------------------------------------- */
/* Shield: replaces the plain float with a livelier drift      */
/* ---------------------------------------------------------- */
.kv-shield-drift { animation: kv-shield-drift 6s ease-in-out infinite; }

/* ---------------------------------------------------------- */
/* Buttons: shine sweep on hover                                */
/* ---------------------------------------------------------- */
.kv-shine-btn { position: relative; overflow: hidden; }
.kv-shine-btn::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-120%) skewX(-15deg);
  pointer-events: none;
}
.kv-shine-btn:hover::after { animation: kv-shine-sweep .9s ease; }

/* ---------------------------------------------------------- */
/* Nav links: underline grows in on hover                       */
/* ---------------------------------------------------------- */
.kv-underline-link { position: relative; }
.kv-underline-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  height: 2px; width: 0;
  background: linear-gradient(90deg, hsl(255, 85%,65%), hsl(190, 95%,55%));
  transition: width .25s ease;
}
.kv-underline-link:hover::after { width: 100%; }

/* ---------------------------------------------------------- */
/* Logo mark: gentle wobble on hover                            */
/* ---------------------------------------------------------- */
.kv-logo-anim .logo-icon { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.kv-logo-anim:hover .logo-icon { transform: rotate(-8deg) scale(1.08); }

/* ---------------------------------------------------------- */
/* Feature card icons: soft bounce on card hover                */
/* ---------------------------------------------------------- */
.feature-card:hover .feature-icon-wrap,
.step-card:hover .feature-icon-wrap {
  animation: kv-bounce-soft .6s ease;
}

/* ---------------------------------------------------------- */
/* Stat numbers: pop in once revealed                           */
/* ---------------------------------------------------------- */
.kv-stat-pop.kv-in-view .kv-stat-value {
  animation: kv-count-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}

/* ---------------------------------------------------------- */
/* Trust bubbles: check badge pops in when it mounts            */
/* ---------------------------------------------------------- */
.bubble-check { animation: kv-count-pop .4s ease both; }

/* ---------------------------------------------------------- */
/* Highlighted card — points at the specific record a          */
/* notification link (e.g. Requests?highlight=KD-0011) was      */
/* about, so the person can immediately see which one it means. */
/* ---------------------------------------------------------- */
@keyframes kv-highlight-glow {
  0%, 100% { box-shadow: 0 0 0 2px hsl(263 70% 60% / 0.5), 0 0 24px hsl(263 70% 60% / 0.25); }
  50%      { box-shadow: 0 0 0 2px hsl(263 70% 60% / 0.9), 0 0 36px hsl(263 70% 60% / 0.45); }
}
.deal-card-highlighted {
  animation: kv-highlight-glow 1.6s ease-in-out 3;
  border-color: hsl(263 70% 60% / 0.6) !important;
}

/* ---------------------------------------------------------- */
/* Respect reduced-motion preference                            */
/* ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kv-reveal, .kv-hero-nav, .kv-hero-eyebrow, .kv-hero-title, .kv-hero-subtitle,
  .kv-hero-actions, .kv-hero-shield-wrap, .kv-hero-trust,
  .kv-gradient-animated, .kv-grid-animated, .kv-glow-breathing, .kv-shield-drift,
  .bubble-check,
  .sidebar, .topbar, .main-content > .page-content, #dashboard-root > .main-content,
  .nav-badge, .dropdown-content.active, .notif-panel.active, .toast, .badge,
  .auth-brand, .auth-form-wrap, .auth-root form, body > .page-content,
  .sidebar-user:hover .avatar, .avatar:hover {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}