/* Valtaren portal: dark lacquer, ivory and burnished gold, crimson accents, the inner "bulb-bright" glow. */
:root {
  --bg: #0b0907; --bg2: #14100b; --panel: rgba(22, 17, 12, .82); --line: rgba(201, 162, 90, .28);
  --ivory: #efe6d2; --muted: #a99b82; --gold: #c9a25a; --gold-hi: #f3d48a; --crimson: #8e1c22; --glow: #ffe7a8;
  --serif: "Cinzel", "Trajan Pro", Georgia, serif; --sans: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--ivory); font: 16px/1.6 var(--sans); overflow-x: hidden; }
a { color: var(--gold-hi); }
img { max-width: 100%; display: block; }
html[lang="tr"] [data-en], html[lang="en"] [data-tr] { display: none !important; }

/* Embers drifting up behind everything. */
#embers { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
main, header, footer { position: relative; z-index: 1; }

header.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 10px 16px;
  background: linear-gradient(rgba(11, 9, 7, .95), rgba(11, 9, 7, .7)); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
header.top { justify-content: space-between; padding: 10px clamp(16px, 3vw, 40px); }
header.top .brand { flex: none; }
header.top .brand img { height: clamp(22px, 2.4vw, 30px); width: auto; max-width: 52vw; }
header.top nav { display: flex; gap: clamp(4px, 1.4vw, 22px); flex: 1; justify-content: center; }
.menu { display: none; background: none; border: 1px solid var(--line); width: 42px; height: 38px; padding: 9px 10px; cursor: pointer; margin-left: auto; }
.menu i { display: block; height: 2px; background: var(--gold-hi); margin: 4px 0; transition: transform .25s, opacity .25s; }
.menu[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menu[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 860px) {
  .menu { display: block; }
  header.top nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    background: rgba(11, 9, 7, .97); border-bottom: 1px solid var(--line); padding: 6px 16px 14px; }
  header.top.open nav { display: flex; }
  header.top nav a { padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
}
header.top nav a { font: 600 13px var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  text-decoration: none; padding: 8px 10px; white-space: nowrap; border-bottom: 1px solid transparent; }
header.top nav a:hover, header.top nav a.on { color: var(--gold-hi); border-color: var(--gold); }
.lang { display: flex; border: 1px solid var(--line); }
.lang button { background: none; border: 0; color: var(--muted); font: 600 12px var(--serif); padding: 6px 9px; cursor: pointer; }
.lang button.on { color: var(--bg); background: var(--gold); }

/* Hero: the High Reach seen from the air, the logo with its glow. */
.hero { --bgimg: url(../img/hero-1920.webp); height: calc(100svh - 58px); min-height: 560px; max-height: 1080px; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(11,9,7,.25), rgba(11,9,7,0) 45%, rgba(11,9,7,.55) 82%, var(--bg)), var(--bgimg) center 38%/cover; }
@media (max-width: 1100px) { .hero { --bgimg: url(../img/hero-1280.webp); } }
@media (max-width: 640px), (max-aspect-ratio: 3/4) { .hero { --bgimg: url(../img/hero-720.webp); } }
.hero > div:not(.layer) { width: 100%; max-width: 760px; }
.cine .layer { max-width: none; }
.hero .logo { width: clamp(240px, 46vw, 640px); max-width: 90vw; max-height: 52svh; height: auto; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 0 28px rgba(255, 210, 120, .35)); animation: breathe 6s ease-in-out infinite; }
.hero p.tag { font: 500 clamp(16px, 2.4vw, 22px) var(--serif); letter-spacing: .08em; color: var(--ivory); text-shadow: 0 2px 12px #000; max-width: min(640px, 90vw); margin: 14px auto 26px; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
@media (max-width: 480px) { .ctas { flex-direction: column; align-items: center; } .ctas .cta { width: min(300px, 90vw); text-align: center; padding: 14px 18px; } }
@keyframes breathe { 50% { filter: drop-shadow(0 0 44px rgba(255, 220, 140, .6)); } }

.cta { display: inline-block; max-width: 90vw; font: 700 15px var(--serif); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: #1a1206; padding: 15px 34px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #8d6a2c);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  animation: pulse 2.8s ease-in-out infinite; }
.cta.ghost { background: none; color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold); clip-path: none; animation: none; }
.cta:disabled { opacity: .5; cursor: default; animation: none; }
@keyframes pulse { 50% { filter: drop-shadow(0 0 14px rgba(255, 215, 130, .75)) brightness(1.08); } }

/* Gold rune divider. */
.rune { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 56px auto 28px; color: var(--gold); max-width: 900px; padding: 0 16px; }
.rune::before, .rune::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.rune span { font: 700 clamp(20px, 3vw, 30px) var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--ivory); }
.rune span::before, .rune span::after { content: "\25C6"; color: var(--gold); font-size: .5em; vertical-align: middle; margin: 0 12px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.lead { text-align: center; color: var(--muted); max-width: 680px; margin: 0 auto 32px; }

/* Feature cards in a rune frame (the personal-weapon icon frame: double gold edge, cut corners). */
.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.frame { position: relative; background: var(--panel); border: 1px solid var(--line); padding: 4px;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
.frame::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(243, 212, 138, .18); pointer-events: none;
  clip-path: inherit; }
.card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; transition: transform .6s, filter .6s; }
.card:hover img { transform: scale(1.04); filter: brightness(1.12) saturate(1.1); }
.crest { width: clamp(120px, 22vw, 220px); height: auto; margin: 0 auto; filter: drop-shadow(0 0 30px rgba(255, 210, 120, .3)); }
.card { text-align: center; }
.card .body::before { content: "\25C6"; display: block; color: var(--gold); font-size: 12px; margin-bottom: 8px; }
.card .body { padding: 26px 22px 28px; }
.card h3 { font: 700 18px var(--serif); letter-spacing: .06em; color: var(--gold-hi); margin: 0 0 6px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }

