/* Sky Sunder restrained brand atmosphere. The home emblem intentionally stays static; motion belongs
   to a broad, slow energy flare in the sky and to the short post-Single Player cinematic. */

/* A light violet grade quiets the detailed sky without flattening the artwork. The moving band is
   deliberately low-opacity: it should read as fissure energy passing through atmosphere, not a wipe. */
#titleScreen > .ss-menu-atmosphere {
  position:absolute;
  inset:0;
  z-index:1 !important;
  overflow:hidden;
  pointer-events:none;
}

.ss-menu-atmosphere::before,
.ss-menu-atmosphere::after {
  content:"";
  position:absolute;
  pointer-events:none;
}

.ss-menu-atmosphere::before {
  inset:0;
  background:
    radial-gradient(ellipse 48% 54% at 50% 34%,rgba(41,9,73,.34),rgba(57,20,91,.17) 58%,transparent 86%),
    linear-gradient(180deg,rgba(55,16,92,.12),rgba(42,12,75,.2) 58%,rgba(15,5,35,.3));
}

.ss-menu-atmosphere::after {
  inset:-42% -55%;
  background:linear-gradient(115deg,
    transparent 27%,
    rgba(123,44,197,0) 32%,
    rgba(128,48,207,.04) 38%,
    rgba(174,91,241,.085) 44%,
    rgba(244,217,255,.14) 50%,
    rgba(178,91,241,.09) 57%,
    rgba(111,39,185,.035) 64%,
    transparent 73%);
  mix-blend-mode:screen;
  filter:blur(10px);
  transform-origin:50% 50%;
  transform:translate3d(-37%,1.2%,0) rotate(-.45deg) scale(.985);
  animation:ssMenuAtmosphereShimmer 28s linear infinite;
  will-change:transform,opacity;
}

@keyframes ssMenuAtmosphereShimmer {
  0% { opacity:.24; transform:translate3d(-37%,1.2%,0) rotate(-.45deg) scale(.985); }
  10% { opacity:.58; transform:translate3d(-27%,.6%,0) rotate(-.28deg) scale(.994); }
  17% { opacity:.5; transform:translate3d(-30%,.8%,0) rotate(-.33deg) scale(.991); }
  31% { opacity:.73; transform:translate3d(2%,-.5%,0) rotate(.08deg) scale(1.008); }
  38% { opacity:.6; transform:translate3d(-1%,-.35%,0) rotate(.02deg) scale(1.004); }
  55% { opacity:.77; transform:translate3d(36%,-1.1%,0) rotate(.42deg) scale(1.018); }
  64% { opacity:.54; transform:translate3d(29%,-.8%,0) rotate(.32deg) scale(1.013); }
  70% { opacity:.67; transform:translate3d(33%,-1%,0) rotate(.38deg) scale(1.016); }
  85% { opacity:.64; transform:translate3d(-17%,.45%,0) rotate(-.18deg) scale(.998); }
  91% { opacity:.45; transform:translate3d(-14%,.35%,0) rotate(-.14deg) scale(1); }
  100% { opacity:.24; transform:translate3d(-37%,1.2%,0) rotate(-.45deg) scale(.985); }
}

/* Pointer-reactive flare from the upper-right light source. It is almost absent at rest; JS only raises
   these variables when the cursor enters the source's influence radius. This is intentionally separate
   from the ambient shimmer above so the two motions never feel mechanically locked together. */
.ss-menu-lens-flare {
  position:absolute;
  top:-10%;
  right:-10%;
  width:min(1040px,72vw);
  aspect-ratio:1.2;
  opacity:var(--ss-lens-opacity,.02);
  transform:scale(var(--ss-lens-scale,.72));
  transform-origin:72% 24%;
  filter:blur(var(--ss-lens-blur,13px));
  mix-blend-mode:screen;
  will-change:opacity,transform,filter;
  background:radial-gradient(ellipse at 73% 25%,rgba(255,245,219,.58) 0 1.2%,rgba(210,165,255,.3) 4%,rgba(131,58,209,.12) 17%,transparent 48%);
}

.ss-menu-lens-flare::before,
.ss-menu-lens-flare::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.ss-menu-lens-flare::before {
  top:24.7%;
  right:-4%;
  bottom:auto;
  left:-22%;
  height:5px;
  background:linear-gradient(90deg,transparent,rgba(139,58,219,.08) 18%,rgba(209,150,255,.23) 54%,rgba(255,244,219,.48) 73%,rgba(182,100,241,.15) 86%,transparent);
  box-shadow:0 0 13px rgba(188,110,242,.24),0 0 32px rgba(117,43,190,.14);
  filter:blur(1.4px);
}

