#classes .section-header {
  text-align: center;
  padding: 70px 20px 40px;
  position: relative;
  z-index: 10;
}
#classes .section-header .eyebrow {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #c9a227;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
#classes .section-header .eyebrow::before,
#classes .section-header .eyebrow::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c9a227);
}
#classes .section-header .eyebrow::after {
  background: linear-gradient(90deg, #c9a227, transparent);
}
#classes .section-header h2 {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  color: #f5ecd7;
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin-bottom: 10px;
  text-shadow: 0 0 60px rgba(201,162,39,0.25);
}
#classes .section-header h2 em {
  color: #c9a227;
  font-style: normal;
}
#classes .section-header p {
  color: rgba(245,236,215,0.4);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}
#classes .classes-layout {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px 60px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  position: relative;
  z-index: 5;
  min-height: 600px;
}
#classes .tab-rail {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  list-style: none;
  border-right: 1px solid rgba(201,162,39,0.12);
  position: relative;
}
#classes .tab-rail::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 0;
  width: 2px;
  height: calc(100% / 9);
  background: linear-gradient(to bottom, transparent, #c9a227, transparent);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
  transform: translateY(0%);
  box-shadow: 0 0 12px rgba(201,162,39,0.8);
}
#classes .tab-rail[data-active="0"]::after { transform: translateY(0%); }
#classes .tab-rail[data-active="1"]::after { transform: translateY(100%); }
#classes .tab-rail[data-active="2"]::after { transform: translateY(200%); }
#classes .tab-rail[data-active="3"]::after { transform: translateY(300%); }
#classes .tab-rail[data-active="4"]::after { transform: translateY(400%); }
#classes .tab-rail[data-active="5"]::after { transform: translateY(500%); }
#classes .tab-rail[data-active="6"]::after { transform: translateY(600%); }
#classes .tab-rail[data-active="7"]::after { transform: translateY(700%); }
#classes .tab-rail[data-active="8"]::after { transform: translateY(800%); }
#classes .tab-rail li { flex: 1; }
#classes .tab-btn {
  width: 100%;
  height: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px 0 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.25s;
  text-align: left;
  overflow: hidden;
}
#classes .tab-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(201,162,39,0.08) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.25s;
}
#classes .tab-btn:hover::before,
#classes .tab-btn.is-active::before { opacity: 1; }
#classes .tab-btn .btn-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(201,162,39,0.2);
  background: rgba(201,162,39,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s;
  overflow: hidden;
}
#classes .tab-btn .btn-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0.7) saturate(0.5);
  transition: all 0.3s;
}
#classes .tab-btn:hover .btn-icon,
#classes .tab-btn.is-active .btn-icon {
  border-color: rgba(201,162,39,0.6);
  background: rgba(201,162,39,0.12);
  box-shadow: 0 0 16px rgba(201,162,39,0.2);
}
#classes .tab-btn:hover .btn-icon img,
#classes .tab-btn.is-active .btn-icon img {
  filter: brightness(1.1) saturate(1.3) drop-shadow(0 0 4px rgba(201,162,39,0.5));
}
#classes .tab-btn .btn-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
#classes .tab-btn .btn-name {
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(245,236,215,0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.3s;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#classes .tab-btn .btn-role {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  color: rgba(201,162,39,0);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.3s;
  line-height: 1;
  white-space: nowrap;
}
#classes .tab-btn:hover .btn-name,
#classes .tab-btn.is-active .btn-name { color: #f5ecd7; }
#classes .tab-btn:hover .btn-role,
#classes .tab-btn.is-active .btn-role { color: rgba(201,162,39,0.65); }
#classes .tab-btn .btn-num {
  margin-left: auto;
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  color: rgba(245,236,215,0.12);
  transition: color 0.3s;
  flex-shrink: 0;
}
#classes .tab-btn.is-active .btn-num { color: rgba(201,162,39,0.4); }
#classes .tab-rail li:not(:last-child) .tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0; left: 14px; right: 14px;
  height: 1px;
  background: rgba(201,162,39,0.06);
}
#classes .panel-stage {
  position: relative;
  overflow: hidden;
  background: #060a14;
  min-height: 558px;
}
#classes .panel-stage > .stage-vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 80px rgba(5,8,18,0.6);
  z-index: 3;
  pointer-events: none;
}
#classes .ic-panel {
  display: none;
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
#classes .ic-panel.is-active {
  display: flex;
  align-items: flex-end;
  animation: panelFadeIn 0.55s ease forwards;
}
@keyframes panelFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#classes .ic-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(6,10,20,0.97) 0%, rgba(6,10,20,0.72) 40%, rgba(6,10,20,0.15) 68%, transparent 100%),
    linear-gradient(to top, rgba(6,10,20,1) 0%, transparent 55%);
  z-index: 1;
}
#classes .ic-panel .char-img {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 105%;
  width: auto;
  max-width: 52%;
  object-fit: contain;
  object-position: bottom right;
  z-index: 2;
  filter: drop-shadow(-30px 0 50px rgba(201,162,39,0.3));
}
#classes .ic-panel.is-active .char-img {
  animation: charIn 0.65s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes charIn {
  from { transform: translateX(20px) scale(1.02); opacity: 0; }
  to   { transform: translateX(0) scale(1); opacity: 1; }
}
#classes .ic-box-detail {
  position: relative;
  z-index: 4;
  padding: 32px 36px 44px;
  max-width: 460px;
  width: 55%;
}
#classes .class-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
#classes .class-num-badge {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  color: rgba(201,162,39,0.55);
  text-transform: uppercase;
  border: 1px solid rgba(201,162,39,0.2);
  padding: 3px 8px;
  border-radius: 2px;
}
#classes .class-role-tag {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: rgba(245,236,215,0.3);
  text-transform: uppercase;
}
#classes .ic-box-detail h2 {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.9rem, 3.8vw, 3.4rem);
  color: #f5ecd7;
  text-transform: uppercase;
  line-height: 0.95;
  margin-bottom: 16px;
  text-shadow: 0 0 50px rgba(201,162,39,0.25);
  letter-spacing: 0.02em;
}
#classes .gold-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
#classes .gold-divider span {
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, #c9a227, transparent);
}
#classes .gold-divider i {
  width: 5px;
  height: 5px;
  background: #c9a227;
  transform: rotate(45deg);
  display: block;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(201,162,39,0.8);
}
#classes .class-desc {
  font-size: 0.93rem;
  color: rgba(245,236,215,0.58);
  line-height: 1.8;
  margin-bottom: 24px;
  max-width: 360px;
}
#classes .ic-stats {
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-width: 300px;
  margin-bottom: 24px;
}
#classes .ic-stat-row {
  display: grid;
  grid-template-columns: 30px 1fr 32px;
  align-items: center;
  gap: 10px;
}
#classes .ic-stat-label {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  color: rgba(245,236,215,0.38);
  text-transform: uppercase;
}
#classes .ic-stat-bar-bg {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
#classes .ic-stat-bar {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #7a5e12 0%, #c9a227 60%, #f0d060 100%);
  box-shadow: 0 0 10px rgba(201,162,39,0.6);
  transition: width 0.9s cubic-bezier(0.16,1,0.3,1);
  width: 0%;
}
#classes .ic-stat-val {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  color: rgba(201,162,39,0.7);
  text-align: right;
  letter-spacing: 0.05em;
}
#classes .ic-video-wrap {
  position: relative;
  max-width: 230px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(6,10,20,0.8);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,162,39,0.15);
  transition: box-shadow 0.3s;
}
#classes .ic-video-wrap:hover {
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,162,39,0.45), 0 0 24px rgba(201,162,39,0.12);
}
#classes .ic-video-wrap video {
  width: 100%;
  display: block;
  opacity: 0.88;
}
#classes .ic-video-wrap:hover video { opacity: 1; }
#classes .ic-video-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-top: 1px solid #c9a227;
  border-left: 1px solid #c9a227;
  z-index: 2;
  pointer-events: none;
}
#classes .video-br-corner {
  position: absolute;
  bottom: 0; right: 0;
  width: 12px; height: 12px;
  border-bottom: 1px solid #c9a227;
  border-right: 1px solid #c9a227;
  z-index: 2;
  pointer-events: none;
}
#classes .panel-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,0.04);
  z-index: 10;
}
#classes .panel-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #c9a227, #f0d060);
  box-shadow: 0 0 8px rgba(201,162,39,0.6);
  width: 0%;
  transition: none;
}
#classes .panel-progress-bar.running {
  transition: width 5s linear;
  width: 100%;
}
@media (max-width: 860px) {#classes .classes-layout {
    grid-template-columns: 1fr;
    padding-bottom: 30px;
  }
