/* ============================================================================
   LEBIGOLAND — V37 visual refresh
   Только визуальный слой: анимации, переходы, живые hover/focus, светлая/тёмная тема.
   Функционал страниц не меняет.
   ============================================================================ */

:root {
    --vfx-red: #d73228;
    --vfx-red-2: #ff4a3d;
    --vfx-red-dark: #78120e;
    --vfx-amber: #e0aa18;
    --vfx-ink: rgba(0, 0, 0, 0.34);
    --vfx-line: rgba(255, 255, 255, 0.09);
    --vfx-line-strong: rgba(255, 255, 255, 0.16);
    --vfx-glow: rgba(215, 50, 40, 0.30);
    --vfx-glow-soft: rgba(215, 50, 40, 0.16);
    --vfx-panel-glass: rgba(27, 30, 34, 0.82);
    --vfx-panel-raised: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(0,0,0,0.11));
    --vfx-grid: rgba(255, 255, 255, 0.025);
    --vfx-speed: 180ms;
    --vfx-speed-slow: 420ms;
    --vfx-ease: cubic-bezier(.2, .8, .2, 1);
    --vfx-x: 50vw;
    --vfx-y: 18vh;
}

body.light {
    --vfx-ink: rgba(0, 0, 0, 0.16);
    --vfx-line: rgba(0, 0, 0, 0.09);
    --vfx-line-strong: rgba(0, 0, 0, 0.18);
    --vfx-glow: rgba(198, 42, 32, 0.20);
    --vfx-glow-soft: rgba(198, 42, 32, 0.10);
    --vfx-panel-glass: rgba(235, 232, 223, 0.88);
    --vfx-panel-raised: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(0,0,0,0.045));
    --vfx-grid: rgba(0, 0, 0, 0.030);
}

html {
    scroll-behavior: smooth;
}

body.industrial-theme {
    isolation: isolate;
    background-attachment: fixed;
}

body.industrial-theme::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at var(--vfx-x) var(--vfx-y), var(--vfx-glow-soft), transparent 34vw),
        linear-gradient(90deg, transparent 0 96%, var(--vfx-grid) 96% 100%),
        linear-gradient(180deg, transparent 0 96%, var(--vfx-grid) 96% 100%);
    background-size: auto, 44px 44px, 44px 44px;
    opacity: 0.95;
    transition: background-position 0.2s linear;
}

body.industrial-theme::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 42%, rgba(215, 50, 40, 0.055) 46%, transparent 51%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 8px);
    opacity: 0.55;
    animation: vfxBackgroundSweep 12s linear infinite;
}

body.light.industrial-theme::after {
    background:
        linear-gradient(115deg, transparent 0 42%, rgba(201, 42, 32, 0.07) 46%, transparent 51%),
        repeating-linear-gradient(0deg, rgba(0,0,0,0.018) 0 1px, transparent 1px 8px);
    opacity: 0.62;
}

@keyframes vfxBackgroundSweep {
    0% { transform: translate3d(-4%, -2%, 0); }
    50% { transform: translate3d(4%, 2%, 0); }
    100% { transform: translate3d(-4%, -2%, 0); }
}

/* ---------- app loader / page entrance ---------- */

.app-loader .loader-logo,
.app-loader .loader-title {
    animation: vfxLoaderPulse 1.25s var(--vfx-ease) infinite alternate;
}

@keyframes vfxLoaderPulse {
    from { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 transparent); }
    to { transform: translateY(-4px) scale(1.025); filter: drop-shadow(0 0 18px var(--vfx-glow)); }
}

body.visual-ready .container,
body.visual-ready .header {
    animation: vfxPageEnter 520ms var(--vfx-ease) both;
}

body.visual-ready .container {
    animation-delay: 90ms;
}

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

/* ---------- header, nav, search ---------- */

.header {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 0 rgba(0,0,0,0.16), 0 1px 0 var(--vfx-line-strong);
}

