/* Realms of Ember: the Forgeflight realms page, and the teaser that leads to it.
   One climb, top to bottom: a hero with the 1000-gate journey bar, then a full-bleed band
   per realm, each in its own palette and with its own living background. */

body.world-realms {
  --ink: #0c0812; --night: #0c0812; --plate: #160f1f; --plate-2: #1e1529;
  --paper: #f3ecf4; --dim: #b3a6b9; --mute: #7d7083; --line: rgba(255, 255, 255, .12); --line-2: rgba(255, 255, 255, .2);
  --accent: #ff8a3d; --brass: #ff8a3d; --brass-hi: #ffcf5a;
  --rl-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --rl-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rl-data: "JetBrains Mono", ui-monospace, Menlo, monospace;
  background: var(--ink); color: var(--paper);
}
.world-realms main { font: 16px/1.55 var(--rl-body); }
.rl-wrap, .rl-inner { position: relative; max-width: 1180px; margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
.rl-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- Hero ---------- */
.rl-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(120px, 16vh, 160px) 56px;
  background: radial-gradient(120% 80% at 85% -10%, rgba(255, 106, 26, .28), transparent 60%),
              radial-gradient(90% 70% at 0% 0%, rgba(142, 91, 255, .22), transparent 60%), var(--ink); }
.rl-back { display: inline-block; margin-bottom: 26px; font: 700 13px var(--rl-data); color: var(--dim); text-decoration: none; letter-spacing: .04em; }
.rl-back:hover { color: #ffb04a; }
.rl-eyebrow { font: 700 12px/1 var(--rl-data); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
.rl-hero h1 { font: 900 clamp(34px, 7vw, 76px)/1.02 var(--rl-display); margin: 0; letter-spacing: -.02em; text-wrap: balance; max-width: 15ch; }
.rl-hero h1 em { font-style: normal; background: linear-gradient(90deg, #ffb04a, #ff6a2b 30%, #f5a6ff 60%, #ffe27a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rl-lede { max-width: 62ch; color: var(--dim); font-size: 18px; margin: 20px 0 0; }
.rl-journey { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin-top: 40px; }
.rl-seg { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 120px; padding: 10px 8px; text-decoration: none; color: var(--paper); border-radius: 6px;
  background: radial-gradient(120% 90% at 50% 110%, var(--c2), var(--c1) 70%); border: 1px solid rgba(255, 255, 255, .08); transition: transform .2s, box-shadow .2s; }
.rl-seg:hover, .rl-seg:focus-visible { transform: translateY(-4px); box-shadow: 0 10px 30px -10px var(--c2); outline: none; }
.rl-seg:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.rl-sn { font: 900 26px/1 var(--rl-display); color: var(--acc); }
.rl-sname { font: 700 11px/1.2 var(--rl-body); letter-spacing: .02em; text-wrap: balance; }
.rl-seg:last-child { box-shadow: 0 0 0 1px rgba(255, 226, 122, .5), 0 0 28px -6px #ff6a1a; }
.rl-scale { display: flex; justify-content: space-between; font: 500 11px var(--rl-data); color: var(--dim); margin-top: 8px; }

/* ---------- Realm bands ---------- */
.rl-realm { position: relative; overflow: hidden; isolation: isolate; color: var(--ink2, var(--paper)); color: var(--ink);
  background: radial-gradient(90% 70% at 80% 10%, color-mix(in srgb, var(--c2) 45%, transparent), transparent 65%),
              radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--c2) 22%, transparent), transparent 70%), var(--c1);
  transition: background-color .1s; }
.rl-realm::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 18%, transparent 82%, rgba(0, 0, 0, .4)); }
.rl-realm .rl-inner { padding-block: 64px 72px; }
.rl-rhead { display: flex; gap: 22px; align-items: flex-end; border-bottom: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); padding-bottom: 20px; }
.rl-rnum { font: 900 clamp(64px, 12vw, 128px)/.8 var(--rl-display); color: var(--acc); text-shadow: 0 0 40px color-mix(in srgb, var(--c2) 70%, transparent); display: flex; flex-direction: column; }
.rl-rnum span { font: 700 11px/1 var(--rl-data); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); opacity: .7; margin-bottom: 8px; }
.rl-rtitle { min-width: 0; }
.rl-gates { font: 700 12px var(--rl-data); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); margin: 0 0 6px; }
.rl-realm h2 { font: 900 clamp(28px, 5vw, 52px)/1.02 var(--rl-display); margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.rl-status { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.rl-pill { padding: 4px 10px; border-radius: 999px; font: 700 11px/1.3 var(--rl-data); letter-spacing: .04em; text-transform: uppercase; }
.rl-pill.live { background: #1f8a5a; color: #eafff3; }
.rl-pill.soon { background: color-mix(in srgb, var(--acc) 22%, transparent); color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc) 50%, transparent); }
.rl-body { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 40px; margin-top: 30px; align-items: start; }
.rl-facts { min-width: 0; }
.rl-look { font-size: 18px; line-height: 1.5; margin: 0 0 22px; text-wrap: pretty; }
.rl-facts h3 { font: 700 11px var(--rl-data); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); margin: 0 0 8px; }
.rl-haz { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; }
.rl-haz li { position: relative; padding-left: 20px; }
.rl-haz li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; transform: rotate(45deg); background: var(--acc); box-shadow: 0 0 10px var(--c2); }
.rl-song { margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.rl-note { color: var(--acc); font-size: 18px; }
.rl-bpm { font: 700 12px var(--rl-data); padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, .3); color: var(--acc); }
.rl-audio { margin: 0 0 20px; display: grid; gap: 6px; }
.rl-audio span { font: 700 11px var(--rl-data); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.rl-audio audio { width: 100%; max-width: 340px; }
.rl-meter { background: rgba(0, 0, 0, .32); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: 14px 16px; }
.rl-meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rl-big { font: 900 30px/1 var(--rl-display); color: var(--acc); font-variant-numeric: tabular-nums; }
.rl-tgt { font: 500 12px var(--rl-data); opacity: .8; }
.rl-bar { position: relative; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .1); margin: 12px 0 8px; }
.rl-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: linear-gradient(90deg, var(--c2), var(--acc)); }
.rl-meter-cap { font-size: 12px; opacity: .75; }

