/*
 * calm-motion — the stylesheet half (the script half, calm-motion-v1.js,
 * ends decorative loops after a few cycles and manages the lite mode; see it
 * for the why).
 *
 * Loaded last by both front layouts (_header.blade.php and game.blade.php).
 */

/* The fixed navbar is near-opaque white (rgba 255,255,255,.95): a live blur
   behind it is invisible but forces the GPU to re-blur whatever moves under it
   on every frame. */
.navbar-custom {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ---- Lite mode: weak device, or chosen by the teacher ----------------------
   html.calm-lite is set by the inline snippet in <head>, before anything is
   painted. Decorative motion stops at once (the script ends the current
   cycle), the blurred floating shapes lose their blur, and scroll-in effects
   show their content immediately. The look stays the same; only motion and
   GPU filters go. */
.calm-lite .tj-sky-blob, .calm-lite .tj-blob, .calm-lite .ae-blob, .calm-lite .cl-blob,
.calm-lite .lg-blob, .calm-lite .rl-blob, .calm-lite .tj-hero-mesh, .calm-lite .ahero-mesh,
.calm-lite .hero-circle, .calm-lite .wb-shape {
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.calm-lite [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

.calm-lite .whatsapp-float,
.calm-lite .play-badge,
.calm-lite .athkar-icon {
    animation: none !important;
}

/* The footer toggle shares the install button's look; the "on" state reads as pressed. */
.btn-calm-lite { margin-inline-start: 8px; }
.btn-calm-lite[aria-pressed="true"] { filter: saturate(.6); opacity: .85; }

/* A device set to "reduce motion" gets no animation at all. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
