/* ============================================================
   LINKSAJA ā€” anim.css
   Scroll-triggered animations & micro-interactions
   ============================================================ */

/* --- Fade In Up (scroll reveal) --- */
.fade-in-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s cubic-bezier(.16,1,.3,1),
                transform .6s cubic-bezier(.16,1,.3,1);
}
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children inside grids */
.features-grid .fade-in-up:nth-child(2) { transition-delay: .08s; }
.features-grid .fade-in-up:nth-child(3) { transition-delay: .16s; }
.features-grid .fade-in-up:nth-child(4) { transition-delay: .24s; }
.features-grid .fade-in-up:nth-child(5) { transition-delay: .32s; }
.features-grid .fade-in-up:nth-child(6) { transition-delay: .40s; }

.steps .fade-in-up:nth-child(2) { transition-delay: .12s; }
.steps .fade-in-up:nth-child(3) { transition-delay: .24s; }

/* --- Hero glow pulse --- */
.hero-glow {
    animation: glowPulse 6s ease-in-out infinite alternate;
}
@keyframes glowPulse {
    0%   { opacity: .5; transform: translateX(-50%) scale(1); }
    100% { opacity: 1;  transform: translateX(-50%) scale(1.15); }
}

/* --- Hero badge entrance --- */
.hero-badge {
    animation: badgeSlide .7s .2s cubic-bezier(.16,1,.3,1) both;
}
@keyframes badgeSlide {
    from { opacity: 0; transform: translateY(12px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Feature card icon hover bounce --- */
.feature-card:hover .feature-icon {
    animation: iconBounce .45s ease;
}
@keyframes iconBounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.2); }
    70%  { transform: scale(.95); }
    100% { transform: scale(1); }
}

/* --- Step number pulse ring --- */
.step-number {
    position: relative;
}
.step-number::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--c-pink);
    opacity: 0;
    animation: ringPulse 2.5s ease-in-out infinite;
}
@keyframes ringPulse {
    0%   { transform: scale(.8); opacity: 0; }
    50%  { transform: scale(1);  opacity: .3; }
    100% { transform: scale(1.3); opacity: 0; }
}

/* --- Button press --- */
.btn:active {
    transform: scale(.97);
    transition-duration: .05s;
}

/* --- Input focus glow (auth / settings) --- */
.input-icon:focus-within {
    box-shadow: 0 0 0 3px var(--c-pink-soft);
}

/* --- Project card slide-in --- */
.project-card {
    animation: cardSlideIn .4s cubic-bezier(.16,1,.3,1) both;
}
.project-card:nth-child(2) { animation-delay: .06s; }
.project-card:nth-child(3) { animation-delay: .12s; }
.project-card:nth-child(4) { animation-delay: .18s; }

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

/* --- Notification dot heartbeat --- */
.notif-dot {
    animation: heartbeat 2s ease-in-out infinite;
}
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.4); }
}

/* --- Switch toggle flick --- */
.switch-slider::after {
    transition: transform .25s cubic-bezier(.68,-.55,.27,1.55);
}

/* --- Modal entrance --- */
.modal-overlay:not([hidden]) .modal {
    animation: modalIn .3s cubic-bezier(.16,1,.3,1);
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Sidebar mobile slide --- */
.sidebar {
    transition: transform .3s cubic-bezier(.16,1,.3,1);
}

/* --- Loading skeleton shimmer (utility) --- */
.skeleton {
    background: linear-gradient(90deg, var(--c-card) 25%, var(--c-surface) 50%, var(--c-card) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Spin (for loading indicators) --- */
.spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* --- Admin Dropdown micro-interactions --- */
.admin-dropdown-options {
    animation: adminDropIn .22s cubic-bezier(.16,1,.3,1) both;
}
@keyframes adminDropIn {
    from { opacity: 0; transform: translateY(-8px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.admin-dropdown-options.closing {
    animation: adminDropOut .15s ease-in forwards;
}
@keyframes adminDropOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-5px) scale(.97); }
}
.admin-dropdown-option {
    animation: admOptFade .2s ease both;
}
.admin-dropdown-option:nth-child(2) { animation-delay: .02s; }
.admin-dropdown-option:nth-child(3) { animation-delay: .04s; }
.admin-dropdown-option:nth-child(4) { animation-delay: .06s; }
.admin-dropdown-option:nth-child(5) { animation-delay: .08s; }
.admin-dropdown-option:nth-child(6) { animation-delay: .10s; }
.admin-dropdown-option:nth-child(7) { animation-delay: .12s; }
.admin-dropdown-option:nth-child(8) { animation-delay: .14s; }
.admin-dropdown-option:nth-child(n+9) { animation-delay: .16s; }
@keyframes admOptFade {
    from { opacity: 0; transform: translateX(-5px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* --- Domain Select micro-interactions --- */

/* Custom dropdown panel entrance */
.domain-dropdown-options {
    animation: dropdownSlideIn .2s cubic-bezier(.16,1,.3,1) both;
}
@keyframes dropdownSlideIn {
    from { opacity: 0; transform: translateY(-6px) scaleY(.96); }
    to   { opacity: 1; transform: translateY(0) scaleY(1); }
}

/* Custom dropdown panel exit */
.domain-dropdown-options.closing {
    animation: dropdownSlideOut .15s ease-in forwards;
}
@keyframes dropdownSlideOut {
    from { opacity: 1; transform: translateY(0) scaleY(1); }
    to   { opacity: 0; transform: translateY(-4px) scaleY(.97); }
}

/* Option items stagger entrance */
.domain-dropdown-option {
    animation: optionFadeIn .2s ease both;
}
.domain-dropdown-option:nth-child(2) { animation-delay: .03s; }
.domain-dropdown-option:nth-child(3) { animation-delay: .06s; }
.domain-dropdown-option:nth-child(4) { animation-delay: .09s; }
.domain-dropdown-option:nth-child(5) { animation-delay: .12s; }
.domain-dropdown-option:nth-child(6) { animation-delay: .15s; }

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