/* MU Beyond cinematic atmosphere. Additive and homepage-only. */
.home-page {
  --cinema-x: 0;
  --cinema-y: 0;
  --cinema-scroll: 0;
  --cinema-ice: #8edcff;
  --cinema-blue: #397cff;
  --cinema-violet: #7c63ff;
  --page-progress: 0;
}

.home-page::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: 2px;
  pointer-events: none;
  transform: scaleX(var(--page-progress));
  transform-origin: 0 50%;
  background: linear-gradient(90deg,#3387ff,#82e7ff 64%,#d7f7ff);
  box-shadow: 0 0 12px rgba(100,218,255,.9);
}

.beyond-cinematic-world {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  isolation: isolate;
}

.beyond-cinematic-world > i {
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: transform, opacity;
}

.beyond-cinematic-world::before,
.beyond-cinematic-world::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -3%;
  pointer-events: none;
  transform-origin: 50% 100%;
  will-change: transform;
}

.beyond-cinematic-world::before {
  height: 46vh;
  opacity: .24;
  background: linear-gradient(180deg,rgba(91,133,199,.56),rgba(9,26,57,.08) 78%,transparent);
  clip-path: polygon(0 100%,0 74%,10% 62%,17% 70%,28% 35%,35% 59%,45% 26%,53% 61%,63% 40%,70% 65%,81% 22%,88% 59%,95% 47%,100% 71%,100% 100%);
  transform: translate3d(calc(var(--cinema-x) * -11px),calc(var(--cinema-scroll) * 20px),0) scale(1.05);
}

.beyond-cinematic-world::after {
  height: 34vh;
  opacity: .18;
  border-radius: 50% 50% 0 0;
  filter: blur(3px);
  background: radial-gradient(ellipse at 50% 0%,rgba(182,224,255,.7),rgba(41,91,163,.18) 42%,transparent 72%);
  transform: translate3d(calc(var(--cinema-x) * -21px),calc(var(--cinema-scroll) * 36px),0);
}

.beyond-aurora {
  inset: -18% -12% 35%;
  opacity: .56;
  filter: blur(30px) saturate(1.35);
  mix-blend-mode: screen;
  background:
    radial-gradient(55% 80% at 18% 30%, rgba(45, 119, 255, .34), transparent 68%),
    radial-gradient(48% 72% at 58% 12%, rgba(77, 224, 255, .22), transparent 70%),
    radial-gradient(46% 76% at 88% 34%, rgba(126, 79, 255, .25), transparent 68%);
  transform: translate3d(calc(var(--cinema-x) * -14px), calc(var(--cinema-y) * -8px), 0) rotate(-3deg);
  animation: beyondAurora 16s ease-in-out infinite alternate;
}

.beyond-moon {
  top: clamp(92px, 10vh, 150px);
  right: clamp(-80px, 5vw, 110px);
  width: clamp(180px, 21vw, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .66;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.9) 0 4%, transparent 5%),
    radial-gradient(circle at 64% 62%, rgba(77,104,163,.3) 0 9%, transparent 10%),
    radial-gradient(circle at 40% 68%, rgba(77,104,163,.24) 0 6%, transparent 7%),
    radial-gradient(circle at 38% 34%, #ffffff 0%, #ddecff 42%, #8ab8ee 72%, #44689f 100%);
  box-shadow: 0 0 55px rgba(160,215,255,.5), 0 0 180px rgba(61,126,255,.28);
  transform: translate3d(calc(var(--cinema-x) * -9px), calc(var(--cinema-scroll) * 42px), 0);
  animation: beyondMoon 7s ease-in-out infinite;
}