#classes .tab-rail {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid rgba(201,162,39,0.1);
    padding: 10px;
    gap: 6px;
  }
#classes .tab-rail::after { display: none; }
#classes .tab-rail li { flex: none; }
#classes .tab-btn {
    min-height: auto;
    padding: 8px 12px;
    gap: 8px;
    border: 1px solid rgba(201,162,39,0.1);
    border-radius: 6px;
    background: rgba(13,21,37,0.7);
  }
#classes .tab-btn.is-active {
    border-color: rgba(201,162,39,0.5);
    background: rgba(201,162,39,0.08);
  }
#classes .tab-btn::after { display: none; }
#classes .tab-btn .btn-role,
#classes .tab-btn .btn-num { display: none; }
#classes .panel-stage { min-height: 500px; }
#classes .ic-panel .char-img { max-width: 62%; }
#classes .ic-box-detail { width: 100%; max-width: 100%; padding: 18px 18px 30px; }
#classes .ic-box-detail h2 { font-size: 2rem; }
#classes .ic-panel::before {
    background:
      linear-gradient(to top, rgba(6,10,20,1) 0%, rgba(6,10,20,0.8) 48%, rgba(6,10,20,0.1) 100%),
      linear-gradient(to right, rgba(6,10,20,0.75) 0%, transparent 60%);
  }
