/*
Theme Name: Melyak Customs Animado
Theme URI: https://example.com/
Author: Melyak Customs
Description: Página en construcción con grúa animada y escena limpia, sin engranaje ni barra de carga superpuestos.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: melyak-customs-animado
*/
:root{--mc-green:#79c947;--mc-dark:#061923;--mc-white:#f8fbfa}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--mc-dark)}
body{font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
.mc-page{width:100%;min-height:100vh;display:grid;place-items:center;background:var(--mc-dark);overflow:hidden}
.mc-stage{position:relative;width:min(100vw,177.7778vh);aspect-ratio:16/9;overflow:hidden;isolation:isolate;background:#071923}
.mc-background{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:1}
.mc-light{position:absolute;z-index:2;top:-25%;bottom:-25%;left:-30%;width:15%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);animation:mc-light-sweep 12s ease-in-out 1s infinite;pointer-events:none}
/* Grúa: oscilación visual discreta del brazo. */
.mc-crane-motion{position:absolute;z-index:3;left:47.3%;top:20.6%;width:14.6%;height:8.8%;transform-origin:17% 57%;animation:mc-crane-sway 6.5s ease-in-out infinite;pointer-events:none}
.mc-crane-motion::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,201,87,.12),transparent 70%);filter:blur(2px);opacity:.55}
.mc-crane-motion img{width:100%;height:100%;object-fit:fill;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.mc-crane-glint{position:absolute;z-index:4;left:48%;top:22.7%;width:13%;height:1.5%;border-radius:100%;background:linear-gradient(90deg,transparent,rgba(255,228,159,.9),transparent);filter:blur(2px);opacity:0;transform:rotate(-4deg);animation:mc-crane-glint 6s ease-in-out infinite;pointer-events:none}
.mc-crane-light{position:absolute;z-index:3;left:45%;top:20%;width:19%;height:20%;pointer-events:none;background:radial-gradient(ellipse,rgba(255,190,70,.11),transparent 70%);animation:mc-light 4s ease-in-out infinite alternate}
.mc-vignette{position:absolute;inset:0;z-index:5;box-shadow:inset 0 0 50px rgba(0,0,0,.12);pointer-events:none}
@keyframes mc-crane-sway{0%,100%{transform:rotate(-1.3deg)}50%{transform:rotate(1.3deg)}}
@keyframes mc-crane-glint{0%,12%{opacity:0;transform:translateX(-20%) rotate(-4deg)}35%{opacity:.8}55%{opacity:0;transform:translateX(45%) rotate(-4deg)}100%{opacity:0}}
@keyframes mc-light{from{opacity:.3}to{opacity:1}}
@keyframes mc-light-sweep{0%,18%{left:-30%;opacity:0}25%{opacity:1}52%{left:125%;opacity:0}100%{left:125%;opacity:0}}
@media(max-width:700px){.mc-page{min-height:100svh;align-items:start}.mc-stage{width:100vw;aspect-ratio:16/9}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}