/* ==========================================================
   MOTION LAYER — seamless animation system
   «Команда Арктики» — expedition-grade motion
   ========================================================== */

/* ----------------------------------------------------------
   EASING TOKENS (refined)
   ---------------------------------------------------------- */
:root {
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-circ:  cubic-bezier(0, 0.55, 0.45, 1);

    /* Page transitions */
    --dur-page-in:  420ms;
    --dur-page-out: 200ms;

    /* Counter animation */
    --dur-counter: 1200ms;
}

/* ----------------------------------------------------------
   KEYFRAMES
   ---------------------------------------------------------- */
@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

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

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

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

@keyframes numberPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@keyframes progressFill {
    from { width: 0; }
}

@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

@keyframes rippleExpand {
    to { transform: scale(3.5); opacity: 0; }
}

@keyframes checkDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes indicatorSlide {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(53, 115, 206, 0.35); }
    70%  { box-shadow: 0 0 0 8px rgba(53, 115, 206, 0); }
    100% { box-shadow: 0 0 0 0 rgba(53, 115, 206, 0); }
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); max-height: 80px; }
    to   { opacity: 0; transform: translateY(-6px) scale(0.97); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
}

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

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

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

/* ----------------------------------------------------------
   PAGE CONTENT ENTRANCE
   Each panel/card staggered on page load.
   Exclude position:fixed elements (drawers, backdrops) —
   their transform is used for slide-in and must not be
   overridden by this animation.
   ---------------------------------------------------------- */
.app-content > *:not([style*="position:fixed"]):not(.event-drawer):not(.event-drawer-backdrop):not(.profile-drawer):not(.profile-drawer-backdrop),
.app-content .lk-panel,
.app-content .lk-profile-card,
.app-content .lk-preview-card,
.app-content .card,
.app-content .zone-block,
.app-content .logical-block,
.app-content .object-block,
.app-content .settings-directory {
    animation: slideUpFade var(--dur-page-in) var(--ease-out-quart) both;
}

/* Fixed/drawer elements must never get the entrance animation */
.event-drawer,
.event-drawer-backdrop,
.profile-drawer,
.profile-drawer-backdrop {
    animation: none !important;
}

/* Stagger direct children of app-content */
.app-content > *:nth-child(1)  { animation-delay: 30ms; }
.app-content > *:nth-child(2)  { animation-delay: 80ms; }
.app-content > *:nth-child(3)  { animation-delay: 130ms; }
.app-content > *:nth-child(4)  { animation-delay: 180ms; }
.app-content > *:nth-child(5)  { animation-delay: 220ms; }
.app-content > *:nth-child(6)  { animation-delay: 260ms; }
.app-content > *:nth-child(n+7){ animation-delay: 300ms; }

/* ----------------------------------------------------------
   SIDEBAR NAV — staggered entrance, only on first visit
   Class .sidebar-animate is added by JS only once per session
   ---------------------------------------------------------- */
.sidebar-animate .sidebar-menu li:nth-child(1) .sidebar-link { animation: sidebarLinkIn 360ms 60ms  var(--ease-out-quart) both; }
.sidebar-animate .sidebar-menu li:nth-child(2) .sidebar-link { animation: sidebarLinkIn 360ms 100ms var(--ease-out-quart) both; }
.sidebar-animate .sidebar-menu li:nth-child(3) .sidebar-link { animation: sidebarLinkIn 360ms 140ms var(--ease-out-quart) both; }
.sidebar-animate .sidebar-menu li:nth-child(4) .sidebar-link { animation: sidebarLinkIn 360ms 180ms var(--ease-out-quart) both; }
.sidebar-animate .sidebar-menu li:nth-child(5) .sidebar-link { animation: sidebarLinkIn 360ms 220ms var(--ease-out-quart) both; }
.sidebar-animate .sidebar-menu li:nth-child(6) .sidebar-link { animation: sidebarLinkIn 360ms 260ms var(--ease-out-quart) both; }
.sidebar-animate .sidebar-footer               { animation: sidebarLinkIn 400ms 340ms var(--ease-out-quart) both; }