.band { display: grid; gap: 28px; align-items: center; grid-template-columns: 1fr; margin: 30px 0; }
@media (min-width: 820px) { .band { grid-template-columns: 1.2fr 1fr; } .band.flip > :first-child { order: 2; } }
.band h2 { font: 700 clamp(22px, 3vw, 32px) var(--serif); color: var(--ivory); margin: 0 0 10px; }
.band h2 em { font-style: normal; color: var(--crimson); text-shadow: 0 0 18px rgba(200, 40, 40, .4); }
.band p { color: var(--muted); }

/* Pages below the menu. */
.page { padding: 40px 0 80px; min-height: 70vh; }
.page-hero { height: clamp(120px, 22vw, 220px); background: linear-gradient(180deg, rgba(11,9,7,.2), var(--bg)), url(../img/hero-1920.webp) center 30%/cover; }
@media (max-width: 640px) { .page-hero { background-image: linear-gradient(180deg, rgba(11,9,7,.2), var(--bg)), url(../img/hero-720.webp); } }
.panel { background: var(--panel); border: 1px solid var(--line); padding: 22px; margin-bottom: 22px; }
.post h2 { font: 700 22px var(--serif); color: var(--gold-hi); margin: 0; }
.post time { color: var(--muted); font-size: 13px; letter-spacing: .1em; }
.post .text { color: var(--ivory); }
.post .text li { margin: 4px 0; }

