/* ============================================
   FAIT Logo Tetris Animation
   
   Spec:
   - Background: pure white #FFFFFF
   - Grid: very light (#F0F0F0, 1px lines)
   - Block style: flat colors, 4px corners
   - No outlines, no shadows, no gradients
   
   Colors:
   - Red: #E53935
   - Green: #6BC34A
   - Blue: #1E88E5
   - Orange: #FB8C00
   ============================================ */

.hero-loader {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    background: transparent;
    position: relative;
    padding-top: 120px;
    padding-left: 24px;
}

.tetris-board {
    position: relative;
    width: 400px;
    height: 200px;
    background: transparent;
    overflow: visible;
}

.tetromino {
    will-change: transform, opacity;
    opacity: 0;
}

.tetris-block {
    position: absolute;
    border-radius: 4px;
}

.tetris-block.red { background: #E53935; box-shadow: 0 0 8px rgba(229,57,53,.4); }
.tetris-block.green { background: #6BC34A; box-shadow: 0 0 8px rgba(107,195,74,.4); }
.tetris-block.blue { background: #1E88E5; box-shadow: 0 0 8px rgba(30,136,229,.4); }
.tetris-block.orange { background: #FB8C00; box-shadow: 0 0 8px rgba(251,140,0,.4); }

/* Completion subtle pulse */
.tetris-board.complete .tetromino {
    animation: subtlePulse 3s ease-in-out infinite;
}
.tetris-board.complete .tetromino:nth-child(4n+1) { animation-delay: 0s; }
.tetris-board.complete .tetromino:nth-child(4n+2) { animation-delay: 0.2s; }
.tetris-board.complete .tetromino:nth-child(4n+3) { animation-delay: 0.4s; }
.tetris-board.complete .tetromino:nth-child(4n+4) { animation-delay: 0.6s; }

@keyframes subtlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); }
}

@media (max-width: 768px) {
    .hero-loader { padding-top: 80px; padding-left: 20px; }
    .tetris-board { width: 340px; height: 140px; }
}
@media (max-width: 480px) {
    .hero-loader { padding-top: 50px; padding-left: 20px; }
    .tetris-board { width: 260px; height: 110px; }
    .tetris-block { border-radius: 2px; }
}