.beyond-rays {
  top: clamp(-350px, -22vw, -160px);
  right: clamp(-420px, -24vw, -220px);
  width: min(980px, 82vw);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .24;
  mix-blend-mode: screen;
  background: repeating-conic-gradient(from 10deg, rgba(157,210,255,.22) 0 2deg, transparent 2deg 11deg, rgba(126,96,255,.12) 11deg 13deg, transparent 13deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 0 6%, rgba(0,0,0,.78) 18%, transparent 61%);
  mask: radial-gradient(circle, #000 0 6%, rgba(0,0,0,.78) 18%, transparent 61%);
  animation: beyondSpin 190s linear infinite;
}

.beyond-fog {
  left: -50%;
  width: 200%;
  height: 28vh;
  opacity: .28;
  mix-blend-mode: screen;
  filter: blur(15px);
  background:
    radial-gradient(26% 72% at 12% 56%, rgba(163,207,255,.32), transparent 72%),
    radial-gradient(30% 68% at 42% 48%, rgba(89,140,235,.28), transparent 72%),
    radial-gradient(26% 72% at 72% 56%, rgba(163,207,255,.3), transparent 72%),
    radial-gradient(30% 68% at 98% 48%, rgba(89,140,235,.25), transparent 72%);
}

.beyond-fog-a { top: 32%; animation: beyondFog 82s linear infinite; }
.beyond-fog-b { top: 69%; opacity: .2; transform: scaleY(.75); animation: beyondFog 64s linear infinite reverse; }

.beyond-vignette {
  inset: 0;
  background:
    radial-gradient(90% 72% at 50% 36%, transparent 48%, rgba(2,7,19,.38) 100%),
    linear-gradient(180deg, rgba(3,9,24,.08), rgba(2,7,18,.36));
}

.home-page .site-frame { z-index: 4; }
.home-page .frost-ambience { z-index: 1; }
.home-page .ice-particles { z-index: 2; }
.home-page .spark-bolts { z-index: 3; }

.motion-reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(.985);
  transition: opacity .9s cubic-bezier(.2,.75,.2,1), transform .9s cubic-bezier(.2,.75,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-reveal.motion-in {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}

.motion-tilt {
  --glare-x: 50%;
  --glare-y: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2,.75,.2,1), border-color .3s, box-shadow .35s;
}

.motion-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--glare-opacity, 0);
  background: radial-gradient(280px circle at var(--glare-x) var(--glare-y), rgba(190,232,255,.24), rgba(91,139,255,.08) 32%, transparent 66%);
  mix-blend-mode: screen;
  transition: opacity .25s;
}

.motion-tilt:hover {
  border-color: rgba(137,213,255,.42);
  box-shadow: 0 28px 65px -32px rgba(53,126,255,.72), inset 0 1px 0 rgba(220,244,255,.16);
}

