/* ==========================================================================
   Mythistoria Gate Preloader — Ruby gradient theme (#B8394B)
   Συγχρονισμένο με το preloader.js (Ken Burns + Shimmer)
   ========================================================================== */

/* ----- Παλέτα (tints/shades του #B8394B) ----- */
:root{
  --brand:      #B8394B;  /* base */
  --brand-100:  #D8929C;  /* lighten 45% */
  --brand-200:  #CD7481;  /* lighten 30% */
  --brand-300:  #C35766;  /* lighten 15% */
  --brand-600:  #9C3040;  /* darken 15% */
  --brand-700:  #812834;  /* darken 30% */
  --brand-900:  #5C1C26;  /* darken 50% */

  --glass:      rgba(255,255,255,.08);
  --stroke:     rgba(255,255,255,.30);

  /* Ken Burns & Shimmer default durations (πατούνται από JS όταν χρειαστεί) */
  --kb-dur: 2000ms;
  --shimmer-dur: 1800ms;

  /* Μέγεθος/αναλογία κεντρικού κάδρου */
  --box-size: clamp(240px, 48vmin, 520px);
  --box-aspect: 1 / 1;

  --radius: 14px;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* ----- Fullscreen overlay: Ruby radial gradient + soft highlight ----- */
.mp-dp-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;

  background:
    radial-gradient(1200px 800px at 50% 40%,
      var(--brand-100) 0%,
      var(--brand-200) 35%,
      var(--brand)     60%,
      var(--brand-700) 85%,
      var(--brand-900) 100%
    ),
    radial-gradient(1600px 1000px at 50% 38%,
      rgba(255,255,255,.06) 0%,
      rgba(255,255,255,0)   60%
    );

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease, visibility 300ms step-end;
}

.mp-dp-overlay.mp-dp-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Εμφάνιση μόνο του ενεργού layer */
.mp-dp-overlay[data-mode="image"] .mp-dp-lottie { display: none; }
.mp-dp-overlay[data-mode="lottie"] .mp-dp-image { display: none; }

/* Κεντρικός καμβάς */
.mp-dp-center {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ----- IMAGE MODE ----- */
.mp-dp-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Κεντρικό κάδρο (Ken Burns) */
.mp-dp-kenburns {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--box-size);
  aspect-ratio: var(--box-aspect);
  height: auto;
  transform: translate(-50%, -50%);
  transform-origin: center;

  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain; /* default — αλλάζει με data-fit */

  border-radius: var(--radius);
  box-shadow: var(--shadow);
  outline: 1px solid rgba(255,255,255,.28);

  will-change: transform, opacity, background-position;
  animation: none;
}

/* Respect image_fit (cover/contain) */
.mp-dp-image[data-fit="cover"]   .mp-dp-kenburns { background-size: cover; }
.mp-dp-image[data-fit="contain"] .mp-dp-kenburns { background-size: contain; }

/* Shimmer πάνω από το ίδιο κάδρο */
.mp-dp-shimmer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--box-size);
  aspect-ratio: var(--box-aspect);
  height: auto;

  transform: translate(-50%, -50%) translateX(-120%);
  border-radius: var(--radius);
  pointer-events: none;
  filter: blur(.4px);
  opacity: .85;

  background: linear-gradient(
    110deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.07) 45%,
    rgba(255,255,255,0.16) 50%,
    rgba(255,255,255,0.07) 55%,
    rgba(255,255,255,0)   100%
  );

  animation: none;
}

/* Όταν το JS ξεκινήσει το animation */
.mp-dp-image.mp-dp-run .mp-dp-kenburns { animation: mpdp-kb var(--kb-dur) ease-in-out forwards; }
.mp-dp-image.mp-dp-run .mp-dp-shimmer  { animation: mpdp-shimmer var(--shimmer-dur) ease-in-out forwards 120ms; }

@keyframes mpdp-kb {
  0%   { transform: translate(-50%, -50%) scale(1.00); }
  100% { transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes mpdp-shimmer {
  0%   { transform: translate(-50%, -50%) translateX(-120%); }
  100% { transform: translate(-50%, -50%) translateX(120%); }
}

/* ----- LOTTIE MODE ----- */
.mp-dp-lottie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ----- Skip button (ruby glass) ----- */
.mp-dp-skip {
  position: absolute;
  bottom: clamp(16px, 2.4vmin, 24px);
  right:  clamp(16px, 2.4vmin, 24px);
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  border-radius: 999px;

  border: 1px solid var(--stroke);
  background: var(--glass);
  color: #fff;
  cursor: pointer;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition: transform 150ms ease, opacity 150ms ease,
              background-color 150ms ease, border-color 150ms ease;
}
.mp-dp-skip:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.55);
}
.mp-dp-skip[hidden]{ display:none !important; }

/* ----- Small screens ----- */
@media (max-width: 480px) {
  .mp-dp-center { height: 100dvh; }
  :root{ --box-size: clamp(220px, 62vmin, 440px); }
}

/* ----- Reduced Motion ----- */
@media (prefers-reduced-motion: reduce) {
  .mp-dp-overlay { transition: none; }
  .mp-dp-image .mp-dp-kenburns,
  .mp-dp-image .mp-dp-shimmer { animation: none !important; }
  .mp-dp-overlay.mp-dp-hide { display: none; }
}