/* Active indicator — animated underline */
.sidebar-link.active::after,
.sidebar-link.is-active::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
    animation: indicatorSlide 200ms var(--ease-out-expo) both;
    transform-origin: left;
}

.sidebar-link {
    position: relative;
}

/* ----------------------------------------------------------
   SIDEBAR HOVER — icon micro-interaction upgrade
   ---------------------------------------------------------- */
.sidebar-link i {
    transition:
        transform 160ms var(--ease-out-quart),
        color 120ms;
}

.sidebar-link:hover i {
    transform: translateX(2px) scale(1.1);
}

/* ----------------------------------------------------------
   BRAND COMPASS — wobble on hover (sidebar + pub header)
   ---------------------------------------------------------- */
@keyframes compassSpin {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(22deg); }
    50%  { transform: rotate(-14deg); }
    75%  { transform: rotate(8deg); }
    100% { transform: rotate(0deg); }
}

.sidebar-brand-icon i,
.pub-brand-icon i {
    display: inline-block;
    transition: color 200ms;
}

.sidebar-brand:hover .sidebar-brand-icon i,
.pub-brand:hover .pub-brand-icon i {
    animation: compassSpin 500ms var(--ease-out-quart) forwards;
}

/* ----------------------------------------------------------
   BUTTON PRESS — ripple effect
   ---------------------------------------------------------- */
.btn {
    position: relative;
    overflow: hidden;
}

.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    transform: scale(0);
    pointer-events: none;
    animation: rippleExpand 550ms var(--ease-out-expo) forwards;
}

.btn-primary .btn-ripple {
    background: rgba(255, 255, 255, 0.25);
}

.btn-outline-primary .btn-ripple,
.btn-outline-secondary .btn-ripple {
    background: rgba(53, 115, 206, 0.15);
}

/* Button loading state */
.btn.is-loading {
    pointer-events: none;
    opacity: 0.75;
}

.btn.is-loading .btn-label { opacity: 0; }

.btn-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-spinner::after {
    content: '';
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: rgba(255,255,255,0.9);
    border-radius: 50%;
    animation: spin 600ms linear infinite;
}

.btn-primary.is-loading .btn-spinner::after {
    border-color: rgba(255,255,255,0.3);
    border-top-color: #fff;
}

