/*
 * Premium animated benefit medallions — homepage hero strip.
 * Layered gold medallion shell, cinematic entry, idle float, per-icon glow hover.
 */

:root {
    --bi-size: 68px;
    --bi-svg: 32px;
    --bi-radius: 18px;
    --bi-gold: 201, 169, 110;
    --bi-entry: cubic-bezier(.22, 1.6, .36, 1);
}

body.public-home-page .home-benefits-inner article {
    --benefit-accent: var(--bi-gold);
    --benefit-glow: var(--bi-gold);
    grid-template-columns: var(--bi-size) minmax(0, 1fr);
    gap: 20px;
}

body.public-home-page .home-benefits-inner article:nth-child(1) { --benefit-glow: 80,  190, 224; }
body.public-home-page .home-benefits-inner article:nth-child(3) { --benefit-glow: 55,  205, 210; }
body.public-home-page .home-benefits-inner article:nth-child(4) { --benefit-glow: 124, 190, 137; }

/* ── Medallion shell ── */
body.public-home-page .home-benefits-inner article > .benefit-icon {
    position: relative;
    isolation: isolate;
    width: var(--bi-size) !important;
    height: var(--bi-size) !important;
    border-radius: var(--bi-radius) !important;
    overflow: hidden;
    background:
        radial-gradient(circle at 34% 22%, rgba(255, 248, 220, .28), transparent 38%),
        radial-gradient(circle at 72% 78%, rgba(var(--bi-gold), .1),  transparent 44%),
        linear-gradient(145deg,
            rgba(var(--bi-gold), .22) 0%,
            rgba(70, 50, 18, .1)   50%,
            rgba(var(--bi-gold), .08) 100%) !important;
    border: 1px solid rgba(var(--benefit-accent), .48) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .34),
        inset 0 -1px 0 rgba(0, 0, 0, .14),
        0 6px 22px rgba(var(--bi-gold), .1),
        0 2px 6px  rgba(0, 0, 0, .12) !important;
    transform-style: preserve-3d;
    will-change: transform, box-shadow;
    transition:
        border-color .34s ease,
        box-shadow   .34s ease,
        transform    .44s cubic-bezier(.22, 1.4, .36, 1);
}

/* Inner ring */
body.public-home-page .home-benefits-inner article > .benefit-icon::before {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: calc(var(--bi-radius) - 4px);
    inset: 5px;
    z-index: 0;
    border: 1px solid rgba(var(--benefit-accent), .2);
    background: radial-gradient(circle at center, rgba(var(--benefit-accent), .14), transparent 62%);
    transition: opacity .34s ease;
}

/* Outer orbit ring */
body.public-home-page .home-benefits-inner article > .benefit-icon::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: calc(var(--bi-radius) + 5px);
    inset: -6px;
    z-index: -1;
    border: 1px solid rgba(var(--benefit-accent), .14);
    opacity: .62;
    transform: scale(.9);
    transition: opacity .34s ease, transform .34s ease;
}

/* SVG */
body.public-home-page .home-benefits-inner article > .benefit-icon svg {
    width: var(--bi-svg) !important;
    height: var(--bi-svg) !important;
    overflow: visible;
    fill: none;
    stroke: #c9a96e !important;
    stroke-width: 1.4 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 5px rgba(71, 49, 12, .3));
    transform: translateZ(10px);
    position: relative;
    z-index: 1;
}

/* Shimmer sweep element */
body.public-home-page .home-benefits-inner article > .benefit-icon .bi-shine {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
        110deg,
        transparent        26%,
        rgba(255,245,200,.38) 46%,
        rgba(255,250,220,.18) 52%,
        transparent        64%
    );
    transform: translateX(-140%);
}

/* ── SVG path classes ── */
.benefit-icon-primary,
.benefit-icon-motion {
    stroke-dasharray: 72;
    stroke-dashoffset: 0;
}

.benefit-icon-spark {
    fill: #f0d99a;
    stroke: #f0d99a !important;
    transform-box: fill-box;
    transform-origin: center;
}

/* ── Scroll-reveal entry sequence ── */

