/* Scroll-directed class theatre. Without enhancement, every class remains readable. */
.scene-button { font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.scene-label { gap:16px; }
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.ascension-section { background:#0d1113; }
.ascension-intro { padding-top:110px; padding-bottom:64px; }
.ascension-intro .section-heading { margin-bottom:0; }
.ascension-runway { position:relative; }
.ascension-stage {
  position:relative;
  isolation:isolate;
  overflow:clip;
  background:#0b1013;
  border-top:1px solid #ffffff1f;
  border-bottom:1px solid #ffffff1f;
}
.ascension-stage::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  box-shadow:inset 0 0 130px 30px #060a0d70;
}
.ascension-stage-top {
  position:relative;
  z-index:5;
  height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 var(--gutter);
  font-size:11px;
  font-weight:600;
  letter-spacing:.13em;
  border-bottom:1px solid #ffffff12;
}
.ascension-stage-label { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.ascension-stage-label img { object-fit:contain; }
.ascension-current-family { color:var(--active-color); text-transform:uppercase; }
.ascension-current-family span { padding:0 16px; color:#ffffff4d; }
.ascension-skip { color:#bcc3c7; letter-spacing:0; font-size:13px; white-space:nowrap; padding:12px 0; }
.ascension-skip span { display:inline-block; margin-left:12px; color:var(--active-color); }
.ascension-skip:hover { color:white; }
.ascension-atmosphere {
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  background:radial-gradient(ellipse at 53% 48%,color-mix(in srgb,var(--active-color) 14%,transparent),transparent 62%),
    linear-gradient(90deg,transparent calc(25% - 1px),#ffffff05 25%,transparent calc(25% + 1px),transparent calc(75% - 1px),#ffffff05 75%,transparent calc(75% + 1px));
}
.ascension-orbit {
  position:absolute;
  left:50%;
  top:45%;
  width:min(65vw,76vh);
  aspect-ratio:1;
  border:1px solid color-mix(in srgb,var(--active-color) 25%,transparent);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(var(--orbit-angle,0deg));
}
.ascension-orbit::before,.ascension-orbit::after {
  content:'';
  position:absolute;
  inset:7%;
  border:1px dashed color-mix(in srgb,var(--active-color) 22%,transparent);
  border-radius:50%;
}
.ascension-orbit::after { inset:15%; border-style:solid; opacity:.3; }
.ascension-orbit.orbit-inner { width:min(54vw,63vh); border-radius:0; transform:translate(-50%,-50%) rotate(calc(45deg + var(--orbit-angle,0deg))); opacity:.45; }
.ascension-rays {
  position:absolute;
  left:50%;
  top:10%;
  width:50%;
  height:100%;
  transform:translateX(-50%) rotate(-18deg);
  background:linear-gradient(90deg,transparent 35%,color-mix(in srgb,var(--active-color) 6%,transparent) 49.8%,color-mix(in srgb,var(--active-color) 30%,transparent) 50%,transparent 50.2%);
}
.ascension-particles i {
  position:absolute;
  left:calc(12% + mod(var(--i) * 17,76) * 1%);
  bottom:14%;
  width:2px;
  height:2px;
  background:var(--active-color);
  box-shadow:0 0 8px var(--active-color);
  opacity:0;
  animation:ascension-mote calc(7s + mod(var(--i),4) * 1s) linear infinite;
  animation-delay:calc(var(--i) * -.9s);
  animation-play-state:paused;
}
.ascension-on-screen .ascension-particles i { animation-play-state:running; }
.motion-paused .ascension-particles i { animation-play-state:paused; }
@keyframes ascension-mote {
  0% { transform:translate3d(0,0,0); opacity:0; }
  25% { opacity:.5; }
  75% { opacity:.2; }
  100% { transform:translate3d(35px,-65vh,0); opacity:0; }
}
.ascension-panel {
  position:relative;
  min-height:570px;
  overflow:hidden;
  border-bottom:1px solid #ffffff1a;
  color:var(--ink);
  --panel-shift:0px;
  --art-shift:0px;
  --art-scale:1;
}
.ascension-wordmark {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  text-align:center;
  white-space:nowrap;
  font:800 clamp(86px,17.5vw,330px)/1 var(--display);
  letter-spacing:-.015em;
  color:var(--class-color);
  opacity:.12;
  text-transform:uppercase;
  transform:translate3d(var(--word-shift,0px),0,0);
  pointer-events:none;
}
[data-ascension="sharpshooter"] .ascension-wordmark { font-size:clamp(65px,14vw,265px); top:4%; }
.ascension-art {
  position:absolute;
  left:50%;
  bottom:0;
  width:46%;
  height:100%;
  transform:translateX(-50%) translate3d(var(--art-shift),0,0) scale(var(--art-scale));
  transform-origin:center 70%;
  pointer-events:none;
  mask-image:linear-gradient(#000 70%,transparent 94%);
}
.ascension-halo {
  position:absolute;
  inset:12% 0 0;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--class-color) 17%,transparent),transparent 68%);
}
/* The central artwork is always a character portrait, including load failures. */
.ascension-portrait {
  display:block;
  position:absolute;
  bottom:-2%;
  left:50%;
  height:101%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  object-position:center bottom;
  transform:translateX(-50%);
  opacity:0;
}
.ascension-art.art-loaded .ascension-portrait { opacity:1; }
.ascension-copy {
  position:absolute;
  z-index:3;
  top:34%;
  left:var(--gutter);
  width:31%;
  max-width:400px;
  transform:translate3d(var(--panel-shift),0,0);
}
.ascension-eyebrow { display:block; color:var(--class-color); font-size:10px; font-weight:600; letter-spacing:.15em; line-height:1.6; }
.ascension-copy h3 {
  margin:12px 0 12px;
  font:800 clamp(48px,5.7vw,108px)/.95 var(--display);
  letter-spacing:-.025em;
  text-transform:uppercase;
}
[data-ascension="sharpshooter"] .ascension-copy h3 { font-size:clamp(40px,4.5vw,88px); }
.ascension-line { font-size:clamp(15px,1.3vw,21px); line-height:1.45; max-width:270px; text-wrap:balance; }
.ascension-specialty { display:block; margin-top:26px; max-width:235px; padding-top:14px; border-top:1px solid #ffffff24; color:#a3adb3; font-size:12px; line-height:1.5; }
.ascension-ability {
  position:absolute;
  z-index:3;
  top:44%;
  right:var(--gutter);
  width:24%;
  max-width:320px;
  transform:translate3d(calc(var(--panel-shift) * -.7),0,0);
}
.ascension-ability h4 { display:flex; align-items:center; gap:10px; margin:12px 0 14px; font-size:23px; font-weight:600; letter-spacing:-.02em; }
.ascension-ability h4 img { image-rendering:pixelated; }
.ascension-ability p { color:#b6bec3; font-size:15px; line-height:1.65; text-wrap:pretty; }
.ascension-passives { display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }
.ascension-passives span { color:var(--class-color); font-size:10px; border:1px solid color-mix(in srgb,var(--class-color) 25%,transparent); padding:7px 9px; }
.ascension-stage-bottom { display:none; position:relative; z-index:5; background:linear-gradient(transparent,#0b1013 20%); padding:0 var(--gutter) 18px; }
.ascension-scroll-note { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0 18px; color:#aab4ba; font-size:11px; }
.ascension-scroll-note>span:first-child { display:flex; align-items:center; gap:12px; }
.scroll-tick { color:var(--active-color); font-size:22px; line-height:1; }
.ascension-art-note { font-size:9px; letter-spacing:.16em; opacity:.65; }
.ascension-motion-toggle { background:transparent; padding:10px 0; color:#aab4ba; font-size:11px; }
.ascension-motion-toggle span { color:var(--active-color); padding-left:8px; }
.ascension-selector { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.ascension-family>span { display:block; text-transform:uppercase; font-size:9px; letter-spacing:.18em; color:#8b989f; margin-bottom:10px; }
.ascension-family>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.ascension-family button {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  min-height:44px;
  padding:10px 5px;
  border:1px solid #ffffff16;
  border-right:0;
  background:#ffffff02;
  color:#a9b2b8;
  font-size:12px;
  transition:background .2s,color .2s;
}
.ascension-family button:last-child { border-right:1px solid #ffffff16; }
.ascension-family button img { width:19px; height:19px; image-rendering:pixelated; opacity:.55; }
.ascension-family button:hover { background:#ffffff0c; color:white; }
.ascension-family button[aria-pressed="true"] { color:var(--active-color); background:color-mix(in srgb,var(--active-color) 10%,#0b1013); border-color:color-mix(in srgb,var(--active-color) 38%,transparent); }
.ascension-family button[aria-pressed="true"] img { opacity:1; }
.ascension-family button:focus-visible { outline-offset:-4px; }
.ascension-progress { height:1px; background:#ffffff12; margin-top:18px; overflow:hidden; }
.ascension-progress span { display:block; width:100%; height:100%; background:var(--active-color); transform:scaleX(var(--ascension-progress,.04)); transform-origin:left; }
.ascension-enhanced .ascension-runway { height:calc(100svh + 540svh); }
.ascension-enhanced .ascension-stage { position:sticky; top:0; height:100svh; min-height:620px; }
.ascension-enhanced .ascension-scenes { position:absolute; inset:86px 0 160px; }
.ascension-enhanced .ascension-panel { position:absolute; inset:0; min-height:0; opacity:0; visibility:hidden; border:0; }
.ascension-enhanced .ascension-panel.is-current { opacity:1; visibility:visible; }
.ascension-enhanced .ascension-stage-bottom { display:block; position:absolute; bottom:0; left:0; right:0; }
.ascension-enhanced .ascension-panel[aria-hidden="true"] { pointer-events:none; }
/* Compact landscape windows and motion preferences get the same classes without a long pin. */
.ascension-enhanced.ascension-static .ascension-runway { height:auto; }
.ascension-enhanced.ascension-static .ascension-stage { position:relative; height:780px; min-height:0; }
.ascension-static .ascension-scroll-note>span:first-child .scroll-tick { display:none; }
@media(min-width:1800px) {
  .ascension-copy { left:max(var(--gutter),calc((100vw - 1680px) / 2)); }
  .ascension-ability { right:max(var(--gutter),calc((100vw - 1680px) / 2)); }
}
@media(max-width:1100px) {
  .ascension-selector { gap:15px; }
  .ascension-family button { font-size:11px; gap:4px; }
  .ascension-family button img { display:none; }
  .ascension-copy { width:33%; }
  .ascension-ability { width:25%; }
  .ascension-ability h4 { font-size:21px; }
  .ascension-ability p { font-size:13px; }
}
@media(max-width:700px) {
  .ascension-intro { padding-top:76px; padding-bottom:40px; }
  .ascension-intro .tiny-label { display:none; }
  .ascension-stage-top { height:62px; padding:0 20px; gap:10px; font-size:9px; letter-spacing:.1em; }
  .ascension-stage-label { gap:8px; }
  .ascension-stage-label img { width:15px; height:22px; }
  .ascension-current-family { display:none; }
  .ascension-skip { font-size:11px; }
  .ascension-skip span { margin-left:4px; }
  .ascension-enhanced .ascension-stage { min-height:600px; }
  .ascension-enhanced .ascension-scenes { inset:62px 0 229px; }
  .ascension-wordmark { top:1%; font-size:22vw; opacity:.18; }
  [data-ascension="sharpshooter"] .ascension-wordmark { font-size:14.6vw; top:4%; }
  .ascension-art { height:82%; width:70%; left:62%; bottom:19%; mask-image:linear-gradient(#000 67%,transparent 97%); }
  .ascension-portrait { max-width:100%; }
  .ascension-copy { top:26%; left:20px; width:52%; isolation:isolate; text-shadow:0 1px 8px #000; }
  .ascension-copy::before { content:''; position:absolute; inset:-24px -15px -25px -22px; z-index:-1; background:linear-gradient(90deg,#0b1013eb,#0b101399 60%,transparent); mask-image:linear-gradient(transparent,#000 22%,#000 76%,transparent); pointer-events:none; }
  .ascension-copy h3 { font-size:clamp(37px,10.5vw,66px); margin:9px 0; }
  [data-ascension="sharpshooter"] .ascension-copy h3 { font-size:clamp(26px,7.4vw,48px); }
  .ascension-eyebrow { font-size:8px; letter-spacing:.12em; }
  .ascension-line { font-size:13px; max-width:155px; text-shadow:0 2px 12px #000; }
  .ascension-specialty { font-size:10px; max-width:148px; margin-top:14px; padding-top:10px; color:#c1c9ce; }
  .ascension-ability { top:auto; bottom:0; left:20px; right:20px; width:auto; max-width:none; background:linear-gradient(transparent,#0b1013 18%); padding-top:28px; }
  .ascension-ability>.ascension-eyebrow { display:none; }
  .ascension-ability h4 { font-size:18px; margin:0 0 7px; gap:7px; }
  .ascension-ability h4 img { width:23px; height:23px; }
  .ascension-ability p { font-size:12px; line-height:1.55; max-width:540px; }
  .ascension-passives { margin-top:9px; gap:6px; }
  .ascension-passives span { padding:5px 7px; font-size:8px; }
  .ascension-stage-bottom { padding:0 20px 14px; }
  .ascension-scroll-note { padding:10px 0; gap:8px; font-size:9px; }
  .ascension-scroll-note>span:first-child { gap:7px; }
  .ascension-motion-toggle { font-size:9px; padding:8px 0; }
  .ascension-art-note { display:none; }
  .ascension-selector { gap:8px; }
  .ascension-family>span { font-size:8px; margin-bottom:6px; }
  .ascension-family>div { display:flex; flex-direction:column; gap:2px; }
  .ascension-family button { justify-content:flex-start; padding:5px 8px; font-size:11px; min-height:44px; border:1px solid #ffffff16; }
  .ascension-progress { margin-top:12px; }
  .ascension-orbit { width:88vw; top:34%; }
  .ascension-orbit.orbit-inner { width:70vw; }
  .ascension-enhanced.ascension-static .ascension-stage { height:780px; }
  .ascension-panel { min-height:690px; }
}
@media(max-width:360px) {
  .ascension-stage-top,.ascension-stage-bottom { padding-left:16px; padding-right:16px; }
  .ascension-copy,.ascension-ability { left:16px; }
  .ascension-ability { right:16px; }
  .ascension-selector { gap:5px; }
  .ascension-family button { padding-left:5px; font-size:9px; }
  .ascension-eyebrow { max-width:135px; }
  .ascension-line { max-width:130px; }
  .ascension-specialty { max-width:132px; }
}
@media(prefers-reduced-motion:reduce) {
  .ascension-particles i { animation:none; }
  .ascension-family button { transition:none; }
}
@media(max-width:700px) and (max-height:720px) {
  .ascension-copy { top:24%; }
  .ascension-specialty { display:none; }
}