.header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--vfx-red), transparent);
    opacity: 0.72;
    pointer-events: none;
}

.logo-live-link,
.industrial-logo,
.header-profile,
.user-pill,
.header-icon-btn,
.header-theme-btn,
.theme-btn,
.notification-btn,
.search-section,
.nav-tab {
    transition:
        transform var(--vfx-speed) var(--vfx-ease),
        border-color var(--vfx-speed) ease,
        background-color var(--vfx-speed) ease,
        box-shadow var(--vfx-speed) ease,
        color var(--vfx-speed) ease,
        filter var(--vfx-speed) ease;
}

.logo-live-link:hover,
.industrial-logo:hover,
.header-profile:hover,
.user-pill:hover,
.header-icon-btn:hover,
.header-theme-btn:hover,
.theme-btn:hover,
.notification-btn:hover {
    transform: translate(-2px, -2px);
    filter: brightness(1.06);
}

.logo-live-dot {
    box-shadow: 0 0 0 0 rgba(215, 50, 40, 0.55);
    animation: vfxLivePulse 1.8s ease-out infinite;
}

@keyframes vfxLivePulse {
    0% { box-shadow: 0 0 0 0 rgba(215, 50, 40, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(215, 50, 40, 0); }
    100% { box-shadow: 0 0 0 0 rgba(215, 50, 40, 0); }
}

.search-section {
    position: relative;
    overflow: visible !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.035), transparent);
}

.search-section:focus-within {
    transform: translate(-2px, -2px);
    border-color: var(--vfx-red) !important;
    box-shadow: 5px 5px 0 var(--vfx-ink), 0 0 0 1px var(--vfx-red), 0 0 28px var(--vfx-glow-soft) !important;
}

.search-section::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -2px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--vfx-red), var(--vfx-amber), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms var(--vfx-ease);
    pointer-events: none;
}

.search-section:focus-within::after {
    transform: scaleX(1);
}

.global-search-results:not(.hidden) {
    animation: vfxDropdown 180ms var(--vfx-ease) both;
    box-shadow: 7px 7px 0 var(--vfx-ink), 0 0 0 1px var(--vfx-line-strong), 0 0 26px var(--vfx-glow-soft) !important;
}

@keyframes vfxDropdown {
    from { opacity: 0; transform: translateY(-8px) scaleY(.96); }
    to { opacity: 1; transform: translateY(0) scaleY(1); }
}

.nav-tab {
    position: relative;
    overflow: hidden;
}

.nav-tab::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,0.20) 44%, transparent 52%);
    transform: translateX(-130%);
    transition: transform 520ms var(--vfx-ease);
}

.nav-tab:hover,
.nav-tab:focus-visible {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--vfx-ink) !important;
}

.nav-tab:hover::after,
.nav-tab.active::after {
    transform: translateX(130%);
}

.nav-tab.active {
    box-shadow: 5px 5px 0 var(--vfx-ink), inset 0 -3px 0 rgba(0,0,0,0.22) !important;
}

/* ---------- buttons / controls ---------- */

button,
.btn,
.add-video-btn,
.filter-btn,
.action-btn,
.icon-btn,
.like-btn,
.comment-btn,
.share-btn,
.donate-link-btn,
.donate-detail-link,
.giveaway-join-btn,
.pagination button,
.site-mini-footer-links a,
.site-mini-footer-links button {
    transition:
        transform var(--vfx-speed) var(--vfx-ease),
        box-shadow var(--vfx-speed) ease,
        border-color var(--vfx-speed) ease,
        background-color var(--vfx-speed) ease,
        color var(--vfx-speed) ease,
        filter var(--vfx-speed) ease !important;
}

