/*
 * EBS 20th anniversary logo celebration.
 *
 * Overlay only. The header logo <img> is never modified, resized or replaced.
 * Every layer here is absolutely positioned inside a wrapper that hugs the
 * logo, so this file cannot move the header, the menu, the search box or the
 * cart, and cannot cause layout shift.
 *
 * Geometry is expressed in em against a font-size the script sets from the
 * logo's real rendered width, so the burst scales with the logo at every
 * breakpoint. Positions are percentages of the logo box and were measured off
 * Web-Logo.png (1024x334): the "ebs" emblem centre sits at 15.1% / 48.7% with
 * a radius of 12.65% of the logo width.
 */

.ebs-anv {
    position: relative;
    display: inline-block;
    line-height: 0;
    font-size: calc(16px * var(--ebs-anv-s, 1));
}

.ebs-anv > img {
    position: relative;
    z-index: 1;
}

.ebs-anv__fx {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    line-height: 0;
    pointer-events: none;
}

/* Burst origin: the centre of the blue "ebs" emblem. */
.ebs-anv__burst {
    position: absolute;
    left: 15.1%;
    top: 48.7%;
    width: 0;
    height: 0;
}

.ebs-anv__ring {
    position: absolute;
    left: -3.75em;
    top: -3.75em;
    width: 7.5em;
    height: 7.5em;
    border: 0.125em solid #0687eb;
    border-radius: 50%;
    opacity: 0;
}

.ebs-anv__c {
    position: absolute;
    width: var(--w);
    height: var(--h);
    background: var(--bg);
    border-radius: var(--r);
    opacity: 0;
}

/* Pinned to the top-right of the emblem ring, at 45 degrees. */
.ebs-anv__badge {
    position: absolute;
    left: 24%;
    top: 21.2%;
    width: 3em;
    height: 3em;
    margin: -1.5em 0 0 -1.5em;
    border-radius: 50%;
    background: #0687eb;
    box-shadow: 0 0.375em 0.875em rgba(6, 135, 235, 0.32);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Rubik is already loaded by the theme. No extra font request. */
    font-family: Rubik, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    opacity: 0;
    /*
     * The badge uses its OWN scale, not the burst's. The live header renders
     * the logo at roughly 200px, so a straight logo-width ratio put the badge
     * at 17px with 7px numerals: present, but unreadable. --ebs-anv-b carries
     * a legibility floor while --ebs-anv-s keeps the confetti spread tied to
     * the actual logo size.
     */
    font-size: calc(16px * var(--ebs-anv-b, 1));
}

.ebs-anv__badge span {
    font-size: 1.35em;
}

.ebs-anv--play .ebs-anv__ring {
    animation: ebsAnvRing 0.7s ease-out 0.35s forwards;
}

.ebs-anv--play .ebs-anv__c {
    animation: ebsAnvConfetti 2.1s ease-out var(--d) forwards;
}

.ebs-anv--play .ebs-anv__badge {
    animation: ebsAnvBadge 1.9s cubic-bezier(0.3, 1.4, 0.4, 1) 0.68s forwards;
}

@keyframes ebsAnvRing {
    0% {
        opacity: 0.55;
        transform: scale(0.35);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

@keyframes ebsAnvConfetti {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.3) rotate(0deg);
    }
    14% {
        opacity: 1;
    }
    42% {
        transform: translate(var(--tx), var(--ty)) scale(1) rotate(var(--rot));
    }
    68% {
        opacity: 1;
        transform: translate(var(--tx), calc(var(--ty) + 0.75em)) scale(1) rotate(var(--rot));
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), calc(var(--ty) + 2.5em)) scale(0.9) rotate(var(--rot));
    }
}

@keyframes ebsAnvBadge {
    0% {
        opacity: 0;
        transform: scale(0.2) rotate(-18deg);
    }
    18% {
        opacity: 1;
        transform: translateY(-0.375em) scale(1.18) rotate(6deg);
    }
    28% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    74% {
        opacity: 1;
        transform: translate(-0.5em, 0.625em) scale(0.95) rotate(-4deg);
    }
    100% {
        opacity: 0;
        transform: translate(-6.5em, 6em) scale(0.45) rotate(-10deg);
    }
}

/*
 * Two hard stops. The script also checks both before it injects anything, so
 * these are a second line of defence rather than the only one.
 */
@media (prefers-reduced-motion: reduce) {
    .ebs-anv__fx {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .ebs-anv__fx {
        display: none !important;
    }
}