/* ============================================================
   MARINOX GROUP — VIDEO LOADER
   ============================================================ */
#site-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: #03080c;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity 0.8s cubic-bezier(0.25,0.46,0.45,0.94),
              visibility 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
#site-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* VIDEO fills the screen, letterboxed/cropped */
.loader-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

/* Subtle vignette over the video */
.loader-vignette {
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse 80% 80% at 50% 50%,
    transparent 40%,
    rgba(3,8,12,0.6) 100%);
  pointer-events: none;
}

/* Brand overlay removed — video carries the brand identity itself.
   The @keyframes loader-brand-in below is retained because
   .loader-skip still uses it for its fade-in animation. */
@keyframes loader-brand-in {
  from { opacity:0; transform:translate(-50%,-50%) scale(0.88); }
  to   { opacity:1; transform:translate(-50%,-50%) scale(1); }
}

/* Progress bar at bottom */
.loader-progress {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
  height: 2px;
  background: rgba(62,207,207,0.1);
}
.loader-progress-fill {
  height: 100%;
  background: linear-gradient(to right, rgba(62,207,207,0.4), #3ecfcf);
  width: 0%;
  transition: width 0.2s linear;
  box-shadow: 0 0 8px rgba(62,207,207,0.6);
}

/* Skip button */
.loader-skip {
  position: absolute;
  bottom: 2.5rem; right: 2.5rem;
  z-index: 5;
  display: flex; align-items: center; gap: 0.5rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(200,216,222,0.5);
  background: none; border: none; cursor: pointer;
  padding: 0.5rem 0;
  transition: color 0.3s;
  animation: loader-brand-in 1s 1.5s both ease-out;
}
.loader-skip:hover { color: rgba(62,207,207,0.9); }
.loader-skip-arrow {
  display: inline-block; width: 16px; height: 1px;
  background: currentColor; position: relative;
  transition: transform 0.3s;
}
.loader-skip-arrow::after {
  content: '';
  position: absolute; right: -1px; top: -3px;
  border: 3px solid transparent;
  border-left-color: currentColor;
}
.loader-skip:hover .loader-skip-arrow { transform: translateX(4px); }

/* Fallback spinner (shown if video fails / no autoplay) */
.loader-fallback {
  position: absolute; z-index: 3;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column; align-items: center; gap: 1.5rem;
}
.loader-fallback.active { display: flex; }
.loader-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid transparent;
}
.loader-ring.r1 { border-top-color: #3ecfcf; border-right-color: #3ecfcf; animation: spin 2s linear infinite; }
.loader-ring.r2 { inset: 10px; border-bottom-color: rgba(62,207,207,0.4); animation: spin 3s linear infinite reverse; }
.loader-ring.r3 { inset: 20px; border-left-color: rgba(62,207,207,0.2); animation: spin 4s linear infinite; }
.loader-center { position: absolute; inset: 28px; background: #3ecfcf; border-radius: 50%; animation: pulse-glow 2s ease-in-out infinite; }
.loader-mark { width: 80px; height: 80px; position: relative; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 8px #3ecfcf; opacity:0.8; }
  50%      { box-shadow: 0 0 24px #3ecfcf, 0 0 48px rgba(62,207,207,0.3); opacity:1; }
}
.loader-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(100,138,150,0.8);
}