/* ═══════════════════════════════════════════════════════════════════════
   MAHOGANY ROW — CINEMATIC PAGE LOADER
   ──────────────────────────────────────────────────────────────────────
   Full-screen loading state. Dark, heavy, mysterious, controlled.
   The emblem is the visual focus. Liquid gold flows through it.
   The system is processing. This is not waiting — this is presence.
═══════════════════════════════════════════════════════════════════════ */

/* ── LOADER OVERLAY ──────────────────────────────────────────────── */
#mr-loader {
  position: fixed;
  inset: 0;
  z-index: 99998;            /* below intro-overlay (9999) if both present */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  pointer-events: all;

  /* Entry: fade in instantly on creation */
  opacity: 1;
  visibility: visible;
  transition: opacity 1.0s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 1.0s;
}

/* Fade-out state — added by JS when page is ready */
#mr-loader.mr-loader--out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── DEEP ATMOSPHERE ─────────────────────────────────────────────── */
/* Layered radial vignette — heavy, like entering a sealed chamber */
#mr-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 65% at 50% 50%,
      transparent 30%,
      rgba(0,0,0,0.55) 65%,
      rgba(0,0,0,0.92) 100%),
    radial-gradient(ellipse 100% 55% at 50% 0%,
      rgba(0,0,0,0.7) 0%,
      transparent 70%),
    radial-gradient(ellipse 100% 55% at 50% 100%,
      rgba(0,0,0,0.8) 0%,
      transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Subtle scan-line texture over the whole loader */
#mr-loader::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.018) 2px,
    rgba(0,0,0,0.018) 4px
  );
  pointer-events: none;
  z-index: 2;
  animation: mr-loader-scanline 12s linear infinite;
}
@keyframes mr-loader-scanline {
  0%   { background-position: 0 0; }
  100% { background-position: 0 120px; }
}

/* ── EMBLEM CONTAINER ────────────────────────────────────────────── */
.mr-loader__emblem-wrap {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Responsive sizing — emblem takes up the visual center */
  width: min(480px, 72vmin);
  height: min(480px, 72vmin);

  /* Appears from center with subtle scale */
  opacity: 0;
  transform: scale(0.94);
  animation: mr-loader-emblem-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}
@keyframes mr-loader-emblem-in {
  to { opacity: 1; transform: scale(1); }
}

/* The actual emblem image — stone slab */
.mr-loader__emblem-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Initial dim state — brightens as gold flows */
  filter: brightness(0.72) contrast(1.08);
  transition: filter 2.2s ease;
  display: block;
}

/* Subtle warm glow behind the emblem — deepens as animation runs */
.mr-loader__emblem-glow {
  position: absolute;
  inset: -8%;
  background: radial-gradient(
    ellipse 70% 70% at 50% 52%,
    rgba(160, 110, 20, 0.0) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  transition: background 3s ease;
}

/* Canvas for liquid gold animation — sits on top of image */
#mr-loader-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* mix-blend-mode: screen gives the gold a luminous overlay quality */
  mix-blend-mode: screen;
  border-radius: 2px;
}

/* ── LOADER STATUS BAR ───────────────────────────────────────────── */
.mr-loader__status {
  position: relative;
  z-index: 3;
  margin-top: clamp(2rem, 4vmin, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;

  opacity: 0;
  animation: mr-loader-status-in 1s ease 0.8s forwards;
}
@keyframes mr-loader-status-in {
  to { opacity: 1; }
}

/* Progress track */
.mr-loader__track {
  width: clamp(120px, 22vmin, 200px);
  height: 1px;
  background: rgba(201, 168, 76, 0.12);
  overflow: hidden;
  position: relative;
}

/* Animated fill bar */
.mr-loader__fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    rgba(201, 168, 76, 0.0) 0%,
    rgba(201, 168, 76, 0.85) 50%,
    rgba(255, 215, 80, 1.0) 100%
  );
  /* JS drives the width via inline style / class */
  transition: width 0.4s ease;
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.6);
}

/* Status label text */
.mr-loader__label {
  font-family: 'Rajdhani', 'Courier New', monospace;
  font-size: clamp(0.52rem, 1.2vmin, 0.62rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.42);
  text-align: center;
  /* subtle pulse */
  animation: mr-loader-label-pulse 2.6s ease-in-out infinite;
}
@keyframes mr-loader-label-pulse {
  0%, 100% { opacity: 0.42; }
  50%       { opacity: 0.72; }
}

/* ── TOP CORNER CLASSIFICATION MARK ─────────────────────────────── */
.mr-loader__classify {
  position: absolute;
  top: 2rem;
  right: 2rem;
  z-index: 4;
  font-family: 'Rajdhani', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.38em;
  color: rgba(201, 168, 76, 0.22);
  text-transform: uppercase;
  opacity: 0;
  animation: mr-loader-status-in 1s ease 1.2s forwards;
}

/* ── BOTTOM CORNER SYSTEM ID ────────────────────────────────────── */
.mr-loader__sysid {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  z-index: 4;
  font-family: 'Rajdhani', monospace;
  font-size: 0.50rem;
  letter-spacing: 0.32em;
  color: rgba(201, 168, 76, 0.18);
  text-transform: uppercase;
  opacity: 0;
  animation: mr-loader-status-in 1s ease 1.4s forwards;
}

/* ── CORNER BRACKETS — cinematic HUD feel ───────────────────────── */
.mr-loader__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 4;
  opacity: 0;
  animation: mr-loader-status-in 1.2s ease 0.6s forwards;
}
.mr-loader__corner--tl { top: 1.6rem;  left: 1.6rem;
  border-top: 1px solid rgba(201,168,76,0.28);
  border-left: 1px solid rgba(201,168,76,0.28); }
.mr-loader__corner--tr { top: 1.6rem;  right: 1.6rem;
  border-top: 1px solid rgba(201,168,76,0.28);
  border-right: 1px solid rgba(201,168,76,0.28); }
.mr-loader__corner--bl { bottom: 1.6rem; left: 1.6rem;
  border-bottom: 1px solid rgba(201,168,76,0.28);
  border-left: 1px solid rgba(201,168,76,0.28); }
.mr-loader__corner--br { bottom: 1.6rem; right: 1.6rem;
  border-bottom: 1px solid rgba(201,168,76,0.28);
  border-right: 1px solid rgba(201,168,76,0.28); }

/* ── MOBILE ADJUSTMENTS ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .mr-loader__classify,
  .mr-loader__sysid,
  .mr-loader__corner { display: none; }
}