button:hover,
.btn:hover,
.add-video-btn:hover,
.filter-btn:hover,
.action-btn:hover,
.icon-btn:hover,
.like-btn:hover,
.comment-btn:hover,
.share-btn:hover,
.donate-link-btn:hover,
.donate-detail-link:hover,
.giveaway-join-btn:hover,
.pagination button:hover,
.site-mini-footer-links a:hover,
.site-mini-footer-links button:hover {
    transform: translate(-2px, -2px);
    filter: brightness(1.05) saturate(1.05);
}

button:active,
.btn:active,
.add-video-btn:active,
.filter-btn:active,
.action-btn:active,
.icon-btn:active,
.like-btn:active,
.comment-btn:active,
.share-btn:active,
.donate-link-btn:active,
.donate-detail-link:active,
.giveaway-join-btn:active,
.pagination button:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 var(--vfx-ink) !important;
}

.vfx-ripple {
    position: fixed;
    width: 10px;
    height: 10px;
    z-index: 9998;
    pointer-events: none;
    background: rgba(255,255,255,0.38);
    border: 1px solid rgba(255,255,255,0.55);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.9;
    animation: vfxRipple 520ms ease-out forwards;
    border-radius: 0;
}

body.light .vfx-ripple {
    background: rgba(201, 42, 32, 0.22);
    border-color: rgba(201, 42, 32, 0.38);
}

@keyframes vfxRipple {
    to { transform: translate(-50%, -50%) scale(9); opacity: 0; }
}

/* ---------- cards / panels ---------- */

.video-card,
.feed-card,
.community-post-card,
.donate-card,
.giveaway-card,
.winner-card,
.controls,
.page-control-panel,
.modal-content,
.empty-state,
.feed-empty-state,
.giveaway-case-card,
.giveaway-case-stage,
.pinned-donate-card,
.site-mini-footer-inner {
    position: relative;
    transition:
        transform var(--vfx-speed-slow) var(--vfx-ease),
        box-shadow var(--vfx-speed-slow) var(--vfx-ease),
        border-color var(--vfx-speed) ease,
        background-color var(--vfx-speed) ease,
        filter var(--vfx-speed) ease;
}

.video-card::after,
.feed-card::after,
.community-post-card::after,
.donate-card::after,
.giveaway-card::after,
.winner-card::after,
.controls::after,
.page-control-panel::after,
.empty-state::after,
.feed-empty-state::after,
.giveaway-case-card::after,
.giveaway-case-stage::after,
.pinned-donate-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(125deg, transparent 0 43%, rgba(255,255,255,0.075) 48%, transparent 54%);
    transform: translateX(-120%);
    opacity: 0;
    transition: transform 700ms var(--vfx-ease), opacity 180ms ease;
}

.video-card:hover,
.feed-card:hover,
.community-post-card:hover,
.donate-card:hover,
.giveaway-card:hover,
.winner-card:hover,
.giveaway-case-card:hover,
.pinned-donate-card:hover {
    transform: translate(-3px, -3px);
    border-color: var(--vfx-red) !important;
    box-shadow: 9px 9px 0 var(--vfx-ink), 0 0 0 1px rgba(215, 50, 40, 0.12), 0 0 28px var(--vfx-glow-soft) !important;
}

.video-card:hover::after,
.feed-card:hover::after,
.community-post-card:hover::after,
.donate-card:hover::after,
.giveaway-card:hover::after,
.winner-card:hover::after,
.controls:hover::after,
.page-control-panel:hover::after,
.empty-state:hover::after,
.feed-empty-state:hover::after,
.giveaway-case-card:hover::after,
.giveaway-case-stage:hover::after,
.pinned-donate-card:hover::after {
    transform: translateX(120%);
    opacity: 1;
}

.video-card,
.community-post-card,
.donate-card,
.giveaway-card,
.winner-card {
    background-image: var(--vfx-panel-raised) !important;
}

.video-card-thumbnail,
.video-thumbnail,
.feed-card-preview,
.community-post-preview,
.donate-preview-wrap,
.giveaway-card-image,
.giveaway-cover {
    overflow: hidden;
}

