/*
 * Messa in risalto delle schede prezzo (tandem 1019, coupon 1017).
 * Struttura iniettata da js/pricing-spotlight.js dentro la scheda:
 *   .sds-spot__fx > .sds-spot__halo   alone sfocato, visibile solo fuori dalla scheda
 *                 > .sds-spot__ring   contorno fermo
 *                 > .sds-spot__comet  scia che fa un giro e poi svanisce
 *   .sds-spot__top                    badge TOP con freccia (solo 15.000 piedi)
 * Stati: .is-running (un giro d'ingresso) -> .is-done (tutto fermo).
 * A fine ingresso non si muove piu' nulla: un movimento continuo distrae
 * mentre si legge il prezzo e violerebbe WCAG 2.2.2 (pausa oltre 5 s).
 */

@property --sds-spot-angle {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}

:is(.pricing-card, .coupon-pricing-card, .tsi-price-card).sds-spot {
    --sds-spot-bw: 1px;
    --sds-spot-r: 20px;
    --sds-spot-w: 1.5px;
    /* Il bagliore e il badge TOP escono dal bordo: il ritaglio passa ai figli. */
    overflow: visible;
    position: relative;
}

.sds-spot--gold {
    --sds-spot-edge: #f2b01e;
    --sds-spot-tail: rgba(255, 189, 34, 0);
    --sds-spot-mid: #f2a900;
    --sds-spot-head: #ffd84d;
    --sds-spot-glow: rgba(255, 177, 0, .75);
    --sds-spot-shadow: 0 16px 40px rgba(255, 170, 0, .24), 0 4px 12px rgba(2, 23, 41, .1);
    --sds-spot-bloom: 0 18px 48px rgba(255, 170, 0, .38);
}

.sds-spot--blue {
    --sds-spot-edge: #1f6bff;
    --sds-spot-tail: rgba(0, 170, 255, 0);
    --sds-spot-mid: #0a5cff;
    --sds-spot-head: #22c8ff;
    --sds-spot-glow: rgba(18, 140, 255, .8);
    --sds-spot-shadow: 0 16px 40px rgba(10, 92, 255, .24), 0 4px 12px rgba(2, 23, 41, .1);
    --sds-spot-bloom: 0 18px 48px rgba(10, 110, 255, .38);
}

/* Il badge in cima non e' piu' ritagliato dalla scheda: ne riprende gli angoli. */
.sds-spot > :is(.badge.full, .coupon-badge, .tsi-price-badge):first-child {
    border-radius: calc(var(--sds-spot-r) - var(--sds-spot-bw)) calc(var(--sds-spot-r) - var(--sds-spot-bw)) 0 0;
}

.sds-spot.is-running,
.sds-spot.is-done {
    border-color: transparent;
}

.sds-spot.is-running {
    animation: sds-spot-bloom 3s cubic-bezier(.37, 0, .63, 1) both;
}

.sds-spot.is-done {
    box-shadow: var(--sds-spot-shadow);
}

.sds-spot.is-done:hover {
    box-shadow: var(--sds-spot-bloom);
}

@keyframes sds-spot-bloom {
    0% { box-shadow: 0 10px 28px rgba(2, 23, 41, .16); }
    45% { box-shadow: var(--sds-spot-bloom); }
    100% { box-shadow: var(--sds-spot-shadow); }
}

/* ---------- Livello effetti ---------- */

.sds-spot__fx {
    position: absolute;
    inset: calc(-1 * var(--sds-spot-bw));
    z-index: 4;
    border-radius: var(--sds-spot-r);
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s ease;
}

.sds-spot:is(.is-running, .is-done) .sds-spot__fx {
    opacity: 1;
}

/* Un giro in 3s, partenza e frenata dolci. */
.sds-spot.is-running .sds-spot__fx {
    animation: sds-spot-intro 3s cubic-bezier(.37, 0, .63, 1) both;
}

@keyframes sds-spot-intro {
    from { --sds-spot-angle: 0deg; }
    to { --sds-spot-angle: 360deg; }
}

.sds-spot__ring,
.sds-spot__comet,
.sds-spot__halo {
    position: absolute;
    border-radius: inherit;
}