.ss-menu-lens-flare::after {
  left:73%;
  top:25%;
  right:auto;
  bottom:auto;
  width:190px;
  height:190px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:repeating-conic-gradient(from 4deg,rgba(255,242,210,.45) 0deg .45deg,transparent .8deg 10deg);
  -webkit-mask-image:radial-gradient(circle,transparent 0 7%,#000 21%,transparent 72%);
          mask-image:radial-gradient(circle,transparent 0 7%,#000 21%,transparent 72%);
  filter:blur(.55px) drop-shadow(0 0 11px rgba(213,156,255,.32));
}

.ss-menu-lens-flare i {
  position:absolute;
  display:block;
  box-sizing:border-box;
  pointer-events:none;
  font-style:normal;
}

.ss-lens-source {
  left:73%;
  top:25%;
  width:94px;
  height:94px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(255,232,190,.64);
  background:radial-gradient(circle,#fff9de 0 3%,rgba(244,213,255,.82) 7%,rgba(181,105,236,.36) 18%,rgba(111,43,181,.1) 43%,transparent 68%);
  box-shadow:0 0 17px rgba(255,225,186,.54),0 0 42px rgba(185,102,242,.4),0 0 105px rgba(109,39,179,.28);
}

.ss-lens-beam {
  left:73%;
  top:25%;
  width:88%;
  height:2px;
  transform-origin:0 50%;
  border-radius:100%;
  background:linear-gradient(90deg,rgba(255,246,221,.68),rgba(206,143,250,.24) 13%,rgba(122,47,194,.08) 43%,transparent 82%);
  box-shadow:0 0 8px rgba(207,139,250,.25);
}

.ss-lens-beam-1 { transform:rotate(180deg); height:2.8px; opacity:.74; }
.ss-lens-beam-2 { transform:rotate(166deg); width:76%; opacity:.5; }
.ss-lens-beam-3 { transform:rotate(195deg); width:70%; opacity:.52; }
.ss-lens-beam-4 { transform:rotate(145deg); width:56%; height:1.4px; opacity:.38; }
.ss-lens-beam-5 { transform:rotate(214deg); width:52%; height:1.5px; opacity:.4; }
.ss-lens-beam-6 { transform:rotate(102deg); width:39%; height:1.2px; opacity:.3; }

.ss-lens-ring {
  border-radius:50%;
  border:2px solid rgba(202,135,246,.26);
  background:radial-gradient(circle,transparent 48%,rgba(139,61,211,.08) 58%,transparent 72%);
  box-shadow:inset 0 0 13px rgba(188,109,238,.12),0 0 12px rgba(105,39,174,.11);
}

.ss-lens-ring-1 { left:55%; top:39%; width:72px; height:72px; opacity:.72; }
.ss-lens-ring-2 { left:40%; top:52%; width:112px; height:112px; opacity:.5; border-width:3px; }
.ss-lens-ring-3 { left:25%; top:65%; width:56px; height:56px; opacity:.6; }
.ss-lens-ring-4 { left:9%; top:76%; width:146px; height:146px; opacity:.32; border-width:4px; }

/* The clash scene is the brief screen reached immediately after Single Player. */
#clash .cineCornerBrand { display:none; }

#clash.ss-solo-intro #cineIntro .cineVeil {
  background:
    radial-gradient(ellipse 66% 52% at 50% 48%,rgba(28,8,52,.42),rgba(21,5,43,.62) 66%,rgba(8,3,20,.82)),
    linear-gradient(180deg,rgba(70,19,108,.52),rgba(21,5,44,.72));
}

#clash.ss-solo-intro .cineCornerBrand {
  position:absolute;
  right:clamp(24px,3.2vw,64px);
  bottom:clamp(30px,4.2vh,58px);
  z-index:3;
  display:block;
  width:clamp(82px,8.5vw,142px);
  height:auto;
  opacity:1;
  filter:
    drop-shadow(0 8px 12px rgba(0,0,0,.82))
    drop-shadow(0 0 16px rgba(135,57,220,.5));
  pointer-events:none;
}

#clash.ss-solo-intro #clashTitle.ascSweep {
  width:min(1180px,82vw);
  max-width:82vw;
  margin:0;
  color:#e7c778;
  font-size:clamp(28px,4.1vw,58px);
  line-height:1.25;
  letter-spacing:.14em;
  text-align:center;
  white-space:normal;
  text-wrap:balance;
  text-shadow:0 3px 8px rgba(0,0,0,.92),0 0 24px rgba(210,152,57,.36);
}

@keyframes ssSoloMotto {
  0% { opacity:0; transform:translateY(12px) scale(.985); }
  15% { opacity:1; transform:none; }
  84% { opacity:1; transform:none; }
  100% { opacity:0; transform:translateY(-5px) scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
  .ss-menu-atmosphere::after { animation:none; opacity:0; }
  .ss-menu-lens-flare { opacity:.02; transform:scale(.72); }
  #clash.ss-solo-intro #clashTitle.ascSweep { animation:none !important; opacity:1; transform:none; }
}

@media (max-width:700px) {
  #clash.ss-solo-intro .cineCornerBrand { width:74px; right:18px; bottom:24px; }
  #clash.ss-solo-intro #clashTitle.ascSweep { max-width:76vw; font-size:clamp(22px,6vw,38px); }
}