.video-card-thumbnail img,
.video-thumbnail img,
.feed-card-preview img,
.community-post-preview img,
.donate-preview-wrap img,
.giveaway-card-image img,
.giveaway-cover img {
    transition: transform 520ms var(--vfx-ease), filter 520ms ease;
}

.video-card:hover .video-card-thumbnail img,
.video-card:hover .video-thumbnail img,
.feed-card:hover .feed-card-preview img,
.community-post-card:hover .community-post-preview img,
.donate-card:hover .donate-preview-wrap img,
.giveaway-card:hover .giveaway-card-image img,
.giveaway-card:hover .giveaway-cover img {
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.04);
}

/* ---------- reveal animation for dynamic content ---------- */

.vfx-reveal {
    opacity: 0;
    transform: translateY(18px);
}

.vfx-reveal.vfx-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 480ms var(--vfx-ease), transform 480ms var(--vfx-ease);
}

.video-grid > .vfx-visible:nth-child(2n),
.feed-stream > .vfx-visible:nth-child(2n),
.donates-grid > .vfx-visible:nth-child(2n),
.giveaways-grid > .vfx-visible:nth-child(2n) {
    transition-delay: 55ms;
}

.video-grid > .vfx-visible:nth-child(3n),
.feed-stream > .vfx-visible:nth-child(3n),
.donates-grid > .vfx-visible:nth-child(3n),
.giveaways-grid > .vfx-visible:nth-child(3n) {
    transition-delay: 95ms;
}

/* ---------- modals / floating widgets / popups ---------- */

.modal:not(.hidden) .modal-content,
.modal.active .modal-content,
.modal.show .modal-content,
.modal[style*="display: block"] .modal-content {
    animation: vfxModalIn 220ms var(--vfx-ease) both;
}

