/* ===========================================================================
   Mythos Modern — build-independent component styles
   ---------------------------------------------------------------------------
   These rules are PLAIN CSS (no Tailwind directives), so they do NOT need
   `npm run build`. functions.php enqueues this file directly on every page,
   which is why the realms marquee + parallax work whether or not app.css has
   been recompiled. Keep build-independent components here.
   =========================================================================== */

/* ---- Realms stage: full-bleed parallax band ------------------------------ */
.realm-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 10rem);
}

/* The parallax backdrop. Always rendered. Shows a built-in atmospheric
   gradient by default; an inline style (from the Customizer image) overrides
   the background-image when one is set. Oversized so the drift never gaps. */
.realm-stage__bg {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -15%;
  block-size: 130%;
  z-index: 0;
  background-image:
    radial-gradient(130% 80% at 50% -10%, rgba(212, 175, 55, 0.10), transparent 55%),
    linear-gradient(180deg, #15161a 0%, #0d0e10 60%, #0b0b0c 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}

/* Heading + marquee sit above the backdrop. */
.realm-stage > .container-myth,
.realm-stage > .realm-marquee { position: relative; z-index: 1; }

/* ---- Realms marquee: infinite horizontal row ----------------------------- */
.realm-marquee {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

/* No-JS / reduced-motion fallback: a swipeable row. */
.realm-marquee:not(.is-animated) { overflow-x: auto; scrollbar-width: none; }
.realm-marquee:not(.is-animated)::-webkit-scrollbar { display: none; }

.realm-marquee__track {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  inline-size: max-content;
  padding-block: 12px;            /* room for the hover lift                 */
  padding-inline: clamp(1rem, 4vw, 3rem);
  margin: 0;
  list-style: none;
}

/* Each cell holds one portal card at a fixed, responsive width. */
.realm-marquee__item {
  flex: 0 0 auto;
  inline-size: clamp(190px, 60vw, 240px);
}

/* Animate only once the script has duplicated the cards (seamless loop). */
.realm-marquee.is-animated .realm-marquee__track {
  animation: realm-marquee-scroll var(--marquee-duration, 60s) linear infinite;
  will-change: transform;
}

/* RTL-natural drift: cards enter from the right, travel left by exactly one
   set width (set in px by the script). */
@keyframes realm-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-distance, 50%))); }
}

/* Pause the row on hover OR keyboard focus within it. */
.realm-marquee.is-animated:hover .realm-marquee__track,
.realm-marquee.is-animated:focus-within .realm-marquee__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .realm-marquee.is-animated .realm-marquee__track { animation: none; }
}