.btn-outline-primary.is-loading .btn-spinner::after {
    border-color: rgba(53,115,206,0.25);
    border-top-color: var(--accent);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------
   FORM INTERACTIONS
   ---------------------------------------------------------- */
.form-control,
.form-select {
    transition:
        border-color 140ms var(--ease-out-quart),
        box-shadow 200ms var(--ease-out-quart),
        background 120ms;
}

/* Shake on validation error */
@keyframes inputShake {
    0%, 100% { transform: translateX(0); }
    15%       { transform: translateX(-6px); }
    35%       { transform: translateX(5px); }
    55%       { transform: translateX(-4px); }
    75%       { transform: translateX(3px); }
    90%       { transform: translateX(-2px); }
}

.form-control.is-invalid,
.form-select.is-invalid {
    animation: inputShake 360ms var(--ease-out-quart);
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.form-control.is-valid {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.10);
}

/* Label float effect when focused */
.form-group {
    position: relative;
}

/* ----------------------------------------------------------
   CARDS — enhanced hover
   ---------------------------------------------------------- */
.lk-panel,
.lk-profile-card,
.card,
.zone-block,
.logical-block {
    transition:
        box-shadow 220ms var(--ease-out-quart),
        transform 220ms var(--ease-out-quart),
        border-color 220ms;
    will-change: transform;
}

.lk-panel:hover,
.card:hover,
.zone-block:hover,
.logical-block:hover {
    transform: translateY(-1px);
    box-shadow: var(--card-shadow-hover);
}

/* Preview cards — stronger lift */
.lk-preview-card {
    transition:
        box-shadow 240ms var(--ease-out-quart),
        transform 240ms var(--ease-out-quart),
        border-color 200ms;
}

/* Score ring — pulse on page load */
.lk-score-ring {
    animation: scaleUp 500ms 350ms var(--ease-out-expo) both;
}

/* ----------------------------------------------------------
   STATS COUNTER — number pop on first view
   ---------------------------------------------------------- */
.lk-preview-card h3[data-counter],
.landing-hero__stats strong[data-counter],
[data-counter] {
    display: inline-block;
}

.counter-done {
    animation: numberPop 400ms var(--ease-out-quart);
}

/* ----------------------------------------------------------
   PROGRESS BARS
   ---------------------------------------------------------- */
.progress-bar,
[role="progressbar"] > * {
    animation: progressFill 900ms var(--ease-out-expo) both;
    animation-delay: 200ms;
}

/* ----------------------------------------------------------
   SCROLL REVEAL
   Elements outside viewport start invisible,
   JS adds .is-revealed when they enter viewport
   ---------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 480ms var(--ease-out-quart),
        transform 480ms var(--ease-out-quart);
    will-change: opacity, transform;
}

.reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-24px);
    transition:
        opacity 480ms var(--ease-out-quart),
        transform 480ms var(--ease-out-quart);
}
.reveal-left.is-revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(24px);
    transition:
        opacity 480ms var(--ease-out-quart),
        transform 480ms var(--ease-out-quart);
}
.reveal-right.is-revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger delay for grouped reveals */
.reveal-group > *:nth-child(1) { transition-delay: 0ms; }
.reveal-group > *:nth-child(2) { transition-delay: 70ms; }
.reveal-group > *:nth-child(3) { transition-delay: 140ms; }
.reveal-group > *:nth-child(4) { transition-delay: 210ms; }
.reveal-group > *:nth-child(5) { transition-delay: 280ms; }
.reveal-group > *:nth-child(n+6) { transition-delay: 350ms; }

/* ----------------------------------------------------------
   LANDING PAGE — hero choreography
   ---------------------------------------------------------- */
.landing-hero .landing-kicker {
    animation: heroTextIn 600ms 100ms var(--ease-out-expo) both;
}

.landing-hero h1 {
    animation: heroTextIn 700ms 200ms var(--ease-out-expo) both;
}

.landing-hero .landing-lead {
    animation: heroTextIn 600ms 320ms var(--ease-out-expo) both;
}

.landing-hero .landing-actions {
    animation: heroTextIn 500ms 440ms var(--ease-out-expo) both;
}

.landing-hero__stats div:nth-child(1) {
    animation: heroStatIn 500ms 380ms var(--ease-out-expo) both;
}

.landing-hero__stats div:nth-child(2) {
    animation: heroStatIn 500ms 480ms var(--ease-out-expo) both;
}

/* Landing sections — scroll reveals applied via JS */
.landing-quote p { transition-delay: 60ms; }
.landing-band h2 { transition-delay: 0ms; }
.landing-band p  { transition-delay: 80ms; }

.landing-directions article:nth-child(1) { transition-delay: 0ms; }
.landing-directions article:nth-child(2) { transition-delay: 80ms; }
.landing-directions article:nth-child(3) { transition-delay: 160ms; }

/* ----------------------------------------------------------
   TABLE ROW STAGGER on load
   ---------------------------------------------------------- */
.lk-events-table tbody tr,
.lk-activity-row:not(.lk-activity-row--head),
.brs-table tbody tr {
    animation: slideUpFade 300ms var(--ease-out-quart) both;
}

.lk-events-table tbody tr:nth-child(1),
.lk-activity-row:nth-child(2),
.brs-table tbody tr:nth-child(1) { animation-delay: 40ms; }

.lk-events-table tbody tr:nth-child(2),
.lk-activity-row:nth-child(3),
.brs-table tbody tr:nth-child(2) { animation-delay: 70ms; }

.lk-events-table tbody tr:nth-child(3),
.lk-activity-row:nth-child(4),
.brs-table tbody tr:nth-child(3) { animation-delay: 100ms; }

.lk-events-table tbody tr:nth-child(4),
.brs-table tbody tr:nth-child(4) { animation-delay: 130ms; }

.lk-events-table tbody tr:nth-child(5),
.brs-table tbody tr:nth-child(5) { animation-delay: 160ms; }

.lk-events-table tbody tr:nth-child(n+6),
.brs-table tbody tr:nth-child(n+6) { animation-delay: 190ms; }

/* ----------------------------------------------------------
   SKELETON LOADING STATES
   ---------------------------------------------------------- */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(15, 23, 42, 0.06) 25%,
        rgba(15, 23, 42, 0.10) 37%,
        rgba(15, 23, 42, 0.06) 63%
    );
    background-size: 400px 100%;
    animation: shimmer 1.4s infinite linear;
    border-radius: 6px;
    display: block;
}

