/* Arcane light and motion. Decorative layers never intercept input or scrolling. */
@property --shimmer-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
:root { --violet: #b884ed; --rose: #ec5ebc; --gold-light: #ffacb0; }
body { background: #100e13; }
#embers { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 21; pointer-events: none; }
.site-header { background: linear-gradient(105deg, #161217ef, #111015f2 55%, #211322ee); border-bottom-color: #c799df30; }
.site-header::after { content: ''; position: absolute; bottom: 0; height: 1px; width: 100%; background: linear-gradient(90deg, transparent, #c596e970, #ff9fae, #bf7de760, transparent); background-size: 220% 100%; animation: gradient-flow 9s linear infinite; pointer-events: none; }
.header-inner { gap: 21px; }
.brand-logo { animation: brand-breathe 5s ease-in-out infinite; transform: none; }
.brand:hover .brand-logo { transform: none; }
.brand-gold { background: linear-gradient(110deg, #b53a51 15%, #ffe0e5 40%, #a9a0ed 60%, #b53a51 85%); background-size: 250% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: gradient-flow 8s ease-in-out infinite; }
.desktop-nav { gap: 24px; }
.desktop-nav a { transition: color .3s, text-shadow .3s, transform .3s; }
.desktop-nav a:hover { text-shadow: 0 0 18px #f0718170; transform: translateY(-2px); }
.desktop-nav a::after { background: linear-gradient(90deg, var(--gold), var(--violet)); box-shadow: 0 0 9px #c99af2; }
.scroll-progress { height: 2px; z-index: 1; background: linear-gradient(90deg, #ad73e3, #efbbfa, #ff809a); box-shadow: 0 0 12px #d9a1f3; }
.motion-control { min-height: 37px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 7px; border: 1px solid #b187c33d; padding: 7px 11px; font-size: 9px; color: #c2accc; background: linear-gradient(120deg,#9c66c50c,#a027490c); transition: box-shadow .3s, color .3s; }
.motion-control:hover { color: #ffdae2; box-shadow: 0 0 20px #aa63d32b; }
.motion-control[aria-pressed=true] { color: #e6d4f5; border-color: #cf9beb70; }
.motion-control .motion-state { color: var(--gold-light); font-size: 8px; text-transform: uppercase; }
.motion-star { font-size: 15px; line-height: 1; color: var(--gold-light); animation: orbit 12s linear infinite, star-breathe 3s ease-in-out infinite; }
.motion-control[aria-pressed=false] .motion-star { opacity: .5; }
.header-steam { position: relative; overflow: hidden; background: linear-gradient(110deg,#d1b47708,#cc76e010); }
.header-steam:hover { border-color: var(--gold-light); background: linear-gradient(110deg,#d1b47726,#cc76e023); box-shadow: 0 0 25px #e7426630; }
.hero { background: #100712; }
.hero-art { inset: -2%; width: 104%; height: 104%; animation: hero-drift 22s ease-in-out infinite alternate; will-change: transform; }
.hero-shade { background: linear-gradient(90deg,#0d0a13e8 0%,#160c1bbf 28%,#0b071530 62%,#14091d10),linear-gradient(0deg,#100e13,transparent 45%,#14071918); }
.hero-aura { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.hero-aura i { position: absolute; width: 65%; height: 70%; top: -15%; right: -10%; background: radial-gradient(ellipse,#b950e037,transparent 67%); filter: blur(30px); animation: aurora-drift 16s ease-in-out infinite alternate; }
.hero-aura i:nth-child(2) { top: 37%; right: 20%; width: 75%; height: 55%; background: radial-gradient(ellipse,#b270bb29,#8c533110 40%,transparent 70%); animation-delay: -8s; animation-duration: 19s; }
.hero-constellation { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-constellation span { position: absolute; color: #ffacb0; text-shadow: 0 0 14px #ffacb0,0 0 30px #c774ff; animation: star-breathe 4s ease-in-out infinite, orbit 18s linear infinite; }
.hero-constellation span:nth-child(1) { left: 48%; top: 24%; font-size: 24px; }
.hero-constellation span:nth-child(2) { right: 8%; top: 48%; font-size: 31px; animation-delay: -2s; }
.hero-constellation span:nth-child(3) { right: 31%; bottom: 22%; font-size: 17px; animation-delay: -1s; }
.hero-constellation span:nth-child(4) { left: 37%; bottom: 13%; font-size: 18px; animation-delay: -3s; }
.hero h1 { text-shadow: 0 2px 35px #10061580; }
.hero h1 em { background: linear-gradient(105deg,#d84464 4%,#ffd4da 25%,#fff0f4 38%,#b4a0e5 52%,#ff95a7 67%,#d84464 94%); background-size: 260% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: gradient-flow 9s ease-in-out infinite; filter: drop-shadow(0 0 23px #d299e023); }
.hero-description { color: #cdc2d0; }
.hero-frame { border-color: #cba0d530; box-shadow: inset 0 0 45px #b56ac805; }
.hero-frame::before { content: ''; position: absolute; left: 10%; top: -1px; width: 80px; height: 1px; background: linear-gradient(90deg,transparent,#ffa6b4,transparent); box-shadow: 0 0 14px #d39ff4; animation: frame-trace 12s ease-in-out infinite alternate; }
.hero-frame span { background: transparent; color: var(--gold-light); text-shadow: 0 0 14px #d6a8f0; animation: star-breathe 3.5s ease-in-out infinite, orbit 20s linear infinite; }
.hero-frame span:last-child { animation-delay: -1.75s; }
.short-line { background: linear-gradient(90deg,var(--gold),#e0b0ed); box-shadow: 0 0 13px #c990e67a; animation: line-breathe 4s ease-in-out infinite; }
.art-credit { padding: 11px 14px; border-left: 1px solid #c798d250; background: linear-gradient(90deg,#be7bdf10,transparent); transition: border-color .3s, background .3s, transform .3s; }
.art-credit:hover { border-color: #f2d2a0; background: linear-gradient(90deg,#be7bdf28,transparent); transform: translateY(-3px); }
.button, .header-steam, .filter, .gallery-tab, .social-links a, .copy-email { position: relative; overflow: hidden; isolation: isolate; }
.button-gold { background: linear-gradient(115deg,#98283d,#e95168 36%,#ffb3be 54%,#d54c68 72%,#ad365b); background-size: 230% 100%; border-color: #ff8094b0; box-shadow: 0 0 22px #e1395e30,inset 0 1px 0 #ffd1df75; animation: gold-current 8s ease-in-out infinite; }
.button-gold:hover { background: linear-gradient(115deg,#e85874,#ffe0e9 45%,#bda0ee 70%,#f17c9f); background-size: 200% 100%; box-shadow: 0 0 35px #f0487655,0 6px 28px #c681df28; transform: translateY(-4px); }
.button::after,.header-steam::after { content: ''; position: absolute; top: -60%; left: -65%; width: 35%; height: 220%; background: linear-gradient(90deg,transparent,#fff0f575,transparent); transform: skewX(-23deg); animation: shine-sweep 6s ease-in-out infinite; pointer-events: none; }
.header-steam::after { animation-delay: -3s; background: linear-gradient(90deg,transparent,#e5befe2a,transparent); }
.button-outline { background: linear-gradient(110deg,#ac6ad315,#d3ac6020); }
.button .icon,.card-link .icon,.text-link .icon,.text-link>span,.back-top { transition: transform .35s,filter .35s; }
.button:hover .icon:last-child,.text-link:hover .icon,.text-link:hover>span,.card-link:hover .icon { transform: translate(3px,-2px); filter: drop-shadow(0 0 5px currentColor); }
.button:active,.filter:active,.gallery-tab:active { scale: .97; }
.manifesto-strip { position: relative; background: linear-gradient(95deg,#18131e,#231627,#1c1719,#18131e); background-size: 300% 100%; animation: gradient-flow 20s ease-in-out infinite; border-block: 1px solid #d0a0dc20; }
.manifesto-strip .ornament,.collection-note .ornament { display: inline-block; animation: orbit 15s linear infinite,star-breathe 4s ease-in-out infinite; text-shadow: 0 0 14px #d3a4e6; }
.manifesto-strip .ornament:nth-child(4) { animation-delay: -2s; }
.manifesto-strip .ornament:nth-child(6) { animation-delay: -3s; }
.games-section { position: relative; background: radial-gradient(ellipse at 0% 15%,#542d6f19,transparent 55%),radial-gradient(ellipse at 95% 55%,#84544612,transparent 55%),#100e13; }
.section-heading h2,.about-copy h2,.contact-content h2 { background: linear-gradient(105deg,#eee5dc 15%,#e8d5ed 40%,#f6b6cc 55%,#eee5dc 80%); background-size: 230% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: gradient-flow 14s ease-in-out infinite; }
.chapter { color: #e0addf; text-shadow: 0 0 12px #b779d35c; }
.featured-game { background: radial-gradient(ellipse at 90% 25%,#633a7130,transparent 65%),linear-gradient(120deg,#1b1521,#1c1820 65%,#211b1b); border-color: #c998df45; }
.featured-game::before,.game-image::before { content: ''; position: absolute; inset: -1px; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--shimmer-angle),transparent 5%,#b786cf30 15%,#ef496a 24%,#ffd8f1 25%,#bb77e350 31%,transparent 50%,#9e69b430 64%,#d7acd5 74%,transparent 85%); -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; animation: border-orbit 9s linear infinite; }
.featured-game::before { padding: 1.5px; }
.featured-copy { position: relative; }
.featured-copy::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(280px circle at var(--pointer-x,75%) var(--pointer-y,25%),#d99ce512,transparent 65%); }
.featured-copy h3 { color: #f4dfe9; text-shadow: 0 0 30px #d08bd433; }
.feature-label { border-color: #d19ce16b; background: #130d1acc; box-shadow: 0 0 20px #e57ced20; }
.status-dot { animation: dot-breathe 2.8s ease-in-out infinite; }
.play-circle { position: relative; color: #ffc8da; border-color: #e6c3a980; box-shadow: 0 0 18px #b86fcb35; }
.play-circle::before,.play-circle::after { content: ''; position: absolute; inset: -6px; border: 1px solid #e5baff50; border-radius: 50%; animation: play-ripple 3s ease-out infinite; pointer-events: none; }
.play-circle::after { animation-delay: -1.5s; }
.preview-button:hover .play-circle { box-shadow: 0 0 32px #edb4df80; }
.preview-button:hover small { color: #e7c3f0; }
.tags span { transition: border-color .3s,color .3s,background .3s,transform .3s; }
.tags span:hover { border-color: #c99fe3; color: #f0dcf6; background: #a966c31c; transform: translateY(-3px); }
.filter.active,.gallery-tab.active { background: linear-gradient(115deg,#8050a633,#b4885125); border-color: #c698dd70; box-shadow: 0 0 17px #bd78db1b,inset 0 0 14px #c490dc08; color: #ffc8d5; }
.filter,.gallery-tab { transition: background .3s,box-shadow .3s,color .3s,transform .3s; }
.filter:hover,.gallery-tab:hover { background: #ba85ce14; transform: translateY(-2px); }
.game-card { --card-accent: #cb8bdc; }
.game-card:nth-child(2) { --card-accent: #ab99ee; }
.game-card:nth-child(3) { --card-accent: #de886e; }
.game-card:nth-child(4) { --card-accent: #d9b271; }
.game-image { border-color: #d5a1e042; overflow: visible; transform: perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform .22s ease-out,box-shadow .4s; }
.game-image img { clip-path: inset(0); transition: filter .4s; }
.game-image:hover img { transform: none; filter: brightness(1.16) saturate(1.08); }
.game-image::after { content: ''; position: absolute; inset: 0; background: radial-gradient(240px circle at var(--pointer-x,50%) var(--pointer-y,50%),#fff6e530,transparent 65%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.game-image:hover { box-shadow: 0 12px 35px #10061570,0 0 24px color-mix(in srgb,var(--card-accent) 25%,transparent); }
.game-image:hover::after { opacity: 1; }
.game-card:hover h3 { color: var(--card-accent); text-shadow: 0 0 20px color-mix(in srgb,var(--card-accent) 30%,transparent); }
.game-card h3 { transition: color .3s,text-shadow .3s; }
.game-card:nth-child(2) .game-image::before { animation-delay: -2s; }
.game-card:nth-child(3) .game-image::before { animation-delay: -4s; }
.game-card:nth-child(4) .game-image::before { animation-delay: -6s; }
.card-link { position: relative; }
.card-link::before { content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg,var(--card-accent),var(--gold),transparent); transform: scaleX(0); transform-origin: left; transition: transform .5s; }
.game-card:hover .card-link::before { transform: scaleX(1); }
.card-status.upcoming { border-color: #e0a4ec70; background: linear-gradient(110deg,#4b2450e6,#271830ee); color: #f1d9ef; }
.collection-note::before,.collection-note::after { background: linear-gradient(90deg,transparent,#c299d16b); }
.collection-note::after { transform: rotate(180deg); }
.about-section { background: radial-gradient(ellipse at 20% 50%,#69378925,transparent 52%),linear-gradient(110deg,#17111d,#1b1620 60%,#19151a); border-color: #b584ce26; }
.creator-seal { padding: 0; color: inherit; background: radial-gradient(circle,#ba72dc1c,transparent 68%); isolation: isolate; border: 0; }
.creator-seal .seal-orbit { border-color: #c997dd90; animation: orbit 30s linear infinite; pointer-events: none; box-shadow: 0 0 25px #b17add12,inset 0 0 28px #bb7edd0f; }
.seal-orbit::before { inset: 13px; border-color: #e8cba550; animation: orbit 20s linear infinite reverse; }
.seal-orbit::after { inset: -20px; border-color: #b681d24a; animation: diamond-orbit 45s linear infinite reverse; }
.seal-spark { background: transparent; color: #ffb3c5; text-shadow: 0 0 10px #fb5f92,0 0 25px #d188fb; animation: star-breathe 3s ease-in-out infinite; padding: 0; display: block; width: 26px; height: 26px; font-size: 26px; }
.spark-one { left: -13px; top: calc(50% - 13px); }
.spark-two { right: -13px; top: calc(50% - 13px); bottom: auto; animation-delay: -1.5s; }
.spark-three { left: calc(50% - 13px); top: -13px; animation-delay: -.8s; color: #dfb8fa; }
.spark-four { left: calc(50% - 13px); bottom: -13px; animation-delay: -2.3s; color: #dfb8fa; }
.seal-geometry { position: absolute; inset: 5%; width: 90%; height: 90%; fill: none; stroke: #cf99e344; stroke-width: .7; z-index: -1; animation: orbit 65s linear infinite reverse; pointer-events: none; }
.seal-geometry circle:nth-child(2) { stroke-dasharray: 2 13; stroke: #f16d957a; stroke-width: 2; }
.seal-ticks { stroke: #ff7da796; stroke-width: 1.4; }
.seal-halo { position: absolute; inset: 14%; border-radius: 50%; z-index: -1; background: radial-gradient(ellipse,#b377d729,#8c45b915 45%,transparent 70%); box-shadow: 0 0 70px #a051c518; animation: halo-breathe 6s ease-in-out infinite; pointer-events: none; }
.creator-seal img { animation: logo-float 6s ease-in-out infinite; filter: invert(1) drop-shadow(0 0 12px #dbb2fb55); opacity: 1; transition: filter .4s; }
.seal-top,.seal-bottom { color: #e0bbd9; text-shadow: 0 0 15px #c984dc30; }
.seal-hint { position: absolute; bottom: -60px; font-size: 7px; letter-spacing: 3px; color: #b498bc; transition: color .3s; }
.creator-seal:hover .seal-hint { color: #ff9baf; }
.creator-seal:hover img { filter: invert(1) drop-shadow(0 0 22px #e4baffaa); }
.creator-seal.awakened .seal-orbit { animation-duration: 5s; border-color: #ffc2d3; box-shadow: 0 0 50px #c975ec55; }
.creator-seal.awakened .seal-geometry { stroke: #e7b8f0a0; animation-duration: 12s; }
.creator-seal.awakened .seal-halo { background: radial-gradient(ellipse,#e9a6ee55,transparent 65%); }
.creator-seal.awakened img { filter: invert(1) drop-shadow(0 0 28px #f4d09baa); }
.signature { text-shadow: 0 0 25px #d8a6da26; }
.gallery-section { background: radial-gradient(ellipse at 85% 35%,#783a8418,transparent 55%),#100e13; }
.gallery-item { border-color: #c8a0db30; transition: box-shadow .4s,transform .4s,border-color .4s; }
.gallery-item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg,transparent 20%,#fff0e51c 45%,#e4adfc2b 50%,transparent 65%); background-size: 260% 100%; background-position: 170% 0; transition: background-position .9s; z-index: 2; pointer-events: none; }
.gallery-item:hover::before { background-position: -70% 0; }
.gallery-item:hover { border-color: #d4abd9; box-shadow: 0 0 35px #b769d323; transform: translateY(-4px); }
.gallery-item:hover>i { transform: rotate(45deg); }
.gallery-item>i { transition: transform .4s,text-shadow .4s; text-shadow: 0 0 13px #dfafed80; }
.gallery-item:hover img { transform: scale(1.07) translate(var(--image-x,0px),var(--image-y,0px)); }
.gallery-item>span>span { text-shadow: 0 2px 10px #000; }
.contact-section { background: radial-gradient(ellipse at 50% 40%,#66327935,transparent 65%),linear-gradient(125deg,#18111e,#211729,#1c1519,#18111e); background-size: 180% 180%; animation: gradient-flow 22s ease-in-out infinite; border-color: #ca8ed333; }
.contact-rune { color: #d494ee0e; text-shadow: 0 0 60px #c785eb18; animation: contact-orbit 75s linear infinite; }
.contact-email { position: relative; transition: color .3s,text-shadow .3s; }
.contact-email::after { content: ''; position: absolute; height: 1px; bottom: -1px; left: 0; width: 100%; background: linear-gradient(90deg,transparent,#c58ce6,#ff799d,#c58ce6,transparent); background-size: 200% 100%; box-shadow: 0 0 15px #c784e0; animation: gradient-flow 5s ease-in-out infinite; }
.contact-email:hover { color: #ffdae4; text-shadow: 0 0 28px #edb4e75c; }
.contact-email .icon { transition: transform .4s; }
.contact-email:hover .icon { transform: translate(4px,-4px); }
.social-links { gap: 20px; }
.social-links a { padding: 9px 13px; border: 1px solid #d2a0e220; background: linear-gradient(120deg,#a961bd10,transparent); transition: transform .3s,border-color .3s,box-shadow .3s; }
.social-links a:hover { transform: translateY(-4px); border-color: #d7a5db70; box-shadow: 0 0 22px #b96ce525; }
.site-footer { background: linear-gradient(90deg,#100d14,#17111c,#100d14); border-color: #bc8bc333; }
.atmosphere-toggle { color: #d2b6df; }
.atmosphere-toggle[aria-pressed=false] .status-dot { animation: none; }
.mobile-nav { background: linear-gradient(135deg,#1d1228f8,#151017fc); border-color: #ce9cdf55; animation: menu-unfold .35s ease-out; }
.mobile-nav a { transition: color .25s,padding .25s; }
.mobile-nav a:hover { color: #e3b5f2; padding-left: 8px; }
.game-dialog,.media-dialog { background: radial-gradient(ellipse at top right,#68356d30,transparent 60%),#17121c; border-color: #d19ad575; box-shadow: 0 0 80px #ac60cc1c,0 30px 100px #0009; }
dialog[open] { animation: portal-open .4s cubic-bezier(.2,.8,.2,1); }
dialog::backdrop { background: #0d0616cf; }
.dialog-close { border-color: #c997d97a; background: #1a1123ed; transition: transform .35s,background .3s,box-shadow .3s; }
.dialog-close:hover { transform: rotate(90deg); background: #502958; box-shadow: 0 0 20px #c784df55; }
.detail-shots button { transition: transform .3s,border-color .3s; }
.detail-shots button:hover { transform: translateY(-4px); border-color: #e5b7eb; }
.interaction-ripple { display: block; position: absolute; width: 18px; height: 18px; margin: -9px; border: 1px solid #ffd5e5a0; border-radius: 50%; background: radial-gradient(circle,#f3c6ff40,transparent 70%); pointer-events: none; z-index: 8; animation: interaction-ripple .75s ease-out forwards; }
.game-card.filter-enter { animation: card-enter .45s ease-out both; }
.gallery-item.gallery-enter { animation: card-enter .55s ease-out both; }
.game-card.filter-enter:nth-child(2),.gallery-item.gallery-enter:nth-child(2) { animation-delay: .06s; }
.game-card.filter-enter:nth-child(3),.gallery-item.gallery-enter:nth-child(3) { animation-delay: .12s; }
.game-card.filter-enter:nth-child(4) { animation-delay: .18s; }
.game-card.reveal.is-visible:nth-child(2) { animation-delay: .08s; }
.game-card.reveal.is-visible:nth-child(3) { animation-delay: .16s; }
.game-card.reveal.is-visible:nth-child(4) { animation-delay: .24s; }
@keyframes hero-drift { 0%{transform:scale(1) translate(0,0)} 100%{transform:scale(1.045) translate(-.7%,.5%)} }
@keyframes gradient-flow { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes gold-current { 0%,100%{background-position:0% 50%;box-shadow:0 0 22px #e1395e30} 50%{background-position:100% 50%;box-shadow:0 0 25px #e9436455} }
@keyframes shine-sweep { 0%,65%{left:-65%;opacity:0} 72%{opacity:.9} 92%,100%{left:145%;opacity:0} }
@keyframes star-breathe { 0%,100%{opacity:.38;scale:.75;filter:brightness(.9)} 50%{opacity:1;scale:1.15;filter:brightness(1.5)} }
@keyframes brand-breathe { 0%,100%{filter:invert(1) drop-shadow(0 0 1px #d89efa20)} 50%{filter:invert(1) drop-shadow(0 0 8px #dab9f080)} }
@keyframes aurora-drift { 0%{transform:translate(-8%,0) rotate(-12deg);opacity:.5} 100%{transform:translate(10%,12%) rotate(15deg);opacity:1} }
@keyframes frame-trace { from{left:3%;opacity:.3} to{left:calc(97% - 80px);opacity:1} }
@keyframes line-breathe { 0%,100%{opacity:.45;transform:scaleX(.8)} 50%{opacity:1;transform:scaleX(1)} }
@keyframes border-orbit { to{--shimmer-angle:360deg} }
@keyframes dot-breathe { 0%,100%{box-shadow:0 0 4px #daa9ff50;opacity:.6} 50%{box-shadow:0 0 13px #eac296cc;opacity:1} }
@keyframes play-ripple { 0%{transform:scale(.8);opacity:.7} 100%{transform:scale(1.5);opacity:0} }
@keyframes diamond-orbit { from{transform:rotate(45deg)} to{transform:rotate(405deg)} }
@keyframes halo-breathe { 0%,100%{transform:scale(.9);opacity:.55} 50%{transform:scale(1.15);opacity:1} }
@keyframes logo-float { 0%,100%{transform:translateY(3px)} 50%{transform:translateY(-9px)} }
@keyframes contact-orbit { from{transform:translateX(-50%) rotate(0deg)} to{transform:translateX(-50%) rotate(360deg)} }
@keyframes menu-unfold { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
@keyframes portal-open { from{opacity:0;transform:translateY(18px) scale(.96);filter:blur(5px)} to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)} }
@keyframes interaction-ripple { to{transform:scale(18);opacity:0} }
@keyframes card-enter { from{opacity:.1;transform:translateY(15px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
@media(min-width:981px) and (max-width:1200px) { .header-inner{gap:13px}.desktop-nav{gap:16px}.motion-control{padding:7px 9px}.motion-label{display:none}.header-steam{padding:10px}.brand{font-size:15px} }
@media(max-width:980px) { .motion-control{margin-left:auto}.header-steam{margin-left:0}.hero-constellation span:nth-child(1){left:72%;top:20%} }
@media(max-width:700px) { .header-inner{gap:10px}.motion-control{padding:5px 8px;gap:5px;min-height:34px}.motion-control .motion-label{display:none}.motion-control .motion-state{font-size:7px}.motion-star{font-size:14px}.menu-toggle{margin-left:0}.hero-art{inset:-1%;width:102%;height:102%;background-position:50% center}.hero-shade{background:linear-gradient(90deg,#120b1dbf,#0b071385),linear-gradient(0deg,#100e13,transparent 85%)}.hero-aura i{width:110%;height:70%;right:-20%}.hero-constellation span:nth-child(2){top:57%}.hero-constellation span:nth-child(3){bottom:26%;right:20%}.hero-constellation span:nth-child(4){display:none}.art-credit{padding:8px 9px}.creator-seal{margin-bottom:35px}.seal-hint{bottom:-53px}.seal-orbit::after{inset:-14px}.seal-spark{font-size:22px}.social-links{gap:10px}.social-links a{padding:8px 9px;font-size:9px}.game-image{transform:none}.section-heading h2{background-size:230% 100%}.button-gold:hover{transform:none} }
@media(max-width:370px) { .brand{font-size:12px}.brand small{font-size:5px;letter-spacing:1.25px}.brand-logo{width:28px}.header-inner{gap:8px}.motion-control{padding:5px 6px}.hero h1{font-size:39px} }
/* Full effects start on; the switch provides an immediate, complete off state. */
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation: none !important; transition: none !important; }
.motion-paused .hero-art { transform: none; }
.motion-paused .game-image,.motion-paused .gallery-item:hover { transform: none; }
.motion-paused .hero-constellation span { opacity: .6; }
.motion-paused .interaction-ripple { display: none; }
.motion-paused #dark-aura,.motion-paused #embers,.motion-paused .aura-fallback-layer,.motion-paused .hero-aura { visibility: hidden; }
.document-hidden *, .document-hidden *::before, .document-hidden *::after { animation-play-state: paused !important; }
@media(prefers-reduced-motion:reduce) { html:not([data-motion="full"]) *,html:not([data-motion="full"]) *::before,html:not([data-motion="full"]) *::after{animation:none!important;transition:none!important}html:not([data-motion="full"]) #embers{display:none} }

/* The red / obsidian / indigo chapter system. */
:root { --bg:#09060d; --surface:#140c18; --gold:#ee6b83; --gold-light:#ffc1d0; --violet:#8d7cdb; --rose:#ed355f; --muted:#aea1b2; }
html { scroll-behavior:auto; }
body { background:#07050b; }
main { position:relative; z-index:1; }
.site-footer { position:relative; z-index:1; }
#dark-aura { position:fixed; inset:0; width:100%; height:100%; z-index:2; opacity:.7; mix-blend-mode:screen; pointer-events:none; }
.aura-fallback-layer { display:none; position:fixed; inset:-10%; z-index:2; pointer-events:none; mix-blend-mode:screen; opacity:.5; background:radial-gradient(ellipse at 15% 70%,#8e173f70,transparent 45%),radial-gradient(ellipse at 85% 40%,#3b206a80,transparent 50%),radial-gradient(ellipse at 65% 95%,#a3183570,transparent 45%); filter:blur(35px); animation:smoke-fallback 18s ease-in-out infinite alternate; }
.aura-fallback #dark-aura { display:none; }
.aura-fallback .aura-fallback-layer { display:block; }
.site-header { background:linear-gradient(110deg,#140c16f0,#0b0711f0 55%,#210c19ef); box-shadow:0 5px 35px #08030c40; }
.site-header::after { background-image:linear-gradient(90deg,transparent,#702d74,#f25375,#b079bc,transparent); }
.hero { background:#0b050e; }
.hero-shade { background:linear-gradient(90deg,#09060eee 0%,#0e0716b8 28%,#12081122 62%,#1508140d),linear-gradient(0deg,#0c0712 0%,#0a061209 43%,#19061815); }
.hero-aura i { background:radial-gradient(ellipse,#dc174e3d,transparent 65%); }
.hero-aura i:nth-child(2) { background:radial-gradient(ellipse,#3721a333,#9c234328 45%,transparent 70%); }
.hero-portal { position:absolute; width:min(620px,49vw); aspect-ratio:1; right:2.5%; top:calc(50% - 260px); pointer-events:none; z-index:-1; opacity:.48; animation:halo-breathe 12s ease-in-out infinite; }
.hero-portal i { position:absolute; inset:0; border-radius:50%; border:1px solid #f4517540; box-shadow:0 0 55px #e7314920,inset 0 0 55px #5b3b9e14; animation:orbit 60s linear infinite; }
.hero-portal i::before { content:''; position:absolute; inset:-12px; border-radius:50%; border:1px dashed #d499d127; }
.hero-portal i:nth-child(2) { inset:26px; border-color:#9580d828; border-style:dashed; animation-direction:reverse; animation-duration:45s; }
.hero-portal span { position:absolute; top:50%; left:-11px; color:#ff80aa; text-shadow:0 0 22px #ff367d; font-size:28px; animation:star-breathe 5s ease-in-out infinite; }
.hero-frame { border-color:#ba667c3a; }
.hero h1 em { background-image:linear-gradient(110deg,#d84968 5%,#ffb7c7 24%,#fff1f2 37%,#a894e5 52%,#fb829f 68%,#d84968 94%); }
.hero-description { color:#cfbdcf; }
.manifesto-strip { background:linear-gradient(110deg,#2c1021,#160e23,#301223,#100c1d); border-color:#bf486537; }
.games-section,.about-section,.gallery-section,.contact-section { position:relative; isolation:isolate; }
.games-section>.container,.about-section>.container,.gallery-section>.container,.contact-section>.container { position:relative; z-index:1; }
.games-section { background:radial-gradient(ellipse at 4% 35%,#6b123128,transparent 48%),radial-gradient(ellipse at 98% 65%,#30217438,transparent 48%),linear-gradient(180deg,#0c0712,#100812 65%,#12091a); }
.games-section::before { content:''; position:absolute; top:80px; left:-450px; width:780px; height:780px; border-radius:50%; border:1px solid #f0507130; background:radial-gradient(circle,transparent 57%,#9d204814 58%,transparent 69%); pointer-events:none; }
.games-section::after,.gallery-section::after,.about-section::after { content:''; position:absolute; bottom:0; left:5%; width:90%; height:1px; background:linear-gradient(90deg,transparent,#b22a5260,#df587ea0,#6450a35a,transparent); background-size:220% 100%; animation:gradient-flow 10s ease-in-out infinite; }
section[data-chapter]::before { pointer-events:none; }
.section-heading { position:relative; }
.section-heading::after { content:''; position:absolute; bottom:-22px; left:0; width:80px; height:1px; background:linear-gradient(90deg,#ec5879,#a878d8,transparent); box-shadow:0 0 15px #eb366869; animation:line-breathe 5s ease-in-out infinite; }
.section-heading .chapter { width:30px; height:30px; display:grid; place-items:center; padding:0; border:1px solid #bd547757; transform:rotate(-5deg); background:linear-gradient(140deg,#89214230,#281b3e33); box-shadow:0 0 18px #9d274224; }
.featured-game { margin-top:57px; padding:10px; gap:0; background:radial-gradient(ellipse at 90% 20%,#54223945,transparent 60%),linear-gradient(135deg,#160a1d,#100c18 65%,#24101b); border-color:#ee536443; box-shadow:0 25px 80px #0502096b,0 0 70px #7b164015; }
.featured-art { min-height:435px; }
.featured-art::after { background:linear-gradient(0deg,#180918eb,transparent 60%),linear-gradient(90deg,transparent 60%,#36143523); }
.featured-art>img { filter:saturate(1.08); }
.featured-copy { padding:35px 33px; }
.feature-label { background:linear-gradient(120deg,#3b1122d9,#170d26e8); border-color:#e77b9680; color:#f7c7d5; }
.feature-actions .button-gold { color:#240914; }
.featured-copy>.eyebrow { color:#f78ba1; }
.featured-copy .game-hook { color:#eaa3b4; }
.featured-copy>p:not(.eyebrow,.game-hook) { color:#bca9bd; }
.tags span { border-color:#b385c22b; color:#c6b4d1; background:linear-gradient(135deg,#57244210,#26183d12); }
.collection-toolbar { border-color:#a94d7035; }
.game-grid { gap:25px; }
.game-card { position:relative; padding:10px 10px 0; background:linear-gradient(150deg,#21122480,#110b1780); border:1px solid #9b547931; box-shadow:0 8px 40px #04010a30; transition:border-color .4s,background .4s,box-shadow .4s; }
.game-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%,#7c284c19,transparent 70%); opacity:0; transition:opacity .4s; pointer-events:none; }
.game-card:hover { border-color:#b37bad60; background:linear-gradient(150deg,#29132e,#160c1c); box-shadow:0 15px 45px #14031850,0 0 28px #b6356620; }
.game-card:hover::before { opacity:1; }
.game-card-copy { padding:20px 5px 16px; }
.game-card h3 { color:#eedce9; }
.game-card-copy>p:not(.card-index) { color:#b4a1b8; }
.game-card .card-link { color:#f196b0; }
.game-card:nth-child(1) { --card-accent:#fb6d8b; }
.game-card:nth-child(2) { --card-accent:#b098ee; }
.game-card:nth-child(3) { --card-accent:#ef6c74; }
.game-card:nth-child(4) { --card-accent:#ce9bdd; }
.about-section { background:radial-gradient(ellipse at 20% 50%,#8e1f4930,transparent 49%),radial-gradient(ellipse at 60% 80%,#211b5a40,transparent 65%),#100b17; border-color:#9e416735; }
.about-section::before { content:''; position:absolute; width:45%; height:60%; left:1%; top:20%; border-radius:50%; background:radial-gradient(ellipse,#ba1c4320,transparent 67%); filter:blur(25px); animation:aurora-drift 15s ease-in-out infinite alternate; }
.creator-seal { background:radial-gradient(circle,#a7244520,transparent 66%); }
.seal-halo { background:radial-gradient(ellipse,#ce284232,#53307e28 45%,transparent 70%); box-shadow:0 0 70px #bb28562b; }
.creator-seal .seal-orbit { border-color:#e8789290; box-shadow:0 0 25px #e2366726,inset 0 0 28px #5228871f; }
.seal-orbit::before { border-color:#a485d260; }
.seal-orbit::after { border-color:#cf527656; }
.seal-geometry { stroke:#c778bd60; }
.seal-top,.seal-bottom { color:#f3b2c6; }
.creator-seal img { width:42%; }
.creator-seal.awakened .seal-halo { background:radial-gradient(ellipse,#ef385568,#a345a137 50%,transparent 68%); }
.about-intro { color:#ebdce9; }
.about-copy>p:not(.eyebrow,.about-intro) { color:#b9a5bd; }
.gallery-section { background:radial-gradient(ellipse at 8% 55%,#291a5838,transparent 55%),radial-gradient(ellipse at 92% 70%,#6c183a30,transparent 55%),#0b0711; }
.gallery-grid { gap:24px; grid-template-columns:1.2fr 1fr; grid-template-rows:220px 220px; }
.gallery-item { border-color:#ca658549; box-shadow:0 15px 40px #07020c80; }
.gallery-item::after { background:linear-gradient(0deg,#120719f7 0%,#180c2240 45%,transparent 75%); }
.gallery-item::before { background-image:linear-gradient(115deg,transparent 20%,#fda5c022 45%,#b499ff30 50%,transparent 65%); }
.gallery-item:hover { border-color:#f184a3; box-shadow:0 0 45px #d7376b28,0 20px 50px #06000a80; }
.gallery-item>i { display:grid; place-items:center; width:33px; height:33px; border:1px solid #e78bae5c; background:#2d112666; font-size:18px; }
.gallery-item small { color:#f4a3bc; }
.gallery-item:nth-child(2) img { filter:saturate(1.1); }
.press-note { border-color:#af507036; }
.contact-section { padding-block:110px 95px; background:radial-gradient(ellipse at 50% 40%,#65183238,transparent 58%),radial-gradient(ellipse at 65% 80%,#26175745,transparent 62%),#100713; border-color:#c4466b35; }
.contact-portal { position:absolute; width:620px; height:620px; left:50%; top:50%; margin:-310px; pointer-events:none; opacity:.55; }
.contact-portal i { position:absolute; inset:0; border:1px solid #cf4d732b; border-radius:50%; box-shadow:0 0 40px #ca285311,inset 0 0 40px #71294b11; animation:orbit 60s linear infinite; }
.contact-portal i::before,.contact-portal i::after { content:'✦'; position:absolute; top:50%; left:-7px; color:#e19ab55c; line-height:1; font-style:normal; font-size:15px; animation:star-breathe 4s ease-in-out infinite; }
.contact-portal i::after { left:auto; right:-7px; animation-delay:-2s; }
.contact-portal i:nth-child(2) { inset:30px; border-style:dashed; border-color:#7d6dbf25; animation-direction:reverse; animation-duration:45s; }
.contact-portal i:nth-child(3) { inset:65px; border-color:#c1648b20; animation-duration:30s; }
.contact-rune { color:#f38cac07; }
.contact-content h2 { font-size:clamp(34px,4.2vw,60px); }
.contact-content>.eyebrow { color:#e389a1; }
.contact-email { color:#ffc2d0; }
.contact-email::after { background-image:linear-gradient(90deg,transparent,#b074c3,#ff647e,#8873c6,transparent); }
.social-links a { background:linear-gradient(120deg,#a12c5526,#32205820); border-color:#d078a22f; color:#d5bed8; }
.site-footer { background:linear-gradient(90deg,#100915,#180b19,#0d0916); border-color:#a537683d; }
.motion-control { background:linear-gradient(120deg,#8b264224,#41306322); border-color:#ac54794d; }
.motion-control[aria-pressed=true] { border-color:#e37a99a0; box-shadow:0 0 20px #cb365623; }
.motion-control[aria-pressed=true] .motion-state { color:#ffa8bc; }
.mobile-nav { background:linear-gradient(135deg,#281127fb,#100c1cfc); }
.game-dialog,.media-dialog { background:radial-gradient(ellipse at top right,#6b204536,transparent 60%),#160c1d; border-color:#d8679875; }
.filter.active,.gallery-tab.active { background:linear-gradient(115deg,#8d29413b,#49287136); border-color:#d7759a80; }
@keyframes smoke-fallback { from{transform:translateY(4%) scale(1.1) rotate(-4deg)} to{transform:translateY(-8%) scale(1.25) rotate(5deg)} }
@media(max-width:1200px) { .featured-copy{padding:29px 25px}.game-grid{gap:18px}.game-card h3{font-size:18px}.game-card-copy{padding-inline:2px}.card-index span{font-size:6.5px} }
@media(max-width:980px) { .game-card h3{font-size:22px}.card-index span{font-size:8px}.hero-portal{right:-4%;width:62vw;top:27%}.gallery-grid{grid-template-rows:190px 190px} }
@media(max-width:700px) { .hero-shade{background:linear-gradient(90deg,#100916b8,#0b071379),linear-gradient(0deg,#0c0712,transparent 83%)}.hero-portal{right:-18%;width:95vw;top:22%}.hero h1{font-size:clamp(42px,9.4vw,65px)}.games-section{overflow:clip}.games-section::before{width:460px;height:460px;left:-310px;top:130px}.featured-game{padding:7px;margin-top:35px}.featured-art{min-height:295px}.featured-copy{padding:28px 20px 25px}.game-card-copy{padding:20px 8px 19px}.game-grid{gap:24px}.game-card h3{font-size:24px}.gallery-grid{grid-template-columns:1fr;grid-template-rows:320px 240px 240px;gap:20px}.contact-section{padding-block:80px 70px}.contact-portal{width:480px;height:480px;margin:-240px}.contact-content h2{font-size:34px}.hero-constellation span:nth-child(1){top:17%;left:83%} }
@media(max-width:370px) { .hero h1{font-size:39px}.contact-content h2{font-size:30px}.featured-copy{padding-inline:16px} }

/* Keep the supplied logo's precise ink shape, with its white background transparent. */
.brand-logo { filter:url('#logo-ink') drop-shadow(0 0 5px #d38ea54d); mix-blend-mode:normal; }
.creator-seal img { filter:url('#logo-ink') drop-shadow(0 0 13px #d55d9460); mix-blend-mode:normal; }
.creator-seal:hover img { filter:url('#logo-ink') drop-shadow(0 0 23px #fb85b08c); }
.creator-seal.awakened img { filter:url('#logo-ink') drop-shadow(0 0 32px #ff9fc5cc); }
@keyframes brand-breathe { 0%,100%{filter:url('#logo-ink') drop-shadow(0 0 2px #ed769a20)} 50%{filter:url('#logo-ink') drop-shadow(0 0 8px #f198bb80)} }
.media-content>img { animation:media-dissolve .4s ease-out; }
.detail-hero { animation:media-dissolve .55s ease-out; }
.media-navigation button { background:linear-gradient(130deg,#6b264025,#34205425); border-color:#c16b9560; transition:box-shadow .25s,transform .25s; }
.media-navigation button:hover { box-shadow:0 0 20px #d7538445; transform:translateY(-2px); }
@keyframes media-dissolve { from{opacity:.1;filter:brightness(.55) saturate(1.3)} to{opacity:1;filter:brightness(1) saturate(1)} }