/* =============================================================================
   TEMPORARY EASTER EGG — added 2026-09-25.

   Hovering the cjenik footer icon swaps it for cjenik_hover.jpg, slightly
   zoomed. Applies to that one icon only: it is matched by the image filename,
   so no template, model or database row knows this exists.

   TO REMOVE, delete:
     1. this file
     2. the one <link> tag that loads it in cheliweb/templates/layout.html
     3. the one <link> tag that loads it in cheliweb/templates/layout_new.html
   Nothing else references it, and the icon keeps working as an ordinary footer
   link. static/uploads/banner-pics/cjenik_hover.jpg can go too.

   Browsers without :has() support simply show the normal icon.
   ============================================================================= */

/* The anchor carries the hover picture as a background, so the box keeps the
   exact size the icon already had and the footer never reflows on hover. */
a.footericon:has(img[src*="cjenik.png"]),
a.footer-icon:has(img[src*="cjenik.png"]) {
    display: inline-block;          /* the old layout's <a> is inline, so its
                                       background box would otherwise not match
                                       the 30px icon */
    vertical-align: middle;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 3px;
    transition: transform .25s ease;
}

a.footericon:has(img[src*="cjenik.png"]):hover,
a.footer-icon:has(img[src*="cjenik.png"]):hover {
    background-image: url("/static/uploads/banner-pics/cjenik_hover.jpg");
    /* scale first, so the -8px translate is applied in the scaled coordinate
       system and lifts the picture by 32px — it grows mostly upward, out of the
       footer, rather than centred on the icon. */
    transform: scale(4.00) translateY(-8px);
    /* at 4x it overlaps its neighbours, so it has to paint above them */
    position: relative;
    z-index: 20;
}

/* Hide the png itself on hover, revealing the background underneath. Only the
   <img> fades, so the background stays fully opaque. transform:none cancels the
   new layout's own scale(1.2) on an element that is now invisible anyway. */
a.footericon:has(img[src*="cjenik.png"]):hover img,
a.footer-icon:has(img[src*="cjenik.png"]):hover img {
    opacity: 0;
    transform: none;
}