/* ═══════════════════════════════════════════════════════════════════════
   MAHOGANY ROW — CINEMATIC PAGE LOADER  v2.0
   ──────────────────────────────────────────────────────────────────────
   Rebuilt from scratch.
   Visual intent: molten gold flowing through carved stone channels.
   Gold is MASKED to the emblem silhouette — never bleeds outside it.
   No old shimmer layers, no old z-index stacks, no genspark references.
═══════════════════════════════════════════════════════════════════════ */

/* ── LOADER OVERLAY ──────────────────────────────────────────────── */
#mr-loader {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  pointer-events: all;

  opacity: 1;
  visibility: visible;
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 1.1s;
}

/* Fade-out state */
#mr-loader.mr-loader--out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── DEEP ATMOSPHERE — layered radial vignette ───────────────────── */
#mr-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 55% at 50% 50%,
      transparent 25%,
      rgba(0,0,0,0.5) 60%,
      rgba(0,0,0,0.95) 100%),
    radial-gradient(ellipse 100% 50% at 50% 0%,
      rgba(0,0,0,0.75) 0%, transparent 70%),
    radial-gradient(ellipse 100% 50% at 50% 100%,
      rgba(0,0,0,0.85) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Scanline texture */
#mr-loader::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.016) 2px,
    rgba(0,0,0,0.016) 4px
  );
  pointer-events: none;
  z-index: 0;
  animation: mrl-scanline 14s linear infinite;
}
@keyframes mrl-scanline {
  from { background-position: 0 0; }
  to   { background-position: 0 200px; }
}

/* ── EMBLEM STAGE ─────────────────────────────────────────────────── */
/* The stage sizes everything — all children are absolute inside it  */
.mr-loader__stage {
  position: relative;
  z-index: 2;
  width: min(440px, 68vmin);
  height: min(440px, 68vmin);
  flex-shrink: 0;

  /* Appear with subtle scale-up */
  opacity: 0;
  transform: scale(0.93);
  animation: mrl-stage-in 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
@keyframes mrl-stage-in {
  to { opacity: 1; transform: scale(1); }
}

/* ── EMBLEM BASE IMAGE ────────────────────────────────────────────── */
/* Visible immediately — dark stone, starts dimmer, brightens later  */
.mr-loader__emblem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  z-index: 1;
  /* Start slightly dim; JS brightens it smoothly */
  filter: brightness(0.78) contrast(1.1);
  transition: filter 2.5s ease;
}

/* ── GOLD CANVAS — masked to emblem via JS ────────────────────────── */
/* Canvas is on top of the image. JS clips it using a mask so gold   */
/* only appears where the emblem's non-transparent pixels are.        */
#mr-loader-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  /* Screen blend: gold light adds to stone, never darkens it         */
  mix-blend-mode: screen;
}

/* ── AMBIENT GLOW behind the stage ────────────────────────────────── */
.mr-loader__glow {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  /* JS will animate the radial gradient opacity */
  background: radial-gradient(
    ellipse 65% 65% at 50% 50%,
    rgba(170, 110, 10, 0.0) 0%,
    transparent 70%
  );
  transition: background 3s ease;
}

/* ── OPTIONAL EMBER PARTICLES CANVAS ─────────────────────────────── */
#mr-loader-embers {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;   /* behind the stage but above background */
  opacity: 0.55;
}

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

  opacity: 0;
  animation: mrl-fade-in 1s ease 1.0s forwards;
}

.mr-loader__track {
  width: clamp(110px, 20vmin, 190px);
  height: 1px;
  background: rgba(201, 168, 76, 0.1);
  position: relative;
  overflow: visible;
}

.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.8) 55%,
    rgba(255, 215, 80, 1.0) 100%
  );
  transition: width 0.4s ease;
  box-shadow: 0 0 6px rgba(201, 168, 76, 0.55),
              0 0 14px rgba(201, 168, 76, 0.2);
}

/* Leading dot on the fill bar */
.mr-loader__fill::after {
  content: '';
  position: absolute;
  right: -2px; top: -2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 220, 90, 0.9);
  box-shadow: 0 0 6px rgba(255, 210, 60, 0.8);
}

.mr-loader__label {
  font-family: 'Rajdhani', 'Courier New', monospace;
  font-size: clamp(0.50rem, 1.1vmin, 0.60rem);
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.40);
  text-align: center;
  animation: mrl-label-pulse 2.8s ease-in-out infinite;
}
@keyframes mrl-label-pulse {
  0%, 100% { opacity: 0.40; }
  50%       { opacity: 0.70; }
}

/* ── HUD CORNER BRACKETS ──────────────────────────────────────────── */
.mr-loader__corner {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 4;
  opacity: 0;
  animation: mrl-fade-in 1.4s ease 0.7s forwards;
}
.mr-loader__corner--tl {
  top: 1.4rem; left: 1.4rem;
  border-top: 1px solid rgba(201,168,76,0.25);
  border-left: 1px solid rgba(201,168,76,0.25);
}
.mr-loader__corner--tr {
  top: 1.4rem; right: 1.4rem;
  border-top: 1px solid rgba(201,168,76,0.25);
  border-right: 1px solid rgba(201,168,76,0.25);
}
.mr-loader__corner--bl {
  bottom: 1.4rem; left: 1.4rem;
  border-bottom: 1px solid rgba(201,168,76,0.25);
  border-left: 1px solid rgba(201,168,76,0.25);
}
.mr-loader__corner--br {
  bottom: 1.4rem; right: 1.4rem;
  border-bottom: 1px solid rgba(201,168,76,0.25);
  border-right: 1px solid rgba(201,168,76,0.25);
}

/* ── TOP CLASSIFICATION MARK ─────────────────────────────────────── */
.mr-loader__classify {
  position: absolute;
  top: 1.8rem; right: 1.8rem;
  z-index: 4;
  font-family: 'Rajdhani', monospace;
  font-size: 0.50rem;
  letter-spacing: 0.36em;
  color: rgba(201, 168, 76, 0.20);
  text-transform: uppercase;
  opacity: 0;
  animation: mrl-fade-in 1s ease 1.3s forwards;
}

/* ── BOTTOM SYSTEM ID ────────────────────────────────────────────── */
.mr-loader__sysid {
  position: absolute;
  bottom: 1.8rem; left: 1.8rem;
  z-index: 4;
  font-family: 'Rajdhani', monospace;
  font-size: 0.48rem;
  letter-spacing: 0.30em;
  color: rgba(201, 168, 76, 0.17);
  text-transform: uppercase;
  opacity: 0;
  animation: mrl-fade-in 1s ease 1.5s forwards;
}

/* ── SHARED FADE-IN KEYFRAME ──────────────────────────────────────── */
@keyframes mrl-fade-in {
  to { opacity: 1; }
}

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

  .mr-loader__stage {
    width: min(340px, 76vmin);
    height: min(340px, 76vmin);
  }
}