form { display: grid; gap: 12px; }
label { font: 600 12px var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: grid; gap: 6px; }
input { background: #0e0b08; border: 1px solid var(--line); color: var(--ivory); font: 16px var(--sans); padding: 12px; outline: none; }
input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 90, .18); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.tabs button { background: none; border: 1px solid var(--line); color: var(--muted); font: 600 13px var(--serif); letter-spacing: .1em; padding: 9px 14px; cursor: pointer; }
.tabs button.on { color: var(--bg); background: var(--gold); border-color: var(--gold); }
.msg { min-height: 1.4em; font-size: 15px; }
.msg.ok { color: #9fd38a; } .msg.bad { color: #e48a7a; }
.narrow { max-width: 480px; margin: 0 auto; }

.status-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #555; margin-right: 8px; }
.status-dot.ok { background: #6fd36a; box-shadow: 0 0 12px #6fd36a; } .status-dot.bad { background: #d5503f; }
table.kv { width: 100%; border-collapse: collapse; } table.kv td { padding: 10px 0; border-bottom: 1px solid var(--line); }
table.kv td:last-child { text-align: right; color: var(--gold-hi); font-family: var(--serif); }

.dl { text-align: center; }
.dl h3 { font: 700 20px var(--serif); color: var(--gold-hi); margin: 6px 0; }
.dl .meta { color: var(--muted); font-size: 14px; margin-bottom: 14px; min-height: 1.4em; }

footer { border-top: 1px solid var(--line); padding: 26px 16px; text-align: center; color: var(--muted); font-size: 13px; }
footer img { height: 40px; width: auto; margin: 0 auto 8px; opacity: .8; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } #embers { display: none; } }

/* ---------- v3: story, nations, download helpers, account ---------- */
.eyebrow { font: 600 12px var(--serif); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.prose { max-width: 720px; margin: 0 auto; font-size: 17px; color: #d9cfb9; }
.prose p { margin: 0 0 1.1em; }
.prose .drop::first-letter { float: left; font: 700 3.4em/0.9 var(--serif); color: var(--gold-hi); margin: 6px 10px 0 0; }
blockquote.voice { margin: 28px auto; max-width: 640px; padding: 4px 0 4px 22px; border-left: 2px solid var(--gold);
  font: 500 clamp(17px, 2vw, 20px)/1.55 var(--serif); color: var(--ivory); font-style: italic; }
blockquote.voice cite { display: block; margin-top: 8px; font: 600 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-style: normal; }
.chapter { padding: clamp(48px, 8vw, 96px) 0; position: relative; }
.chapter + .chapter::before { content: "\25C6"; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); color: var(--gold); }
.chapter h2 { font: 700 clamp(28px, 4.4vw, 48px)/1.1 var(--serif); text-align: center; margin: 10px 0 26px; color: var(--ivory); letter-spacing: .04em; }
.center { text-align: center; }

/* Feature strips without pictures: sigils drawn in gold. */
.pillars { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pillar { padding: 28px 22px; text-align: center; }
.pillar .sig { width: 54px; height: 54px; margin: 0 auto 14px; color: var(--gold-hi); }
.pillar h3 { font: 700 18px var(--serif); color: var(--gold-hi); margin: 0 0 8px; letter-spacing: .06em; }
.pillar p { margin: 0; color: var(--muted); font-size: 15px; }
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 5vw, 70px); padding: 30px 16px; }
.stat b { display: block; font: 700 clamp(26px, 3.6vw, 40px) var(--serif); color: var(--gold-hi); text-align: center; }
.stat span { display: block; font: 600 11px var(--serif); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); text-align: center; }
.live { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid var(--line); background: rgba(11,9,7,.6);
  font: 600 13px var(--serif); letter-spacing: .1em; color: var(--ivory); margin-top: 22px; }
.cta-band { text-align: center; padding: clamp(50px, 8vw, 90px) 16px; background: radial-gradient(60% 100% at 50% 100%, rgba(201, 162, 90, .18), transparent 70%); }
.cta-band h2 { font: 700 clamp(26px, 4vw, 42px) var(--serif); margin: 0 0 10px; }
.cta-band p { color: var(--muted); margin: 0 0 26px; }

/* Download. */
.dl-hero { text-align: center; padding: 10px 0 30px; }
.dl-hero .cta.big { font-size: 18px; padding: 20px 46px; }
.dl-hero .alt { margin-top: 14px; color: var(--muted); font-size: 14px; }
.steps { counter-reset: s; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step { padding: 22px 20px 20px; counter-increment: s; }
.step h4 { font: 700 15px var(--serif); color: var(--gold-hi); margin: 0 0 8px; letter-spacing: .05em; }
.step h4::before { content: counter(s); display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border: 1px solid var(--gold); color: var(--gold-hi); font-size: 13px; }
.step p { margin: 0; color: var(--muted); font-size: 14.5px; }
.mock { margin: 14px 0 0; border: 1px solid #3a3326; background: #1b1812; border-radius: 8px; padding: 12px; font: 13px var(--sans); color: #d8d0c0; }
.mock .bar { display: flex; gap: 5px; margin-bottom: 10px; } .mock .bar i { width: 9px; height: 9px; border-radius: 50%; background: #5a5040; }
.mock .btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }
.mock .btns span { padding: 4px 12px; border-radius: 5px; background: #2e2a22; } .mock .btns span.hl { background: #2f6fd6; color: #fff; box-shadow: 0 0 0 2px rgba(243, 212, 138, .8); }
.mock.win { border-radius: 0; background: #0f2a44; color: #dfe8f2; } .mock.win .btns span { border-radius: 0; background: #1d3e60; } .mock.win .btns span.hl { background: #fff; color: #0f2a44; }
.mock .lnk { color: #8fc1ff; text-decoration: underline; }
.oswitch { display: flex; justify-content: center; gap: 6px; margin: 0 0 18px; }
.req { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.req th, .req td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.req th { font: 600 11px var(--serif); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.tablewrap { overflow-x: auto; }
details.faq { border-bottom: 1px solid var(--line); padding: 4px 0; }
details.faq summary { cursor: pointer; list-style: none; padding: 14px 30px 14px 0; position: relative; font: 600 16px var(--serif); color: var(--ivory); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; position: absolute; right: 4px; top: 10px; color: var(--gold); font-size: 22px; }
details.faq[open] summary::after { content: "\2212"; }
details.faq p { margin: 0 0 16px; color: var(--muted); }

/* Account. */
.acct { min-height: calc(100svh - 58px); display: grid; place-items: center; padding: 40px 16px 70px; position: relative; overflow: hidden; isolation: isolate; }
.acct::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(11,9,7,.72), rgba(11,9,7,.92)), url(../img/hero-1920.webp) center/cover; filter: blur(6px); transform: scale(1.04); }
.acard { width: min(460px, 100%); background: rgba(18, 14, 10, .92); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(243, 212, 138, .12); padding: clamp(24px, 5vw, 40px); }
.acard .head { text-align: center; margin-bottom: 22px; }
.acard .head img { width: 64px; height: 64px; margin: 0 auto 10px; }
.acard .head h1 { font: 700 22px var(--serif); margin: 0; letter-spacing: .06em; }
.acard .head p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: #0d0a07; border: 1px solid var(--line); border-radius: 10px; padding: 4px; margin-bottom: 22px; }
.seg button { background: none; border: 0; border-radius: 7px; padding: 11px; font: 600 14px var(--sans); color: var(--muted); cursor: pointer; }
.seg button.on { background: linear-gradient(180deg, #2a2117, #1d1710); color: var(--gold-hi); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, .45); }
.acard form { gap: 14px; }
.fld { position: relative; display: block; text-transform: none; letter-spacing: 0; font: inherit; }
.fld input { width: 100%; height: 56px; padding: 22px 14px 8px; border-radius: 9px; background: #0d0a07; border: 1px solid #3a2f22; font: 16px var(--sans); color: var(--ivory); transition: border-color .2s, box-shadow .2s; }
.fld > span.l { position: absolute; left: 15px; top: 18px; font: 15px var(--sans); color: var(--muted); pointer-events: none; transition: all .15s; }
.fld input:focus + span.l, .fld input:not(:placeholder-shown) + span.l { top: 8px; font-size: 11.5px; color: var(--gold); letter-spacing: .04em; }
.fld input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 90, .2); }
.fld.bad input { border-color: #c4574a; } .fld .hint { display: block; min-height: 0; font: 12.5px var(--sans); color: #e48a7a; margin-top: 5px; }
.fld .eye { position: absolute; right: 8px; top: 9px; height: 38px; padding: 0 10px; background: none; border: 0; color: var(--muted); font: 600 12px var(--sans); cursor: pointer; border-radius: 6px; }
.fld .eye:focus-visible, .seg button:focus-visible, .btn-main:focus-visible, .linkbtn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 7px; } .meter i { height: 4px; border-radius: 2px; background: #2a2219; }
.meter[data-s="1"] i:nth-child(-n+1) { background: #c4574a; } .meter[data-s="2"] i:nth-child(-n+2) { background: #d39a45; }
.meter[data-s="3"] i:nth-child(-n+3) { background: #c9b95a; } .meter[data-s="4"] i { background: #6fbf6a; }
.btn-main { position: relative; height: 54px; border: 0; border-radius: 9px; cursor: pointer; font: 700 15px var(--serif); letter-spacing: .12em; text-transform: uppercase; color: #1a1206;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, #9c7633); box-shadow: 0 8px 24px rgba(201, 162, 90, .25); }
.btn-main:hover { filter: brightness(1.07); } .btn-main[disabled] { cursor: default; filter: saturate(.6) brightness(.85); }
.btn-main.busy span { visibility: hidden; }
.btn-main.busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px; border: 2px solid #1a1206; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.linkbtn { background: none; border: 0; color: var(--gold-hi); font: 14px var(--sans); cursor: pointer; padding: 2px; text-decoration: underline; text-underline-offset: 3px; }
.row-end { display: flex; justify-content: flex-end; margin-top: -4px; }
.fine { font-size: 12.5px; color: var(--muted); text-align: center; margin: 4px 0 0; }
.trust { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(201, 162, 90, .16); font-size: 12.5px; color: var(--muted); }
.trust svg { width: 14px; height: 14px; color: #8fc98a; }
.state { text-align: center; } .state .ic { width: 64px; height: 64px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-hi); font-size: 28px; }
.state h2 { font: 700 20px var(--serif); margin: 0 0 8px; } .state p { color: var(--muted); margin: 0 0 18px; }
.dash .who { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #0d0a07; margin-bottom: 16px; }
.dash .av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 700 20px var(--serif); color: #1a1206; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.dash .who b { display: block; font: 700 17px var(--serif); } .dash .who small { color: var(--muted); }
.dash h3 { font: 600 12px var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 22px 0 10px; }
.sess { list-style: none; margin: 0; padding: 0; } .sess li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(201,162,90,.14); font-size: 14px; }
.sess li small { display: block; color: var(--muted); } .sess .cur { color: #8fc98a; font-size: 12px; }
.ghostbtn { background: none; border: 1px solid var(--line); color: var(--ivory); border-radius: 8px; padding: 9px 14px; font: 600 13px var(--sans); cursor: pointer; }
.ghostbtn:hover { border-color: var(--gold); }
.toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50; display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); }
.toast { padding: 13px 16px; border-radius: 9px; background: #17120d; border: 1px solid var(--line); border-left: 3px solid #6fbf6a; box-shadow: 0 12px 30px rgba(0,0,0,.5); font-size: 14.5px; animation: tin .25s ease; }
.toast.bad { border-left-color: #c4574a; } @keyframes tin { from { opacity: 0; transform: translateY(10px); } }


/* ---------- v4: cinematic layer ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .35s ease both; } ::view-transition-new(root) { animation: vt-in .45s ease both; }
@keyframes vt-out { to { opacity: 0; filter: blur(4px); } } @keyframes vt-in { from { opacity: 0; } }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

.hero.cine { position: relative; background: #07050a; isolation: isolate; }
.cine .layer { position: absolute; inset: -6% 0; z-index: -1; will-change: transform; }
.cine .l-bg { background: var(--bgimg) center 38%/cover; animation: bgin 2.6s ease both; }
.cine .l-rays { background: conic-gradient(from 180deg at 50% 32%, transparent 0 40deg, rgba(255, 200, 120, .10) 46deg, transparent 54deg, transparent 70deg, rgba(255, 210, 140, .08) 76deg, transparent 84deg, transparent 276deg, rgba(255, 210, 140, .08) 284deg, transparent 290deg, transparent 306deg, rgba(255, 200, 120, .10) 314deg, transparent 320deg);
  mix-blend-mode: screen; animation: rays 14s ease-in-out infinite alternate; }
.cine .l-mist { background: linear-gradient(180deg, rgba(7,5,10,.55), transparent 30%, transparent 55%, rgba(11,9,7,.7) 80%, var(--bg)),
  radial-gradient(120% 60% at 50% 110%, rgba(11,9,7,.9), transparent 60%); }
@keyframes bgin { from { opacity: 0; transform: scale(1.08); filter: brightness(.3); } }
@keyframes rays { to { transform: rotate(4deg) scale(1.05); opacity: .7; } }
.hero-in { position: relative; text-align: center; width: 100%; max-width: 820px; }
.hero-in .emb { width: clamp(110px, 15vw, 210px); height: auto; margin: 0 auto 4px; animation: ignite 2.4s .3s cubic-bezier(.2,.7,.2,1) both, breathe 6s 2.8s ease-in-out infinite; }
@keyframes ignite { 0% { opacity: 0; transform: scale(.82); filter: brightness(0) drop-shadow(0 0 0 rgba(255,200,110,0)); }
  45% { opacity: 1; filter: brightness(.6) drop-shadow(0 0 10px rgba(255,160,60,.6)); }
  75% { filter: brightness(1.6) drop-shadow(0 0 60px rgba(255,220,140,.95)); }
  100% { transform: none; filter: brightness(1) drop-shadow(0 0 28px rgba(255,210,120,.4)); } }
.wm { margin: 0; } .wm img { width: clamp(240px, 52vw, 680px); max-width: 90vw; height: auto; margin: 0 auto;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%); mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0;
  animation: forge 1.6s 1.3s cubic-bezier(.3,.6,.2,1) both; filter: drop-shadow(0 4px 18px rgba(0,0,0,.8)); }
@keyframes forge { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; filter: brightness(2.2) drop-shadow(0 0 20px rgba(255,180,80,.9)); }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; filter: brightness(1) drop-shadow(0 4px 18px rgba(0,0,0,.8)); } }
.hero-in .tag, .hero-in .ctas, .hero-in .live { animation: rise 1s 2.4s ease both; } .hero-in .ctas { animation-delay: 2.6s; } .hero-in .live { animation-delay: 2.8s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.scrollcue { position: absolute; bottom: 22px; left: 50%; width: 24px; height: 40px; margin-left: -12px; border: 1px solid rgba(243,212,138,.5); border-radius: 12px; animation: rise 1s 3.2s both; }
.scrollcue i { position: absolute; left: 50%; top: 8px; width: 2px; height: 8px; margin-left: -1px; background: var(--gold-hi); border-radius: 1px; animation: cue 1.8s infinite; }
@keyframes cue { to { transform: translateY(14px); opacity: 0; } }

/* Runes that light when their chapter arrives. */
.glyph { display: inline-block; font: 400 34px/1 serif; color: rgba(201,162,90,.25); transition: color 1.2s, text-shadow 1.2s; }
.in .glyph, .glyph.in { color: var(--gold-hi); text-shadow: 0 0 18px rgba(255, 200, 110, .9), 0 0 40px rgba(255, 160, 60, .5); }

/* Grimdur and Belnor: two moods facing each other. */
.duo { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.half { position: relative; padding: clamp(56px, 8vw, 110px) clamp(22px, 6vw, 90px) clamp(40px, 5vw, 70px); }
.half .atmo { position: absolute; inset: 0; z-index: -1; }
.half h3 { font: 700 clamp(36px, 5vw, 64px)/1 var(--serif); margin: 10px 0 8px; letter-spacing: .08em; }
.half .epithet { font: 500 clamp(17px, 2vw, 21px)/1.4 var(--serif); font-style: italic; margin: 0 0 18px; }
.half p { max-width: 480px; }
.half .voice { margin: 24px 0 0; max-width: 460px; }
.grimdur { color: #e3d3c9; }
.grimdur .atmo { background: radial-gradient(90% 70% at 15% 20%, rgba(150, 30, 26, .55), transparent 60%), radial-gradient(70% 60% at 80% 100%, rgba(224, 100, 58, .25), transparent 60%),
  linear-gradient(160deg, #1a0b0c, #0b0607 70%); }
.grimdur .atmo::after { content: ""; position: absolute; inset: 0; opacity: .5; background: repeating-linear-gradient(105deg, transparent 0 3px, rgba(140, 150, 170, .05) 3px 4px, transparent 4px 40px); animation: storm 9s linear infinite; }
@keyframes storm { to { background-position: 400px 0; } }
.grimdur h3 { color: #f2a48c; text-shadow: 0 0 34px rgba(220, 50, 30, .55); }
.grimdur .eyebrow, .grimdur cite { color: #d0705e; } .grimdur .voice { border-color: #a3322a; color: #f0ddd0; }
.belnor { color: #f5ecd7; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.belnor .atmo { background: radial-gradient(90% 75% at 85% 15%, rgba(255, 228, 160, .42), transparent 60%), radial-gradient(60% 50% at 30% 100%, rgba(80, 130, 190, .25), transparent 60%),
  linear-gradient(200deg, #3b3020, #17130d 75%); }
.belnor .atmo::after { content: ""; position: absolute; inset: 0; background: conic-gradient(from 200deg at 90% -10%, transparent 0 10deg, rgba(255, 236, 190, .14) 14deg, transparent 20deg, transparent 30deg, rgba(255, 236, 190, .1) 34deg, transparent 40deg);
  animation: dawn 12s ease-in-out infinite alternate; }
@keyframes dawn { to { opacity: .5; transform: translateX(-3%); } }
.belnor h3 { color: #ffe9b0; text-shadow: 0 0 34px rgba(255, 220, 140, .6); }
.belnor .eyebrow, .belnor cite { color: #9cc0e6; } .belnor .voice { border-left: 0; border-right: 2px solid var(--gold); padding: 4px 22px 4px 0; color: #fff4dc; }
.front { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent, var(--gold-hi), transparent);
  box-shadow: 0 0 22px rgba(255, 200, 110, .6); animation: front 16s ease-in-out infinite alternate; }
@keyframes front { 0% { transform: translateX(-36px); } 50% { transform: translateX(28px); } 100% { transform: translateX(-12px); } }
.prize { grid-column: 1 / -1; text-align: center; padding: 34px 20px 46px; background: linear-gradient(90deg, rgba(120, 24, 22, .25), rgba(11,9,7,.95) 30%, rgba(11,9,7,.95) 70%, rgba(200, 170, 100, .18)); border-top: 1px solid var(--line); }
.prize p { max-width: 700px; margin: 10px auto 0; font: 500 clamp(16px, 1.8vw, 19px)/1.6 var(--serif); color: var(--ivory); }
@media (max-width: 820px) {
  .duo { grid-template-columns: 1fr; } .belnor { text-align: left; align-items: flex-start; }
  .belnor .voice { border-right: 0; border-left: 2px solid var(--gold); padding: 4px 0 4px 22px; }
  .front { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 2px; margin: 0; background: linear-gradient(90deg, transparent, var(--gold-hi), transparent); animation: none; display: none; }
  .belnor { border-top: 1px solid var(--gold); }
}

/* Mystery. */
.mystery h2 { margin-top: 6px; }
.secrets { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.secret { position: relative; padding: 28px 24px; border: 1px solid rgba(201, 162, 90, .18); background: radial-gradient(120% 90% at 50% 0%, rgba(201, 162, 90, .08), transparent 60%), rgba(14, 11, 8, .8); }
.secret h3 { font: 700 18px var(--serif); color: var(--gold-hi); margin: 10px 0 8px; letter-spacing: .05em; }
.secret p { margin: 0; color: var(--muted); font-size: 15px; }

/* Glow from within on hover, like +10 gear. */
.cta, .secret, .pillar, .step, .ghostbtn { transition: box-shadow .4s, filter .4s, border-color .4s, transform .4s; }
.secret:hover, .pillar:hover, .step:hover { border-color: rgba(243, 212, 138, .55); box-shadow: inset 0 0 40px rgba(255, 200, 110, .14), 0 0 30px rgba(255, 190, 90, .12); transform: translateY(-3px); }
.secret:hover .glyph { color: #fff3d0; }
.cta:hover { filter: brightness(1.12) drop-shadow(0 0 16px rgba(255, 210, 130, .8)); }
.cta.ghost:hover { box-shadow: inset 0 0 0 1px var(--gold-hi), inset 0 0 24px rgba(255, 200, 110, .3); }

/* Cursor embers (desktop) and the sound toggle. */
#trail { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.snd { background: none; border: 1px solid var(--line); color: var(--muted); width: 36px; height: 32px; cursor: pointer; display: grid; place-items: center; padding: 0; }
.snd svg { width: 16px; height: 16px; } .snd.on { color: var(--gold-hi); border-color: var(--gold); box-shadow: inset 0 0 12px rgba(255, 200, 110, .3); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; } #trail { display: none; }
  .cine .layer, .hero-in .emb, .wm img, .hero-in .tag, .hero-in .ctas, .hero-in .live, .front { animation: none !important; -webkit-mask: none; mask: none; }
}

/* ---------- v5: lava and meadow ---------- */
.half .fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.grimdur .atmo { background:
  radial-gradient(60% 40% at 20% 100%, rgba(255, 90, 20, .55), transparent 70%),
  radial-gradient(50% 30% at 85% 95%, rgba(220, 50, 10, .45), transparent 70%),
  radial-gradient(90% 70% at 10% 10%, rgba(120, 20, 18, .5), transparent 60%),
  linear-gradient(170deg, #160c0b 0%, #0b0707 55%, #1a0705 100%); }
.grimdur .atmo::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300'%3E%3Cg fill='none' stroke='%23ff6a1a' stroke-linecap='round'%3E%3Cpath stroke-width='2.4' d='M0 250 L60 230 L95 262 L160 240 L210 268 L280 236 L330 252 L400 226 L450 258 L520 238 L600 252'/%3E%3Cpath stroke-width='1.4' d='M95 262 L110 300 M210 268 L190 300 M330 252 L350 300 M450 258 L470 300 M160 240 L150 190 L175 150 M400 226 L420 180 L405 130 M280 236 L300 200'/%3E%3Cpath stroke-width='1' d='M30 160 L70 175 L120 150 M480 170 L530 150 L590 165 M230 120 L260 140'/%3E%3C/g%3E%3C/svg%3E") center bottom/600px 300px repeat-x;
  filter: drop-shadow(0 0 6px #ff5a1f) drop-shadow(0 0 14px rgba(255, 60, 10, .7)); opacity: .55; animation: lava 4.5s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(transparent, #000 60%); mask-image: linear-gradient(transparent, #000 60%); }
@keyframes lava { to { opacity: .95; filter: drop-shadow(0 0 9px #ff7a2a) drop-shadow(0 0 22px rgba(255, 80, 20, .9)); } }
.grimdur .atmo::after { background: linear-gradient(0deg, rgba(255, 120, 40, .12), transparent 40%); animation: shimmer 3s ease-in-out infinite alternate; opacity: 1; }
@keyframes shimmer { to { transform: translateY(-6px) scaleY(1.04); opacity: .6; } }
.grimdur h3 { color: #ff9a6a; text-shadow: 0 0 30px rgba(255, 70, 20, .8), 0 0 70px rgba(255, 40, 0, .4); }

.belnor { color: #23301c; }
.belnor .atmo { background:
  radial-gradient(70% 60% at 85% 0%, rgba(255, 236, 170, .95), transparent 60%),
  radial-gradient(80% 50% at 50% 110%, #3f7a2c, transparent 70%),
  linear-gradient(180deg, #f7efcf 0%, #dfe9b8 35%, #9cc46c 70%, #5d9640 100%); }
.belnor .atmo::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%232f6a22' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 120 Q14 80 6 50 M30 120 Q26 90 34 60 M52 120 Q58 85 50 40 M80 120 Q76 95 84 70 M104 120 Q110 80 102 45 M130 120 Q126 90 136 62 M156 120 Q162 85 152 48 M184 120 Q178 92 188 66 M210 120 Q216 82 206 52 M232 120 Q228 95 236 70'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='6' cy='48' r='5' fill='%23ffd1df'/%3E%3Ccircle cx='50' cy='38' r='6' fill='%23fff3c4'/%3E%3Ccircle cx='102' cy='43' r='5' fill='%23f4a8c0'/%3E%3Ccircle cx='152' cy='46' r='6' fill='%23ffffff'/%3E%3Ccircle cx='206' cy='50' r='5' fill='%23ffd76a'/%3E%3C/g%3E%3C/svg%3E") left bottom/240px 120px repeat-x;
  transform-origin: bottom; animation: breeze 5s ease-in-out infinite alternate; opacity: .9; }
@keyframes breeze { to { transform: skewX(-4deg) translateX(6px); } }
.belnor .atmo::after { background: conic-gradient(from 200deg at 92% -8%, transparent 0 8deg, rgba(255, 246, 210, .55) 12deg, transparent 18deg, transparent 26deg, rgba(255, 246, 210, .4) 30deg, transparent 36deg); }
.belnor h3 { color: #7a5410; text-shadow: 0 0 26px rgba(255, 240, 180, 1); }
.belnor .epithet { color: #3c5a24; } .belnor p { color: #2c3a22; }
.belnor .eyebrow, .belnor cite { color: #4a7a2c; } .belnor .voice { color: #3a2e12; border-color: #b8892c; }
.belnor .voice cite { color: #4a7a2c; }

main .half { padding-bottom: clamp(130px, 12vw, 160px); }
.half .atmo { overflow: hidden; }
/* The page's mood follows the half you are in. */
#moodveil { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 1.2s ease, background 1.2s ease; }
body[data-mood="grimdur"] #moodveil { opacity: 1; background: radial-gradient(120% 80% at 50% 120%, rgba(255, 60, 10, .22), transparent 60%); }
body[data-mood="belnor"] #moodveil { opacity: 1; background: radial-gradient(120% 80% at 70% -20%, rgba(255, 240, 180, .16), transparent 60%), radial-gradient(100% 60% at 50% 120%, rgba(90, 160, 60, .16), transparent 60%); }
body[data-mood] header.top { transition: border-color 1s, box-shadow 1s; }
body[data-mood="grimdur"] header.top { border-color: rgba(255, 90, 30, .5); box-shadow: 0 1px 24px rgba(255, 60, 10, .25); }
body[data-mood="belnor"] header.top { border-color: rgba(140, 200, 100, .5); box-shadow: 0 1px 24px rgba(160, 220, 120, .2); }
.half { transition: filter .8s; }
.duo:hover .half:not(:hover) { filter: saturate(.55) brightness(.7); }
@media (prefers-reduced-motion: reduce) { .grimdur .atmo::before, .belnor .atmo::before, .grimdur .atmo::after { animation: none; } }