/* ==========================================================================
   OGNER — ANIMATIONS
   --------------------------------------------------------------------------
   Reusable animation utilities. All animations respect prefers-reduced-motion.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes k-fade-in        { from { opacity: 0; } to { opacity: 1; } }
@keyframes k-fade-out       { from { opacity: 1; } to { opacity: 0; } }
@keyframes k-fade-in-up     { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes k-fade-in-down   { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes k-fade-in-left   { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes k-fade-in-right  { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes k-slide-up       { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes k-slide-down     { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes k-slide-left     { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes k-slide-right    { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes k-scale-in       { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes k-scale-out      { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }
@keyframes k-spin           { to { transform: rotate(360deg); } }
@keyframes k-pulse          { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes k-pulse-ring     {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 currentColor; }
  70%  { transform: scale(1);    box-shadow: 0 0 0 12px transparent; }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 transparent; }
}
@keyframes k-bounce         {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50%      { transform: translateY(-15%); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
@keyframes k-shimmer        {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
@keyframes k-progress       {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
@keyframes k-float          {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes k-flip-x         { 0% { transform: rotateX(0); } 50% { transform: rotateX(180deg); } 100% { transform: rotateX(360deg); } }
@keyframes k-flip-y         { 0% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes k-zoom-in        { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes k-zoom-out       { from { transform: scale(1); } to { transform: scale(0); } }
@keyframes k-accordion-down {
  from { height: 0; opacity: 0; }
  to   { height: var(--radix-accordion-content-height, auto); opacity: 1; }
}
@keyframes k-accordion-up   {
  from { height: var(--radix-accordion-content-height, auto); opacity: 1; }
  to   { height: 0; opacity: 0; }
}
@keyframes k-collapsible-down {
  from { height: 0; opacity: 0; }
  to   { height: var(--radix-collapsible-content-height, auto); opacity: 1; }
}
@keyframes k-collapsible-up {
  from { height: var(--radix-collapsible-content-height, auto); opacity: 1; }
  to   { height: 0; opacity: 0; }
}
@keyframes k-caret-blink    {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
@keyframes k-shake          {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
@keyframes k-wiggle         {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-2deg); }
  75%      { transform: rotate(2deg); }
}
@keyframes k-typing-dot     {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
@keyframes k-confetti       {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes k-glow-pulse     {
  0%, 100% { box-shadow: 0 0 12px rgba(253, 173, 1, 0.30); }
  50%      { box-shadow: 0 0 32px rgba(253, 173, 1, 0.70); }
}
@keyframes k-marquee        {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes k-orbit          {
  from { transform: rotate(0deg) translateX(40px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(40px) rotate(-360deg); }
}
@keyframes k-wave           {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}


/* --------------------------------------------------------------------------
   2. ANIMATION UTILITIES
   -------------------------------------------------------------------------- */
.k-anim-fade-in        { animation: k-fade-in 200ms var(--ease-default) both; }
.k-anim-fade-out       { animation: k-fade-out 200ms var(--ease-default) both; }
.k-anim-fade-in-up     { animation: k-fade-in-up 250ms var(--ease-emphasized) both; }
.k-anim-fade-in-down   { animation: k-fade-in-down 250ms var(--ease-emphasized) both; }
.k-anim-fade-in-left   { animation: k-fade-in-left 250ms var(--ease-emphasized) both; }
.k-anim-fade-in-right  { animation: k-fade-in-right 250ms var(--ease-emphasized) both; }
.k-anim-slide-up       { animation: k-slide-up 300ms var(--ease-emphasized) both; }
.k-anim-slide-down     { animation: k-slide-down 300ms var(--ease-emphasized) both; }
.k-anim-slide-left     { animation: k-slide-left 300ms var(--ease-emphasized) both; }
.k-anim-slide-right    { animation: k-slide-right 300ms var(--ease-emphasized) both; }
.k-anim-scale-in       { animation: k-scale-in 200ms var(--ease-emphasized) both; }
.k-anim-scale-out      { animation: k-scale-out 200ms var(--ease-default) both; }
.k-anim-spin           { animation: k-spin 1s linear infinite; }
.k-anim-spin-slow      { animation: k-spin 3s linear infinite; }
.k-anim-pulse          { animation: k-pulse 2s var(--ease-default) infinite; }
.k-anim-pulse-ring     { animation: k-pulse-ring 1.5s var(--ease-default) infinite; }
.k-anim-bounce         { animation: k-bounce 1s var(--ease-default) infinite; }
.k-anim-float          { animation: k-float 3s var(--ease-default) infinite; }
.k-anim-shimmer        { animation: k-shimmer 2s linear infinite; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%); background-size: 1000px 100%; }
.k-anim-glow-pulse     { animation: k-glow-pulse 2.5s var(--ease-default) infinite; }
.k-anim-flip-x         { animation: k-flip-x 600ms var(--ease-default) both; }
.k-anim-flip-y         { animation: k-flip-y 600ms var(--ease-default) both; }
.k-anim-zoom-in        { animation: k-zoom-in 200ms var(--ease-emphasized) both; }
.k-anim-shake          { animation: k-shake 400ms var(--ease-default) both; }
.k-anim-wiggle         { animation: k-wiggle 600ms var(--ease-default) both; }
.k-anim-caret-blink    { animation: k-caret-blink 1s var(--ease-default) infinite; }
.k-anim-marquee        { animation: k-marquee 30s linear infinite; }
.k-anim-orbit          { animation: k-orbit 4s linear infinite; }
.k-anim-wave           { animation: k-wave 1.2s var(--ease-default) infinite; }
.k-anim-progress       { animation: k-progress 1.5s ease-in-out infinite; }