/* 1. Medallion body — cinematic spring drop */
.home-motion-ready .home-benefits-inner article.home-motion-visible > .benefit-icon {
    animation:
        biMedallionEntry 1.15s var(--bi-entry) calc(var(--home-motion-delay, 0ms) + 60ms) both,
        biIdleFloat      5.4s ease-in-out       calc(var(--home-motion-delay, 0ms) + 1.4s) infinite;
}

/* 2. Outer ring expand */
.home-motion-ready .home-benefits-inner article.home-motion-visible > .benefit-icon::after {
    animation:
        biRingExpand   1.35s cubic-bezier(.16, 1, .3, 1) calc(var(--home-motion-delay, 0ms) + 160ms) both,
        biRingBreathe  5s    ease-in-out                 calc(var(--home-motion-delay, 0ms) + 1.6s)  infinite;
}

/* 3. SVG path draw */
.home-motion-ready .home-benefits-inner article.home-motion-visible > .benefit-icon .benefit-icon-primary,
.home-motion-ready .home-benefits-inner article.home-motion-visible > .benefit-icon .benefit-icon-motion {
    animation: biPathDraw 1.1s cubic-bezier(.16, 1, .3, 1) calc(var(--home-motion-delay, 0ms) + 310ms) both;
}

/* 4. Spark pop */
.home-motion-ready .home-benefits-inner article.home-motion-visible > .benefit-icon .benefit-icon-spark {
    animation: biSparkPop .9s cubic-bezier(.34, 1.56, .64, 1) calc(var(--home-motion-delay, 0ms) + 840ms) both;
}

/* ── Hover ── */
@media (hover: hover) and (pointer: fine) {
    body.public-home-page .home-benefits-inner article:hover > .benefit-icon {
        border-color: rgba(var(--benefit-accent), .86) !important;
        background:
            radial-gradient(circle at 34% 22%, rgba(255, 248, 220, .42), transparent 42%),
            radial-gradient(circle at 72% 78%, rgba(var(--bi-gold), .2),  transparent 50%),
            linear-gradient(145deg,
                rgba(var(--bi-gold), .34) 0%,
                rgba(70, 50, 18, .14)  50%,
                rgba(var(--bi-gold), .14) 100%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .46),
            0 18px 48px rgba(var(--benefit-glow), .32),
            0 0 0 6px   rgba(var(--benefit-accent), .07),
            0 4px 14px  rgba(0, 0, 0, .18) !important;
        transform: translateY(-7px) rotateX(12deg) rotateY(-9deg) scale(1.06) !important;
        animation: none !important;
    }

    body.public-home-page .home-benefits-inner article:hover > .benefit-icon::after {
        animation: biOrbit 3s linear infinite !important;
        border-style: dashed;
        opacity: 1;
        transform: scale(1.04);
    }

    body.public-home-page .home-benefits-inner article:hover > .benefit-icon .bi-shine {
        animation: biShimmer .68s ease both;
    }

    /* Sea & pool waves */
    body.public-home-page .home-benefits-inner article:hover .benefit-icon--sea  .benefit-icon-wave-one,
    body.public-home-page .home-benefits-inner article:hover .benefit-icon--pool .benefit-icon-wave-one {
        animation: biWave 1.6s ease-in-out infinite alternate;
    }
    body.public-home-page .home-benefits-inner article:hover .benefit-icon--sea  .benefit-icon-wave-two,
    body.public-home-page .home-benefits-inner article:hover .benefit-icon--pool .benefit-icon-wave-two {
        animation: biWave 1.6s ease-in-out -.62s infinite alternate-reverse;
    }

    /* Skybar spark */
    body.public-home-page .home-benefits-inner article:hover .benefit-icon--skybar .benefit-icon-spark {
        animation: biSparkPulse 1.3s ease-in-out infinite;
    }

    /* Skybar roof raise */
    body.public-home-page .home-benefits-inner article:hover .benefit-icon--skybar .benefit-icon-roof {
        animation: biRoofRaise .58s cubic-bezier(.34, 1.56, .64, 1) both;
    }

    /* Location pin core */
    body.public-home-page .home-benefits-inner article:hover .benefit-icon--location .benefit-icon-pin-core {
        animation: biPinCore 1.45s ease-in-out infinite;
    }
}

/* ── Keyframes ── */