.motion-reveal.motion-tilt {
  transform: perspective(1100px) translate3d(0,30px,0) scale(.985) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

.motion-reveal.motion-in.motion-tilt {
  transform: perspective(1100px) translate3d(0,0,0) scale(1) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

.home-page .realm-cinema {
  box-shadow: 0 34px 90px -62px rgba(55,142,255,.82);
}

/* Reference-inspired finish applied only to the existing MU Beyond sections. */
.home-page .topbar {
  transition: background .35s ease,border-color .35s ease,box-shadow .35s ease;
}

.home-page.cinematic-scrolled .topbar {
  background: linear-gradient(180deg,rgba(10,32,54,.97),rgba(4,16,31,.91));
  border-color: rgba(119,216,255,.48);
  box-shadow: 0 20px 55px -34px rgba(35,151,255,.82),inset 0 1px 0 rgba(223,248,255,.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
}

.home-page .realm-stat-strip,
.home-page .systems-strip,
.home-page .beta-launch-strip,
.home-page .realm-cinema,
.home-page .guild-victories,
.home-page .content-card,
.home-page .guides-strip {
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
  backdrop-filter: blur(10px) saturate(1.12);
}

.home-page .realm-stat-strip,
.home-page .systems-strip {
  border-color: rgba(120,210,255,.3);
  box-shadow: inset 0 1px 0 rgba(223,248,255,.11),0 24px 60px -46px rgba(42,153,255,.72);
}

.home-page .stat {
  transition: transform .35s cubic-bezier(.2,.75,.2,1),background .35s,border-color .35s,box-shadow .35s;
}

.home-page .stat:hover {
  transform: translateY(-3px);
  border-color: rgba(142,225,255,.52);
  background: linear-gradient(145deg,rgba(28,76,114,.64),rgba(5,23,42,.78));
  box-shadow: 0 18px 38px -28px rgba(55,181,255,.92),inset 0 1px 0 rgba(224,248,255,.14);
}

.home-page .beta-launch-strip {
  position: relative;
  overflow: hidden;
  border-color: rgba(119,213,255,.3);
  background-image: radial-gradient(55% 130% at 86% 0%,rgba(94,182,255,.13),transparent 68%);
}

.home-page .beta-launch-strip::after {
  content: "";
  position: absolute;
  inset: -80% auto -80% -30%;
  width: 24%;
  pointer-events: none;
  opacity: .35;
  background: linear-gradient(90deg,transparent,rgba(206,244,255,.32),transparent);
  transform: skewX(-18deg);
  animation: beyondSectionSheen 9s ease-in-out infinite;
}

.home-page .realm-cinema {
  border: 1px solid rgba(115,208,255,.17);
  border-radius: 5px 27px 5px 27px;
  background: radial-gradient(54% 90% at 16% 48%,rgba(33,119,180,.15),transparent 72%),linear-gradient(145deg,rgba(9,31,55,.62),rgba(4,17,33,.4));
  box-shadow: inset 0 1px 0 rgba(221,247,255,.09),0 36px 90px -62px rgba(55,142,255,.82);
}

.home-page .content-grid {
  background: linear-gradient(180deg,rgba(5,19,34,.78),rgba(4,15,29,.9));
}

.home-page .content-card {
  background: radial-gradient(100% 75% at 90% 0%,rgba(51,139,199,.16),transparent 62%),linear-gradient(155deg,rgba(28,69,98,.9),rgba(5,21,37,.96) 26%,rgba(4,16,30,.98));
  border-color: rgba(127,201,235,.44);
  box-shadow: inset 0 1px 0 rgba(220,246,255,.1),inset 0 0 0 4px rgba(4,17,31,.72),0 22px 52px -38px rgba(23,133,218,.72);
}

.home-page .card-head { overflow: hidden; }
.home-page .card-head::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background: linear-gradient(108deg,transparent 30%,rgba(190,235,255,.2) 48%,transparent 66%);
  background-size: 260% 100%;
  animation: beyondHeaderSheen 7.5s ease-in-out infinite;
}

.home-page .content-card:nth-child(2) .card-head::after { animation-delay: 1.2s; }
.home-page .content-card:nth-child(3) .card-head::after { animation-delay: 2.4s; }

.home-page .list-row {
  position: relative;
  transition: transform .28s ease,color .28s ease,background .28s ease,padding .28s ease;
}

.home-page .list-row:hover {
  padding-left: 7px;
  transform: translateX(2px);
  background: linear-gradient(90deg,rgba(77,177,235,.1),transparent 72%);
}

.home-page .list-row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg,#69d6ff,transparent);
  box-shadow: 0 0 8px rgba(105,214,255,.8);
  transition: width .38s ease;
}

.home-page .list-row:hover::after { width: 72%; }

.home-page .guides-strip {
  position: relative;
  overflow: hidden;
  border-color: rgba(126,215,255,.28);
  background-image: radial-gradient(44% 160% at 88% 50%,rgba(67,153,224,.17),transparent 72%);
  box-shadow: inset 0 1px 0 rgba(224,248,255,.1),0 26px 65px -48px rgba(50,157,255,.72);
}

.home-page .guide-link,
.home-page .play-button,
.home-page .beta-expedition-link {
  transition: transform .28s cubic-bezier(.2,.75,.2,1),filter .28s,box-shadow .28s;
}

.home-page .guide-link:hover,
.home-page .play-button:hover,
.home-page .beta-expedition-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
}

@keyframes beyondAurora {
  0% { opacity: .42; filter: blur(34px) saturate(1.2); }
  55% { opacity: .62; filter: blur(25px) saturate(1.5); }
  100% { opacity: .5; filter: blur(31px) saturate(1.35); }
}
@keyframes beyondMoon { 50% { opacity: .76; box-shadow: 0 0 70px rgba(175,225,255,.58), 0 0 210px rgba(61,126,255,.32); } }
@keyframes beyondSpin { to { transform: rotate(360deg); } }
@keyframes beyondFog { from { margin-left: 0; } to { margin-left: -50%; } }
@keyframes beyondSectionSheen { 0%,64% { left:-30%; } 88%,100% { left:122%; } }
@keyframes beyondHeaderSheen { 0%,45% { background-position:145% 0; } 75%,100% { background-position:-45% 0; } }

@media (max-width: 760px) {
  .beyond-moon { right: -82px; width: 230px; opacity: .5; }
  .beyond-rays { right: -350px; width: 720px; opacity: .16; }
  .beyond-aurora { opacity: .38; filter: blur(24px); }
  .beyond-fog { opacity: .15; }
  .motion-reveal { transform: translate3d(0,20px,0); }
  .motion-tilt { transform: none; }
  .motion-tilt::after { display: none; }
  .home-page .realm-cinema { border-radius:4px 20px; }
  .home-page .list-row:hover { padding-left:0;transform:none; }
}

@media (prefers-reduced-motion: reduce) {
  .beyond-cinematic-world > i { animation: none !important; transform: none !important; }
  .motion-reveal, .motion-reveal.motion-in { opacity: 1; transform: none; transition: none; }
  .motion-tilt { transform: none !important; transition: none; }
  .home-page .beta-launch-strip::after,.home-page .card-head::after { animation:none;display:none; }
}