/* Interaction refinements. Content is visible before and without JavaScript. */
:root {
  --refine-ease: cubic-bezier(.2,.7,.2,1);
}
html { scroll-padding-top: 138px; }
main [id] { scroll-margin-top: 138px; }
body:not(.is-loading) [data-loader] { display: none !important; }
.download-platform__button[aria-disabled="true"] { cursor: not-allowed; opacity: .6; transform: none !important; }
.download-availability { margin: 22px auto 0; max-width: 42ch; text-align: center; color: #e0ba7a; font-size: 14px; line-height: 1.9; }
html[lang="ar"] .download-page .download-hero__title { font-family: var(--ref-font-ar); line-height: 1.5; }
html[lang="ar"] .download-page .download-hero__copy { line-height: 1.9; }
body.media-preview-open, body.m36-menu-open { overflow: hidden; }
body:not(.is-loading) [data-loader] { display: none !important; }
.reveal, .reveal.is-visible { opacity: 1; transform: none; }
.animated-gradient-border-layer { animation: none !important; }

/* Stationary scenery keeps attention on content and deliberate interactions. */
.character-hero .hero-bg-layer::after, .character-card::before,
.preorder-bg, .preorder-dust, .preorder-poster,
.media-section::after, .download-hero::before, .download-dust,
.download-frame, .download-frame::after, .skin-showcase::after, .skin-item {
  animation: none !important;
}

body :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid #f1c477 !important;
  outline-offset: 5px !important;
}
body :is(input, textarea, select):focus-visible { outline-offset: 3px !important; }
.skip-link { z-index: 10000 !important; }
.m36-lang__toggle, .m36-menu-btn, .m36-drawer__close,
.m36-language-item, .m36-mainnav__link, .m36-drawer-link,
.carousel-arrow, .character-mode-toggle, .hero-portrait,
.btn, .ref-outline-btn, .ref-gold-btn, .about-gold-btn, .hn40-btn,
.m39-footer__contact-btn, .refine-video-toggle {
  transition: background-color 180ms ease, border-color 180ms ease,
    color 180ms ease, box-shadow 180ms ease, transform 180ms var(--refine-ease);
}
.m36-lang__toggle svg { transition: transform 180ms var(--refine-ease); }
.m36-lang.is-open .m36-lang__toggle svg { transform: rotate(180deg); }
.m36-lang.is-open .m36-lang__menu { animation: refine-menu-in 180ms var(--refine-ease); }
.m36-drawer {
  visibility: hidden;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  transition: transform 300ms var(--refine-ease), visibility 300ms !important;
}
.m36-menu-open .m36-drawer { visibility: visible; }
.m36-drawer__languages { overscroll-behavior: contain; }
.m36-drawer-link:focus-visible, .m36-language-item:focus-visible {
  background: rgba(217,173,99,.1);
  outline-offset: -3px !important;
}
.m36-menu-open .m36-drawer-link { animation: refine-menu-in 260ms var(--refine-ease) both; }
.m36-menu-open .m36-drawer-link:nth-child(2) { animation-delay: 30ms; }
.m36-menu-open .m36-drawer-link:nth-child(3) { animation-delay: 60ms; }
.m36-menu-open .m36-drawer-link:nth-child(4) { animation-delay: 90ms; }
.m36-menu-open .m36-drawer-link:nth-child(5) { animation-delay: 120ms; }
[data-character-track] { touch-action: pan-y; }
[data-media-open]:focus-visible { outline-offset: -5px !important; }
.media-dialog[open] { animation: refine-menu-in 220ms var(--refine-ease); }
.media-dialog::backdrop { background: rgba(0,0,0,.88); }
.refine-video-toggle {
  position: absolute;
  z-index: 5;
  inset-inline-end: 24px;
  bottom: 24px;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid rgba(237,202,143,.5);
  border-radius: 3px;
  background: rgba(10,10,10,.84);
  color: #f5e4c8;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
@media (hover:hover) and (pointer:fine) {
  :is(.btn,.ref-outline-btn,.ref-gold-btn,.about-gold-btn,.hn40-btn,.m39-footer__contact-btn):hover {
    transform: translateY(-2px);
  }
  :is(.carousel-arrow,.m36-menu-btn,.m36-drawer__close,.refine-video-toggle):hover {
    border-color: #d9ad63;
    background-color: rgba(217,173,99,.14);
  }
  :is(.ref-project-card__link,.media-item,.press-asset):hover img {
    scale: 1.025;
  }
  :is(.ref-project-card__link,.media-item,.press-asset) img {
    transition: scale 550ms var(--refine-ease);
  }
}
@keyframes refine-menu-in {
  from { opacity: .55; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .preorder-bg, .preorder-fog, .preorder-ghost-scene { transform: none !important; }
}