.skeleton-text  { height: 14px; margin-bottom: 8px; width: 100%; }
.skeleton-title { height: 22px; margin-bottom: 12px; width: 60%; }
.skeleton-card  { height: 80px; border-radius: var(--card-radius); }
.skeleton-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   ALERT / MESSAGE ENTRANCE
   ---------------------------------------------------------- */
.app-message {
    animation: toastIn 300ms var(--ease-out-expo) both;
}

.app-message.is-dismissing {
    animation: toastOut 250ms var(--ease-out-quart) forwards;
    overflow: hidden;
}

/* ----------------------------------------------------------
   FILTER MENU / DROPDOWN
   ---------------------------------------------------------- */
.brs-filter-menu {
    animation: scaleUp 180ms var(--ease-out-expo) both;
    transform-origin: top right;
}

/* ----------------------------------------------------------
   MODAL — improved entrance
   ---------------------------------------------------------- */
.modal-content {
    animation: scaleUp 240ms var(--ease-out-expo) both;
    transform-origin: center 30%;
}

.modal.fade .modal-dialog {
    transition: transform 260ms var(--ease-out-expo), opacity 260ms;
}

/* ----------------------------------------------------------
   PROFILE DRAWER — refined
   ---------------------------------------------------------- */
.profile-drawer {
    transition: transform 340ms var(--ease-out-expo);
}

.profile-drawer-backdrop {
    transition: opacity 300ms var(--ease-out-quart);
}

/* ----------------------------------------------------------
   FOCUS RING — refined for keyboard nav
   ---------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ----------------------------------------------------------
   ACTIVE STATE — sidebar indicator
   ---------------------------------------------------------- */
.sidebar-link.active,
.sidebar-link.is-active {
    transition:
        background 160ms var(--ease-out-quart),
        color 160ms,
        transform 100ms var(--ease-out-quart);
}

/* ----------------------------------------------------------
   PAGINATION — hover lift
   ---------------------------------------------------------- */
.page-link {
    transition:
        background 140ms var(--ease-out-quart),
        color 120ms,
        border-color 120ms,
        transform 140ms var(--ease-out-quart),
        box-shadow 140ms;
}

/* ----------------------------------------------------------
   SETTINGS DIRECTORY LINKS
   ---------------------------------------------------------- */
.settings-directory__link {
    transition:
        color 130ms var(--ease-out-quart),
        background 130ms,
        transform 180ms var(--ease-out-expo);
}

.settings-directory__link:hover {
    transform: translateX(4px);
}

/* ----------------------------------------------------------
   REDUCED MOTION — override everything
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        animation-delay: 0ms !important;
    }
}