/* ==========================================================================
   DATOCHAI SKELETON LOADING SYSTEM
   Theme-aware, zero CLS, full accessibility.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Skeleton design tokens
   -------------------------------------------------------------------------- */
:root {
    --skeleton-base:  var(--color-surface-tertiary, #f5f5f5);
    --skeleton-shine: var(--color-surface-primary, #ffffff);
}

body.dark-mode {
    --skeleton-base:  #2a2a2a;
    --skeleton-shine: #3a3a3a;
}

/* --------------------------------------------------------------------------
   2. Shimmer animation
   -------------------------------------------------------------------------- */
@keyframes skeletonShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* --------------------------------------------------------------------------
   3. Global skeleton rules
   -------------------------------------------------------------------------- */

/* Container clip so the shimmer overlay stays inside */
body.skeleton-loading .skeleton-target {
    position: relative;
    overflow: hidden;
}

/* Hide real content so it doesn't flash during load */
body.skeleton-loading .skeleton-target > * {
    opacity: 0 !important;
    transition: opacity 0.2s ease;
}

/* Shimmer overlay covering the entire container */
body.skeleton-loading .skeleton-target::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    background: linear-gradient(
        90deg,
        var(--skeleton-base) 25%,
        var(--skeleton-shine) 50%,
        var(--skeleton-base) 75%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite linear;
    pointer-events: none;
}

/* Prevent images from triggering layout shift */
body.skeleton-loading .skeleton-target img {
    visibility: hidden;
}

/* --------------------------------------------------------------------------
   4. Large-screen container scaling
   Ensures the layout fills wide monitors proportionally.
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
    .datochai-container { max-width: 1280px; }
}

@media (min-width: 1600px) {
    .datochai-container { max-width: 1500px; }
}

@media (min-width: 2000px) {
    .datochai-container { max-width: 1700px; }
}