/**
 * Floating "Outage Pro" badge.
 *
 * Plain CSS -- no build step, no framework, no theme variables.
 * Safe to drop into any WordPress theme.
 *
 * This file only controls SIZE, PLACEMENT and the TEXT ROTATION.
 * The badge's colours come from the SVG itself (a verbatim Figma export),
 * so there is deliberately no background, border or fill declared here.
 */

.outage-badge {
    /* Badge size and viewport offset scale down together on smaller screens. */
    --outage-badge-size: 6rem;     /* 96px */
    --outage-badge-offset: 2rem;   /* 32px */

    position: fixed;
    z-index: 50;
    display: block;
    width: var(--outage-badge-size);
    height: var(--outage-badge-size);
    inset-inline-end: var(--outage-badge-offset);

    /* Keep clear of the iOS/Android browser chrome. */
    inset-block-end: max(
        var(--outage-badge-offset),
        env(safe-area-inset-bottom) + 1rem
    );

    transition: transform 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.outage-badge svg {
    width: 100%;
    height: 100%;
    display: block;
}

.outage-badge:hover {
    transform: scale(1.05);
}

.outage-badge:active {
    transform: scale(0.95);
}

/* Keyboard focus ring (accessibility). */
.outage-badge:focus-visible {
    outline: 2px solid #1ea2ba;
    outline-offset: 4px;
    border-radius: 50%;
}

/* Tablet */
@media (max-width: 1023.98px) {
    .outage-badge {
        --outage-badge-size: 5.5rem;  /* 88px */
        --outage-badge-offset: 1.5rem; /* 24px */
    }
}

/* Mobile */
@media (max-width: 639.98px) {
    .outage-badge {
        --outage-badge-size: 4.5rem;     /* 72px */
        --outage-badge-offset: 1rem;     /* 16px */
    }
}

/**
 * Only the circular text spins. The teal circle, the ring, the bolt and the
 * OUTAGE PRO wordmark all stay static.
 *
 * transform-box: view-box + transform-origin at the artboard centre (60 60)
 * is what keeps the text rotating around the true centre of the circle.
 */
.outage-badge__text {
    transform-origin: 60px 60px;
    transform-box: view-box;
    animation: outage-badge-spin 18s linear infinite;
}

@keyframes outage-badge-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Respect users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .outage-badge__text {
        animation: none;
    }

    .outage-badge,
    .outage-badge:hover,
    .outage-badge:active {
        transition: none;
        transform: none;
    }
}