@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700&family=Inter:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;
  --black: #08090b;
  --carbon: #0d1014;
  --steel: #171b20;
  --white: #f3f0e8;
  --muted: #969ca4;
  --ember: #ff3e2f;
  --ember-hot: #ff725c;
  --cyan: #73f2ff;
  --line: rgba(255,255,255,.14);
  --shell: min(1420px, calc(100vw - 96px));
}

* { box-sizing: border-box; }
html { background: var(--black); scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--black); color: var(--white); font-family: Inter, sans-serif; cursor: none; }
a, button { color: inherit; }
a { cursor: none; }

::selection { background: var(--ember); color: var(--black); }
.section-shell { width: var(--shell); margin-inline: auto; }

.grain {
  position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation: grain .22s steps(2) infinite;
}

.cursor { position: fixed; z-index: 200; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); transition: width .2s,height .2s,border-color .2s,background .2s; mix-blend-mode: difference; }
.cursor i { position:absolute; width:4px; height:4px; border-radius:50%; background:#fff; left:50%; top:50%; transform:translate(-50%,-50%); }
.cursor.is-hover { width: 70px; height: 70px; border-color: #fff; background: rgba(255,255,255,.12); }
.scroll-progress { position: fixed; z-index: 150; top:0; left:0; width:100%; height:3px; background:var(--ember); transform:scaleX(0); transform-origin:left; }

.boot { position:fixed; inset:0; z-index:300; display:grid; place-content:center; gap:22px; background:#050608; transition:clip-path .9s cubic-bezier(.77,0,.18,1); clip-path:inset(0); }
.boot__word { display:flex; gap:9px; font:900 clamp(2rem,7vw,5.5rem)/1 "Barlow Condensed",sans-serif; letter-spacing:-.045em; }
.boot__word strong { color:var(--ember); }
.boot__track { width:min(410px,70vw); height:2px; background:#292d33; overflow:hidden; }
.boot__track i { display:block; width:100%; height:100%; background:var(--ember); transform:translateX(-100%); animation:loadbar 1.25s cubic-bezier(.76,0,.24,1) forwards; }
.boot small { color:#676d74; font:600 .68rem/1 Inter,sans-serif; letter-spacing:.3em; }
.is-ready .boot { clip-path:inset(0 0 100% 0); pointer-events:none; }
.is-loading body { overflow:hidden; }

.topbar { position:fixed; z-index:90; top:0; left:0; width:100%; height:92px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 48px; border-bottom:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg,rgba(5,6,8,.84),transparent); transition:height .3s,background .3s; }
.topbar.is-scrolled { height:70px; background:rgba(8,9,11,.86); backdrop-filter:blur(18px); }
.wordmark { display:inline-flex; align-items:center; gap:12px; width:max-content; text-decoration:none; }
.wordmark__sigil { display:grid; place-items:center; width:38px; aspect-ratio:1; border:1px solid var(--ember); color:var(--ember); font:800 .78rem/1 Inter,sans-serif; clip-path:polygon(14% 0,100% 0,100% 86%,86% 100%,0 100%,0 14%); }
.wordmark__name { font:800 1rem/1 "Barlow Condensed",sans-serif; letter-spacing:.12em; }
.wordmark__name b { color:var(--ember); }
.topbar__status { display:flex; align-items:center; gap:9px; color:#aeb4bc; font:600 .65rem/1 Inter,sans-serif; letter-spacing:.18em; }
.topbar__status i,.game-feature__state i { display:block; width:7px; height:7px; border-radius:50%; background:var(--ember); box-shadow:0 0 0 0 rgba(255,62,47,.6); animation:pulse 2s infinite; }
nav { justify-self:end; display:flex; gap:42px; }
nav a { position:relative; color:#d0d2d5; text-decoration:none; text-transform:uppercase; font:600 .72rem/1 Inter,sans-serif; letter-spacing:.13em; }
nav a span { margin-right:7px; color:var(--ember); font-size:.6rem; }
nav a::after { content:""; position:absolute; left:0; bottom:-8px; width:100%; height:1px; background:var(--ember); transform:scaleX(0); transform-origin:right; transition:transform .35s; }
nav a:hover::after { transform:scaleX(1); transform-origin:left; }

.hero { position:relative; height:max(760px,100svh); min-height:720px; overflow:hidden; background:#080a0d; }
.hero__media { position:absolute; inset:-5%; background:url("assets/fragua-forge-hero-v2.png") center/cover no-repeat; transform:scale(1.04); will-change:transform; }
.hero__shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,6,8,.96) 0%,rgba(5,6,8,.75) 35%,rgba(5,6,8,.12) 72%),linear-gradient(0deg,#08090b 0%,transparent 23%,rgba(0,0,0,.2) 100%); }
.hero__grid { position:absolute; inset:0; opacity:.12; background:linear-gradient(90deg,transparent calc(25% - 1px),#fff 25%,transparent calc(25% + 1px),transparent calc(50% - 1px),#fff 50%,transparent calc(50% + 1px),transparent calc(75% - 1px),#fff 75%,transparent calc(75% + 1px)); }
.hero__flare { position:absolute; width:38vw; aspect-ratio:1; right:2vw; top:16vh; border-radius:50%; background:rgba(255,35,24,.18); filter:blur(100px); animation:breathe 5s ease-in-out infinite; }
.hero__content { position:relative; z-index:2; width:var(--shell); height:100%; margin:auto; padding-top:clamp(150px,19vh,220px); }
.signal-label { margin:0; color:var(--ember); font:700 .7rem/1 Inter,sans-serif; letter-spacing:.22em; }
.signal-label span { color:#8a8f96; margin-left:16px; }
.hero__title { width:min(960px,75vw); margin:26px 0 38px; font-family:"Barlow Condensed",sans-serif; font-weight:900; font-size:clamp(5rem,10.4vw,11rem); line-height:.72; letter-spacing:-.052em; text-transform:uppercase; }
.title-line { display:block; transform:translateY(120%); opacity:0; animation:titleIn .85s cubic-bezier(.16,1,.3,1) forwards; }
.is-ready .title-line:nth-child(1){animation-delay:.18s}.is-ready .title-line:nth-child(2){animation-delay:.28s}.is-ready .title-line:nth-child(3){animation-delay:.38s}.is-ready .title-line:nth-child(4){animation-delay:.48s}
.title-line--thin { color:#b6bbc1; font-size:.38em; line-height:1.4; letter-spacing:.08em; }
.title-line--thin i { color:var(--ember); font-style:normal; }
.title-line--outline { color:transparent; -webkit-text-stroke:1.5px rgba(243,240,232,.72); font-size:.65em; line-height:1.04; letter-spacing:.015em; }
.title-line--end { font-size:.58em; line-height:1.05; margin-left:34%; color:#d9d8d3; letter-spacing:.02em; }
.title-dot { color:var(--ember); }
.hero__bottom { display:flex; align-items:center; gap:44px; margin-left:34%; }
.hero__bottom p { width:320px; margin:0; color:#afb4ba; font-size:.92rem; line-height:1.7; }
.cta { display:flex; align-items:center; justify-content:space-between; width:230px; min-height:58px; padding:0 20px; background:var(--ember); color:#100908; text-decoration:none; text-transform:uppercase; font:800 .73rem/1 Inter,sans-serif; letter-spacing:.1em; transition:background .25s; }
.cta:hover { background:var(--ember-hot); }
.cta i { font:400 1.2rem/1 sans-serif; }
.hero__index { position:absolute; z-index:2; right:48px; top:45%; display:grid; justify-items:end; color:rgba(255,255,255,.4); font-family:"Barlow Condensed",sans-serif; }
.hero__index span { font-size:.8rem; letter-spacing:.2em; }.hero__index b { color:rgba(255,255,255,.82); font-size:4rem; line-height:.85; }.hero__index small { margin-top:9px; color:var(--cyan); font:600 .6rem Inter,sans-serif; letter-spacing:.2em; }
.hero__scroll { position:absolute; z-index:2; bottom:32px; left:48px; display:flex; align-items:center; gap:13px; color:#a6abb1; font-size:.65rem; letter-spacing:.16em; text-decoration:none; text-transform:uppercase; }
.hero__scroll span { position:relative; display:block; width:42px; height:1px; background:#73777d; overflow:hidden; }.hero__scroll span::after { content:""; position:absolute; inset:0; background:var(--ember); animation:scrollLine 1.8s ease-in-out infinite; }

.ticker { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--ember); color:#0a0807; transform:rotate(-1.3deg) scale(1.02); }
.ticker__track { display:flex; align-items:center; width:max-content; height:66px; animation:ticker 26s linear infinite; font:900 1.6rem/1 "Barlow Condensed",sans-serif; letter-spacing:.06em; }
.ticker__track span { white-space:nowrap; padding:0 34px; }.ticker__track i { font-size:.75rem; }

.catalog { padding:160px 0 150px; }
.section-head { display:grid; grid-template-columns:.45fr 1.55fr .65fr; gap:30px; align-items:end; margin-bottom:64px; }
.section-number { display:block; margin-bottom:28px; color:#4d5259; font:500 3.4rem/1 "Barlow Condensed",sans-serif; }
.section-head h2 { margin:0; font:800 clamp(3.7rem,7vw,7rem)/.83 "Barlow Condensed",sans-serif; letter-spacing:-.045em; }
.section-head h2 em { color:var(--ember); font-style:normal; }
.section-head > p { margin:0; padding-left:25px; border-left:1px solid var(--line); color:#92989f; font-size:.84rem; line-height:1.7; }

.game-feature { display:grid; grid-template-columns:1.2fr .8fr; min-height:650px; border:1px solid var(--line); background:var(--carbon); overflow:hidden; transform-style:preserve-3d; transition:transform .16s ease-out,border-color .3s; }
.game-feature:hover { border-color:rgba(255,62,47,.5); }
.game-feature__visual { position:relative; min-height:560px; overflow:hidden; background:#12151a; }
.game-feature__visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 65%,var(--carbon)),linear-gradient(0deg,rgba(6,7,9,.55),transparent 38%); }
.game-feature__visual img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.8,.2,1); }
.game-feature:hover .game-feature__visual img { transform:scale(1.045); }
.game-feature__scan { position:absolute; z-index:2; left:0; width:100%; height:110px; background:linear-gradient(transparent,rgba(115,242,255,.08),transparent); animation:scan 5s linear infinite; }
.game-feature__edition,.game-feature__state { position:absolute; z-index:3; top:24px; padding:9px 12px; background:rgba(7,8,10,.75); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.16); font:600 .62rem/1 Inter,sans-serif; letter-spacing:.16em; }
.game-feature__edition { left:24px; }.game-feature__state { right:24px; display:flex; align-items:center; gap:8px; }
.game-feature__state.is-live { color:var(--cyan); border-color:rgba(115,242,255,.36); }
.game-feature__state.is-live i { background:var(--cyan); box-shadow:0 0 14px rgba(115,242,255,.8); }
.game-feature__ghost { position:absolute; z-index:3; left:22px; bottom:-35px; color:rgba(255,255,255,.09); font:900 11rem/1 "Barlow Condensed",sans-serif; }
.game-feature__content { display:flex; flex-direction:column; justify-content:center; padding:clamp(38px,5vw,78px); }
.game-feature__topline { display:flex; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--line); color:#747b84; font:600 .62rem/1 Inter,sans-serif; letter-spacing:.15em; }
.game-feature h3 { margin:48px 0 0; font:900 clamp(4rem,7vw,7.4rem)/.72 "Barlow Condensed",sans-serif; letter-spacing:-.055em; }.game-feature h3 span { color:var(--ember); }
.game-feature__tagline { margin:16px 0 30px; color:var(--white); font:italic 700 1.4rem/1 "Barlow Condensed",sans-serif; letter-spacing:.04em; }
.game-feature__description { max-width:430px; margin:0; color:#9ba1a8; font-size:.94rem; line-height:1.75; }
.game-stats { display:grid; grid-template-columns:repeat(3,1fr); margin:46px 0 42px; border-block:1px solid var(--line); }
.game-stats div { padding:20px 14px 18px 0; border-right:1px solid var(--line); }.game-stats div+div { padding-left:18px; }.game-stats div:last-child { border-right:0; }
.game-stats dt { font:700 2.1rem/1 "Barlow Condensed",sans-serif; }.game-stats dd { margin:8px 0 0; color:#757b83; font:600 .57rem/1 Inter,sans-serif; letter-spacing:.14em; }
.game-feature__actions { display:flex; align-items:center; gap:22px; }
.play-button { display:flex; align-items:center; justify-content:space-between; width:min(100%,310px); min-height:58px; padding:0 18px; border:1px solid var(--ember); color:var(--ember); font:700 .64rem/1 Inter,sans-serif; letter-spacing:.1em; text-decoration:none; transition:background .25s,color .25s; }
.play-button:not(.is-disabled):hover { background:var(--ember); color:var(--black); }
.play-button i { font:400 1.25rem/1 sans-serif; }.play-button.is-disabled { opacity:.7; }
.platform-note { color:#686e76; font:600 .56rem/1 Inter,sans-serif; letter-spacing:.13em; }

.worlds { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; margin-top:1px; background:var(--line); border:1px solid var(--line); }
.world-card { position:relative; height:340px; overflow:hidden; background:#0b0d10; }
.world-card img { width:100%; height:100%; object-fit:cover; filter:saturate(.65) brightness(.48); transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .6s; }
.world-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,6,8,.98),transparent 72%); }
.world-card div { position:absolute; z-index:2; left:26px; right:26px; bottom:25px; }
.world-card span { color:var(--ember); font:700 .62rem/1 Inter,sans-serif; letter-spacing:.15em; }.world-card h4 { margin:7px 0 6px; font:800 2rem/1 "Barlow Condensed",sans-serif; letter-spacing:.02em; }.world-card p { margin:0; color:#8e949b; font-size:.75rem; }
.world-card:hover img { transform:scale(1.08); filter:saturate(1) brightness(.72); }

.manifesto { position:relative; min-height:970px; display:flex; align-items:center; overflow:hidden; }
.manifesto__image { position:absolute; inset:-8%; background:url("assets/fragua-forge-hero-v2.png") center/cover no-repeat; filter:saturate(.55) brightness(.55); will-change:transform; }
.manifesto__veil { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,8,10,.98) 0%,rgba(7,8,10,.82) 47%,rgba(7,8,10,.16) 100%),linear-gradient(0deg,#08090b 0%,transparent 22%,#08090b 100%); }
.manifesto__content { position:relative; z-index:2; display:grid; grid-template-columns:.45fr 1.55fr .65fr; gap:30px; align-items:start; }
.manifesto__header .section-number { margin-bottom:28px; }
blockquote { margin:0; font:800 clamp(4.4rem,8vw,8.8rem)/.78 "Barlow Condensed",sans-serif; letter-spacing:-.045em; }
blockquote em { color:var(--ember); font-style:normal; }
.manifesto__copy { padding-top:110px; }.manifesto__copy p { color:#b1b5ba; font-size:.92rem; line-height:1.8; }.manifesto__copy p+p { margin-top:24px; color:#777d84; }
.principles { grid-column:2/4; display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:75px; border-block:1px solid var(--line); }
.principles span { display:flex; align-items:center; min-height:74px; padding:0 22px; border-right:1px solid var(--line); color:#a5abb1; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }.principles span:last-child { border-right:0; }.principles b { margin-right:14px; color:var(--ember); font-size:.6rem; }

.footer { padding:140px 0 45px; }
.footer__lead { padding-bottom:100px; }
.footer__lead h2 { margin:28px 0 0; font:900 clamp(5rem,12vw,12rem)/.72 "Barlow Condensed",sans-serif; letter-spacing:-.055em; }.footer__lead h2 span { color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.48); }
.footer__meta { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding-top:35px; border-top:1px solid var(--line); color:#6f757c; font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; }.footer__meta p { margin:0; }.footer__meta p:last-child { justify-self:end; }

.reveal { opacity:0; transform:translateY(52px); transition:opacity .85s ease var(--delay,0ms),transform .85s cubic-bezier(.2,.8,.2,1) var(--delay,0ms); }
.reveal.is-visible { opacity:1; transform:translateY(0); }

@keyframes loadbar{to{transform:translateX(0)}}
@keyframes titleIn{to{transform:translateY(0);opacity:1}}
@keyframes grain{0%{transform:translate(0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)}}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(255,62,47,0)}100%{box-shadow:0 0 0 0 rgba(255,62,47,0)}}
@keyframes breathe{50%{opacity:.55;transform:scale(1.14)}}
@keyframes scrollLine{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes scan{from{top:-120px}to{top:100%}}

@media(max-width:1000px){
  :root{--shell:min(100% - 42px,900px)} body{cursor:auto}a{cursor:pointer}.cursor{display:none}.topbar{padding:0 22px}.topbar__status{display:none}.hero__content{padding-top:170px}.hero__title{width:94vw;font-size:clamp(4.6rem,14vw,8rem)}.hero__bottom{margin-left:0}.hero__index{right:22px}.hero__scroll{left:22px}.section-head,.manifesto__content{grid-template-columns:.3fr 1.7fr}.section-head>p{display:none}.game-feature{grid-template-columns:1fr}.game-feature__visual{min-height:520px}.worlds{grid-template-columns:repeat(2,1fr)}.world-card{height:300px}.manifesto__copy{grid-column:2;padding-top:20px;max-width:520px}.principles{grid-column:2;grid-template-columns:1fr}.principles span{border-right:0;border-bottom:1px solid var(--line)}.principles span:last-child{border-bottom:0}.footer__meta{grid-template-columns:1fr 1fr}.footer__meta p:nth-child(2){display:none}}

@media(max-width:640px){
  :root{--shell:calc(100vw - 28px)}.topbar{height:70px;padding:0 14px}.wordmark__name{font-size:.88rem}nav{gap:18px}nav a span{display:none}.hero{min-height:760px}.hero__media{background-position:61% center}.hero__shade{background:linear-gradient(90deg,rgba(5,6,8,.93),rgba(5,6,8,.42)),linear-gradient(0deg,#08090b 0%,transparent 28%)}.hero__content{padding-top:145px}.hero__title{width:100%;font-size:clamp(4.2rem,22vw,6.6rem);line-height:.75}.title-line--end{margin-left:0}.hero__bottom{display:block}.hero__bottom p{width:min(100%,330px);margin-bottom:24px}.hero__index{display:none}.ticker__track{height:54px;font-size:1.25rem}.catalog{padding:110px 0}.section-head,.manifesto__content{display:block}.section-head>div{display:flex;gap:18px;align-items:center;margin-bottom:28px}.section-number{margin:0;font-size:2rem}.section-head h2{font-size:3.6rem}.game-feature__visual{min-height:380px}.game-feature__content{padding:34px 24px}.game-feature h3{margin-top:36px;font-size:4.5rem}.game-stats{margin:34px 0}.game-stats div{padding-right:8px}.game-stats div+div{padding-left:10px}.game-stats dt{font-size:1.7rem}.game-feature__actions{align-items:flex-start;flex-direction:column}.world-card{height:260px}.manifesto{min-height:1050px}.manifesto__header{display:flex;gap:18px;align-items:center;margin-bottom:34px}blockquote{font-size:4.4rem}.manifesto__copy{padding-top:36px}.principles{margin-top:50px}.footer{padding-top:100px}.footer__lead{padding-bottom:70px}.footer__lead h2{font-size:5rem}.footer__meta{display:flex;flex-direction:column;align-items:flex-start;gap:20px}.footer__meta p:last-child{align-self:flex-start}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.boot{display:none}.is-loading body{overflow:auto}.title-line{animation:none;transform:none;opacity:1}.ticker__track,.grain,.game-feature__scan,.hero__flare{animation:none}.reveal{opacity:1;transform:none;transition:none}}