/* ============================================================
   BOOKSBYAMA — animations.css
   All keyframes, scroll-reveal classes, hover animations,
   page transitions, and micro-interactions.
   Depends on: variables.css
============================================================ */

/* ─── KEYFRAMES ─────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

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

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

@keyframes floatX {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(8px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.04); opacity: .85; }
}

@keyframes pulseSoft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 93, 169, 0.25); }
  50%       { box-shadow: 0 0 0 12px rgba(99, 93, 169, 0); }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

@keyframes scaleInBounce {
  0%   { transform: scale(0.85); opacity: 0; }
  70%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

@keyframes drawLine {
  from { width: 0; }
  to   { width: 100%; }
}

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

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(-4deg); }
  75%       { transform: rotate(4deg); }
}

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

/* ─── SCROLL REVEAL — initial hidden state ──────────────── */
/*
   Applied by scroll.js via IntersectionObserver.
   Elements get .reveal added by markup, .revealed when visible.
*/
.reveal {
  opacity: 0;
  transition:
    opacity   var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.revealed { opacity: 1; transform: none !important; }

.reveal-up      { transform: translateY(32px); }
.reveal-down    { transform: translateY(-24px); }
.reveal-left    { transform: translateX(-32px); }
.reveal-right   { transform: translateX(32px); }
.reveal-scale   { transform: scale(0.92); }
.reveal-fade    { /* opacity-only, no transform */ }

/* Staggered delays */
.reveal-delay-1 { transition-delay: 80ms;  }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }
.reveal-delay-5 { transition-delay: 400ms; }
.reveal-delay-6 { transition-delay: 480ms; }

/* ─── ANIMATION UTILITY CLASSES ─────────────────────────── */
.anim-fade-in     { animation: fadeIn     var(--duration-slower) var(--ease-out) both; }
.anim-fade-in-up  { animation: fadeInUp   var(--duration-slower) var(--ease-out) both; }
.anim-fade-in-down{ animation: fadeInDown var(--duration-slower) var(--ease-out) both; }
.anim-scale-in    { animation: scaleIn    var(--duration-slower) var(--ease-out) both; }
.anim-slide-up    { animation: slideUp    var(--duration-slower) var(--ease-out) both; }
.anim-float       { animation: float 3s ease-in-out infinite; }
.anim-float-slow  { animation: floatSlow 4.5s ease-in-out infinite; }
.anim-pulse       { animation: pulse 2.5s ease-in-out infinite; }
.anim-pulse-ring  { animation: pulseSoft 2s ease-in-out infinite; }
.anim-spin        { animation: spin 1s linear infinite; }

/* ─── HOVER EFFECTS ─────────────────────────────────────── */
.hover-lift {
  transition: transform var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.hover-scale {
  transition: transform var(--duration-base) var(--ease-default);
}
.hover-scale:hover { transform: scale(1.03); }

.hover-glow {
  transition: box-shadow var(--duration-base) var(--ease-default);
}
.hover-glow:hover {
  box-shadow: 0 0 0 4px rgba(99, 93, 169, 0.2);
}

.hover-bright {
  transition: filter var(--duration-base) var(--ease-default);
}
.hover-bright:hover { filter: brightness(1.08); }

/* Card hover standard pattern */
.card-hover {
  transition:
    transform var(--duration-slow) var(--ease-default),
    box-shadow var(--duration-slow) var(--ease-default);
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

/* Image zoom on hover */
.img-zoom { overflow: hidden; }
.img-zoom img {
  transition: transform var(--duration-slower) var(--ease-default);
  will-change: transform;
}
.img-zoom:hover img { transform: scale(1.05); }

/* ─── NAV LINK UNDERLINE ────────────────────────────────── */
.nav-underline {
  position: relative;
  text-decoration: none;
}
.nav-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-purple);
  transition: width var(--duration-base) var(--ease-out);
}
.nav-underline:hover::after,
.nav-underline.active::after { width: 100%; }

/* ─── BUTTON MICRO-INTERACTION ──────────────────────────── */
.btn-press {
  transition: transform var(--duration-fast) var(--ease-default);
}
.btn-press:active { transform: scale(0.96) translateY(1px); }

/* ─── GRADIENT ANIMATED BACKGROUND ─────────────────────── */
.bg-animated-gradient {
  background: linear-gradient(270deg,
    var(--color-purple-dark),
    var(--color-purple),
    #7B75C2,
    var(--color-purple)
  );
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

/* ─── SKELETON LOADER ───────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-purple-soft) 25%,
    var(--color-purple-tint) 50%,
    var(--color-purple-soft) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-text  { height: 1em; margin-bottom: 0.5em; }
.skeleton-title { height: 1.6em; width: 60%; }
.skeleton-img   { aspect-ratio: 16/9; border-radius: var(--radius-lg); }

/* ─── PAGE TRANSITION ───────────────────────────────────── */
.page-enter {
  animation: fadeInUp 0.4s var(--ease-out) both;
}

/* ─── TOOLTIP ───────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-text);
  color: #fff;
  font-size: var(--text-xs);
  font-family: var(--font-body);
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default);
  z-index: var(--z-toast);
}
[data-tooltip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── REDUCED MOTION OVERRIDE ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .hover-lift,
  .hover-scale,
  .card-hover,
  .anim-float,
  .anim-float-slow,
  .anim-pulse,
  .anim-pulse-ring,
  .img-zoom img,
  .bg-animated-gradient {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .reveal { opacity: 1; }
}