/* --------------------------------------------------------------------------
   3. TRANSITION DELAYS / DURATION
   -------------------------------------------------------------------------- */
.k-anim-delay-75    { animation-delay: 75ms; }
.k-anim-delay-100   { animation-delay: 100ms; }
.k-anim-delay-150   { animation-delay: 150ms; }
.k-anim-delay-200   { animation-delay: 200ms; }
.k-anim-delay-300   { animation-delay: 300ms; }
.k-anim-delay-500   { animation-delay: 500ms; }

.k-anim-duration-100 { animation-duration: 100ms; }
.k-anim-duration-200 { animation-duration: 200ms; }
.k-anim-duration-300 { animation-duration: 300ms; }
.k-anim-duration-500 { animation-duration: 500ms; }
.k-anim-duration-1000 { animation-duration: 1000ms; }


/* --------------------------------------------------------------------------
   4. STAGGER  (apply to children)
   -------------------------------------------------------------------------- */
.k-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.k-stagger > *:nth-child(2)  { animation-delay: 50ms; }
.k-stagger > *:nth-child(3)  { animation-delay: 100ms; }
.k-stagger > *:nth-child(4)  { animation-delay: 150ms; }
.k-stagger > *:nth-child(5)  { animation-delay: 200ms; }
.k-stagger > *:nth-child(6)  { animation-delay: 250ms; }
.k-stagger > *:nth-child(7)  { animation-delay: 300ms; }
.k-stagger > *:nth-child(8)  { animation-delay: 350ms; }
.k-stagger > *:nth-child(9)  { animation-delay: 400ms; }
.k-stagger > *:nth-child(10) { animation-delay: 450ms; }
.k-stagger > *:nth-child(n+11) { animation-delay: 500ms; }


/* --------------------------------------------------------------------------
   5. PAGE TRANSITIONS
   -------------------------------------------------------------------------- */
.k-page-enter {
  animation: k-fade-in-up 300ms var(--ease-emphasized) both;
}
.k-page-leave {
  animation: k-fade-out 200ms var(--ease-default) both;
}


/* --------------------------------------------------------------------------
   6. SKELETON SHIMMER (extends .k-skeleton)
   -------------------------------------------------------------------------- */
.k-skeleton {
  background: linear-gradient(90deg, var(--surface-container-low) 0%, var(--surface-container-high) 50%, var(--surface-container-low) 100%);
  background-size: 200% 100%;
  animation: k-shimmer 1.5s linear infinite;
  border-radius: var(--radius);
  display: block;
}


/* --------------------------------------------------------------------------
   7. TYPING DOTS
   -------------------------------------------------------------------------- */
.k-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem 0.75rem;
}
.k-typing-dot {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  animation: k-typing-dot 1.2s var(--ease-default) infinite;
  opacity: 0.4;
}
.k-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.k-typing-dot:nth-child(3) { animation-delay: 0.3s; }


/* --------------------------------------------------------------------------
   8. LOADING OVERLAY
   -------------------------------------------------------------------------- */
.k-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  z-index: 10;
  animation: k-fade-in 200ms var(--ease-default);
}
.dark .k-loading-overlay {
  background: rgba(0, 0, 0, 0.50);
}


/* --------------------------------------------------------------------------
   9. SCROLL REVEAL  (use IntersectionObserver)
   -------------------------------------------------------------------------- */
.k-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms var(--ease-default), transform 400ms var(--ease-emphasized);
}
.k-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.k-reveal-left { transform: translateX(-8px); }
.k-reveal-left.is-visible { transform: translateX(0); }
.k-reveal-right { transform: translateX(8px); }
.k-reveal-right.is-visible { transform: translateX(0); }
.k-reveal-scale { transform: scale(0.95); }
.k-reveal-scale.is-visible { transform: scale(1); }


/* --------------------------------------------------------------------------
   10. ANIMATION RESPECT 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;
  }
  .k-anim-fade-in, .k-anim-fade-in-up, .k-anim-fade-in-down, .k-anim-fade-in-left, .k-anim-fade-in-right,
  .k-anim-slide-up, .k-anim-slide-down, .k-anim-slide-left, .k-anim-slide-right,
  .k-anim-scale-in, .k-anim-zoom-in, .k-anim-flip-x, .k-anim-flip-y,
  .k-reveal, .k-reveal-left, .k-reveal-right, .k-reveal-scale {
    animation: none;
    opacity: 1;
    transform: none;
  }
}