/* Shared controls from Fantasy UI Kit; page-local compositions follow. */
.hw-video { position: relative; min-width: 0; background: #19141d; border: 1px solid #65505c70; border-radius: var(--radius-5); box-shadow: 0 30px 90px #0005, 0 0 80px #f7680809; }
.hw-video__chrome { display: none; }
.hw-video__screen { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: calc(var(--radius-5) - 1px) calc(var(--radius-5) - 1px) 0 0; background: radial-gradient(ellipse at 50% 80%, #422916, #100d13); }
.hw-video__poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.hw-video__screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #100a15b3, #100a151a 75%); }
.hw-video__play { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; border: 0; background: #100a1512; color: #fff; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; text-shadow: 0 1px 7px #000; }
.hw-video__play-icon { display: grid; place-items: center; width: 62px; height: 46px; border-radius: var(--radius-5); background: #ed3326; font-size: 23px; padding-left: 3px; box-shadow: 0 5px 35px #0005; transition: transform .2s, background .2s; }
.hw-video__play:hover .hw-video__play-icon { transform: scale(1.08); background: #ff4131; }
.hw-video__play:focus-visible { outline-offset: -6px; }
.hw-video__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 16px 18px 16px 44px; font-size: 11px; }
.hw-video__caption { display: flex; align-items: center; gap: 9px; color: #a49cae; }
.hw-youtube { display: inline-grid; place-items: center; width: 21px; height: 15px; padding-left: 1px; border-radius: 4px; color: #fff; background: #d7342a; font-size: 8px; }
.hw-video__youtube { color: #e8e0ed; white-space: nowrap; text-decoration: none; }
.hw-video__youtube:hover { color: var(--orange-3); }
.hw-video__close { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; padding: 0; border: 1px solid #ffffff20; border-radius: var(--radius-3); background: #ffffff0a; color: #ddd; font-size: 20px; cursor: pointer; }
.hw-video [hidden] { display: none !important; }
.hw-video iframe { display: block; position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; border: 0; }
.hw-video[data-playing="true"] .hw-video__screen::after { display: none; }
.hw-video[data-playing="true"] .hw-video__caption { display: none; }
.hw-motion { position: absolute; right: 24px; bottom: 42px; z-index: 5; width: 34px; height: 34px; border: 1px solid #ffffff16; border-radius: var(--radius-3); background: #14121d; color: #bfb8cf; cursor: pointer; }
.hw-ghost-hit { position: absolute; z-index: 4; background: transparent; border: 0; border-radius: 35%; cursor: pointer; padding: 0; }
.hw-hero { --hw-text: #f1eff4; --hw-muted: #a9a3af; position: relative; isolation: isolate; overflow: hidden; margin-top: -84px; min-height: 900px; padding: 240px 32px 245px; background: #000; color: var(--hw-text); }
.hw-hero__pixels { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; z-index: 3; pointer-events: none; }
.hw-hero__inner { position: relative; z-index: 2; width: 100%; margin: 0 auto; }
.hw-hero__grid { display: block; }
.hw-hero__copy { width: min(680px, 62vw); margin: 0 auto; text-align: center; }
.hw-hero__title { margin: 0; color: var(--hw-text); font-size: clamp(50px, 5.8vw, 90px); line-height: 1.04; font-weight: 500; letter-spacing: -.055em; }
.hw-hero__sub { max-width: 500px; margin: 26px auto 0; color: var(--hw-muted); font-size: 17px; line-height: 1.7; text-wrap: pretty; }
.hw-hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 44px; }
.hw-hero .btn { position: relative; min-height: 48px; padding: 14px 22px; font-size: 14px; transition: background .2s, box-shadow .2s, border-color .2s; }
.hw-hero .btn--primary { background: var(--orange-3); color: #21140d; box-shadow: 0 4px 30px #f7680814; }
.hw-hero .btn--primary:hover { background: var(--amber-3); box-shadow: 0 4px 36px #f7680830; }
.hw-hero .hw-hero__more { color: #c9c2ce; background: #ffffff06; border: 1px solid #ffffff16; padding-left: 30px; }
.hw-hero .hw-hero__more:hover { border-color: var(--orange-a3); background: var(--orange-a1); }
.hw-hero__trailer-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 10px; border: 0; background: transparent; color: #e2dce8; font: inherit; font-size: 14px; cursor: pointer; }
.hw-hero__trailer-trigger:hover { color: var(--orange-3); }
.hw-hero :is(a,button):focus-visible, .hw-trailer-dialog :is(a,button):focus-visible { outline: 2px solid var(--orange-3); outline-offset: 5px; }
.hw-video-slot { display: none; }
.hw-feature-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hw-feature-card { --r: 0deg; position: absolute; margin: 0; width: clamp(240px, 26vw, 370px); border: 1px solid #ffffff21; border-radius: var(--radius-6); overflow: hidden; background: #111; box-shadow: 0 24px 65px #000a; transform: rotate(var(--r)); }
.hw-feature-card img { display: block; width: 100%; height: auto; }
.hw-feature-card--music { left: -84px; top: 154px; --r: -13deg; }
.hw-feature-card--cosmetics { left: -100px; top: 455px; width: clamp(250px, 29vw, 360px); --r: 7deg; }
.hw-feature-card--crafting { left: 24px; bottom: 128px; width: clamp(230px, 26vw, 330px); --r: -8deg; }
.hw-feature-card--events { right: -84px; top: 150px; --r: 12deg; }
.hw-feature-card--settings { right: -100px; top: 455px; width: clamp(250px, 28vw, 350px); --r: -7deg; }
.hw-feature-card--case { right: 30px; bottom: 138px; width: clamp(270px, 31vw, 390px); --r: 9deg; }
/* Premiere: retain the inline trailer at right, with small feature cards above and below. */
html[data-hero="menu"] .hw-hero { min-height: 940px; padding: 280px 56px 230px; }
html[data-hero="menu"] .hw-hero__inner { max-width: 1180px; }
html[data-hero="menu"] .hw-hero__grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 64px; }
html[data-hero="menu"] .hw-hero__copy { width: 100%; text-align: left; }
html[data-hero="menu"] .hw-hero__title { font-size: clamp(42px, 4.6vw, 66px); }
html[data-hero="menu"] .hw-hero__sub { margin-left: 0; font-size: 16px; }
html[data-hero="menu"] .hw-hero__actions { justify-content: flex-start; }
html[data-hero="menu"] .hw-hero__trailer-trigger { display: none; }
html[data-hero="menu"] .hw-video-slot { display: block; }
html[data-hero="menu"] .hw-video { background: #111; border-color: #292929; box-shadow: none; }
html[data-hero="menu"] .hw-feature-card--music { width: 240px; left: 35px; top: 92px; --r: -9deg; }
html[data-hero="menu"] .hw-feature-card--events { width: 240px; right: 35px; top: 86px; --r: 9deg; }
html[data-hero="menu"] .hw-feature-card--case { width: 300px; top: 110px; bottom: auto; right: calc(50% - 150px); --r: -3deg; }
html[data-hero="menu"] .hw-feature-card--cosmetics { width: 280px; left: 35px; top: auto; bottom: 100px; --r: 7deg; }
html[data-hero="menu"] .hw-feature-card--crafting { width: 280px; left: calc(50% - 140px); bottom: 100px; --r: -4deg; }
html[data-hero="menu"] .hw-feature-card--settings { width: 270px; right: 35px; top: auto; bottom: 100px; --r: -7deg; }
.hw-trailer-dialog { width: min(920px, calc(100vw - 40px)); max-width: none; max-height: calc(100vh - 40px); padding: 0; border: 1px solid #ffffff26; border-radius: var(--radius-6); background: #111; color: #fff; overflow: auto; }
.hw-trailer-dialog::backdrop { background: #000c; backdrop-filter: blur(12px); }
.hw-trailer-dialog .hw-video { border: 0; box-shadow: none; }
.hw-trailer-dialog .hw-video__screen { border-radius: 0; }
@media (min-width: 1600px) {
  .hw-feature-card--music { left: 2%; }
  .hw-feature-card--events { right: 2%; }
  .hw-feature-card--cosmetics { left: -25px; }
  .hw-feature-card--settings { right: -25px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .hw-hero .btn, .hw-hero__trailer-trigger { font-size: 13px; }
  .hw-hero .btn { padding-right: 16px; padding-left: 16px; }
  html[data-hero="menu"] .hw-hero { padding-left: 40px; padding-right: 40px; }
  html[data-hero="menu"] .hw-hero__grid { gap: 40px; }
  html[data-hero="menu"] .hw-hero__title { font-size: 43px; }
}
@media (max-width: 767px) {
  .hw-hero, html[data-hero] .hw-hero { display: flex; flex-direction: column; min-height: 0; padding: 155px 28px 64px; }
  .hw-hero__inner { order: 1; }
  .hw-hero__grid, html[data-hero] .hw-hero__grid { display: block; }
  .hw-hero__copy, html[data-hero] .hw-hero__copy { width: 100%; text-align: left; }
  .hw-hero__title, html[data-hero] .hw-hero__title { font-size: clamp(36px, 8.8vw, 58px); }
  .hw-hero__sub, html[data-hero] .hw-hero__sub { margin-top: 24px; margin-left: 0; font-size: 15px; line-height: 1.7; }
  .hw-hero__actions, html[data-hero] .hw-hero__actions { justify-content: flex-start; margin-top: 38px; gap: 12px; }
  .hw-hero .btn, .hw-hero__trailer-trigger { font-size: 13px; }
  .hw-hero .btn { padding: 13px 16px; }
  .hw-hero .hw-hero__more { padding-left: 25px; }
  .hw-video-slot { margin-top: 65px; }
  .hw-feature-scene { position: relative; inset: auto; order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; margin: 65px auto 0; perspective: none; }
  .hw-feature-card, html[data-hero] .hw-feature-card { position: static; width: auto; min-width: 0; transform: none; animation: none; border-radius: var(--radius-4); aspect-ratio: 1.45; }
  .hw-feature-card img { width: 100%; height: 100%; object-fit: contain; }
  .hw-video__footer { flex-wrap: wrap; gap: 12px; padding: 14px 14px 14px 36px; }
  .hw-video__play-icon { width: 50px; height: 38px; font-size: 18px; }
  .hw-video__play { font-size: 11px; gap: 10px; }
  .hw-motion { right: 20px; bottom: 20px; width: 30px; height: 30px; }
}

/* Reuse the site's heroIn entrance for copy and trailer; keep card tilts intact. */
.hw-hero__title.hero-anim { animation-duration: .8s; }
.hw-hero__sub.hero-anim { animation-delay: .12s; }
.hw-hero__actions.hero-anim { animation-delay: .22s; }
.hw-video-slot.hero-anim { animation-delay: .18s; animation-duration: .95s; }
@media (prefers-reduced-motion: no-preference) {
  html[data-hero="menu"] .hw-feature-card {
    animation: hw-card-enter .9s cubic-bezier(.2,.7,.2,1) var(--enter-delay, .3s) both;
  }
  .hw-feature-card--music { --enter-delay: .24s; }
  .hw-feature-card--events { --enter-delay: .30s; }
  .hw-feature-card--case { --enter-delay: .36s; }
  .hw-feature-card--cosmetics { --enter-delay: .40s; }
  .hw-feature-card--crafting { --enter-delay: .46s; }
  .hw-feature-card--settings { --enter-delay: .52s; }
  .hw-hero__pixels { opacity: 0; transition: opacity .45s ease-out; }
  .hw-hero[data-decor-ready="true"] .hw-hero__pixels { opacity: 1; }
  .hw-hero:not([data-decor-ready="true"]) .hw-ghost-hit { visibility: hidden; pointer-events: none; }
}
@keyframes hw-card-enter {
  from { opacity: 0; translate: 0 24px; scale: .96; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@media (prefers-reduced-motion: reduce) { .hw-hero *, .hw-hero *::before { animation: none !important; transition: none !important; } }