/* ═══════════════════════════════════════════════════════════════════
   AnimeRank v9 — ANIMATIONS
   Keyframes · Transition utilities · Scroll-triggered effects
   Load order: 4 of 5  (deferred-friendly)
   GPU-only: transform, opacity, filter, color
═══════════════════════════════════════════════════════════════════ */

@layer animations;

@layer animations {
  /* ──────────────────────────────────────────────────────────────
     KEYFRAMES — atomic, reusable
  ────────────────────────────────────────────────────────────── */

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

  /* Fade + translate */
  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-in-down {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-in-left {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes fade-in-right {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  /* Card / pop */
  @keyframes card-enter {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes pop-in {
    0%   { opacity: 0; transform: scale(0.6); }
    50%  { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
  }

  /* Modal */
  @keyframes modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes modal-pop-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Hero */
  @keyframes hero-reveal {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Toast */
  @keyframes toast-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(16px); }
  }

  /* Skeleton shimmer */
  @keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Spinner */
  @keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* Pulse */
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
  }

  /* Glow (live indicator, subtle attention) */
  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,71,87,0.7); }
    70%      { box-shadow: 0 0 0 12px rgba(255,71,87,0); }
  }

  /* Bounce in (notification dot) */
  @keyframes bounce-in {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
  }

  /* Gradient drift (hero background) */
  @keyframes gradient-drift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* Grid drift (background pattern) */
  @keyframes grid-drift {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(40px, 40px); }
  }

  /* Marquee (genre rail, news ticker) */
  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* Shake (form error) */
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
  }

  /* Scale-up (focus emphasis) */
  @keyframes scale-up {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
  }

  /* Heartbeat (favorite icon click) */
  @keyframes heartbeat {
    0%   { transform: scale(1); }
    14%  { transform: scale(1.3); }
    28%  { transform: scale(1); }
    42%  { transform: scale(1.3); }
    70%  { transform: scale(1); }
  }

  /* ──────────────────────────────────────────────────────────────
     ANIMATION UTILITIES — single-use classes
  ────────────────────────────────────────────────────────────── */
  .anim-fade-in        { animation: fade-in        var(--dur-base)   var(--ease-out-quart); }
  .anim-fade-in-up     { animation: fade-in-up     var(--dur-base)   var(--ease-out-expo); }
  .anim-fade-in-down   { animation: fade-in-down   var(--dur-base)   var(--ease-out-expo); }
  .anim-fade-in-left   { animation: fade-in-left   var(--dur-base)   var(--ease-out-expo); }
  .anim-fade-in-right  { animation: fade-in-right  var(--dur-base)   var(--ease-out-expo); }
  .anim-pop-in         { animation: pop-in         var(--dur-base)   var(--ease-spring); }
  .anim-spin           { animation: spin           600ms             linear infinite; }
  .anim-pulse          { animation: pulse          1.6s              ease-in-out infinite; }
  .anim-pulse-glow     { animation: pulse-glow     2s                ease-in-out infinite; }
  .anim-bounce-in      { animation: bounce-in      var(--dur-base)   var(--ease-spring); }

  /* Stagger helper: set --i on each child */
  .anim-stagger > * {
    animation: card-enter var(--dur-slow) var(--ease-out-expo) backwards;
    animation-delay: calc(var(--i, 0) * 50ms);
  }

  /* ──────────────────────────────────────────────────────────────
     TRANSITION UTILITIES
  ────────────────────────────────────────────────────────────── */
  .transition-none   { transition: none; }
  .transition-all    { transition: all var(--dur-fast) var(--ease-out-quart); }
  .transition-colors { transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), fill var(--dur-fast); transition-timing-function: var(--ease-out-quart); }
  .transition-transform { transition: transform var(--dur-base) var(--ease-out-quart); }
  .transition-opacity   { transition: opacity   var(--dur-fast) var(--ease-out-quart); }
  .transition-shadow    { transition: box-shadow var(--dur-fast) var(--ease-out-quart); }
  .transition-slow   { transition-duration: var(--dur-slow); }
  .transition-fast   { transition-duration: var(--dur-fast); }
  .transition-instant{ transition-duration: var(--dur-instant); }

  .ease-spring { transition-timing-function: var(--ease-spring); }
  .ease-expo   { transition-timing-function: var(--ease-out-expo); }
  .ease-quart  { transition-timing-function: var(--ease-out-quart); }

  /* ──────────────────────────────────────────────────────────────
     HOVER EFFECTS
  ────────────────────────────────────────────────────────────── */
  .hover-lift {
    transition: transform var(--dur-fast) var(--ease-out-quart),
                box-shadow var(--dur-fast) var(--ease-out-quart);
  }
  .hover-lift:hover { transform: translateY(-3px); box-shadow: var(--elevation-2); }

  .hover-scale {
    transition: transform var(--dur-fast) var(--ease-spring);
  }
  .hover-scale:hover { transform: scale(1.04); }

  .hover-glow {
    transition: box-shadow var(--dur-base) var(--ease-out-quart);
  }
  .hover-glow:hover { box-shadow: var(--elevation-crimson); }

  .hover-brighten { transition: filter var(--dur-fast) var(--ease-out-quart); }
  .hover-brighten:hover { filter: brightness(1.12); }

  /* ──────────────────────────────────────────────────────────────
     SPOTLIGHT CARD EFFECT
     Apply .spotlight; set --mouse-x and --mouse-y via JS on mousemove.
  ────────────────────────────────────────────────────────────── */
  .spotlight { position: relative; isolation: isolate; }
  .spotlight::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: radial-gradient(
      480px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      var(--c-crimson-a4),
      transparent 40%
    );
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out-quart);
    pointer-events: none;
    z-index: 1;
  }
  .spotlight:hover::before { opacity: 1; }
  .spotlight > * { position: relative; z-index: 2; }

  /* ──────────────────────────────────────────────────────────────
     SCROLL-TRIGGERED REVEAL (paired with IntersectionObserver)
  ────────────────────────────────────────────────────────────── */
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity var(--dur-slow) var(--ease-out-expo),
      transform var(--dur-slow) var(--ease-out-expo);
    will-change: opacity, transform;
  }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }
  .reveal--left  { transform: translateX(-20px); }
  .reveal--left.is-visible { transform: translateX(0); }
  .reveal--right { transform: translateX(20px); }
  .reveal--right.is-visible { transform: translateX(0); }
  .reveal--scale { transform: scale(0.96); }
  .reveal--scale.is-visible { transform: scale(1); }

  /* ──────────────────────────────────────────────────────────────
     CARD REVEAL — dinamik render edilmiş kartlar için
     Grid içinde her karta --i (stagger index) atanır; CSS hesabı
     opacity/transform delay'ini index*60ms olarak kurar.
  ────────────────────────────────────────────────────────────── */
  .card-anime.reveal-ready,
  .anime-card.reveal-ready,
  .home-trend10-card.reveal-ready,
  .ep-card-v2.reveal-ready,
  .cast-card.reveal-ready {
    opacity: 0;
    transform: translateY(20px) scale(.97);
    transition:
      opacity 460ms var(--ease-out-expo),
      transform 460ms var(--ease-out-expo);
    transition-delay: calc(var(--i, 0) * 35ms);
    will-change: opacity, transform;
  }
  .card-anime.reveal-ready.is-visible,
  .anime-card.reveal-ready.is-visible,
  .home-trend10-card.reveal-ready.is-visible,
  .ep-card-v2.reveal-ready.is-visible,
  .cast-card.reveal-ready.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* Genel data-reveal — paragraflar/metinler vb. */
  [data-reveal].reveal-ready {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 540ms var(--ease-out-expo),
      transform 540ms var(--ease-out-expo);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
  [data-reveal].reveal-ready.is-visible { opacity: 1; transform: translateY(0); }

  @media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-ready,
    .card-anime.reveal-ready, .anime-card.reveal-ready,
    .home-trend10-card.reveal-ready, .ep-card-v2.reveal-ready,
    .cast-card.reveal-ready, [data-reveal].reveal-ready {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }

  /* ──────────────────────────────────────────────────────────────
     SCROLL PROGRESS INDICATOR
  ────────────────────────────────────────────────────────────── */
  .scroll-progress {
    position: fixed;
    top: 0; inset-inline-start: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-crimson-9), var(--c-crimson-10));
    width: var(--scroll, 0%);
    z-index: var(--z-toast);
    transition: width 80ms linear;
  }

  /* ──────────────────────────────────────────────────────────────
     PARALLAX (decorative bg only)
  ────────────────────────────────────────────────────────────── */
  .parallax {
    will-change: transform;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
  }

  /* ──────────────────────────────────────────────────────────────
     PAGE TRANSITION (View Transitions API friendly)
  ────────────────────────────────────────────────────────────── */
  @keyframes page-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes page-exit {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
  }
  ::view-transition-old(root) { animation: page-exit  var(--dur-base) var(--ease-out-quart) forwards; }
  ::view-transition-new(root) { animation: page-enter var(--dur-base) var(--ease-out-quart) forwards; }

  /* ──────────────────────────────────────────────────────────────
     LIVE INDICATOR (red dot + ring)
  ────────────────────────────────────────────────────────────── */
  .live-dot {
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--brand);
    border-radius: 50%;
    animation: pulse-glow 2s ease-in-out infinite;
    flex-shrink: 0;
  }

  /* ──────────────────────────────────────────────────────────────
     MARQUEE — infinite horizontal scroller
     Mark up: <div class="marquee"><div class="marquee__inner">[content × 2]</div></div>
  ────────────────────────────────────────────────────────────── */
  .marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee__inner {
    display: inline-flex;
    gap: var(--space-md);
    animation: marquee 40s linear infinite;
    white-space: nowrap;
  }
  .marquee:hover .marquee__inner { animation-play-state: paused; }

  /* ──────────────────────────────────────────────────────────────
     RIPPLE — material-style feedback (use with JS to position)
  ────────────────────────────────────────────────────────────── */
  @keyframes ripple {
    from { transform: scale(0); opacity: 0.4; }
    to   { transform: scale(2.5); opacity: 0; }
  }
  .ripple {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    pointer-events: none;
    animation: ripple 600ms ease-out forwards;
  }

  /* ──────────────────────────────────────────────────────────────
     GLOBAL — disable will-change on idle elements (performance)
  ────────────────────────────────────────────────────────────── */
  .will-change-transform { will-change: transform; }
  .will-change-opacity   { will-change: opacity; }
  .will-change-auto      { will-change: auto; }

  /* ──────────────────────────────────────────────────────────────
     HOVER REVEAL META — Netflix-style billboard
     Card layout: poster + meta (hidden); meta slides up on hover.
  ────────────────────────────────────────────────────────────── */
  .reveal-meta { position: relative; overflow: hidden; }
  .reveal-meta__panel {
    position: absolute;
    inset-inline: 0;
    bottom: -100%;
    padding: var(--space-md);
    background: linear-gradient(0deg, rgba(0,0,0,0.92), rgba(0,0,0,0.4));
    transition: bottom var(--dur-base) var(--ease-out-expo);
  }
  .reveal-meta:hover .reveal-meta__panel { bottom: 0; }
  /* Suppress on touch (no hover) */
  @media (hover: none) {
    .reveal-meta__panel { bottom: 0; }
  }

  /* ──────────────────────────────────────────────────────────────
     PERF GUARD — disable hover effects on touch devices
  ────────────────────────────────────────────────────────────── */
  @media (hover: none) and (pointer: coarse) {
    .hover-lift:hover, .hover-scale:hover, .hover-glow:hover { transform: none; box-shadow: var(--elevation-1); }
    .card-anime:hover { transform: none; box-shadow: var(--elevation-1); }
    .card-anime:hover::before { opacity: 0; }
  }
}