#classes .video-br-corner {
  position: absolute;
  bottom: 0; right: 0;
  width: 12px; height: 12px;
  border-bottom: 1px solid #c9a227;
  border-right: 1px solid #c9a227;
  z-index: 2;
  pointer-events: none;
}

}
@media (max-width: 540px) {#classes .section-header { padding: 40px 16px 24px; }
#classes .section-header h2 { font-size: clamp(1.3rem, 7vw, 2rem); }
#classes .section-header p { font-size: 0.78rem; }
#classes .classes-layout { padding: 0 8px 20px; }
#classes .tab-rail { padding: 8px; gap: 4px; }
#classes .tab-btn {
    padding: 6px 8px;
    gap: 6px;
    flex-direction: column;
    align-items: center;
    min-width: 52px;
  }
#classes .tab-btn .btn-icon { width: 30px; height: 30px; }
#classes .tab-btn .btn-icon img { width: 18px; height: 18px; }
#classes .tab-btn .btn-name { font-size: 0.55rem; letter-spacing: 0.04em; }
#classes .tab-btn .btn-text { align-items: center; gap: 2px; }
#classes .panel-stage { min-height: 380px; }
#classes .ic-panel .char-img { max-width: 55%; }
#classes .ic-box-detail { padding: 14px 12px 24px; }
#classes .ic-box-detail h2 { font-size: 1.5rem; }
#classes .class-desc { font-size: 0.78rem; line-height: 1.6; margin-bottom: 14px; }
#classes .ic-stats { gap: 8px; margin-bottom: 14px; }
#classes .ic-video-wrap { max-width: 160px; }
#classes .class-num-badge { font-size: 0.5rem; }
#classes .class-role-tag { font-size: 0.5rem; }
#classes .gold-divider { margin-bottom: 10px; }

}


