/* =========================================================
   Flip Image Widget — Tekcom (3D flip, GPU-accelerated)
   ========================================================= */

/*
 * Anti-glitch rules:
 * 1. perspective on WRAPPER, not on the rotating element
 * 2. translateZ(1px) on each face → forces individual GPU compositing layers
 * 3. will-change only on the rotating inner (one layer hint is enough)
 * 4. NO overflow:hidden on preserve-3d element (browsers ignore it → artifacts)
 * 5. -webkit-mask-image trick to clip border-radius in Safari with 3D
 */

/* ── Wrapper ───────────────────────────────────────────── */
.flip-image-wrapper {
    display: block;
    position: relative;
    width: 100%;
    height: 300px;
    min-height: 0;
    text-decoration: none;
    cursor: default;

    /* perspective must sit HERE, outside the rotating element */
    perspective: 1200px;
    perspective-origin: 50% 50%;

    /* Wrapper clipping: handles border-radius overflow for non-Safari */
    overflow: hidden;
}

a.flip-image-wrapper {
    cursor: pointer;
}

/* ── Rotating card ─────────────────────────────────────── */
.flip-image__inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    /* 3D context */
    transform-style: preserve-3d;

    /* Smooth easing — ease-in-out avoids harsh start/end snapping */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    /* Single GPU layer hint */
    will-change: transform;

    /* Do NOT set overflow:hidden here — preserve-3d ignores it in most browsers */
}

/* Horizontal: flip on Y axis */
.flip-image-wrapper--horizontal:hover .flip-image__inner,
.flip-image-wrapper--horizontal:focus-within .flip-image__inner {
    transform: rotateY(180deg);
}

/* Vertical: flip on X axis */
.flip-image-wrapper--vertical:hover .flip-image__inner,
.flip-image-wrapper--vertical:focus-within .flip-image__inner {
    transform: rotateX(180deg);
}

/* ── Faces ──────────────────────────────────────────────── */
.flip-image__face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;                       /* safe on non-preserve-3d children */

    /* Hide back of each face */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    /*
     * translateZ(1px): nudges face 1 px toward viewer on its own GPU layer.
     * Prevents subpixel z-fighting flicker between front and back.
     */
    transform: translateZ(1px);

    /*
     * Safari border-radius fix with 3D transforms.
     * -webkit-mask forces Safari to composite this element,
     * which respects overflow:hidden + border-radius correctly.
     */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Overlay tint */
.flip-image__face::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Images fill the face entirely */
.flip-image__face img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Keep image on the same GPU layer as the face */
    transform: translateZ(0);
}

/* ── Back face: start rotated away ─────────────────────── */

/* Horizontal back */
.flip-image-wrapper--horizontal .flip-image__face--back {
    transform: rotateY(180deg) translateZ(1px);
}

/* Vertical back */
.flip-image-wrapper--vertical .flip-image__face--back {
    transform: rotateX(180deg) translateZ(1px);
}

/* ── Accessibility ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .flip-image__inner {
        transition: none !important;
    }
}