/* ============================================================
   HamTech Automation — services/ai-infrastructure.html
   Page-unique hero visual: rotating WebGL globe (see
   ai-infrastructure.js). This file owns only:
     1) the static fallback glyph (shown until/unless the WebGL
        scene boots, and permanently under prefers-reduced-motion
        or when WebGL is unavailable), and
     2) the class toggle that hides that fallback once the scene
        has booted successfully.
   Canvas sizing/positioning inside #aiGlobeMount (.svc-hero-visual)
   is already handled by services.css (the shared shell for all
   four dedicated service pages) — this file never touches that
   shared layer.
   ============================================================ */

.svc-hero-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: var(--ce-amber);
    filter: drop-shadow(0 0 18px rgba(255, 122, 47, 0.45));
    animation: ai-globe-fallback-spin 24s linear infinite;
}

@keyframes ai-globe-fallback-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .svc-hero-fallback { animation: none; }
}

/* ai-infrastructure.js adds this class to #aiGlobeMount once the
   WebGL globe has successfully booted (renderer created, first
   frame queued) — hide the static glyph underneath it. */
.svc-hero-visual.globe-active .svc-hero-fallback {
    display: none;
}