/* Flame Ascension: animated character stage. */
#classes { position:relative; isolation:isolate; font-family:'Rajdhani',sans-serif; padding-bottom:20px; }
#classes *, #classes *::before, #classes *::after { box-sizing:border-box; }
#classes .section-header p { color:#bcb0a0; }
#classes .classes-layout { grid-template-columns:230px minmax(0,1fr); max-width:1320px; }
#classes .tab-rail { background:linear-gradient(180deg,#17100de6,#0d0b0be6); border:1px solid #b87b3333; border-radius:12px 0 0 12px; padding:8px 0; }
#classes .tab-rail::after { display:none; }
#classes .tab-btn { min-height:65px; border-left:2px solid transparent; }
#classes .tab-btn.is-active { border-left-color:#efb65c; background:linear-gradient(90deg,#c46b252b,transparent); }
#classes .tab-btn .btn-name { color:#c4b6a2; }
#classes .tab-btn.is-active .btn-name { color:#fff1d8; }
#classes .tab-btn:focus-visible { outline:2px solid #efb65c; outline-offset:-4px; }
#classes .panel-stage { min-height:610px; border:1px solid #b87b3333; border-left:0; border-radius:0 12px 12px 0; background:#100d0c; }
#classes .ic-panel { background-image:none !important; }
#classes .ic-panel::before { background:radial-gradient(ellipse at 76% 42%,#a34e172b,transparent 52%),linear-gradient(115deg,#100e0d,#17100d 65%,#0b0b0c); }
#classes .ic-panel::after { content:''; position:absolute; right:5%; bottom:32px; width:49%; height:46px; border:1px solid #d28c414d; border-radius:50%; background:radial-gradient(ellipse,#ed9a3f30,transparent 70%); box-shadow:0 0 35px #cb651520; z-index:1; }
#classes .ic-panel .char-img { right:1%; bottom:42px; height:calc(100% - 68px); width:56%; max-width:none; object-fit:contain; object-position:center; filter:drop-shadow(0 0 22px #dc79252b); pointer-events:none; }
#classes .ic-box-detail { align-self:center; width:46%; max-width:none; padding:36px 16px 36px 34px; }
#classes .ic-box-detail h2 { font-size:clamp(1.9rem,3.1vw,3rem); line-height:1.12; overflow-wrap:normal; }
#classes .class-desc { color:#c5b9a9; font-size:1rem; line-height:1.65; }
#classes .class-role-tag { color:#ae9d86; }
#classes .class-num-badge, #classes .ic-stat-val { color:#edbd6b; }
#classes .ic-stat-label { color:#b8aa96; }
#classes .ic-stat-bar-bg { height:4px; background:#ffffff14; }
#classes .ic-stat-bar { background:linear-gradient(90deg,#a05222,#e8ae50,#ffe1a0); }
#classes .ic-video-wrap { border:1px solid #b87b3355; }
#classes .motion-toggle { display:block; margin:0 auto 20px; padding:8px 18px; color:#ddc39a; border:1px solid #b87b3355; border-radius:20px; background:#17100d; font:600 13px 'Rajdhani',sans-serif; cursor:pointer; }
#classes .motion-toggle:focus-visible { outline:2px solid #efb65c; outline-offset:3px; }
@media(max-width:1000px) and (min-width:861px) {
 #classes .classes-layout { grid-template-columns:190px minmax(0,1fr); }
 #classes .ic-box-detail { padding-left:22px; width:49%; }
 #classes .tab-btn { gap:8px; padding-left:10px; }
}
@media(max-width:860px) {
 #classes .classes-layout { grid-template-columns:minmax(0,1fr); }
 #classes .tab-rail { flex-wrap:nowrap; overflow-x:auto; border-radius:12px 12px 0 0; padding:10px; gap:8px; scrollbar-color:#a87835 #17100d; }
 #classes .tab-rail li { flex:0 0 auto; }
 #classes .tab-btn { min-height:54px; padding:8px 12px; border:1px solid #b87b3333; }
 #classes .panel-stage { border-left:1px solid #b87b3333; border-radius:0 0 12px 12px; min-height:0; }
 #classes .ic-panel { position:relative; inset:auto; }
 #classes .ic-panel.is-active { display:flex; flex-direction:column; align-items:stretch; }
 #classes .ic-panel .char-img { position:relative; order:0; right:auto; bottom:auto; width:100%; height:360px; max-width:100%; margin:12px auto 0; }
 #classes .ic-panel::after { top:342px; bottom:auto; right:20%; width:60%; height:30px; }
 #classes .ic-box-detail { order:1; width:100%; padding:24px; align-self:stretch; }
 #classes .class-desc { max-width:600px; }
 #classes .ic-box-detail h2 { font-size:2rem; }
 #classes .ic-video-wrap { max-width:260px; }
}
@media(max-width:540px) {
 #classes .tab-btn { flex-direction:row; min-width:0; }
 #classes .tab-btn .btn-name { font-size:.65rem; }
 #classes .ic-panel .char-img { height:310px; }
 #classes .ic-panel::after { top:294px; }
 #classes .ic-box-detail { padding:20px; }
 #classes .class-desc { font-size:.95rem; }
}
@media(prefers-reduced-motion:reduce) {
 #classes *, #classes *::before, #classes *::after { animation:none !important; transition:none !important; }
}

