@keyframes hodod-skeleton-shimmer {
    to { background-position: -220% 0; }
}

@keyframes hodod-route-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .48s ease, transform .48s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

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

img.image-skeleton,
.route-skeleton i {
    color: transparent;
    background: linear-gradient(100deg, #eeedf0 25%, #f8f7f8 38%, #eeedf0 62%);
    background-size: 220% 100%;
    animation: hodod-skeleton-shimmer 1.25s linear infinite;
}

img.image-skeleton {
    min-height: 48px;
}

.route-skeleton,
.page-loading-skeleton {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: none;
    align-content: start;
    gap: 22px;
    padding: clamp(22px, 5vw, 64px);
    background: #fff;
    pointer-events: none;
}

.route-loading .route-skeleton {
    display: grid;
    animation: hodod-route-enter .14s ease-out both;
}

.js-enabled .page-loading-skeleton,
.page-loading-skeleton { display: none !important; }

.route-skeleton-head,
.route-skeleton-grid,
.route-skeleton-body {
    display: grid;
    gap: 14px;
    width: min(100%, 1080px);
    margin-inline: auto;
}

.route-skeleton-head { grid-template-columns: 1fr auto; align-items: center; }
.route-skeleton-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.route-skeleton-body { grid-template-columns: 1fr; }
.route-skeleton i,
.page-loading-skeleton i { display: block; min-height: 78px; border-radius: 16px; }
.route-skeleton-head i:first-child { min-height: 26px; width: min(42%, 280px); }
.route-skeleton-head i:last-child { min-height: 38px; width: 110px; border-radius: 24px; }
.route-skeleton-grid i { min-height: 118px; }
.route-skeleton-body i { min-height: 70px; }
.route-skeleton-body i:last-child { min-height: 190px; }

@media (max-width: 700px) {
    .route-skeleton,
    .page-loading-skeleton { gap: 14px; padding: 20px 16px; }
    .route-skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .route-skeleton-grid i { min-height: 88px; }
    .route-skeleton-body i { min-height: 58px; }
}

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