.sds-spot__ring,
.sds-spot__comet {
    inset: 0;
    padding: var(--sds-spot-w);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.sds-spot__ring {
    background: var(--sds-spot-edge);
}

.sds-spot__comet {
    background: conic-gradient(
        from var(--sds-spot-angle),
        var(--sds-spot-tail) 0deg 235deg,
        var(--sds-spot-mid) 318deg,
        var(--sds-spot-head) 346deg,
        var(--sds-spot-mid) 353deg,
        var(--sds-spot-tail) 360deg
    );
    opacity: 0;
}

.sds-spot.is-running .sds-spot__comet {
    animation: sds-spot-fade 3s ease-in-out both;
}

/* Scia e alone compaiono, restano per il giro e svaniscono all'arrivo. */
@keyframes sds-spot-fade {
    0% { opacity: 0; }
    12%, 78% { opacity: 1; }
    100% { opacity: 0; }
}

/*
 * L'alone e' la cometa su un anello spesso, sfocato dal contenitore: il
 * contenitore e' piu' largo della sfocatura, cosi' la luce sfuma senza
 * bordi netti. La maschera toglie la sagoma arrotondata della scheda e la
 * luce resta solo all'esterno.
 */
.sds-spot__halo {
    --sds-spot-spread: 28px;
    inset: calc(-1 * var(--sds-spot-spread));
    border-radius: 0;
    filter: blur(7px);
    opacity: 0;
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='16'/%3E%3C/svg%3E") center / calc(100% - 2 * var(--sds-spot-spread)) calc(100% - 2 * var(--sds-spot-spread)) no-repeat,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='16'/%3E%3C/svg%3E") center / calc(100% - 2 * var(--sds-spot-spread)) calc(100% - 2 * var(--sds-spot-spread)) no-repeat exclude,
        linear-gradient(#000 0 0);
}

.sds-spot__halo-ring {
    position: absolute;
    inset: calc(var(--sds-spot-spread) - 2px);
    padding: 4px;
    border-radius: calc(var(--sds-spot-r) + 2px);
    background: conic-gradient(
        from var(--sds-spot-angle),
        transparent 0deg 225deg,
        var(--sds-spot-glow) 318deg,
        var(--sds-spot-head) 346deg,
        var(--sds-spot-glow) 353deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.sds-spot.is-running .sds-spot__halo {
    animation: sds-spot-fade 3s ease-in-out both;
}

/* ---------- Badge TOP (15.000 piedi) ---------- */

.sds-spot__top {
    position: absolute;
    /* Esce dallo spigolo in alto a destra. */
    top: -8px;
    right: -12px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 14px 0 8px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, #0a4dff 0%, #1f6bff 55%, #0a9eff 100%);
    box-shadow: 0 8px 20px rgba(10, 77, 255, .42), 0 0 0 1px rgba(10, 77, 255, .18);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .09em;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: scale(.4) rotate(-14deg);
    transform-origin: 70% 60%;
}

.sds-spot__top-arrow {
    display: inline-grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
}

.sds-spot__top-arrow svg {
    display: block;
    width: 15px;
    height: 15px;
}

/* Onda che si espande una volta dietro al badge. */
.sds-spot__top::after {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(31, 123, 255, .55);
    opacity: 0;
}

.sds-spot.is-done .sds-spot__top {
    opacity: 1;
    transform: none;
    animation: sds-spot-top-in .6s cubic-bezier(.34, 1.56, .64, 1) both;
}

.sds-spot.is-done .sds-spot__top::after {
    animation: sds-spot-top-ping 1.1s ease-out .35s both;
}

.sds-spot.is-done .sds-spot__top-arrow svg {
    animation: sds-spot-arrow-up .7s cubic-bezier(.22, 1, .36, 1) .2s both;
}

@keyframes sds-spot-top-in {
    from { opacity: 0; transform: scale(.4) rotate(-14deg); }
    to { opacity: 1; transform: none; }
}

@keyframes sds-spot-top-ping {
    0% { opacity: 1; box-shadow: 0 0 0 0 rgba(31, 123, 255, .55); }
    100% { opacity: 0; box-shadow: 0 0 0 14px rgba(31, 123, 255, 0); }
}

@keyframes sds-spot-arrow-up {
    0% { opacity: 0; transform: translateY(7px); }
    100% { opacity: 1; transform: none; }
}

/*
 * Schede impilate: spazio in piu' sopra il 15.000 perche' l'etichetta non
 * tocchi la scheda precedente. Senza dipendere dal JS: nessuno scatto.
 */
@media (max-width: 768px) {
    .pricing-card.hq-handcam,
    .coupon-pricing-card.hq-upgrade,
    .tsi-price-card--high {
        margin-top: 18px;
    }
}


/* ---------- Movimento ridotto / nessun IntersectionObserver ---------- */

.sds-spot.is-static .sds-spot__fx,
.sds-spot.is-static .sds-spot__comet,
.sds-spot.is-static .sds-spot__top,
.sds-spot.is-static .sds-spot__top::after,
.sds-spot.is-static .sds-spot__top-arrow svg {
    animation: none;
}

.sds-spot.is-static .sds-spot__comet,
.sds-spot.is-static .sds-spot__halo {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .sds-spot,
    .sds-spot * {
        animation: none !important;
    }
}