@keyframes vfxModalIn {
    from { opacity: 0; transform: translateY(18px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.pinned-donate-spotlight {
    animation: vfxPinnedIn 420ms var(--vfx-ease) both;
}

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

.pinned-donate-card {
    background-image: linear-gradient(180deg, var(--vfx-panel-glass), rgba(0,0,0,0.08)) !important;
}

/* ---------- inputs / forms ---------- */

input,
textarea,
select,
.form-control,
.sort-pill {
    transition:
        transform var(--vfx-speed) var(--vfx-ease),
        border-color var(--vfx-speed) ease,
        box-shadow var(--vfx-speed) ease,
        background-color var(--vfx-speed) ease !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.sort-pill:focus {
    border-color: var(--vfx-red) !important;
    box-shadow: 4px 4px 0 var(--vfx-ink), 0 0 0 1px var(--vfx-red), 0 0 24px var(--vfx-glow-soft) !important;
    outline: none !important;
}

/* ---------- statuses / badges ---------- */

.badge,
.status-badge,
.donate-pin-badge,
.donate-status,
.feed-badge,
.giveaway-status,
.comment-count,
.feed-drafts-count,
.notification-badge {
    transition: transform var(--vfx-speed) var(--vfx-ease), filter var(--vfx-speed) ease, box-shadow var(--vfx-speed) ease;
}

.badge:hover,
.status-badge:hover,
.donate-pin-badge:hover,
.donate-status:hover,
.feed-badge:hover,
.giveaway-status:hover,
.comment-count:hover,
.feed-drafts-count:hover,
.notification-badge:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

/* ---------- skeletons / loading ---------- */

.skeleton-line,
.skeleton-preview,
.video-skeleton,
.feed-skeleton,
.donate-skeleton {
    position: relative;
    overflow: hidden;
}

.skeleton-line::after,
.skeleton-preview::after,
.video-skeleton::after,
.feed-skeleton::after,
.donate-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
    transform: translateX(-100%);
    animation: vfxSkeleton 1.35s linear infinite;
}

body.light .skeleton-line::after,
body.light .skeleton-preview::after,
body.light .video-skeleton::after,
body.light .feed-skeleton::after,
body.light .donate-skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
}

@keyframes vfxSkeleton {
    to { transform: translateX(100%); }
}

/* ---------- mini footer ---------- */

.site-mini-footer-inner {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.site-mini-footer.is-visible .site-mini-footer-inner {
    animation: vfxFooterIn 240ms var(--vfx-ease) both;
}

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

/* ---------- visual toast layer ---------- */

.visual-toast-stack {
    position: fixed;
    right: 16px;
    top: 96px;
    z-index: 9999;
    display: grid;
    gap: 8px;
    pointer-events: none;
}

.visual-toast {
    min-width: min(320px, calc(100vw - 32px));
    max-width: 380px;
    padding: 10px 12px;
    color: var(--text-primary);
    background: var(--vfx-panel-glass);
    border: 1px solid var(--border);
    border-left: 5px solid var(--vfx-red);
    box-shadow: 6px 6px 0 var(--vfx-ink), 0 0 28px var(--vfx-glow-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
    animation: vfxToastIn 220ms var(--vfx-ease) both;
}

.visual-toast i {
    color: var(--vfx-red-2);
}

.visual-toast strong {
    display: block;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.visual-toast span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.25;
}

.visual-toast.is-leaving {
    animation: vfxToastOut 180ms ease-in forwards;
}

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

@keyframes vfxToastOut {
    to { opacity: 0; transform: translateX(18px); }
}

body.light .visual-toast {
    color: #17191b;
    background: rgba(244, 241, 232, 0.92);
}

body.light .visual-toast span {
    color: #3f4446;
}

/* ---------- dark/light balancing ---------- */

body.light .header,
body.light .search-section,
body.light .global-search-results,
body.light .video-card,
body.light .feed-card,
body.light .community-post-card,
body.light .donate-card,
body.light .giveaway-card,
body.light .winner-card,
body.light .controls,
body.light .page-control-panel,
body.light .modal-content,
body.light .site-mini-footer-inner {
    box-shadow: 5px 5px 0 rgba(0,0,0,0.12) !important;
}

body.light .video-card:hover,
body.light .feed-card:hover,
body.light .community-post-card:hover,
body.light .donate-card:hover,
body.light .giveaway-card:hover,
body.light .winner-card:hover,
body.light .pinned-donate-card:hover {
    box-shadow: 8px 8px 0 rgba(0,0,0,0.16), 0 0 24px rgba(201,42,32,0.13) !important;
}

body.light .nav-tab::after,
body.light .video-card::after,
body.light .feed-card::after,
body.light .community-post-card::after,
body.light .donate-card::after,
body.light .giveaway-card::after,
body.light .winner-card::after,
body.light .controls::after,
body.light .page-control-panel::after,
body.light .empty-state::after,
body.light .feed-empty-state::after,
body.light .giveaway-case-card::after,
body.light .giveaway-case-stage::after,
body.light .pinned-donate-card::after {
    background: linear-gradient(125deg, transparent 0 43%, rgba(255,255,255,0.46) 48%, transparent 54%);
}

/* ---------- mobile polishing ---------- */

@media (max-width: 760px) {
    .visual-toast-stack {
        top: auto;
        right: 12px;
        left: 12px;
        bottom: 84px;
    }

    .visual-toast {
        min-width: 0;
        max-width: none;
    }

    .video-card:hover,
    .feed-card:hover,
    .community-post-card:hover,
    .donate-card:hover,
    .giveaway-card:hover,
    .winner-card:hover,
    .pinned-donate-card:hover,
    button:hover,
    .btn:hover,
    .add-video-btn:hover,
    .filter-btn:hover,
    .action-btn:hover,
    .icon-btn:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }

    .vfx-reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    body.industrial-theme::before,
    body.industrial-theme::after {
        animation: none !important;
    }
}