@keyframes biMedallionEntry {
    0%   { opacity: 0; transform: scale(.48) translateY(20px) rotate(-20deg); filter: blur(8px); }
    58%  { opacity: 1; transform: scale(1.12) translateY(-5px) rotate(5deg);  filter: blur(0);   }
    78%  {             transform: scale(.94) translateY(2px) rotate(-1.5deg);                     }
    100% { opacity: 1; transform: scale(1) translateY(0) rotate(0);           filter: blur(0);   }
}

@keyframes biRingExpand {
    0%   { opacity: 0; transform: scale(.56) rotate(-28deg); }
    55%  { opacity: .9; transform: scale(1.14) rotate(9deg); }
    100% { opacity: .62; transform: scale(.9) rotate(0);     }
}

@keyframes biPathDraw {
    from { opacity: 0; stroke-dashoffset: 72; }
    to   { opacity: 1; stroke-dashoffset: 0;  }
}

@keyframes biSparkPop {
    from { opacity: 0; transform: scale(.06) rotate(-110deg); }
    to   { opacity: 1; transform: scale(1) rotate(0);         }
}

@keyframes biIdleFloat {
    0%, 100% { transform: translateY(0);   box-shadow: 0 6px 22px rgba(var(--bi-gold), .1), 0 2px 6px rgba(0,0,0,.12); }
    50%       { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(var(--bi-gold), .18), 0 2px 6px rgba(0,0,0,.1); }
}

@keyframes biRingBreathe {
    0%, 100% { opacity: .62; transform: scale(.9);  }
    50%       { opacity: .28; transform: scale(.98); }
}

@keyframes biOrbit {
    to { transform: rotate(360deg) scale(1.06); }
}

@keyframes biShimmer {
    from { transform: translateX(-140%); }
    to   { transform: translateX(145%);  }
}

@keyframes biWave {
    from { transform: translateX(-1.5px); }
    to   { transform: translateX(1.5px);  }
}

@keyframes biSparkPulse {
    0%, 100% { opacity: .48; transform: scale(.66) rotate(0);    }
    50%       { opacity: 1;   transform: scale(1.32) rotate(45deg); }
}

@keyframes biPinCore {
    0%, 100% { transform: scale(.78); opacity: .64; }
    50%       { transform: scale(1.22); opacity: 1;  }
}

@keyframes biRoofRaise {
    from { transform: translateY(4px); opacity: .36; }
    to   { transform: translateY(0);   opacity: 1;   }
}

/* ── Mobile ── */
@media (max-width: 980px) {
    :root {
        --bi-size: 60px;
        --bi-svg: 28px;
        --bi-radius: 16px;
    }

    body.public-home-page .home-benefits-inner article {
        grid-template-columns: var(--bi-size) minmax(0, 1fr);
        gap: 15px;
    }

    .home-motion-ready .home-benefits-inner article.home-motion-visible > .benefit-icon {
        animation:
            biMedallionEntry 1.15s var(--bi-entry) calc(var(--home-motion-delay, 0ms) + 60ms)  both,
            biIdleFloat      7s    ease-in-out      calc(var(--home-motion-delay, 0ms) + 1.6s)  infinite;
    }

    .home-motion-ready .home-benefits-inner article.home-motion-visible > .benefit-icon::after {
        animation:
            biRingExpand  1.35s cubic-bezier(.16, 1, .3, 1) calc(var(--home-motion-delay, 0ms) + 160ms) both,
            biRingBreathe 5.8s  ease-in-out                 calc(var(--home-motion-delay, 0ms) + 1.8s)  infinite;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .home-motion-ready .home-benefits-inner article.home-motion-visible > .benefit-icon,
    .home-motion-ready .home-benefits-inner article.home-motion-visible > .benefit-icon::after,
    .home-motion-ready .home-benefits-inner article.home-motion-visible > .benefit-icon .benefit-icon-primary,
    .home-motion-ready .home-benefits-inner article.home-motion-visible > .benefit-icon .benefit-icon-motion,
    .home-motion-ready .home-benefits-inner article.home-motion-visible > .benefit-icon .benefit-icon-spark,
    body.public-home-page .home-benefits-inner article:hover > .benefit-icon,
    body.public-home-page .home-benefits-inner article:hover > .benefit-icon::after,
    body.public-home-page .home-benefits-inner article:hover .benefit-icon * {
        animation: none !important;
        transition: none !important;
    }
}