/* Ruined sanctuary backdrop and a raised, illuminated summoning dais. */
#classes .ic-panel::before {
  background:
    linear-gradient(90deg,rgba(13,11,10,.98) 0%,rgba(13,11,10,.93) 33%,rgba(13,11,10,.3) 66%,rgba(13,11,10,.22)),
    linear-gradient(0deg,rgba(10,9,9,.96),transparent 36%),
    radial-gradient(ellipse at 76% 45%,rgba(226,131,44,.22),transparent 57%),
    url('../images/s-class-bg-xl.webp') center / cover no-repeat;
}
#classes .panel-stage > .stage-vignette {
  box-shadow:inset 0 0 65px rgba(5,5,8,.55);
}
#classes .ic-panel::after {
  right:8%; bottom:39px; width:43%; height:64px;
  border:2px solid #cf9758;
  background:
    radial-gradient(ellipse at 50% 43%,rgba(255,181,82,.22),transparent 48%),
    repeating-conic-gradient(from 0deg,rgba(228,172,87,.35) 0deg 1deg,transparent 1deg 30deg),
    radial-gradient(ellipse,transparent 55%,#b8803c 57%,#3b2b20 59%,#c89556 61%,#29201a 64%,#65503b 80%,#1b1511 100%);
  box-shadow:
    inset 0 3px 5px #ffdc9a55,
    inset 0 -6px 12px #0009,
    0 5px 0 #725034,
    0 9px 0 #38291e,
    0 12px 0 #1e1813,
    0 17px 12px #000b,
    0 0 32px #e58c3c33;
}
@media(max-width:860px) {
  #classes .ic-panel::before {
    background:
      linear-gradient(0deg,#0d0b0a 15%,rgba(13,11,10,.3) 65%,rgba(13,11,10,.35)),
      radial-gradient(ellipse at 50% 22%,#c176322b,transparent 65%),
      url('../images/s-class-bg-xl.webp') center top / auto 430px no-repeat;
  }
  #classes .ic-panel::after { top:330px; bottom:auto; right:20%; width:60%; height:40px; }
}
@media(max-width:540px) {
  #classes .ic-panel::after { top:283px; height:34px; right:17%; width:66%; }
}

/* Match visible character height to Force Blader, compensating for clip padding.
   Offsets keep the feet on the same platform as each model is enlarged. */
#classes #ic-panel-warrior { --hero-scale:1; --hero-y:0%; }
#classes #ic-panel-blader { --hero-scale:1.13; --hero-y:-1.5%; }
#classes #ic-panel-wizard { --hero-scale:1.06; --hero-y:-2%; }
#classes #ic-panel-force-archer { --hero-scale:1.16; --hero-y:0%; }
#classes #ic-panel-force-shielder { --hero-scale:1.23; --hero-y:-5%; }
#classes #ic-panel-force-blader { --hero-scale:1; --hero-y:0%; }
#classes #ic-panel-gladiator { --hero-scale:2.18; --hero-y:4.5%; }
#classes #ic-panel-force-gunner { --hero-scale:1; --hero-y:0%; }
#classes #ic-panel-dark-mage { --hero-scale:1.23; --hero-y:-2%; }
#classes .ic-panel .class-hero-video {
  scale:var(--hero-scale,1);
  translate:0 var(--hero-y,0%);
  transform-origin:50% 50%;
}

/* Three stone steps in perspective; foot positions share the upper surface. */
#classes .ic-panel::after { display:none; }
#classes .stone-dais {
 position:absolute; right:5%; bottom:6px; width:49%; height:112px;
 background:url('../images/class/stone-dais.svg') center / 100% 100% no-repeat;
 z-index:1; pointer-events:none;
}
#classes .foot-contact {
 position:absolute; left:32%; top:16%; width:36%; height:16%;
 border-radius:50%; background:radial-gradient(ellipse,#080603c9,transparent 72%);
 filter:blur(2px);
}
#classes .ic-panel .class-hero-video { translate:0 var(--foot-shift,0px); }
@media(max-width:860px) {
 #classes .stone-dais { top:320px; bottom:auto; right:14%; width:72%; height:84px; }
}
@media(max-width:540px) {
 #classes .stone-dais { top:271px; right:9%; width:82%; height:78px; }
}

