/* === PORTFOLIO LIVE PREVIEW SYSTEM ===
   Layers inside .portfolio-preview-wrap (220px window, overflow:hidden, from portfolio-page.css):
     1. img.rk-preview-fallback   — the existing static screenshot, always the base layer
     2. div.rk-preview-loading    — spinner overlay, visible while the iframe is loading
     3. div.rk-preview-reveal     — opacity/scale/blur reveal target for the live iframe
        └ div.rk-preview-track    — translateY scroll target (driven by JS rAF, not CSS)
           └ iframe.rk-preview-iframe — fixed 1440px-wide "desktop" render, scaled down via
             a JS-computed transform: scale() so it matches the card's actual width.
   Cards with no live-preview capability (blocked by X-Frame-Options, or no live site at all)
   simply never get the extra layers — they keep the original fallback-image + rk-scroll-*
   hover behavior untouched, so nothing here can regress them. */

.rk-preview-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #ffffff;
    opacity: 1;
    transition: opacity .4s ease;
    pointer-events: none;
    z-index: 3;
}
.rk-preview-loading.rk-hidden {
    opacity: 0;
}
.rk-spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid #E0E0E0;
    border-top-color: #FFA500;
    border-radius: 50%;
    animation: rk-spin 0.8s linear infinite;
}
@keyframes rk-spin {
    to { transform: rotate(360deg); }
}
.rk-preview-loading-text {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #333333;
    letter-spacing: .02em;
}

.rk-preview-reveal {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    transform: scale(0.96);
    filter: blur(8px);
    pointer-events: none;
}
.rk-preview-reveal.rk-ready {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    transition: opacity 500ms ease-out, transform 500ms ease-out, filter 500ms ease-out;
}

.rk-preview-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* height + transform (scroll position) are set by JS per frame */
}

.rk-preview-iframe {
    display: block !important;
    width: 1440px !important;
    max-width: none !important;
    height: 6000px !important;
    border: 0 !important;
    margin: 0 !important;
    transform-origin: top left;
    pointer-events: none; /* the card itself is the hover/tap target, not the framed page */
}
/* Elementor's own frontend.css sets `.elementor iframe { width:100% }`, which has higher
   specificity than a single class selector and was silently squeezing this down to the
   card's own width — then our scale() shrank that already-tiny box a second time. */
.rk-preview-reveal {
    background: #ffffff;
}

/* Respect prefers-reduced-motion: skip the reveal/scale flourish, no auto-scroll (handled in JS) */
@media (prefers-reduced-motion: reduce) {
    .rk-preview-reveal.rk-ready {
        transition: opacity 300ms ease;
        transform: none;
        filter: none;
    }
}