/* ============================================================
   Skeleton Lazy Loading  –  theme 2015
   ============================================================ */

/* ----------------------------------------------------------
   Skeleton wrapper
   Sized by JS to match the original image exactly.
   display/width/height are set inline by JS — do NOT override
   them here so existing layout is never broken.
   ---------------------------------------------------------- */
.img-skel-wrap {
    position: relative;
    overflow: hidden;
    vertical-align: top;
    /* no width / height / display here — JS sets them inline */
}

/* skeleton base colour */
.img-skel-wrap::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: #e8e8e8;
    border-radius: 4px;
    z-index: 1;
    transition: opacity 0.35s ease;
}

/* shimmer sweep */
.img-skel-wrap::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 45%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0.55) 55%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: skel-shimmer 1.6s ease-in-out infinite;
    z-index: 2;
    transition: opacity 0.35s ease;
}

/* hide both pseudo-elements once loaded */
.img-skel-wrap.skel-loaded::before,
.img-skel-wrap.skel-loaded::after {
    opacity: 0;
    pointer-events: none;
}

/*
   The real <img> — ONLY control opacity and z-index.
   Width, height, display, position are NOT touched so the image
   keeps exactly the same dimensions it had before wrapping.
*/
.img-skel-wrap > img {
    position: relative;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.img-skel-wrap.skel-loaded > img {
    opacity: 1;
}

/* Safety net: if JS fails or event is missed, never leave image invisible */
.img-skel-wrap > img[src]:not([src=""]) {
    animation: skel-img-reveal 0s 2.5s forwards;
}
@keyframes skel-img-reveal {
    to { opacity: 1; }
}

/* ----------------------------------------------------------
   Shimmer keyframe
   ---------------------------------------------------------- */
@keyframes skel-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* ----------------------------------------------------------
   Logo images: no skeleton (above-the-fold, always eager)
   ---------------------------------------------------------- */
.logo .img-skel-wrap::before,
.logo .img-skel-wrap::after {
    display: none;
}
.logo .img-skel-wrap > img {
    opacity: 1;
}