#classes .ic-panel .class-hero-video { scale:calc(var(--hero-scale,1) * .94); }

/* Real weathered stone material; contact shadow lies on the upper stone slab. */
#classes .stone-dais {
 background-image:url('../images/class/stone-dais-real.png');
 height:128px; bottom:-15px;
 filter:brightness(.78) saturate(.75) drop-shadow(0 12px 10px #0009);
}
#classes .foot-contact { top:31%; left:36%; width:28%; height:11%; background:radial-gradient(ellipse,#090604df,transparent 70%); filter:blur(1px); }
@media(max-width:860px) { #classes .stone-dais { height:92px; bottom:auto; } }
@media(max-width:540px) { #classes .stone-dais { height:86px; } }

/* Restore the original illuminated gold platform. */
#classes .stone-dais {
 height:64px; bottom:39px;
 background:
 radial-gradient(ellipse at 50% 43%,rgba(255,181,82,.22),transparent 48%),
 repeating-conic-gradient(from 0deg,rgba(228,172,87,.35) 0deg 1deg,transparent 1deg 30deg),
 radial-gradient(ellipse,transparent 55%,#b8803c 57%,#3b2b20 59%,#c89556 61%,#29201a 64%,#65503b 80%,#1b1511 100%);
 border:2px solid #cf9758; border-radius:50%; filter:none;
 box-shadow:inset 0 3px 5px #ffdc9a55,inset 0 -6px 12px #0009,0 5px 0 #725034,0 9px 0 #38291e,0 12px 0 #1e1813,0 17px 12px #000b,0 0 32px #e58c3c33;
}
@media(max-width:860px) { #classes .stone-dais { top:330px; bottom:auto; height:40px; } }
@media(max-width:540px) { #classes .stone-dais { top:283px; height:34px; } }

/* Transparent drifting embers, contained inside the class showcase. */
#classes .class-embers {
 position:absolute; inset:0; overflow:hidden; z-index:3; pointer-events:none;
 border-radius:inherit;
 -webkit-mask-image:linear-gradient(90deg,#0003,#0007 40%,#000 64%);
 mask-image:linear-gradient(90deg,#0003,#0007 40%,#000 64%);
}
#classes .class-embers::before {
 content:''; position:absolute; inset:35% -5% -25% 35%;
 background:radial-gradient(ellipse at 55% 100%,#fb6b172b,transparent 67%);
 animation:class-ember-glow 6s ease-in-out infinite alternate;
}
#classes .class-ember {
 position:absolute; left:var(--x); bottom:-12px; width:var(--size); height:calc(var(--size) * 1.6);
 border-radius:65% 35% 60% 40%; background:#ffd294;
 box-shadow:0 0 4px #ff9d39,0 0 10px #f34d15;
 opacity:0; will-change:transform,opacity;
 animation:class-ember-rise var(--duration) var(--delay) linear infinite;
}
@keyframes class-ember-rise {
 0% { transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
 12% { opacity:.8; }
 48% { opacity:.5; }
 75% { opacity:.75; }
 100% { transform:translate3d(var(--drift),-680px,0) rotate(160deg); opacity:0; }
}
@keyframes class-ember-glow { from { opacity:.4; } to { opacity:.85; } }
#classes.effects-paused .class-ember,
#classes.effects-paused .class-embers::before { animation-play-state:paused; }
@media(max-width:540px) {
 #classes .class-ember:nth-child(n+25) { display:none; }
 #classes .class-embers { mask-image:linear-gradient(#000 20%,#0006 55%,transparent 85%); }
}
@media(prefers-reduced-motion:reduce) {
 #classes .class-ember { animation:class-ember-rise 22s var(--delay) linear infinite !important; }
 #classes .class-ember:nth-child(n+17) { display:none; }
 #classes .class-embers::before { animation:none; opacity:.5; }
}