/* ==========================================================================
   RASHTRAKUTA — Sicra Digital
   Dark, carved-stone, firelit: stone black, umber, bronze, amber, gold.
   ========================================================================== */

:root {
  --bg: #0b0806;
  --bg-2: #120d09;
  --stone: #1a130e;
  --stone-2: #241a13;
  --stone-3: #31241a;
  --gold: #e9a33a;
  --gold-2: #f6c766;
  --gold-3: #b97a24;
  --ember: #ff6a1a;
  --text: #ebdfcb;
  --muted: #a8957c;
  --dim: #6f604e;
  --line: rgba(233, 163, 58, .22);
  --line-2: rgba(233, 163, 58, .45);

  --f-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow", system-ui, sans-serif;
  --f-italic: "Cormorant Garamond", Georgia, serif;

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1320px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --nav-h: 72px;

  /* Stone grain texture: SVG turbulence, no external file */
  /* Softer grain for carved plaques */
  --stone-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .7 0 0 0 0 .5 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Stepped plinth corners (adhishthana profile), used on plaques and cards */
  --plq:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M.5 12V5h4V.5H12' fill='none' stroke='%23e9a33a'/%3E%3C/svg%3E") left 3px top 3px / 12px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M11.5 12V5h-4V.5H0' fill='none' stroke='%23e9a33a'/%3E%3C/svg%3E") right 3px top 3px / 12px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M.5 0v7h4v4.5H12' fill='none' stroke='%23e9a33a'/%3E%3C/svg%3E") left 3px bottom 3px / 12px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M11.5 0v7h-4v4.5H0' fill='none' stroke='%23e9a33a'/%3E%3C/svg%3E") right 3px bottom 3px / 12px no-repeat;
  --plq-fill: linear-gradient(180deg, #2a1e15, #150f0a);
  --gold-leaf: linear-gradient(180deg, #f8d585, #e0a540 48%, #a8691f);
  --jewel: url("../assets/img/arch/hud-jewel.webp");
  --stone-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .6 0 0 0 0 .4 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 var(--f-body);
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { width: 1em; height: 1em; }
::selection { background: var(--gold); color: #120d09; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--gold); color: #120d09; padding: 10px 16px; font-family: var(--f-cond); letter-spacing: .1em; text-transform: uppercase; transition: top .2s; }
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: clamp(96px, 14vw, 180px) 0; }
.gold { color: var(--gold); }

/* ----- Typography ----- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  margin: 0 0 22px;
  font: 600 13px/1 var(--f-cond); letter-spacing: .38em; text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before { content: ""; width: 44px; height: 12px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 12'%3E%3Cpath d='M13 6h31' stroke='%23e9a33a'/%3E%3Cpath d='M6 0Q6.8 5.2 12 6 6.8 6.8 6 12 5.2 6.8 0 6 5.2 5.2 6 0Z' fill='%23e9a33a'/%3E%3C/svg%3E") center / contain no-repeat; }
.h2 {
  margin: 0 0 28px;
  font: 700 clamp(32px, 4.6vw, 64px)/1.06 var(--f-display);
  letter-spacing: .02em; text-transform: uppercase;
  max-width: 16ch;
  text-wrap: balance;
}
.h2--wide { max-width: 22ch; }
.h2--xl { font-size: clamp(40px, 7vw, 104px); }
.lead { max-width: 58ch; color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); margin: 0 0 32px; }
.lead strong { color: var(--text); font-weight: 500; letter-spacing: .04em; }
h3 { font-family: var(--f-cond); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* Split text (built by JS) */
.split-w, .split-c { display: inline-block; }
.split-w { overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; vertical-align: top; }
.split-w > span, .split-c {
  display: inline-block;
  transform: translateY(105%) rotate(4deg);
  opacity: 0;
  transition: transform 1.1s var(--ease), opacity 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms + var(--d, 0s));
}
.split-c { transform: translateY(40%) scale(.9); filter: blur(8px); transition-property: transform, opacity, filter; transition-delay: calc(var(--i, 0) * 55ms + var(--d, 0s)); }
.is-in .split-w > span, .is-in.split-c, .is-in .split-c { transform: none; opacity: 1; filter: none; }

/* Generic reveal */
[data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
[data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(18% 8% 18% 8%); transition: clip-path 1.4s var(--ease-io) var(--d, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
/* Stone-gate reveal: opens from a lit crack at the centre, like temple doors.
   (Never fully closed: a zero-area clip stops IntersectionObserver firing.) */
[data-reveal="gate"] { opacity: 1; transform: none; clip-path: inset(0 47% 0 47%); transition: clip-path 1.6s var(--ease-io) var(--d, 0s); }
[data-reveal="gate"].is-in { clip-path: inset(0 0 0 0); }

/* ----- Buttons ----- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px; border: 1px solid var(--line-2);
  font: 600 14px/1 var(--f-cond); letter-spacing: .24em; text-transform: uppercase; text-decoration: none;
  background: transparent; overflow: hidden; isolation: isolate;
  transition: color .4s var(--ease), border-color .4s, box-shadow .4s;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}
.btn svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--gold-3), var(--gold-2), var(--gold)); transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.btn:hover, .btn:focus-visible { color: #140d07; }
.btn--gold { color: #140d07; border-color: transparent; }
.btn--gold::before { transform: scaleX(1); }
.btn--gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); transition: transform .9s var(--ease); }
.btn--gold:hover::after { transform: translateX(120%); }
.btn--ghost { color: var(--text); background: rgba(11,8,6,.35); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 4px rgba(11,8,6,.4), inset 0 0 0 5px rgba(233,163,58,.22); }
/* clip-path hides outlines, so focus is drawn inside the plaque */
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff4d6, inset 0 0 0 4px #140d07; }

/* ----- Badge ----- */
.badge {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px;
  padding: 9px 16px 9px 14px; border: 1px solid var(--line-2);
  background: rgba(20, 13, 8, .6); backdrop-filter: blur(6px);
  font: 600 12px/1 var(--f-cond); letter-spacing: .34em; text-transform: uppercase; color: var(--gold-2);
}
.badge__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 0 rgba(255,106,26,.7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(255,106,26,0); } 100% { box-shadow: 0 0 0 0 rgba(255,106,26,0); } }

/* ----- Cards & frames ----- */
.card {
  position: relative; background: linear-gradient(180deg, rgba(36,26,19,.82), rgba(20,14,10,.9));
  border: 1px solid var(--line);
  isolation: isolate;
}
.card::after, [data-glow]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(233,163,58,.16), transparent 60%);
}
[data-glow] { position: relative; isolation: isolate; }
[data-glow]:hover::after { opacity: 1; }
[data-glow]:hover { border-color: var(--line-2); }

.frame { position: relative; margin: 0; border: 1px solid var(--line); background: var(--stone); overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; }
.frame:hover img { transform: scale(1.04); }
figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 28px 18px 12px; background: linear-gradient(transparent, rgba(8,6,4,.88));
  font: 500 11px/1.4 var(--f-cond); letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
img[data-lightbox] { cursor: zoom-in; }

/* ----- Ornamental frame (injected by JS into [data-orn] and gallery tiles) -----
   Stepped temple-plinth corners joined by hairline edges, with the four-point cusp
   from the game's HUD frames at the top and bottom centre. Never takes clicks. */
.orn { --oc: var(--orn-size, 44px); position: absolute; inset: var(--orn-in, 8px); z-index: 3; pointer-events: none; color: var(--gold); transition: inset .6s var(--ease), color .4s, filter .4s;
  background:
    linear-gradient(rgba(233,163,58,.4), rgba(233,163,58,.4)) center top / calc(100% - 2 * var(--oc) + 4px) 1px no-repeat,
    linear-gradient(rgba(233,163,58,.4), rgba(233,163,58,.4)) center bottom / calc(100% - 2 * var(--oc) + 4px) 1px no-repeat,
    linear-gradient(rgba(233,163,58,.4), rgba(233,163,58,.4)) left center / 1px calc(100% - 2 * var(--oc) + 4px) no-repeat,
    linear-gradient(rgba(233,163,58,.4), rgba(233,163,58,.4)) right center / 1px calc(100% - 2 * var(--oc) + 4px) no-repeat; }
.orn__c { position: absolute; width: var(--oc); height: var(--oc); }
.orn__c--tl { left: -2px; top: -2px; }
.orn__c--tr { right: -2px; top: -2px; transform: scaleX(-1); }
.orn__c--bl { left: -2px; bottom: -2px; transform: scaleY(-1); }
.orn__c--br { right: -2px; bottom: -2px; transform: scale(-1); }
.orn__cusp { position: absolute; left: 50%; width: calc(var(--oc) * 1.3); height: calc(var(--oc) * .44); transform: translateX(-50%); }
.orn__cusp--t { top: calc(var(--oc) * -.22); }
.orn__cusp--b { bottom: calc(var(--oc) * -.22); }

/* ----- Lintel divider: dentil course + the HUD lotus jewel ----- */
.lintel { position: absolute; z-index: 2; top: clamp(18px, 2.6vw, 38px); left: 0; right: 0; margin: 0 auto; width: min(1100px, calc(100% - 2 * var(--gutter))); display: flex; align-items: center; gap: 12px; pointer-events: none; }
.lintel[data-reveal] { opacity: 1; transform: none; }
.lintel span { flex: 1; height: 9px; transform: scaleX(0); transition: transform 1.5s var(--ease-io) .1s;
  background: linear-gradient(var(--line-2), var(--line-2)) top / 100% 1px no-repeat, linear-gradient(var(--line), var(--line)) bottom / 100% 1px no-repeat, repeating-linear-gradient(90deg, rgba(233,163,58,.32) 0 4px, transparent 4px 10px) center / 100% 3px no-repeat; }
.lintel span:first-child { transform-origin: right; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.lintel span:last-child { transform-origin: left; -webkit-mask-image: linear-gradient(270deg, transparent, #000 45%); mask-image: linear-gradient(270deg, transparent, #000 45%); }
.lintel img { width: 32px; height: auto; flex: none; opacity: 0; transform: scale(.4) rotate(-90deg); transition: opacity .8s .3s, transform 1.1s var(--ease) .3s, filter 1.2s .6s; }
.lintel.is-in span { transform: none; }
.lintel.is-in img { opacity: 1; transform: none; filter: drop-shadow(0 0 10px rgba(255,150,50,.5)); }

/* ----- Drifting smoke (two soft layers, transform-only) ----- */
.smoke { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; overflow: hidden; pointer-events: none; }
.smoke i { position: absolute; bottom: -35%; width: 75%; height: 100%; border-radius: 50%; background: radial-gradient(closest-side, rgba(160,128,96,.09), transparent); animation: smoke 28s ease-in-out infinite alternate; will-change: transform; }
.smoke i:first-child { left: -15%; }
.smoke i:last-child { right: -15%; animation-duration: 34s; animation-direction: alternate-reverse; }
@keyframes smoke { to { transform: translate3d(16%, -10%, 0) scale(1.15); } }
.smoke--hero { z-index: 1; height: 38%; }
.embers--low { top: auto; bottom: 0; height: 80%; }

/* ----- Loader ----- */
.loader { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--bg); transition: opacity .9s var(--ease), visibility .9s; }
.loader__inner { text-align: center; }
.loader__mark { width: 76px; height: auto; margin: 0 auto; opacity: .85; animation: spin 16s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shine { to { background-position: -200% 0; } }
.loader__logo { width: min(420px, 78vw); height: auto; margin: 22px auto 22px; filter: drop-shadow(0 0 24px rgba(233,163,58,.25)); animation: logoGlow 2.4s ease-in-out infinite alternate; }
@keyframes logoGlow { from { filter: drop-shadow(0 0 8px rgba(233,163,58,.12)) brightness(.85); } to { filter: drop-shadow(0 0 28px rgba(255,106,26,.35)) brightness(1.08); } }
.loader__bar { width: 180px; height: 1px; margin: 0 auto; background: var(--line); overflow: hidden; }
.loader__bar span { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .3s; }
body:not(.is-loading) .loader { opacity: 0; visibility: hidden; }

/* ----- Grain overlay ----- */
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; background-image: var(--stone-tex); opacity: .07; animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } }

/* ----- Custom cursor (fine pointers only) ----- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none; mix-blend-mode: screen; }
  .cursor__dot, .cursor__ring { position: fixed; left: 0; top: 0; border-radius: 50%; transform: translate(var(--x, -100px), var(--y, -100px)) translate(-50%, -50%); }
  .cursor__dot { width: 6px; height: 6px; background: var(--gold-2); box-shadow: 0 0 12px var(--ember); }
  .cursor__ring { width: 38px; height: 38px; border: 1px solid rgba(246,199,102,.55); transform: translate(var(--rx, -100px), var(--ry, -100px)) translate(-50%, -50%) scale(var(--rs, 1)); transition: width .3s var(--ease), height .3s var(--ease), background .3s, border-color .3s; }
  .cursor.is-hover .cursor__ring { width: 64px; height: 64px; background: rgba(233,163,58,.08); border-color: var(--gold); }
  .cursor.is-view .cursor__ring::after { content: "VIEW"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 10px/1 var(--f-cond); letter-spacing: .25em; color: var(--gold-2); }
}

/* ----- Navigation ----- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--gutter);
  transition: background .5s, backdrop-filter .5s, transform .5s var(--ease), border-color .5s;
  border-bottom: 1px solid transparent;
}
.nav.is-solid { background: rgba(11,8,6,.78); backdrop-filter: blur(14px) saturate(1.2); border-color: var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; }
.nav__progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); transform-origin: left; transform: scaleX(var(--sp, 0)); }
.nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 700 15px/1 var(--f-cond); letter-spacing: .3em; }
.nav__brand img { width: 30px; height: auto; border-radius: 4px; }
.nav__brand em { font-style: normal; color: var(--gold); }
.nav__logo { margin-right: auto; padding-left: 20px; border-left: 1px solid var(--line); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .5s, transform .5s var(--ease); }
.nav__logo img { height: 24px; width: auto; }
.nav.is-past-hero .nav__logo { opacity: 1; transform: none; pointer-events: auto; }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); }
.nav__links a { position: relative; text-decoration: none; font: 500 13px/1 var(--f-cond); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); padding: 8px 0; transition: color .3s; }
.nav__links a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1px; background: var(--gold); transition: left .4s var(--ease), right .4s var(--ease); }
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after, .nav__links a:focus-visible::after { left: 0; right: 0; }
/* Active section: the game's lotus jewel lights beneath the link */
.nav__links a:not(.nav__cta)::before { content: ""; position: absolute; left: 50%; bottom: -15px; width: 17px; height: 15px; background: var(--jewel) center / contain no-repeat; transform: translateX(-50%) scale(0) rotate(-45deg); opacity: 0; transition: transform .6s var(--ease), opacity .4s; filter: drop-shadow(0 0 6px rgba(255,150,50,.65)); }
.nav__links a.is-active { color: var(--gold-2); text-shadow: 0 0 16px rgba(233,163,58,.45); }
.nav__links a.is-active::before { transform: translateX(-50%) scale(1); opacity: 1; }
/* Dentil course under the solid bar */
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 4px; pointer-events: none; opacity: 0; transition: opacity .5s; background: repeating-linear-gradient(90deg, rgba(233,163,58,.2) 0 5px, transparent 5px 11px); }
.nav.is-solid::after { opacity: 1; }
.nav__links .nav__cta { padding: 12px 20px; border: 1px solid var(--line-2); color: var(--gold-2); background: var(--plq), var(--plq-fill); transition: color .3s, background .3s; }
.nav__links .nav__cta::after { display: none; }
.nav__links .nav__cta:hover, .nav__links .nav__cta:focus-visible { background: var(--gold-leaf); color: #140d07; }
.nav__toggle { display: none; flex: none; width: 44px; height: 44px; border: 1px solid var(--line-2); background: rgba(11,8,6,.5); position: relative; }
.nav__toggle span { position: absolute; left: 12px; right: 12px; height: 1px; background: var(--gold-2); transition: transform .4s var(--ease), top .4s var(--ease); }
.nav__toggle span:first-child { top: 17px; } .nav__toggle span:last-child { top: 25px; }
.nav__toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 20px) var(--gutter) 32px;
  background: radial-gradient(120% 80% at 50% 0%, #2a1c10, var(--bg) 70%);
  clip-path: circle(0 at calc(100% - 38px) 36px); visibility: hidden;
  transition: clip-path .8s var(--ease-io), visibility .8s;
}
.menu.is-open { clip-path: circle(150% at calc(100% - 38px) 36px); visibility: visible; }
.menu nav { display: grid; gap: 6px; }
.menu a { display: flex; align-items: baseline; gap: 18px; text-decoration: none; font: 700 clamp(30px, 9vw, 52px)/1.2 var(--f-display); text-transform: uppercase; opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .5s var(--ease), color .3s; }
.menu a small { font: 500 12px/1 var(--f-cond); letter-spacing: .2em; color: var(--gold); }
.menu a:hover, .menu a.is-active { color: var(--gold-2); }
.menu a.is-active small { text-shadow: 0 0 10px rgba(255,150,50,.8); }
.menu.is-open a { opacity: 1; transform: none; }
.menu.is-open a:nth-child(1) { transition-delay: .2s; } .menu.is-open a:nth-child(2) { transition-delay: .25s; } .menu.is-open a:nth-child(3) { transition-delay: .3s; } .menu.is-open a:nth-child(4) { transition-delay: .35s; } .menu.is-open a:nth-child(5) { transition-delay: .4s; } .menu.is-open a:nth-child(6) { transition-delay: .45s; } .menu.is-open a:nth-child(7) { transition-delay: .5s; }
.menu__foot img { width: 200px; height: auto; margin-bottom: 12px; }
.menu__foot { margin-top: auto; font: 500 12px/1 var(--f-cond); letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }

/* ----- Hero ----- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: #0e0a07; }
.hero__media { position: absolute; inset: 0; will-change: transform; }
/* Art keeps its native 3.25:1 ratio so the carved logo is never cropped; it fills
   at least 62% of the viewport height and blends into the stone below. */
.hero__media picture { position: absolute; left: 50%; top: -6vh; width: max(100%, 62vh * 3.25); display: block; transform: translateX(-50%) translate3d(var(--hx, 0), var(--hy, 0), 0); transition: transform .9s var(--ease); }
.hero__media picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,8,6,.6) 0%, transparent 16%, transparent 80%, #0e0a07 99%), linear-gradient(90deg, #0e0a07, transparent 12%, transparent 88%, #0e0a07); }
.hero__art { width: 100%; height: auto; animation: heroIn 2.6s var(--ease) both; animation-play-state: paused; }
body:not(.is-loading) .hero__art { animation-play-state: running; }
@keyframes heroIn { from { opacity: 0; transform: scale(1.1); filter: brightness(.3) blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.hero__fog { position: absolute; inset: 30% -20% 0; background: radial-gradient(40% 30% at 30% 40%, rgba(233,163,58,.10), transparent), radial-gradient(35% 25% at 70% 50%, rgba(255,106,26,.08), transparent); animation: fog 14s ease-in-out infinite alternate; }
@keyframes fog { to { transform: translateX(6%) translateY(-2%); } }
.embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.hero__content { position: relative; z-index: 2; padding: 0 var(--gutter) clamp(90px, 13vh, 140px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__title { margin: 0; }
.hero__subtitle { display: block; font: 700 clamp(26px, 4.4vw, 64px)/1.05 var(--f-display); letter-spacing: .14em; text-transform: uppercase; background: linear-gradient(180deg, #ffe2a3 0%, var(--gold) 55%, #9a5f1a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 24px rgba(233,163,58,.25)); }
.hero__subtitle .split-c { background: inherit; -webkit-background-clip: text; background-clip: text; }
.hero__lede { margin: 22px 0 36px; max-width: 80ch; font: 500 clamp(12px, 1.1vw, 15px)/1.8 var(--f-cond); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.hero__lede i { color: var(--gold); font-style: normal; padding: 0 .4em; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.hero__scroll { position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; text-decoration: none; font: 500 10px/1 var(--f-cond); letter-spacing: .4em; text-transform: uppercase; color: var(--dim); }
.hero__scroll i { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); animation: drip 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ----- Game overview ----- */
.game { background: var(--bg); }
.game__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.pillars { display: grid; gap: 14px; }
.pillar { padding: 22px 24px 22px 80px; background: var(--plq), var(--stone-soft), linear-gradient(180deg, rgba(42,30,21,.85), rgba(20,14,10,.92)); box-shadow: inset 0 1px 0 rgba(255,214,150,.06), 0 10px 24px rgba(0,0,0,.3); transition: transform .5s var(--ease), border-color .4s; }
.pillar:hover { transform: translateX(8px); }
.pillar__num { position: absolute; left: 22px; top: 22px; width: 38px; height: 38px; display: grid; place-items: center; font: 700 15px/1 var(--f-display); color: var(--gold-2); }
.pillar__num::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line-2); transform: rotate(45deg); background: rgba(11,8,6,.5); z-index: -1; transition: background .4s, border-color .4s; }
.pillar:hover .pillar__num::before { border-color: var(--gold); background: rgba(233,163,58,.12); }
.pillar__num::after { content: ""; position: absolute; top: 46px; left: 50%; width: 1px; height: 22px; background: linear-gradient(var(--line-2), transparent); }
.pillar h3 { margin: 0 0 6px; font-size: 17px; color: var(--gold-2); }
.pillar p { margin: 0; color: var(--muted); }
.game__media { aspect-ratio: 4 / 5; }
.game__media .frame__img { position: absolute; inset: -8% 0; }
.game__media img { object-position: 60% 50%; }
.game__media { --orn-in: 12px; }
.game__media figcaption { padding: 28px 30px 24px; }

/* ----- Enemy roles (bestiary) ----- */
.foes { --fc: 255, 106, 26; overflow: hidden; background: linear-gradient(var(--bg), #0d0907 40%, var(--bg)); }
.foes[data-tier="magic"][data-cls="archer"] { --fc: 138, 77, 255; }
.foes[data-tier="magic"][data-cls="brute"] { --fc: 242, 178, 58; }
.foes[data-tier="magic"][data-cls="guard"] { --fc: 255, 59, 42; }
.foes[data-cls="tantrik"] { --fc: 120, 190, 150; }
.foes__aura { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 70% 55%, rgba(var(--fc), .2), transparent 70%); transition: background .8s; animation: flicker 7s infinite; }
.foes .wrap { position: relative; z-index: 1; }
.foes .embers--low { z-index: 0; }
.foes__head .h2 { margin-bottom: 18px; }
.foes__head .lead { margin-bottom: 8px; }
.foes__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.foes__controls { display: grid; gap: 20px; align-content: center; }
/* Enemy selectors: carved stone plaques with a lintel moulding; the chosen one gains a gold rim and the HUD jewel */
.foes__classes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 12px; }
.foes__classes button { position: relative; display: grid; justify-items: center; gap: 10px; padding: 16px 6px 13px; border: 1px solid rgba(233,163,58,.24); background: var(--plq), var(--stone-soft), var(--plq-fill); box-shadow: inset 0 1px 0 rgba(255,214,150,.07), inset 0 -14px 22px rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.35); transition: border-color .4s, box-shadow .5s, transform .5s var(--ease); }
.foes__classes button::before { content: ""; position: absolute; left: 16px; right: 16px; top: 5px; height: 3px; border-top: 1px solid rgba(233,163,58,.3); border-bottom: 1px solid rgba(233,163,58,.14); transition: border-color .4s; }
.foes__classes button::after { content: ""; position: absolute; left: 50%; top: -13px; width: 28px; height: 25px; background: var(--jewel) center / contain no-repeat; opacity: 0; transform: translateX(-50%) scale(.3) rotate(-90deg); transition: opacity .4s, transform .7s var(--ease); filter: drop-shadow(0 0 8px rgba(var(--fc), .9)); }
.foes__classes img { position: relative; width: 70%; aspect-ratio: 1; object-fit: contain; filter: grayscale(.7) brightness(.55) drop-shadow(0 4px 6px rgba(0,0,0,.6)); transition: filter .5s, transform .6s var(--ease); }
.foes__classes span { position: relative; font: 600 12px/1 var(--f-cond); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); text-shadow: 0 1px 0 rgba(0,0,0,.9), 0 -1px 0 rgba(255,220,160,.06); }
.foes__classes button:hover { border-color: rgba(233,163,58,.5); transform: translateY(-2px); }
.foes__classes button:hover img { filter: grayscale(.2) brightness(.9) drop-shadow(0 4px 6px rgba(0,0,0,.6)); transform: scale(1.06); }
.foes__classes button:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.foes__classes button[aria-selected="true"] { border-color: rgba(246,199,102,.8); background: var(--plq), radial-gradient(90% 70% at 50% 100%, rgba(var(--fc), .24), transparent 70%), var(--stone-soft), var(--plq-fill); box-shadow: inset 0 0 0 3px rgba(11,8,6,.6), inset 0 0 0 4px rgba(233,163,58,.35), 0 0 26px rgba(var(--fc), .18), 0 10px 22px rgba(0,0,0,.4); }
.foes__classes button[aria-selected="true"]::before { border-color: rgba(246,199,102,.6); }
.foes__classes button[aria-selected="true"]::after { opacity: 1; transform: translateX(-50%) scale(1); }
.foes__classes button[aria-selected="true"] img { filter: drop-shadow(0 4px 8px rgba(0,0,0,.7)); transform: scale(1.08); }
.foes__classes button[aria-selected="true"] span { color: var(--gold-2); }
/* Level / variant: an engraved bronze bar; the chosen state is struck in gold leaf */
.foes__tiers, .foes__variant { display: flex; gap: 4px; padding: 3px; border: 1px solid rgba(233,163,58,.3); background: var(--stone-soft), linear-gradient(180deg, #2c2016, #1a120c 55%, #110b07); box-shadow: inset 0 1px 0 rgba(255,214,150,.1), inset 0 -1px 0 rgba(0,0,0,.6), 0 8px 18px rgba(0,0,0,.3); }
.foes__tiers button, .foes__variant button { position: relative; flex: 1; min-height: 44px; padding: 13px 6px; border: 0; background: transparent; font: 600 12px/1 var(--f-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); text-shadow: 0 1px 0 rgba(0,0,0,.8); transition: background .4s, color .3s, box-shadow .4s; }
.foes__tiers button + button::before, .foes__variant button + button::before { content: ""; position: absolute; left: -4px; top: 50%; width: 4px; height: 4px; margin-top: -2px; transform: rotate(45deg); background: var(--gold-3); opacity: .55; }
.foes__tiers button:hover, .foes__variant button:hover { color: var(--text); background: rgba(233,163,58,.06); }
.foes__tiers button:focus-visible, .foes__variant button:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 1px; z-index: 1; }
.foes__tiers button[aria-pressed="true"], .foes__variant button[aria-pressed="true"] { background: var(--gold-leaf); color: #1a0f06; text-shadow: 0 1px 0 rgba(255,236,190,.45); box-shadow: inset 0 0 0 1px rgba(255,240,200,.35), inset 0 -3px 6px rgba(90,50,10,.45); }
.foes__tiers button[data-tier="magic"][aria-pressed="true"] { background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 60%), rgb(var(--fc)); color: #0b0806; }
.foes__tiers button:disabled { opacity: .3; cursor: not-allowed; }
.foes__variant { max-width: 240px; }
.foes__variant[hidden] { display: none; }
.foes__readout { margin: 0; font: 700 clamp(30px, 3.4vw, 48px)/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.foes__readout b { display: inline-block; background: linear-gradient(180deg, #fff1cf, var(--gold-2) 60%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* A new name is "inscribed" left to right */
.foes__readout.is-new b { animation: inscribe .8s var(--ease) both; }
.foes__readout.is-new span { animation: rise .7s var(--ease) .15s both; }
@keyframes inscribe { from { clip-path: inset(0 100% 0 0); filter: blur(4px); } to { clip-path: inset(0 0 0 0); filter: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.foes__readout span { display: block; margin-top: 10px; font: 600 13px/1 var(--f-cond); letter-spacing: .34em; color: rgb(var(--fc)); }
.foes__figure { position: relative; margin: 0; height: min(80vh, 760px); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.foes__figure::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 12%; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--fc), .35), transparent 70%); filter: blur(10px); transition: background .8s; }
/* The enemy stands inside a carved temple portal (from the game's architecture set) */
.foes__portal { position: absolute; left: 50%; bottom: 0; height: 98%; width: auto; max-width: none; transform: translateX(-50%); opacity: .5; filter: brightness(.62) sepia(.2); pointer-events: none;
  -webkit-mask-image: radial-gradient(30% 62% at 50% 58%, #000 52%, transparent 100%); mask-image: radial-gradient(30% 62% at 50% 58%, #000 52%, transparent 100%); }
.foes__door { position: absolute; left: 50%; bottom: 0; height: 72%; aspect-ratio: .58; transform: translateX(-50%); pointer-events: none; background: radial-gradient(60% 55% at 50% 75%, rgba(var(--fc), .3), transparent 75%); transition: background .8s; animation: flicker 6s infinite; }
.foes__figure.is-swap .foes__door { animation: doorFlare .9s var(--ease); }
@keyframes doorFlare { 0% { filter: brightness(1); } 35% { filter: brightness(2.4); } 100% { filter: brightness(1); } }
.foes__mask { position: absolute; top: 4%; left: 50%; width: 62%; transform: translateX(-50%); opacity: .06; filter: grayscale(1) blur(1px); pointer-events: none; transition: opacity .6s; }
.foes__img { position: relative; height: 100%; max-height: 100%; width: auto; max-width: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0,0,0,.7)); transition: opacity .35s, transform .6s var(--ease), filter .6s; cursor: zoom-in; }
.foes__img:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; }
/* Out through smoke and light, in again */
.foes__img.is-out { opacity: 0; transform: translateY(18px) scale(.96); filter: blur(8px) brightness(1.8); }
.foes__figure figcaption { background: none; text-align: right; padding: 0 0 4px; pointer-events: none; }

@media (max-width: 900px) {
  .foes__stage { grid-template-columns: 1fr; gap: 20px; }
  .foes__controls { display: contents; }
  .foes__head { order: -2; }
  .foes__figure { height: 52vh; max-height: 460px; order: -1; }
}
@media (max-width: 560px) {
  .foes__classes span { letter-spacing: .1em; font-size: 11px; }
  .foes__tiers button { letter-spacing: .08em; font-size: 11px; }
}

/* ----- World ----- */
.world { background: var(--bg); overflow-x: clip; } /* ruin may rise into the bestiary, never sideways */
.world .wrap { position: relative; z-index: 1; }
/* Foreground ruin straddling the bestiary/world threshold; moves faster than the page */
.world__ruin { position: absolute; left: 50%; top: 0; width: min(1000px, 100%); max-width: none; height: auto; transform: translate(-50%, -16%); opacity: .34; filter: brightness(.5) sepia(.3); pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 42%, transparent 88%); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 42%, transparent 88%); }
.world__head { display: grid; grid-template-columns: 1fr minmax(0, 46ch); gap: 24px 64px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.world__head .h2, .world__head .lead { margin-bottom: 0; }

/* Showcase: 5 curated images, featured tile first */
.showcase { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 220px); gap: clamp(8px, 1vw, 14px); }
.sc { --orn-size: 34px; --orn-in: 7px; position: relative; grid-column: span 4; overflow: hidden; padding: 0; border: 1px solid var(--line); background: #000; cursor: zoom-in; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .6s var(--ease), box-shadow .6s, border-color .4s; }
.sc:hover, .sc:focus-visible { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 24px 48px rgba(0,0,0,.6), 0 0 34px rgba(233,120,40,.12); z-index: 2; }
.sc:hover .orn, .sc:focus-visible .orn { --orn-in: 12px; color: var(--gold-2); filter: drop-shadow(0 0 6px rgba(255,150,50,.5)); }
.sc--feature { grid-column: span 8; grid-row: span 2; }
.sc:nth-child(4) { grid-column: span 5; }
.sc--wide { grid-column: span 7; }
.sc img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8) saturate(.9); transition: transform 1.2s var(--ease), filter .6s; }
.sc:hover img, .sc:focus-visible img { transform: scale(1.05); filter: none; }
.sc__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; padding: 40px 24px 24px; text-align: left; background: linear-gradient(transparent, rgba(0,0,0,.88)); }
.sc__cap b { display: block; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(8px); transition: max-height .5s var(--ease), opacity .4s, transform .5s var(--ease), margin .5s var(--ease); font: 600 13px/1.3 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.sc__cap small { font: 500 10px/1 var(--f-cond); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.sc:hover .sc__cap b, .sc:focus-visible .sc__cap b { max-height: 3em; opacity: 1; transform: none; margin-bottom: 6px; }
/* ----- About Sicra Digital + contact ----- */
.studio { overflow: hidden; background: linear-gradient(var(--bg), var(--bg-2)); }
.studio__bg { position: absolute; inset: 0; background: url("../assets/img/titlescreen-blur.webp") center / cover; opacity: .28; }
.studio__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg), rgba(18,13,9,.55) 40%, var(--bg-2)); }
.studio__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.studio__brand { display: flex; gap: 20px; align-items: center; margin: 8px 0 28px; }
.studio__brand img { width: 64px; height: auto; flex: none; border-radius: 8px; }
.studio__brand p { margin: 0; color: var(--muted); max-width: 46ch; }
.founder { padding-top: 24px; border-top: 1px solid var(--line); }
.founder__role { margin: 0; font: 600 11px/1 var(--f-cond); letter-spacing: .34em; text-transform: uppercase; color: var(--gold); }
.founder h3 { margin: 8px 0 6px; font: 700 22px/1.1 var(--f-display); letter-spacing: .04em; text-transform: none; }
.founder p:last-child { margin: 0; color: var(--muted); font-size: 15px; }
.contact { --orn-size: 50px; --orn-in: 9px; padding: clamp(34px, 3.8vw, 54px); background: var(--stone-soft), linear-gradient(180deg, rgba(36,26,19,.88), rgba(16,11,8,.94)); }
.studio__lantern { position: absolute; top: 0; right: clamp(16px, 5vw, 80px); width: clamp(110px, 10vw, 150px); pointer-events: none; }
.studio__lantern img { width: 100%; height: auto; filter: brightness(.8) sepia(.15); }
.studio__lantern i { position: absolute; left: -2%; top: 34%; width: 66%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,184,90,.55), rgba(255,106,26,.16) 55%, transparent); mix-blend-mode: screen; animation: flicker 4.6s infinite; }
.studio__lantern::before { content: ""; position: absolute; left: -160%; top: -30%; width: 420%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(233,140,50,.1), transparent); animation: flicker 6.2s infinite reverse; }
@keyframes flicker { 0%, 100% { opacity: .86; } 11% { opacity: .7; } 19% { opacity: .95; } 33% { opacity: .78; } 48% { opacity: 1; } 61% { opacity: .8; } 77% { opacity: .93; } }
.contact__title { margin: 0 0 12px; font: 700 clamp(36px, 4.6vw, 64px)/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.contact__lede { margin: 0 0 20px; color: var(--muted); }
.email { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.email__link { display: inline-flex; align-items: center; gap: 12px; min-width: 0; font: 500 clamp(16px, 1.6vw, 22px)/1.2 var(--f-cond); letter-spacing: .04em; text-decoration: none; padding: 12px 0; background: linear-gradient(var(--gold), var(--gold)) left bottom / 0 1px no-repeat; transition: background-size .5s var(--ease), color .3s; overflow-wrap: anywhere; }
.email__link svg { width: 22px; height: 22px; color: var(--gold); flex: none; }
.email__link:hover { background-size: 100% 1px; color: var(--gold-2); }
.email__copy { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px; border: 1px solid var(--line); background: var(--plq-fill); font: 600 11px/1 var(--f-cond); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); transition: border-color .3s, color .3s; }
.email__copy:hover { border-color: var(--gold); color: var(--gold-2); }
.email__copy svg { width: 14px; height: 14px; }

/* ----- Footer ----- */
.footer { position: relative; padding: 56px 0 40px; background: var(--bg); text-align: center; }
.footer__relief { width: min(560px, 86%); margin: 0 auto 26px; opacity: .55; -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent); mask-image: radial-gradient(closest-side, #000 62%, transparent); }
.footer__relief img { width: 100%; height: auto; filter: brightness(.7) sepia(.2); }
.footer__inner { display: grid; gap: 10px; justify-items: center; }
.footer p { margin: 0; color: var(--dim); font-size: 14px; }
.footer__brand { font: 700 20px/1 var(--f-display) !important; letter-spacing: .3em; color: var(--gold-2) !important; }
.footer__brand img { width: min(340px, 80vw); height: auto; margin: 0 auto; transition: filter .5s; }
.footer__brand img:hover { filter: drop-shadow(0 0 18px rgba(255,106,26,.4)) brightness(1.1); }
.footer__brand span { display: block; margin-top: 14px; font: 500 11px/1 var(--f-cond); letter-spacing: .4em; text-transform: uppercase; color: var(--muted); }
.footer__top { margin-top: 12px; font: 600 12px/1 var(--f-cond); letter-spacing: .3em; text-transform: uppercase; text-decoration: none; color: var(--gold); }

/* ----- Lightbox ----- */
.lightbox { position: fixed; inset: 0; z-index: 260; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 60px clamp(8px, 3vw, 40px) 30px; background: rgba(5,4,3,.94); backdrop-filter: blur(10px); opacity: 0; transition: opacity .4s; }
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 34px; min-width: 0; height: 100%; align-content: center; }
.lightbox__frame { --orn-size: 46px; --orn-in: -12px; position: relative; min-width: 0; max-width: 100%; line-height: 0; }
.lightbox__frame .orn { opacity: 0; transition: opacity .6s .2s, inset .6s var(--ease); }
.lightbox.is-open .lightbox__frame .orn { opacity: 1; }
.lightbox img { max-height: calc(100svh - 190px); max-width: 100%; width: auto; object-fit: contain; border: 0; box-shadow: 0 30px 80px rgba(0,0,0,.7); transform: scale(.97); opacity: 0; transition: transform .5s var(--ease), opacity .4s; touch-action: pan-y; }
.lightbox img.is-ready { transform: none; opacity: 1; }
.lightbox figcaption { position: static; background: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; text-align: center; }
.lightbox__cap { color: var(--text); }
.lightbox__src { color: var(--gold); }
.lightbox__count { color: var(--dim); }
.lightbox__close { position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; border: 1px solid var(--line-2); background: var(--plq), var(--plq-fill); display: grid; place-items: center; }
.lightbox__close svg { width: 20px; height: 20px; }
.lightbox__nav { width: 52px; height: 52px; border: 1px solid var(--line-2); background: var(--plq), var(--plq-fill); display: grid; place-items: center; transition: background .3s, color .3s; }
.lightbox__nav:hover, .lightbox__close:hover { background: var(--gold-leaf); color: #140d07; }
.lightbox__nav svg { width: 22px; height: 22px; }
.lightbox__prev svg { transform: rotate(180deg); }

/* ----- Toast ----- */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 280; transform: translate(-50%, 30px); opacity: 0; padding: 12px 20px; background: var(--gold); color: #140d07; font: 600 13px/1 var(--f-cond); letter-spacing: .2em; text-transform: uppercase; pointer-events: none; transition: opacity .3s, transform .4s var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
}

@media (max-width: 900px) {
  body { font-size: 16px; }
  .hero__media picture { width: 190vw; top: calc(var(--nav-h) - 8px); }
  .hero__media picture::after { background: linear-gradient(180deg, transparent 70%, #0e0a07 99%); }
  .hero { justify-content: center; padding-top: calc(var(--nav-h) + 52vw); }
  .hero__content { padding-bottom: 110px; }
  .game__grid, .studio__grid, .world__head { grid-template-columns: 1fr; }
  .game__media { aspect-ratio: 4 / 3; order: -1; }
  .showcase { grid-template-columns: 1fr 1fr; grid-auto-rows: 38vw; }
  .sc, .sc:nth-child(4) { grid-column: span 1; }
  .sc--wide { grid-column: span 1; }
  .sc--feature { grid-column: 1 / -1; }
  .sc--feature { grid-row: span 1; }
  .sc__cap { padding: 30px 14px 16px; }
  .sc { --orn-size: 24px; --orn-in: 5px; }
  .studio__lantern { display: none; }
  .world__ruin { transform: translate(-50%, -10%); }
  .sc__cap b { max-height: none; opacity: 1; transform: none; margin-bottom: 4px; font-size: 11px; letter-spacing: .1em; }
}

@media (max-width: 560px) {
  .h2 { font-size: clamp(28px, 8.4vw, 40px); }
  .hero__ctas { flex-direction: column; width: 100%; max-width: 320px; }
  .hero__ctas .btn { justify-content: center; }
  .hero__lede { letter-spacing: .2em; }
  .sc__cap b { display: none; }
  .lightbox { grid-template-columns: 1fr; padding-bottom: 90px; }
  .lightbox__frame { --orn-size: 30px; --orn-in: -6px; }
  .lightbox__nav { position: absolute; bottom: 22px; }
  .lightbox__prev { left: calc(50% - 64px); } .lightbox__next { right: calc(50% - 64px); }
}

/* Reduced motion: keep everything visible and still */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal], [data-reveal="clip"], .split-w > span, .split-c { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
  .grain, .embers, .smoke { display: none; }
}