/* ============================================================
   animations.css — Intersection Observer reveal animations
   + counter, hero parallax, skeleton loaders, transitions
   ============================================================ */

/* ─── 1. Reveal base ─────────────────────────────────────────── */
.reveal {
    opacity   : 0;
    transition: opacity .65s ease, transform .65s ease;
    will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none !important; }

/* Variants */
.reveal-up    { transform: translateY(40px); }
.reveal-down  { transform: translateY(-30px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-scale { transform: scale(.92); }
.reveal-fade  { transform: none; }

/* Stagger children */
.stagger-children > * {
    opacity   : 0;
    transform : translateY(30px);
    transition: opacity .5s ease, transform .5s ease;
}
.stagger-children.visible > * { opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(1)  { transition-delay: .05s; }
.stagger-children.visible > *:nth-child(2)  { transition-delay: .12s; }
.stagger-children.visible > *:nth-child(3)  { transition-delay: .19s; }
.stagger-children.visible > *:nth-child(4)  { transition-delay: .26s; }
.stagger-children.visible > *:nth-child(5)  { transition-delay: .33s; }
.stagger-children.visible > *:nth-child(6)  { transition-delay: .40s; }
.stagger-children.visible > *:nth-child(7)  { transition-delay: .47s; }
.stagger-children.visible > *:nth-child(8)  { transition-delay: .54s; }

/* ─── 2. Animated counter ────────────────────────────────────── */
.counter { display: inline-block; }

/* ─── 3. Hero floating elements ──────────────────────────────── */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}
@keyframes floatSlow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%       { transform: translateY(-8px) rotate(3deg); }
}
@keyframes pulse-ring {
    0%   { transform: scale(.95); box-shadow: 0 0 0 0 rgba(33,137,160,.4); }
    70%  { transform: scale(1);   box-shadow: 0 0 0 16px rgba(33,137,160,0); }
    100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(33,137,160,0); }
}
@keyframes shimmer {
    from { background-position: -200% center; }
    to   { background-position:  200% center; }
}
@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: none; }
}
@keyframes slideInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(.88); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes bounceIn {
    0%   { opacity: 0; transform: scale(.6); }
    60%  { opacity: 1; transform: scale(1.06); }
    80%  { transform: scale(.97); }
    100% { transform: scale(1); }
}

.anim-float      { animation: float 4s ease-in-out infinite; }
.anim-float-slow { animation: floatSlow 6s ease-in-out infinite; }
.anim-pulse-ring { animation: pulse-ring 2s cubic-bezier(.455,.03,.515,.955) infinite; }
.anim-slide-down { animation: slideInDown .45s ease both; }
.anim-slide-up   { animation: slideInUp .45s ease both; }
.anim-fade-in    { animation: fadeIn .4s ease both; }
.anim-scale-in   { animation: scaleIn .4s cubic-bezier(.175,.885,.32,1.275) both; }
.anim-bounce-in  { animation: bounceIn .55s cubic-bezier(.175,.885,.32,1.275) both; }

/* Delay helpers */
.delay-100 { animation-delay: .1s; }
.delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; }
.delay-500 { animation-delay: .5s; }

/* ─── 4. Skeleton loader ─────────────────────────────────────── */
.skeleton {
    background   : linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation    : shimmer 1.4s infinite;
    border-radius: .375rem;
}
.skeleton-text  { height: 1em; margin-bottom: .5em; }
.skeleton-text--sm { height: .85em; width: 60%; }
.skeleton-circle { border-radius: 50%; }
.skeleton-avatar { width: 64px; height: 64px; border-radius: 50%; }
.skeleton-card { height: 280px; border-radius: 1rem; }

/* ─── 5. Scroll progress bar ─────────────────────────────────── */
#scroll-progress {
    position  : fixed;
    top       : 0; left: 0;
    height    : 3px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-gold-400));
    z-index   : 2000;
    transition: width .1s linear;
    width     : 0;
}

/* ─── 6. Page transition ─────────────────────────────────────── */
.page-transition {
    animation: fadeIn .3s ease;
}

/* ─── 7. Modal ───────────────────────────────────────────────── */
.modal-overlay {
    position  : fixed;
    inset     : 0;
    background: rgba(0,0,0,.55);
    z-index   : 2000;
    display   : flex;
    align-items: center;
    justify-content: center;
    padding   : 1rem;
    animation : fadeIn .25s ease;
}
.modal {
    background   : var(--c-white);
    border-radius: var(--r-xl);
    max-width    : 560px;
    width        : 100%;
    box-shadow   : var(--s-xl);
    animation    : scaleIn .3s cubic-bezier(.175,.885,.32,1.275);
    max-height   : 90vh;
    overflow-y   : auto;
}
.modal-header {
    padding      : var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--c-border);
    display      : flex;
    align-items  : center;
    justify-content: space-between;
}
.modal-body   { padding: var(--sp-6); }
.modal-footer { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--c-border); display: flex; justify-content: flex-end; gap: var(--sp-3); }

/* ─── 8. Tooltip ─────────────────────────────────────────────── */
[data-tip] { position: relative; }
[data-tip]::after {
    content     : attr(data-tip);
    position    : absolute;
    bottom      : calc(100% + 6px);
    left        : 50%;
    transform   : translateX(-50%) scale(.85);
    background  : var(--c-grey-900);
    color       : var(--c-white);
    font-size   : var(--text-xs);
    padding     : 3px 10px;
    border-radius: var(--r-sm);
    white-space : nowrap;
    pointer-events: none;
    opacity     : 0;
    transition  : opacity var(--t-fast), transform var(--t-fast);
    z-index     : 500;
}
[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* ─── 9. Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration  : .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration : .01ms !important;
        scroll-behavior     : auto !important;
    }
    .reveal, .stagger-children > * { opacity: 1 !important; transform: none !important; }
}