/* ============================================================
   KORRIC SHOWCASE PRO — korric-pro.css
   v3 changes:
   - Heading & watermark REMOVED (Elementor handles those)
   - Rotation slower (default 7s cycle, ~5.5s spin + 1.5s pause)
   - Feature boxes: transparent + backdrop-blur (Figma style)
   - Connector lines drawn dynamically via SVG (center → corners)
   - Button: gradient background (red → dark red)
============================================================ */

.kpm-section {
    --kpm-line-color: rgba(204, 30, 30, 0.7);

    position: relative;
    background-color: transparent;
    padding: 40px;
    font-family: inherit;
    text-align: center;
    box-sizing: border-box;
}

.kpm-section *,
.kpm-section *::before,
.kpm-section *::after {
    box-sizing: border-box;
}

/* ============================================================
   STAGE  — holds center column + 4 corners + SVG line layer
============================================================ */
.kpm-stage {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
}

/* SVG layer for connector lines (drawn via JS) */
.kpm-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.kpm-lines line {
    stroke: var(--kpm-line-color);
    stroke-width: 1.5;
    stroke-dasharray: 6 6;
    fill: none;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

/* ============================================================
   CENTER COLUMN
============================================================ */
.kpm-center-col {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   CENTER WRAP
============================================================ */
.kpm-center-wrap {
    position: relative;
    width: 420px;
    height: 420px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   RING IMAGE
============================================================ */
.kpm-ring-img--center {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
    /* SLOW rotation: 7s default cycle (controllable via Elementor)
       The keyframes are designed so the rotation finishes by ~78%
       and the last 22% is a pause before looping. */
    animation: kpmRingRotate 7s linear infinite;
    transform-origin: center center;
    will-change: transform;
}

/*
 * Slow rotate-then-pause cycle:
 *   0%   → 0 deg
 *   78%  → 360 deg     (spin phase: 78% of cycle)
 *   100% → 360 deg     (pause phase: last 22% of cycle)
 * At default 7s: ~5.5s spin + ~1.5s pause.
 */
@keyframes kpmRingRotate {
    0%   { transform: rotate(0deg); }
    78%  { transform: rotate(360deg); }
    100% { transform: rotate(360deg); }
}

/* Corner rings (static, no rotation) */
.kpm-ring-img--corner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}

/* ============================================================
   CENTER PRODUCT IMAGE STACK
============================================================ */
.kpm-center-img-wrap {
    position: relative;
    width: 78%;
    height: 78%;
    z-index: 3;
}

.kpm-center-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
}

.kpm-center-img.active {
    opacity: 1;
    transform: scale(1);
}

/* ============================================================
   CORNERS
============================================================ */
.kpm-corner {
    position: absolute;
    z-index: 2;
}

.kpm-corner--tl { top:  0;        left:  0; }
.kpm-corner--tr { top:  10%;      right: 0; }
.kpm-corner--bl { bottom: 30px;   left:  0; }
.kpm-corner--br { bottom: 60px;   right: 0; }

.kpm-corner-item {
    position: relative;
    width: 200px;
    height: 200px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.kpm-corner-item:hover {
    transform: scale(1.07);
}

.kpm-corner-product {
    width: 65%;
    height: 65%;
    object-fit: contain;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: brightness(0.9);
}

.kpm-corner-item:hover .kpm-corner-product {
    filter: brightness(1.05);
}

/* ============================================================
   FEATURE BOXES — transparent + blur (Figma style)
============================================================ */
.kpm-features-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

.kpm-features {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.kpm-features.active {
    opacity: 1;
    pointer-events: auto;
}

.kpm-feature-box {
    position: absolute;
    /* Default: dark translucent + blur — overridable via Elementor */
    background: rgba(20, 20, 20, 0.25);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid #a01010;
    border-radius: 8px;
    padding: 12px 18px;
    max-width: 240px;
    width: max-content;
    box-shadow: 0 0 18px rgba(180, 0, 0, 0.45);
    pointer-events: auto;
}

.kpm-feature-box p {
    margin: 0;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.55;
    text-align: left;
}

/* Box positions — overlap the ring (Figma layout) */
.kpm-feature-box--tr {
    top: 12%;
    right: -180px;
}

.kpm-feature-box--ml {
    top: 42%;
    left: -200px;
}

.kpm-feature-box--br {
    bottom: 18%;
    right: -180px;
}

/* ============================================================
   BUTTON — gradient background
============================================================ */
.kpm-btn-wrap {
    position: relative;
    width: 100%;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.kpm-btn {
    display: inline-block;
    /* Default fallback gradient — Elementor's group control will override this */
    background: linear-gradient(90deg, #a01010 0%, #4a0000 100%);
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 14px 40px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) translateY(10px);
    transition: opacity 0.5s ease, transform 0.3s ease, filter 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 18px rgba(160, 16, 16, 0.35);
}

.kpm-btn.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.kpm-btn:hover {
    background: linear-gradient(90deg, #cc1010 0%, #660000 100%);
    filter: brightness(1.08);
}

/* Reserve vertical space so button doesn't collapse layout */
.kpm-btn-wrap::before {
    content: '';
    display: block;
    height: 50px;
    width: 1px;
    visibility: hidden;
}

/* ============================================================
   CORNER SWAP ANIMATIONS
============================================================ */
.kpm-corner-item.going-to-center {
    animation: kpmGoCenter 0.6s ease forwards;
}

@keyframes kpmGoCenter {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(0.7); opacity: 0.5; }
    100% { transform: scale(0.5); opacity: 0; }
}

.kpm-corner-item.coming-from-center {
    animation: kpmFromCenter 0.6s ease forwards;
}

@keyframes kpmFromCenter {
    0%   { transform: scale(1.3); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

/* ============================================================
   RESPONSIVE — Tablet (max 1024px)
============================================================ */
@media (max-width: 1024px) {
    .kpm-stage {
        min-height: 520px;
        max-width: 900px;
    }
    .kpm-center-wrap {
        width: 340px;
        height: 340px;
    }
    .kpm-corner-item {
        width: 160px;
        height: 160px;
    }
    .kpm-feature-box {
        max-width: 200px;
    }
    .kpm-feature-box p {
        font-size: 12px;
    }
    .kpm-feature-box--tr { right: -150px; }
    .kpm-feature-box--ml { left:  -160px; }
    .kpm-feature-box--br { right: -150px; }
}

/* ============================================================
   RESPONSIVE — Tablet (max 900px)
============================================================ */
@media (max-width: 900px) {
    .kpm-stage {
        min-height: 460px;
    }
    .kpm-center-wrap {
        width: 280px;
        height: 280px;
    }
    .kpm-corner-item {
        width: 130px;
        height: 130px;
    }
    .kpm-feature-box {
        max-width: 170px;
        padding: 10px 14px;
    }
    .kpm-feature-box p {
        font-size: 11px;
    }
    .kpm-feature-box--tr { right: -120px; top: 5%; }
    .kpm-feature-box--ml { left:  -130px; }
    .kpm-feature-box--br { right: -120px; bottom: 8%; }
}

/* ============================================================
   RESPONSIVE — Mobile (max 600px)
   Professional compact layout:
   - Corners closer to the center product (no big empty gap)
   - All corners positioned ABOVE the button (no item below button)
   - Feature boxes hug the ring tightly
   - Button is the last visible element
============================================================ */
@media (max-width: 600px) {
    .kpm-section {
        padding: 24px 8px 30px;
        overflow: visible;
    }

    .kpm-stage {
        min-height: 480px;
        padding: 0;
        max-width: 100%;
    }

    /* Center product wrap — slightly larger for prominence */
    .kpm-center-wrap {
        width: 200px;
        height: 200px;
    }

    /* Corner items */
    .kpm-corner-item {
        width: 80px;
        height: 80px;
    }

    /* Top corners — closer to top, pulled inward toward center */
    .kpm-corner--tl { top: 20px;  left:  10px; }
    .kpm-corner--tr { top: 20px;  right: 10px; }

    /* Bottom corners — placed at the SIDES of the center product
       (between center and button), so nothing sits below the button */
    .kpm-corner--bl {
        top: auto;
        bottom: 130px;        /* sits roughly at the level just above the button */
        left:  -30px;
    }
    .kpm-corner--br {
        top: auto;
        bottom: 80px;
        right: 10px;
    }

    /* Feature boxes — compact, hugging the ring tightly */
    .kpm-feature-box {
        display: block;
        max-width: 150px;
        padding: 5px 8px;
        border-radius: 4px;
        border-width: 1px;
        font-size: 9px;
    }

    .kpm-feature-box p {
        font-size: 11px;
        line-height: 1.5;
    }

    .kpm-feature-box--tr {
        top: 12%;
        right: -85px;
    }

    .kpm-feature-box--ml {
        top: 42%;
        left: -85px;
        max-width: 150px;
    }

    .kpm-feature-box--br {
        bottom: 0;
        right: -50px;
    }

    /* Lines visible on mobile */
    .kpm-lines {
        display: block;
    }

    /* Button — closer to center (smaller gap) */
    .kpm-btn-wrap {
        margin-top: 24px;
    }

    .kpm-btn-wrap::before {
        height: 44px;
    }

    .kpm-btn {
        font-size: 13px;
        padding: 11px 32px;
    }
}

/* ============================================================
   RESPONSIVE — Very Small Mobile (max 360px)
   Hide feature boxes — there's just no room
============================================================ */
@media (max-width: 360px) {
    .kpm-feature-box {
        display: none !important;
    }
    .kpm-corner-item {
        width: 70px;
        height: 70px;
    }
    .kpm-center-wrap {
        width: 180px;
        height: 180px;
    }
    .kpm-corner--bl,
    .kpm-corner--br {
        bottom: 70px;
    }
}