.rl-gallery { display: grid; gap: 16px; min-width: 0; }
.rl-strip { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-color: var(--acc) transparent; }
.rl-shot { margin: 0; min-width: 0; }
.rl-shot.tall { flex: 0 0 auto; width: clamp(150px, 22vw, 210px); scroll-snap-align: start; }
.rl-zoom { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .1); transition: transform .25s, box-shadow .25s; }
.rl-zoom:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -18px var(--c2), 0 0 0 1px var(--acc); }
.rl-zoom:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.rl-zoom img { display: block; width: 100%; height: auto; }
.rl-shot figcaption { font-size: 12px; margin-top: 8px; opacity: .78; line-height: 1.35; }
.rl-shot.video video { display: block; width: 100%; height: auto; aspect-ratio: 480 / 1039; border-radius: 12px; background: #000; box-shadow: 0 0 0 1px var(--acc), 0 30px 60px -20px var(--c2); }

/* The finale gets a beating heart and more room */
.rl-realm.finale .rl-inner { padding-block: 96px 110px; }
.rl-realm.finale::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 18%; width: 70vmin; height: 70vmin; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 122, .55), rgba(255, 106, 26, .3) 40%, transparent 70%); animation: rl-beat .83s ease-out infinite; }
.rl-realm.finale .rl-rnum { font-size: clamp(80px, 16vw, 170px); }
.rl-realm.finale h2 { font-size: clamp(36px, 7vw, 76px); background: linear-gradient(90deg, #ffe27a, #ff6a1a 55%, #ff3d7a); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes rl-beat { 0% { transform: translate(-50%, -50%) scale(1); opacity: .9; } 14% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1.02); } 44% { transform: translate(-50%, -50%) scale(1.08); } 100% { transform: translate(-50%, -50%) scale(1); opacity: .9; } }
.rl-realm[data-kind="storm"].flash { background-color: #3a4475; }

.rl-end { padding-block: 64px 80px; text-align: center; color: var(--dim); font-size: 14px; }
.rl-end b { display: block; font: 900 22px var(--rl-display); color: var(--paper); margin-bottom: 6px; }
.rl-end p { margin: 0 auto 28px; max-width: 56ch; }

.rl-lb { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; }
.rl-lb::backdrop { background: rgba(5, 3, 8, .88); }
.rl-lb img { display: block; max-width: 96vw; max-height: 88vh; width: auto; height: auto; border-radius: 10px; }
.rl-lb p { color: #f3ecf4; text-align: center; margin: 10px 0 0; font-size: 14px; }
.rl-lb button { position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, .6); color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; width: 36px; height: 36px; font-size: 18px; cursor: pointer; }

@media (max-width: 860px) {
  .rl-body { grid-template-columns: minmax(0, 1fr); }
  .rl-journey { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rl-seg { min-height: 86px; }
  .rl-scale { display: none; }
}

/* ---------- The glowing way in (used on both pages) ---------- */
.rl-glow { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 16px 18px 16px 26px; border-radius: 18px; overflow: hidden; isolation: isolate;
  font: 400 20px/1 "Lilita One", "Rubik", system-ui, sans-serif; letter-spacing: .02em; color: #fff; text-decoration: none; text-shadow: 0 2px 0 rgba(90, 20, 10, .5);
  background: linear-gradient(180deg, #ffb066, #ff6a2b 55%, #e2431c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 5px 0 #8f2410, 0 0 0 1px rgba(255, 226, 122, .4), 0 0 34px -2px rgba(255, 120, 40, .75);
  animation: rl-glow 2.6s ease-in-out infinite; transition: transform .15s; }
.rl-glow i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(60, 10, 4, .35); transition: transform .4s; }
.rl-glow::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); animation: rl-sheen 3.4s ease-in-out infinite 1s; }
.rl-glow:hover { transform: translateY(-2px); }
.rl-glow:hover i { transform: translateX(3px); }
.rl-glow:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 1px 0 #8f2410, 0 0 30px -4px rgba(255, 120, 40, .7); }
.rl-glow:focus-visible { outline: 2px solid #ffe27a; outline-offset: 4px; }
@keyframes rl-glow {
  0%, 100% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 5px 0 #8f2410, 0 0 0 1px rgba(255, 226, 122, .4), 0 0 26px -4px rgba(255, 120, 40, .6); }
  50% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 5px 0 #8f2410, 0 0 0 1px rgba(255, 226, 122, .7), 0 0 54px 4px rgba(255, 140, 50, .85); }
}
@keyframes rl-sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* ---------- Teaser on the Forgeflight page ---------- */
.rlt { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; border: 1px solid rgba(255, 255, 255, .12);
  padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  background: radial-gradient(100% 90% at 100% 0%, rgba(255, 106, 26, .3), transparent 60%), radial-gradient(80% 80% at 0% 100%, rgba(142, 91, 255, .28), transparent 65%), #120a18; }
.rlt .rl-fx { z-index: -1; }
.rlt-copy .eyebrow { color: #ffb04a; }
.rlt-copy h2 { margin: 16px 0 16px; }
.rlt-copy .lede { margin: 0 0 30px; }
.rlt-map { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.rlt-map .rl-seg { min-height: 104px; color: #f3ecf4; }
.rlt-map .rl-sn { font-family: "Lilita One", "Rubik", sans-serif; font-weight: 400; font-size: 30px; }
.rlt-map .rl-sname { font-family: "Rubik", system-ui, sans-serif; font-weight: 600; font-size: 12px; }
@media (max-width: 860px) {
  .rlt { grid-template-columns: minmax(0, 1fr); }
  .rlt-map .rl-seg { min-height: 80px; padding: 8px 6px; }
  .rlt-map .rl-sn { font-size: 24px; }
  .rlt-map .rl-sname { font-size: 10px; }
  .rl-glow { width: 100%; justify-content: space-between; }
}

html[data-calm] .rl-glow, html[data-calm] .rl-glow::after, html[data-calm] .rl-realm.finale::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .rl-glow, .rl-glow::after, .rl-realm.finale::after { animation: none; }
  .rl-seg, .rl-zoom { transition: none; }
}
@media (max-width: 480px) {
  .rl-journey, .rlt-map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .rl-journey .rl-seg, .rlt-map .rl-seg { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 12px;
    background: radial-gradient(90% 140% at 100% 50%, var(--c2), var(--c1) 75%); }
  .rl-journey .rl-sn, .rlt-map .rl-sn { font-size: 22px; min-width: 1.4em; }
  .rl-journey .rl-sname, .rlt-map .rl-sname { font-size: 13px; }
}