/**
 * GetWorkKin Animations — Shared animation styles
 *
 * Reusable animation classes for scroll reveals, card entrances,
 * badge effects, stat counters, and page-load effects.
 * Load after brand.css on any page that needs animations.
 *
 * Usage:
 *   <link rel="stylesheet" href="/shared/css/animations.css">
 *   <script src="/shared/js/animations.js" defer></script>
 *
 * All animations respect prefers-reduced-motion via brand.css (lines 256-265).
 *
 * @version 1.0.0
 * @since 2026-03-10
 * @see Issue #877
 */


/* ============================================================================
   ANIMATION TOKENS
   ============================================================================ */
:root {
    --gwk-anim-duration-fast: 0.5s;
    --gwk-anim-duration-base: 0.7s;
    --gwk-anim-duration-slow: 1.2s;
    --gwk-anim-stagger: 0.08s;
    --gwk-anim-reveal-distance: 30px;
}


/* ============================================================================
   1. SCROLL FADE-IN SECTIONS
   ============================================================================
   Usage: Add class "scroll-reveal" to any element that should fade in on scroll.
   Optional: "delay-1", "delay-2", "delay-3" for staggered siblings.
   JS (animations.js) adds "visible" class when IntersectionObserver fires.
   ============================================================================ */

.scroll-reveal {
    opacity: 0;
    transform: translateY(var(--gwk-anim-reveal-distance, 30px));
    transition: opacity var(--gwk-anim-duration-base) ease-out,
                transform var(--gwk-anim-duration-base) ease-out;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal.delay-1 { transition-delay: 0.1s; }
.scroll-reveal.delay-2 { transition-delay: 0.2s; }
.scroll-reveal.delay-3 { transition-delay: 0.3s; }


/* ============================================================================
   2. STAGGERED CARD ENTRANCES
   ============================================================================
   Usage: Add class "animate-card" to grid children (job-card, feature-card, etc.)
   JS adds "animate-in" class after cards are in the viewport or rendered.
   Stagger is handled via nth-child animation-delay rules.
   ============================================================================ */

.animate-card {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
}

.animate-card.animate-in {
    animation: card-entrance var(--gwk-anim-duration-fast) ease-out forwards;
}

/* Stagger delays for up to 12 cards */
.animate-card:nth-child(1).animate-in  { animation-delay: calc(var(--gwk-anim-stagger) * 0); }
.animate-card:nth-child(2).animate-in  { animation-delay: calc(var(--gwk-anim-stagger) * 1); }
.animate-card:nth-child(3).animate-in  { animation-delay: calc(var(--gwk-anim-stagger) * 2); }
.animate-card:nth-child(4).animate-in  { animation-delay: calc(var(--gwk-anim-stagger) * 3); }
.animate-card:nth-child(5).animate-in  { animation-delay: calc(var(--gwk-anim-stagger) * 4); }
.animate-card:nth-child(6).animate-in  { animation-delay: calc(var(--gwk-anim-stagger) * 5); }
.animate-card:nth-child(7).animate-in  { animation-delay: calc(var(--gwk-anim-stagger) * 6); }
.animate-card:nth-child(8).animate-in  { animation-delay: calc(var(--gwk-anim-stagger) * 7); }
.animate-card:nth-child(9).animate-in  { animation-delay: calc(var(--gwk-anim-stagger) * 8); }
.animate-card:nth-child(10).animate-in { animation-delay: calc(var(--gwk-anim-stagger) * 9); }
.animate-card:nth-child(11).animate-in { animation-delay: calc(var(--gwk-anim-stagger) * 10); }
.animate-card:nth-child(12).animate-in { animation-delay: calc(var(--gwk-anim-stagger) * 11); }

@keyframes card-entrance {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}


/* ============================================================================
   3. SECOND-CHANCE BADGE SHIMMER SWEEP
   ============================================================================
   CSS-only. Targets existing .second-chance-badge from job-card.css.
   The ::after pseudo does NOT conflict with .badge-tooltip::after
   (that targets a child element, not the badge itself).
   ============================================================================ */

.second-chance-badge {
    overflow: hidden;
}

/* Restore overflow on hover/focus so the tooltip (positioned at bottom: calc(100% + 8px))
   is not clipped by overflow: hidden */
.second-chance-badge:hover,
.second-chance-badge:focus {
    overflow: visible;
}

.second-chance-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%
    );
    animation: badge-shimmer-sweep 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes badge-shimmer-sweep {
    0%, 70%, 100% { left: -100%; }
    40%           { left: 100%; }
}


/* ============================================================================
   4. STAT COUNTER (CSS portion)
   ============================================================================
   Counter animation is JS-driven (animations.js).
   This ensures tabular-nums for smooth counter rendering.
   ============================================================================ */

[data-counter-target] {
    font-variant-numeric: tabular-nums;
}


/* ============================================================================
   5. MATCH SCORE BADGE POP ENTRANCE
   ============================================================================
   Applies to .match-score-badge.match-excellent in job-card.css.
   One-shot pop animation on render. Only for "excellent" tier.
   ============================================================================ */

.match-score-badge.match-excellent {
    animation: match-pop 0.8s ease-out;
}

@keyframes match-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    50%  { transform: scale(1.15); }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1); opacity: 1; }
}


/* ============================================================================
   6. SHIELD STAMP + RIPPLE ON PAGE LOAD
   ============================================================================
   Used on auth/login.html logo. JS adds .stamp-animate on DOMContentLoaded.
   One-time animation (animation-fill-mode: forwards).
   ============================================================================ */

.shield-stamp {
    opacity: 0;
}

.shield-stamp.stamp-animate {
    animation: shield-stamp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes shield-stamp {
    0%   { opacity: 0; transform: scale(3) rotate(-15deg); }
    40%  { opacity: 1; transform: scale(0.9) rotate(2deg); }
    60%  { transform: scale(1.05) rotate(-1deg); }
    80%  { transform: scale(0.98) rotate(0deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.stamp-ripple {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--gwk-primary, #3F5F2A);
    opacity: 0;
    pointer-events: none;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -30px;
}

.stamp-ripple.stamp-animate {
    animation: stamp-ripple-expand 0.9s ease-out 0.25s forwards;
}

@keyframes stamp-ripple-expand {
    0%   { opacity: 0.5; transform: scale(0.5); }
    100% { opacity: 0; transform: scale(3); }
}