:root{
  --bg:#0B1F3A; --primary:#E63946; --accent:#384036; --gray:#334232; --white:#fff; --muted:#cfd6df;
}
/* Background grid vibe */
#cowboys-loader-bg{position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.12;}
#cowboys-loader-bg:before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px) 0 0/60px 60px,
    linear-gradient( 0deg, rgba(255,255,255,.15) 1px, transparent 1px) 0 0/60px 60px,
    radial-gradient(ellipse at center, rgba(255,255,255,.18) 0 1px, transparent 2px) 0 0/60px 60px;
  animation: cowboys-pan 30s linear infinite;
}
@keyframes cowboys-pan{from{background-position:0 0,0 0,0 0}to{background-position:600px 600px,600px 600px,600px 600px}}

/* Overlay */
#cowboys-loader{
  position:fixed; inset:0; z-index:9999; background:var(--bg); display:grid; place-items:center;
  color:var(--white); font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}
#cowboys-loader .inner{display:flex; flex-direction:column; align-items:center; gap:18px}
#cowboys-loader .logo{height:120px; width:auto; filter:drop-shadow(0 6px 18px rgba(0,0,0,.35)); animation:cowboys-pulse 2.4s ease-in-out infinite}
#cowboys-loader .title{font-weight:700; letter-spacing:.4px}
#cowboys-loader .sub{opacity:.85}
#cowboys-loader .skip{display:inline-flex; padding:8px 14px; border-radius:12px; border:none; background:var(--primary); color:#fff; cursor:pointer; font-weight:700}
@keyframes cowboys-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* Fan animation */
.cbx-fan{position:relative; width:160px; height:160px; border-radius:50%;
  background:radial-gradient(#26324a,#17253f); box-shadow: inset 0 10px 24px rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.35); display:grid; place-items:center;
}
.cbx-fan .blades{position:absolute; width:120px; height:120px; animation:cbx-spin 1.2s linear infinite}
.cbx-fan .blade{position:absolute; left:50%; top:50%; width:60px; height:18px; border-radius:18px 60px 60px 18px;
  background:linear-gradient(90deg, #9fb2c9, #c7d3e1); transform-origin:0 50%;
}
.cbx-fan .blade:nth-child(1){transform:rotate(0deg)}
.cbx-fan .blade:nth-child(2){transform:rotate(120deg)}
.cbx-fan .blade:nth-child(3){transform:rotate(240deg)}
.cbx-fan .ring{position:absolute; inset:8px; border:2px solid #fff2; border-radius:50%}
.cbx-fan .hub{position:absolute; width:18px; height:18px; border-radius:50%; background:#e8eef5}
@keyframes cbx-spin{to{transform:rotate(360deg)}}

/* Garage door */
.cbx-garage{position:absolute; inset:0; overflow:hidden}
.cbx-garage .door{position:absolute; left:0; right:0; bottom:0; height:100%;
  background:repeating-linear-gradient(to bottom, #10233d 0 24px, #0e2039 24px 48px);
  box-shadow:0 -12px 30px rgba(0,0,0,.4) inset; animation:cbx-doorUp 1.25s ease-in-out forwards;
}
.cbx-garage .handle{position:absolute; left:50%; bottom:18px; width:50px; height:10px; background:#c0cad6; transform:translateX(-50%); border-radius:8px}
@keyframes cbx-doorUp{to{height:0}}

/* Fade-out */
.cbx-hide{animation:cbx-fadeout .7s ease forwards}
@keyframes cbx-fadeout{to{opacity:0; visibility:hidden}}

@media (max-width:480px){
  #cowboys-loader .logo{height:96px}
}