/* GLOBAL TEXT REVEAL */
.text-reveal {
    opacity: 0 !important;
    transform: translateY(24px) !important;
    display: inline-block; 
    transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1), 
                transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
    will-change: opacity, transform;
}

.text-reveal.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}



/* SKELETON LOADERS */
.fjorr-skeleton {
    position: absolute;
    inset: 0;
    background: #1d1d1f; 
    box-sizing: border-box;
    overflow: hidden; /* Clips the dots and moving shimmer perfectly at container edges */
    
    /* THE CINEMA MATTE FRAME */
    border: 1px solid rgba(239, 137, 137, 0.15); /* Brand-tinted framing boundary */
}

/* BASE LAYER: Static, ambient brand dot grid */
.fjorr-skeleton::before {
    content: "";
    position: absolute;
    /* Inset creates the clean 14px padding buffer away from the border */
    inset: 14px; 
    background-image: radial-gradient(rgba(239, 137, 137, 0.4) 0.8px, transparent 0.8px);
    background-size: 14px 14px;
    pointer-events: none;
}

/* PROGRESS LAYER: GPU-accelerated moving light mask */
.fjorr-skeleton::after {
    content: "";
    position: absolute;
    /* Inset perfectly matches the base layer alignment */
    inset: 14px; 
    background-image: radial-gradient(rgba(239, 137, 137, 0.95) 0.9px, transparent 0.9px);
    background-size: 14px 14px;
    pointer-events: none;
    
    /* Pre-allocates a browser composite layer to bypass layout updates */
    will-change: mask-position, -webkit-mask-position;
    
    /* Highly feathered optical flare gradient distribution */
    -webkit-mask-image: linear-gradient(
        90deg, 
        rgba(0,0,0,0) 25%, 
        rgba(0,0,0,1) 50%, 
        rgba(0,0,0,0) 75%
    );
    mask-image: linear-gradient(
        90deg, 
        rgba(0,0,0,0) 25%, 
        rgba(0,0,0,1) 50%, 
        rgba(0,0,0,0) 75%
    );
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    
    /* Ultra-smooth 5.5s cinematic drag curve */
    animation: fjorrFinalShimmerLoop 5.5s infinite cubic-bezier(0.33, 1, 0.68, 1);
}

/* ==========================================================================
   THE VISUAL TRANSIT PATHWAY
   ========================================================================== */
@keyframes fjorrFinalShimmerLoop {
    0% { 
        -webkit-mask-position: 160% 0;
        mask-position: 160% 0;
    }
    100% { 
        -webkit-mask-position: -60% 0;
        mask-position: -60% 0;
    }
}