/* One rhythm: white canvas, staggered arrivals, autonomous print textures. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-open-ms:180;--motion-change-ms:200;--motion-feedback:180ms}
/* Structural defaults: future dialogs and their media need no registration. */
dialog[open]{animation:site-dialog-open calc(var(--motion-open-ms)*1ms) var(--motion-ease) backwards}
dialog[open]::backdrop{animation:site-backdrop-open calc(var(--motion-open-ms)*1ms) ease-out backwards}
@keyframes site-dialog-open{from{opacity:0;scale:.985;translate:0 8px}to{opacity:1;scale:1;translate:0 0}}
@keyframes site-backdrop-open{from{opacity:0}to{opacity:1}}
.motion-off dialog[open],.motion-off dialog[open]::backdrop{animation:none}
body,.hero,.brand-section,.journal-section,.ticker-frame{background:#fff}
.hero{--mx:0;--my:0}
.hero-enter,#hero-title .line>span,.brand-universe{animation:none!important}
.brand-universe,.game-character,.world,.game-title{transform:none!important;translate:none!important}
.game-title{transform:rotate(-4deg)!important}
main>section{position:relative;isolation:isolate}
.ambient-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;contain:paint}
.ambient-piece{position:absolute;display:block;width:var(--size,70px);height:var(--size,70px);border-radius:50%;opacity:.3;pointer-events:none}
.texture-0{background:radial-gradient(circle,hsl(var(--hue) 70% 58% / .7) 1.5px,transparent 2px) 0 0/6px 6px;background-color:#f4d56555}
.texture-1{background:linear-gradient(140deg,#e5c5ff90,#ffdb9666);border:1px solid #ffffffb3;backdrop-filter:blur(8px);box-shadow:inset 0 0 18px #ffffff99}
.texture-2{background:linear-gradient(40deg,#ffd874,#b28ce9);filter:blur(10px)}
.shape-1{border-radius:22%;aspect-ratio:1}
.shape-2{clip-path:polygon(50% 0,62% 35%,100% 50%,65% 63%,50% 100%,36% 65%,0 50%,35% 37%)}
.header nav{position:relative;isolation:isolate}
.nav-follow{position:absolute;z-index:-1;border-radius:30px;background:#eee8f8;transform-origin:top left;pointer-events:none}
.nav-follow[hidden]{display:none}
.header nav>a[aria-current]{color:#65509f}
.social-card,.social-card:hover,.social-x:hover{transform:none;rotate:none;box-shadow:none;transition:background-color 240ms ease}
.social-card:hover{background:#f1d5de}.social-x:hover{background:#ddd5f4}
.social-card .card-deco{position:absolute;right:-12%;top:-30%;height:160%;width:auto;max-width:none;color:#493865;opacity:.2;pointer-events:none;animation:none;transform:rotate(-12deg)!important}
.social-card .cien-mark{font:900 clamp(190px,22vw,340px)/1.2 var(--display);letter-spacing:-.08em;top:-10%;right:-18%;white-space:nowrap}
.social-card strong,.social-card>span:not(.card-deco){position:relative;z-index:1}
.text-link,.replay,.social-card strong>span{transition:opacity 240ms ease,background-color 240ms ease}
.replay:hover,.text-link:hover>span,.footer-wordmark:hover span,.company-mark:hover .mark-star{transform:none}
.social-card:is(:hover,:focus-visible) strong>span{transform:translate(3px,-3px)}
.arrow,.social-card strong>span{display:inline-block;transition:transform 240ms var(--motion-ease)}
.replay{display:flex;align-items:center;gap:8px;font-size:12px;background:#fff;border-color:#dcd5e5}
.replay-icon{width:18px;height:18px;flex:none}.replay span{margin:0}
.replay:hover{background:#f4edff}.replay:active{background:#e9dff8}
.pointer-feedback{position:fixed;z-index:100;width:42px;height:42px;margin:-21px;border:2px solid #8761be;background:#d4b5f020;border-radius:50%;pointer-events:none}
.pointer-feedback:after{content:'';position:absolute;inset:7px;border:2px solid #d9ac35;border-radius:50%}
.motion-off .ambient-field{display:none}
.motion-off .pointer-feedback{display:none}
.motion-off .reveal{opacity:1;transform:none}
@media(max-width:600px){.ambient-piece{width:calc(var(--size)*.65);height:calc(var(--size)*.65)}.social-card .cien-mark{font-size:240px}}

.social-card img.cien-mark{width:145%;height:145%;object-fit:contain;right:-25%;top:-22%;opacity:.2}

/* Stronger print texture: visible dots, a frosted grain layer, and soft colour bloom. */
.texture-0{background:radial-gradient(circle,#8c5ac4 1.7px,transparent 2.2px) 0 0/7px 7px;background-color:#f9d77688}
.texture-1{background:radial-gradient(circle,#fff9 .65px,transparent 1px) 0 0/3px 3px,linear-gradient(140deg,#c4ace4bb,#ffda95aa);border-color:#d8c8e8;backdrop-filter:blur(9px)}
.texture-2{filter:blur(7px)}

/* Two identical groups include their trailing gap, so the loop boundary is exact. */
.ticker>.ticker-track{gap:0;animation:marquee 120s linear infinite}
.ticker-group{display:flex;align-items:center;gap:50px;flex:none;padding-right:50px}
.game-title{width:44%;left:5%;top:35%;overflow:visible}
.game-title img{display:block;object-fit:contain;max-width:100%;height:auto}
.game-title img.game-subtitle{width:100%;margin-top:18px}
.game-info>div:first-child{flex:1;min-width:0}
.game-info h3{white-space:normal;overflow:visible;line-height:1.5}
.game-caption{line-height:1.8}
.game-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.cien-update{display:flex;align-items:center;justify-content:center;padding:7px 12px;align-self:center;order:2;transition:opacity 200ms ease,translate 250ms ease}
.cien-update:focus-visible{outline:2px solid var(--purple);outline-offset:5px;border-radius:4px}

.pill .arrow,.social-card .social-arrow{display:grid;place-items:center;flex:none;line-height:1;translate:none}
.arrow svg,.social-arrow svg{display:block;width:22px;height:22px;transition:transform 240ms var(--motion-ease)}
.pill:is(:hover,:focus-visible) .arrow,.social-card:is(:hover,:focus-visible) .social-arrow{transform:none}
.social-card:is(:hover,:focus-visible) .social-arrow svg{transform:translateX(2px)}
.social-card .social-arrow{width:46px;height:46px;border:1px solid #6d5b8755;border-radius:50%;background:#ffffff55}
.social-card{background:#f0d8e480;border:1px solid #ffffffb3;backdrop-filter:blur(18px) saturate(115%);box-shadow:inset 0 1px 0 #fff9;isolation:isolate}
.social-card.social-x{background:#e2dcf480}
.social-card:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,#fff8 .6px,transparent .9px) 0 0/3px 3px;opacity:.38;z-index:0}
.social-card:hover{background:#f0d8e4b3}.social-card.social-x:hover{background:#e2dcf4b3}
.social-card .card-deco{filter:blur(1px)}
@media(max-width:1000px){.game-info{align-items:flex-start;flex-wrap:wrap}.game-actions{justify-content:flex-start}}
@media(max-width:600px){.ticker-group{gap:28px;padding-right:28px}.game-title{width:62%;left:4%;top:auto;bottom:8%}.game-title img.game-subtitle{margin-top:8px}.game-actions{display:grid;width:100%;gap:12px;margin-top:18px}.game-info .pill{margin-top:0}.social-card .social-arrow{width:40px;height:40px}}

@media(max-width:600px){.game-title{width:86%;left:7%;bottom:7%}.art-shade{background:linear-gradient(0deg,#10172cb3,transparent 65%)}.game-actions .pill{width:100%}}

/* Caption arrows share a row; the small creator link remains secondary. */
.social-card .social-caption{display:flex;align-items:center;gap:22px;margin-top:14px;min-height:46px}
.social-caption>span:first-child{line-height:1.5}
.featured{transition:translate 450ms var(--motion-ease),box-shadow 450ms ease}
.game-character,.game-title,.world,.game-motes{transition:scale 650ms var(--motion-ease),filter 650ms ease}
.game-character,.game-motes{transform-origin:65% 65%}
.game-title{z-index:4}
.game-motes{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;mix-blend-mode:lighten}
@media(hover:hover){.featured:hover{translate:0 -3px;box-shadow:0 18px 45px #28203914}.featured:hover .game-character,.featured:hover .game-motes{scale:1.025}.featured:hover .game-title{scale:1.035}.featured:hover .world{scale:1.012;filter:blur(1.5px)}}
.motion-off .featured,.motion-off .game-character,.motion-off .game-title,.motion-off .world,.motion-off .game-motes{transition:none;scale:1;translate:none;filter:none}

/* Quiet halftone wordmark and one contextual return control. */
.footer-wordmark{gap:24px}
.footer-wordmark .footer-dots{font:inherit;font-size:1.18em;letter-spacing:inherit;color:transparent;background:radial-gradient(circle,#fff 1px,transparent 1.3px) 0 0/4px 4px;background-clip:text;-webkit-background-clip:text;opacity:.34}
.footer-wordmark>span{flex:none}
.footer-bottom>a:last-child{margin-left:auto;width:auto;text-align:right}
.back-top{position:fixed;right:18px;bottom:18px;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:54px;gap:1px;border:1px solid #8b73db40;border-radius:24px;background:#ffffffd9;backdrop-filter:blur(10px);color:var(--ink);font:600 9px var(--display);letter-spacing:1px;box-shadow:0 4px 18px #27233d12;animation:top-appear 300ms var(--motion-ease) both;transition:background 200ms,translate 200ms}
.back-top[hidden]{display:none}
.back-top svg{width:20px;height:20px;animation:top-nudge 3s ease-in-out infinite}
.back-top:hover{background:#eee8fa;translate:0 -2px}
@keyframes top-appear{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes top-nudge{0%,65%,100%{transform:translateY(0)}80%{transform:translateY(-3px)}}
@media(max-width:600px){.footer-wordmark{font-size:17vw;gap:10px}.footer-wordmark .footer-dots{font-size:1.13em}.footer-bottom{align-items:center}.back-top{right:12px;bottom:12px;width:42px;height:48px}}

.game-actions{flex-direction:column;align-items:stretch;gap:6px}
.game-actions .pill{order:1}
.cien-update img{display:block;width:42px;height:14px}
.cien-update:hover{translate:0 -1px;opacity:.75}
@media(max-width:600px){.game-actions{display:flex;gap:6px}.cien-update{align-self:center}}

/* Keep the header star silhouette fixed; only its translucent colour drifts. */
.company-mark .mark-star{color:transparent;background:linear-gradient(125deg,#b29cde 0%,#dfb4cb 18%,#ece0b5 34%,#a6d4c4 50%,#a3cde6 68%,#d1b9e7 84%,#e0b9cb 100%);background-size:220% 220%;background-position:15% 35%;background-clip:text;-webkit-background-clip:text;-webkit-text-stroke:.25px #a3b7c844;filter:drop-shadow(0 0 2px #b8d9df44);animation:header-crystal-colour 24s ease-in-out infinite alternate;transform:none;scale:1;rotate:none}
@keyframes header-crystal-colour{from{background-position:15% 35%}to{background-position:85% 65%}}

/* Match the source scene: character, foreground branches, motes, then title. */
.game-foreground{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;pointer-events:none;transition:scale 650ms var(--motion-ease);transform-origin:center}
.game-motes{z-index:4}
.game-title{z-index:5}
@media(hover:hover){.featured:hover .game-foreground{scale:1.012}}
@media(max-width:600px){.game-foreground{width:180%;max-width:none;left:-35%}}
.motion-off .game-foreground{scale:1;transition:none}

/* Restore the original large circle name and retain the central scroll cue. */
.brand-section{padding-bottom:155px}
.brand-watermark{font-size:clamp(110px,19vw,300px);opacity:1;color:#eeeafb;z-index:0}
.hero-bottom{border-top:0;justify-content:center}
@media(max-width:600px){.brand-section{padding-bottom:110px}.brand-watermark{font-size:25vw}}

/* Shared CTA feedback; independent translate preserves stagger entrance transforms. */
.pill{box-shadow:none;translate:0 0;scale:1;transition:translate 260ms var(--motion-ease),scale 160ms ease,background-color 240ms ease}
.pill .arrow{overflow:hidden;transition:background-color 240ms ease}
.pill:focus-visible{outline:2px solid var(--purple);outline-offset:5px}
.pill:focus-visible .arrow svg{transform:translateX(4px)}
@media(hover:hover){.pill:hover{translate:0 -3px}.pill:hover .arrow svg{transform:translateX(4px)}.pill.dark:hover{background-color:#37304e}}
.pill:active{translate:0 1px;scale:.98;transition-duration:100ms}
.pill:active .arrow svg{transform:translateX(1px)}