/* 
 * FORMAS LOADER COMPONENT 
 * Triangular Grid F with Rotate & Fade Animation
 */

.formas-loader {
    display: inline-block;
    position: relative;
    /* Isolate to its own compositor layer */
    isolation: isolate;
    contain: layout style paint;
    transform: translateZ(0);
}

/* Size variants */
.formas-loader.sm { width: 29px; height: 29px; } /* was 32 */
.formas-loader.md { width: 49px; height: 49px; } /* was 58 (15% reduction) */
.formas-loader.lg { width: 115px; height: 115px; } /* was 128 */
.formas-loader.xl { width: 230px; height: 230px; } /* was 256 */

.formas-loader svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* TRIANGULAR GRID F STYLES */
.formas-loader.triangular polygon {
    fill: #FFFFFF;
    stroke: #FFFFFF;
    stroke-width: 2;
    fill-opacity: 0;
    stroke-opacity: 0;
    opacity: 1;
    /* Default animation */
    transform-origin: center;
    will-change: transform, fill-opacity, stroke-opacity;
    /* Force GPU compositing - runs on separate thread from main JS */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Rotate & Fade Animation - 15% slower with longer holds */
.formas-loader.triangular.rotate-fade polygon {
    animation: appearRotateFade 4.6s ease-in-out infinite; /* 15% slower: 4s * 1.15 = 4.6s */
}

/* TRANSFORM ORIGINS for Rotation (Centroids of grid cells) 
   Grid is 3x3 (100x100), Cell size ~33.33px
   Centers: 16.67, 50.00, 83.33
*/
.formas-loader.triangular.rotate-fade polygon:nth-child(1) { transform-origin: 16.667px 16.667px; } /* Cell 0,0 */
.formas-loader.triangular.rotate-fade polygon:nth-child(2) { transform-origin: 50.000px 16.667px; } /* Cell 1,0 */
.formas-loader.triangular.rotate-fade polygon:nth-child(3) { transform-origin: 83.333px 16.667px; } /* Cell 2,0 */
.formas-loader.triangular.rotate-fade polygon:nth-child(4) { transform-origin: 16.667px 50.000px; } /* Cell 0,1 */
.formas-loader.triangular.rotate-fade polygon:nth-child(5) { transform-origin: 50.000px 50.000px; } /* Cell 1,1 */
.formas-loader.triangular.rotate-fade polygon:nth-child(6) { transform-origin: 16.667px 83.333px; } /* Cell 0,2 */

/* Stagger delays */
.formas-loader.triangular.rotate-fade polygon:nth-child(1) { animation-delay: 0.0s; }
.formas-loader.triangular.rotate-fade polygon:nth-child(2) { animation-delay: 0.1s; }
.formas-loader.triangular.rotate-fade polygon:nth-child(3) { animation-delay: 0.2s; }
.formas-loader.triangular.rotate-fade polygon:nth-child(4) { animation-delay: 0.3s; }
.formas-loader.triangular.rotate-fade polygon:nth-child(5) { animation-delay: 0.4s; }
.formas-loader.triangular.rotate-fade polygon:nth-child(6) { animation-delay: 0.5s; }

@keyframes appearRotateFade {
    0%   { stroke-opacity: 0; fill-opacity: 0; transform: rotate(0deg) translateZ(0); }
    8%   { stroke-opacity: 1; fill-opacity: 0; transform: rotate(0deg) translateZ(0); }   /* Outline appears - slower transition */
    20%  { stroke-opacity: 1; fill-opacity: 1; transform: rotate(0deg) translateZ(0); }   /* Gets solid - slower transition */
    35%  { stroke-opacity: 1; fill-opacity: 1; transform: rotate(0deg) translateZ(0); }   /* Hold solid - longer hold */
    50%  { stroke-opacity: 1; fill-opacity: 1; transform: rotate(180deg) translateZ(0); } /* Rotate - slower transition */
    65%  { stroke-opacity: 1; fill-opacity: 1; transform: rotate(180deg) translateZ(0); } /* Hold rotated - longer hold */
    80%  { stroke-opacity: 1; fill-opacity: 0; transform: rotate(180deg) translateZ(0); } /* Back to outline - slower transition */
    100% { stroke-opacity: 0; fill-opacity: 0; transform: rotate(180deg) translateZ(0); } /* Fade out - slower transition */
}