<?php
session_start();

if(!isset($_SESSION['admin'])){
header("Location: login.php");
exit;
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Cargando Sistema</title>

<style>

body{
margin:0;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background: linear-gradient(135deg,#8f0027,#c4003a);
font-family: Arial;
color:white;
overflow:hidden;
}

/* contenedor */
.loader-box{
text-align:center;
animation: fadeIn 1s ease;
}

/* ⭐ LOGO GIRANDO */
.logo-load{
width:140px;
margin-bottom:30px;
animation: girar 3s linear infinite;
}

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

/* texto */
.loader-text{
font-size:30px;
font-weight:bold;
letter-spacing:3px;
margin-bottom:30px;
}

/* ⭐ BARRA */
.progress{
width:320px;
height:12px;
background: rgba(255,255,255,0.3);
border-radius:20px;
overflow:hidden;
margin:auto;
}

.progress-bar{
height:100%;
width:0%;
background:white;
animation: carga 3s forwards;
}

@keyframes carga{
0%{width:0;}
100%{width:100%;}
}

/* ⭐ TRANSICION */
.fade-out{
animation: fadeOut 1s forwards;
}

@keyframes fadeOut{
to{
opacity:0;
transform: scale(1.1);
}
}

@keyframes fadeIn{
from{opacity:0; transform: scale(.9);}
to{opacity:1; transform: scale(1);}
}

</style>
</head>

<body>

<div class="loader-box" id="pantalla">

<img src="img/logo.png" class="logo-load">

<div class="loader-text">CARGANDO SISTEMA</div>

<div class="progress">
<div class="progress-bar"></div>
</div>

</div>

<audio id="sonido" autoplay>
<source src="img/carga.mp3" type="audio/mpeg">
</audio>

<script>

setTimeout(function(){

document.getElementById("pantalla").classList.add("fade-out");

setTimeout(function(){
window.location="agregar_inspector.php";
},1000);

},3000);

</script>

</body>
</html>