/* Fullscreen overlay */
#cowboys-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background:
    radial-gradient(circle at top, rgba(15,23,42,0.85) 0, rgba(2,6,23,0.95) 45%, #020617 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease-out;
}

#cowboys-loader.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Card */
.cowboys-loader-inner {
  background: rgba(3,7,18,0.96);
  border-radius: 28px;
  padding: 28px 26px 22px;
  box-shadow:
    0 24px 70px rgba(0,0,0,0.9),
    0 0 0 1px rgba(148,163,184,0.25);
  max-width: 880px;
  width: min(90vw, 880px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Logo */
.cowboys-loader-logo {
  max-width: 420px;
  width: min(80%, 420px);
  height: auto;
  display: block;
  filter: drop-shadow(0 9px 18px rgba(0,0,0,0.75));
}

/* Image area */
.cinema-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background: #0f172a;
  box-shadow:
    inset 0 0 0 1px rgba(15,23,42,0.8),
    0 22px 50px rgba(0,0,0,0.9);
}

/* Frames – no filters, just opacity + subtle parallax */
.cinema-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.015);
  transition:
    opacity 600ms ease-out,
    transform 600ms ease-out;
}

.cinema-frame.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Labels */
.loader-label-main {
  margin-top: 6px;
  font-size: 0.85rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e5e7eb;
}

.loader-label-sub {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fb7185;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .cowboys-loader-inner {
    padding: 20px 18px 18px;
    border-radius: 22px;
  }
  .cowboys-loader-logo {
    max-width: 320px;
  }
}