/* Intrinsic dimensions reserve space; CSS must preserve the source ratio. */
.encounter-art img,.frontier-art img{height:auto;aspect-ratio:1;object-fit:contain;image-rendering:auto;transform:none;filter:none;opacity:1}
.experience-card{display:flex;flex-direction:column;min-height:0;padding:24px 28px 28px}
.card-top{position:static;inset:auto;flex:none;margin:0 0 10px}
.encounter-art,.frontier-art{position:static;inset:auto;width:min(100%,370px);max-width:100%;margin:0 auto;flex:none}
.encounter-art{position:relative}
.encounter-art img{width:100%}
/* Hexarion opening loop: the video frame is 1068/768 of the still (room for the light fans), centred on it so the cube keeps its size. */
.encounter-motion{position:absolute;left:-19.53%;top:-19.53%;width:139.06%;height:139.06%;object-fit:contain;pointer-events:none;opacity:0;transition:opacity .45s ease}
.encounter-art img{transition:opacity .45s ease}
.encounter-art.is-playing .encounter-motion{opacity:1}
.encounter-art.is-playing img{opacity:0}
@media(prefers-reduced-motion:reduce){.encounter-motion{display:none}.encounter-art.is-playing img{opacity:1}}
/* Frontier portal: the game's active (amber) and idle (blue) looks, cross-faded. Both share one crop, so they overlay exactly. */
.frontier-art{position:relative}
.frontier-art .portal-blue{position:absolute;inset:0;opacity:0;animation:portal-swap 6s ease-in-out infinite}
@keyframes portal-swap{0%,38%{opacity:0}50%,88%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.frontier-art .portal-blue{animation:none}}
.frontier-art img{width:100%;height:auto}
.experience-copy{position:static;inset:auto;z-index:auto;padding:0;margin-top:8px;background:none;flex:1}
.experience-copy h3{font-size:2rem;line-height:1.12;margin-bottom:16px}
.experience-copy p{max-width:none;line-height:1.65}
.ui-icon{display:inline-block;flex:0 0 20px;width:20px;height:20px;background:currentColor;-webkit-mask:var(--icon-url) center/contain no-repeat;mask:var(--icon-url) center/contain no-repeat;vertical-align:middle}
.icon-download{--icon-url:url('/assets/icons/download.svg')}
.icon-community{--icon-url:url('/assets/icons/messages-square.svg')}
.icon-apple{--icon-url:url('/assets/icons/apple.svg')}
.icon-android{--icon-url:url('/assets/icons/android.svg')}
.icon-windows{--icon-url:url('/assets/icons/windows.svg')}
.icon-discord{--icon-url:url('/assets/icons/discord.svg')}
.icon-expand{--icon-url:url('/assets/icons/expand.svg')}
.icon-up{--icon-url:url('/assets/icons/chevron-up.svg')}
.button .ui-icon{width:20px;height:20px;flex-basis:20px}
.access-glyph .ui-icon{width:22px;height:22px;flex-basis:22px}
.access-glyph{border:0;border-radius:0}
.back-top{display:inline-flex;align-items:center;gap:9px}
@media(max-width:1050px){.experience-card{padding:23px}.experience-copy h3{font-size:1.875rem}}
@media(max-width:800px){.experience-card{padding:20px}.encounter-art,.frontier-art{width:min(100%,340px);right:auto;top:auto}.experience-copy{padding:0}.experience-copy h3{font-size:1.75rem}.card-top{font-size:.75rem;letter-spacing:.04em}}
@media(max-width:640px){.experience-grid{grid-template-columns:1fr}.experience-card{padding:23px}.encounter-art,.frontier-art{width:min(100%,350px)}.experience-copy h3{font-size:2rem}}
@media(max-width:390px){.experience-card{padding:19px}.experience-copy h3{font-size:1.8rem}}