/*==========================================================
PRELOADER - METALÚRGICA MARTÍNEZ
==========================================================*/

/* Bloquear scroll durante la carga */
html.no-scroll {
    overflow: hidden !important;
}

/* Contenedor principal */
#preloader {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 999999;
    transition: opacity 0.7s ease-out, visibility 0.7s ease-out;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Fondo */
.loader-background {
    position: absolute;
    inset: 0;
    background: #ffffff;
}

/* Cuadrícula industrial */
.grid {
    position: absolute;
    inset: 0;
    opacity: .05;
    background-image:
        linear-gradient(rgba(0,180,255,.45) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,180,255,.45) 1px, transparent 1px);
    background-size: 45px 45px;
    animation: gridMove 15s linear infinite;
}

/* Contenido centrado */
.loader-center {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    z-index: 50;
}

/* Logo */
.logo-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-logo {
    width: 240px;
    position: relative;
    z-index: 5;
    animation: logoEnter 0.5s ease-out forwards;
    -webkit-user-drag: none;
}

/* Herramienta */
.tool-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-tool {
    position: relative;
    z-index: 10;
    font-size: 56px;
    animation: wrenchRotate 0.8s cubic-bezier(.5,0,.5,1) infinite,
               colorShift 2.8s ease-in-out infinite;
}

@keyframes colorShift {
    0%   { color: #0d6efd; }
    5%   { color: #0f71fa; }
    10%  { color: #1174f7; }
    15%  { color: #1477f3; }
    20%  { color: #1976d2; }
    25%  { color: #1a75d6; }
    30%  { color: #1b73da; }
    35%  { color: #196ed1; }
    40%  { color: #1565c0; }
    45%  { color: #176cc8; }
    50%  { color: #1974d0; }
    55%  { color: #1b7dd8; }
    60%  { color: #1e88e5; }
    65%  { color: #1c82df; }
    70%  { color: #197bd9; }
    75%  { color: #1673d2; }
    80%  { color: #0b5ed7; }
    85%  { color: #0a61e0; }
    90%  { color: #0b66e8; }
    95%  { color: #0c6af1; }
    100% { color: #0d6efd; }
}

/* Animaciones */
@keyframes gridMove {
    from { transform: translateY(0); }
    to { transform: translateY(45px); }
}

@keyframes logoEnter {
    0% {
        opacity: 0;
        transform: translateY(35px) scale(.82);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes wrenchRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 992px) {
    .loader-logo { width: 190px; }
    .tool-wrapper { width: 120px; height: 120px; }
    .loader-tool { font-size: 46px; }
}

@media (max-width: 768px) {
    .loader-logo { width: 170px; }
}

@media (max-width: 480px) {
    .loader-logo { width: 145px; }
    .tool-wrapper { width: 90px; height: 90px; }
    .loader-tool { font-size: 38px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Optimizaciones GPU */
#preloader,
.loader-logo,
.loader-tool {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Selección deshabilitada */
#preloader {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}