/* ==========================================================================
   Pixel Academy — Flagship homepage (views/home3-rtl.html)
   One Pixel world in three environments:
     1. Hero + honours          → the flagship environment
     2. Story, courses, services → one adaptive content environment
     3. Final CTA + footer       → the intentional dark closing environment
   Every environment shares the same grid language, radius system, border
   treatment, purple/cyan lighting, typography, easing and spacing rhythm.
   Depends on pixel-v2.css (tokens) + pixel-public.css (shell). Modifies neither.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Homepage theme tokens
   The interface panels (.px-mock) stay deliberately dark in both themes so the
   product keeps its contrast and depth inside a light content environment.
   -------------------------------------------------------------------------- */
:root,
html[data-theme="dark"] {
  --px-hero-bg:
    radial-gradient(120% 90% at 78% 8%, rgba(124, 77, 255, 0.34) 0%, transparent 58%),
    radial-gradient(90% 70% at 12% 92%, rgba(34, 211, 238, 0.18) 0%, transparent 62%),
    linear-gradient(180deg, #08061f 0%, #0a0725 52%, #0b0827 100%);
  --px-honors-bg:
    radial-gradient(90% 60% at 88% 4%, rgba(240, 192, 76, 0.12) 0%, transparent 58%),
    radial-gradient(80% 60% at 6% 60%, rgba(124, 77, 255, 0.22) 0%, transparent 62%),
    linear-gradient(180deg, #0b0827 0%, #07051d 100%);

  /* The adaptive content environment — one continuous surface behind the
     platform story, the courses gateway and the services bento. */
  --px-content-bg:
    radial-gradient(70% 46% at 84% 6%, rgba(124, 77, 255, 0.2) 0%, transparent 62%),
    radial-gradient(60% 44% at 6% 74%, rgba(34, 211, 238, 0.1) 0%, transparent 64%),
    linear-gradient(180deg, #07051d 0%, #0b0827 46%, #07051d 100%);
  --px-content-edge: #07051d;

  --px-surface: linear-gradient(168deg, rgba(38, 28, 96, 0.56) 0%, rgba(9, 7, 30, 0.92) 74%);
  --px-surface-soft: rgba(255, 255, 255, 0.05);
  --px-surface-border: rgba(255, 255, 255, 0.12);
  --px-surface-shadow: 0 20px 44px rgba(3, 2, 14, 0.42);
  --px-surface-hover: rgba(124, 77, 255, 0.5);
  --px-surface-lift: 0 26px 54px rgba(3, 2, 14, 0.5);

  --px-core-a: rgba(124, 77, 255, 0.55);
  --px-core-b: rgba(34, 211, 238, 0.55);
  --px-core-c: rgba(240, 192, 76, 0.42);

  --px-cap-bg: linear-gradient(150deg, rgba(29, 22, 74, 0.92), rgba(9, 7, 30, 0.94));
  --px-cap-border: rgba(255, 255, 255, 0.22);
  --px-cap-shadow: 0 18px 36px rgba(3, 2, 14, 0.55);

  --px-card-bg: linear-gradient(180deg, rgba(35, 26, 88, 0.62) 0%, rgba(8, 6, 26, 0.96) 72%);
  --px-card-border: rgba(255, 255, 255, 0.11);
  --px-card-shadow: 0 20px 44px rgba(3, 2, 14, 0.42);
  --px-media-bg: radial-gradient(78% 70% at 50% 100%, rgba(124, 77, 255, 0.24) 0%, transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
  --px-num-stroke: rgba(255, 255, 255, 0.16);
  --px-portrait-shadow: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.5));
  /* Edge light that keeps a beige outfit from sinking into the indigo stage */
  --px-portrait-rim: drop-shadow(0 0 14px rgba(34, 211, 238, 0.34))
    drop-shadow(0 0 30px rgba(124, 77, 255, 0.46));

  --px-featured-bg:
    radial-gradient(70% 90% at 12% 100%, rgba(240, 192, 76, 0.16) 0%, transparent 62%),
    linear-gradient(150deg, rgba(37, 27, 92, 0.86) 0%, rgba(9, 7, 30, 0.94) 68%);
  --px-featured-border: rgba(240, 192, 76, 0.24);
  --px-gold-ink: var(--px-gold-2);
}

html[data-theme="light"] {
  --px-hero-bg:
    radial-gradient(120% 90% at 78% 6%, rgba(124, 77, 255, 0.22) 0%, transparent 58%),
    radial-gradient(90% 70% at 10% 94%, rgba(34, 211, 238, 0.16) 0%, transparent 62%),
    linear-gradient(180deg, #fbf8f3 0%, #f3eefb 54%, #ece5f9 100%);
  --px-honors-bg:
    radial-gradient(90% 60% at 88% 4%, rgba(240, 192, 76, 0.2) 0%, transparent 58%),
    radial-gradient(80% 60% at 6% 60%, rgba(124, 77, 255, 0.16) 0%, transparent 62%),
    linear-gradient(180deg, #f4eefb 0%, #faf7f2 100%);

  --px-content-bg:
    radial-gradient(70% 46% at 84% 6%, rgba(124, 77, 255, 0.12) 0%, transparent 62%),
    radial-gradient(60% 44% at 6% 74%, rgba(34, 211, 238, 0.09) 0%, transparent 64%),
    linear-gradient(180deg, #faf7f2 0%, #f3eefb 46%, #faf7f2 100%);
  --px-content-edge: #faf7f2;

  --px-surface: linear-gradient(168deg, #ffffff 0%, #f7f3fd 100%);
  --px-surface-soft: rgba(74, 32, 189, 0.05);
  --px-surface-border: rgba(74, 32, 189, 0.16);
  --px-surface-shadow: 0 18px 38px rgba(52, 28, 122, 0.13);
  --px-surface-hover: rgba(74, 32, 189, 0.44);
  --px-surface-lift: 0 26px 54px rgba(52, 28, 122, 0.18);

  --px-core-a: rgba(124, 77, 255, 0.38);
  --px-core-b: rgba(13, 148, 180, 0.5);
  --px-core-c: rgba(191, 140, 20, 0.42);

  --px-cap-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.94), rgba(244, 240, 253, 0.94));
  --px-cap-border: rgba(74, 32, 189, 0.26);
  --px-cap-shadow: 0 18px 34px rgba(52, 28, 122, 0.2);

  --px-card-bg: linear-gradient(180deg, #ffffff 0%, #f6f2fd 100%);
  --px-card-border: rgba(74, 32, 189, 0.16);
  --px-card-shadow: 0 18px 38px rgba(52, 28, 122, 0.14);
  --px-media-bg: radial-gradient(78% 70% at 50% 100%, rgba(124, 77, 255, 0.14) 0%, transparent 66%),
    linear-gradient(180deg, rgba(74, 32, 189, 0.05) 0%, rgba(74, 32, 189, 0.01) 100%);
  --px-num-stroke: rgba(74, 32, 189, 0.2);
  --px-portrait-shadow: drop-shadow(0 16px 22px rgba(52, 28, 122, 0.28));
  /* A light halo so a deep-purple outfit separates from the light stage */
  --px-portrait-rim: drop-shadow(0 0 12px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 26px rgba(124, 77, 255, 0.34));

  --px-featured-bg:
    radial-gradient(70% 90% at 12% 100%, rgba(240, 192, 76, 0.28) 0%, transparent 62%),
    linear-gradient(150deg, #ffffff 0%, #f4effc 72%);
  --px-featured-border: rgba(176, 127, 17, 0.34);
  --px-gold-ink: #8a6212;
}

/* --------------------------------------------------------------------------
   1. Shared 3D interface mock (platform-story scenes only)
   -------------------------------------------------------------------------- */
.px-mock {
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, rgba(40, 30, 100, 0.96) 0%, rgba(12, 9, 38, 0.97) 72%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--px-r);
  box-shadow: 0 26px 60px rgba(3, 2, 14, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.px-mock::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(210deg, rgba(255, 255, 255, 0.13) 0%, transparent 42%);
}

.px-mock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.px-mock__dots {
  display: flex;
  gap: 5px;
}

.px-mock__dots i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.26);
}

.px-mock__dots i:first-child {
  background: var(--px-violet-2);
}

.px-mock__dots i:nth-child(2) {
  background: var(--px-cyan);
}

.px-mock__label {
  margin-inline-start: auto;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.01em;
}

.px-mock__body {
  padding: 12px;
}

/* Player variant */
.px-mock__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--px-r-sm);
  background: radial-gradient(circle at 50% 45%, rgba(124, 77, 255, 0.5) 0%, rgba(8, 6, 26, 0.98) 68%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.px-mock__screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.7;
}

.px-mock__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 8px rgba(124, 77, 255, 0.25), 0 12px 26px rgba(0, 0, 0, 0.45);
}

.px-mock__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-inline-start: -3px;
  border-block: 9px solid transparent;
  border-inline-end: 14px solid var(--px-violet-deep);
  border-inline-start: 0;
}

.px-mock__track {
  position: absolute;
  inset-inline: 12px;
  bottom: 12px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.px-mock__track span {
  display: block;
  width: 46%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--px-cyan), var(--px-violet-2));
}

.px-bars {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.px-bars i {
  display: block;
  height: 9px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.13);
}

.px-bars i:nth-child(2) {
  width: 72%;
}

.px-bars i:nth-child(3) {
  width: 48%;
}

/* Quiz variant */
.px-mock__q {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.px-mock__qbadge {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--px-violet), var(--px-violet-deep));
  box-shadow: 0 6px 16px rgba(90, 42, 224, 0.5);
}

.px-mock__qline {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.2);
}

.px-opts {
  display: grid;
  gap: 8px;
}

.px-opts i {
  display: flex;
  align-items: center;
  height: 30px;
  padding-inline: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.px-opts i::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.28);
}

.px-opts i.is-picked {
  background: rgba(124, 77, 255, 0.24);
  border-color: rgba(124, 77, 255, 0.65);
}

.px-opts i.is-picked::before {
  background: var(--px-cyan);
  border-color: var(--px-cyan);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.8);
}

/* Result variant */
.px-mock__ring {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 6px auto 12px;
  border-radius: 50%;
  background: conic-gradient(var(--px-cyan) 0deg 250deg, rgba(255, 255, 255, 0.12) 250deg 360deg);
  display: grid;
  place-items: center;
}

.px-mock__ring::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #0d0a2a;
}

.px-mock__ring i {
  position: relative;
  font-size: 1.4rem;
  color: var(--px-cyan);
}

.px-rows {
  display: grid;
  gap: 8px;
}

.px-rows span {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding-inline: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.px-rows span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--pa-success);
}

.px-rows span::after {
  content: "";
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.13);
}

.px-rows span:nth-child(2)::before {
  background: var(--px-gold);
}

.px-rows span:nth-child(3)::before {
  background: var(--pa-danger);
}

/* --------------------------------------------------------------------------
   2. Shared seams between environments — pixel dissolve + light seam
   -------------------------------------------------------------------------- */
.px-dissolve {
  position: absolute;
  inset-inline: 0;
  z-index: 3;
  height: 74px;
  pointer-events: none;
  background: repeating-conic-gradient(var(--px-deep) 0% 25%, transparent 0% 50%) 0 0 / 16px 16px;
}

.px-dissolve--top {
  top: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 8%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 8%, transparent 100%);
}

.px-dissolve--bottom {
  bottom: 0;
  -webkit-mask-image: linear-gradient(0deg, #000 8%, transparent 100%);
  mask-image: linear-gradient(0deg, #000 8%, transparent 100%);
}

/* Dissolves into the adaptive content environment follow the active theme. */
.px-dissolve--content {
  background: repeating-conic-gradient(var(--px-content-edge) 0% 25%, transparent 0% 50%) 0 0 / 16px 16px;
}

/* --------------------------------------------------------------------------
   3. HERO — flagship environment
   -------------------------------------------------------------------------- */
.px-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* --px-header-total already contains the Safe Area, so it is never added
     a second time here. The eyebrow can therefore not sit under the header. */
  padding-top: calc(var(--px-header-total) + 16px);
  padding-bottom: 30px;
  color: var(--px-ink);
  background: var(--px-hero-bg);
}

/* Hero + honours atmosphere follows the theme; the dark closing environment
   below them keeps the white grid from pixel-public.css. */
.px-hero .px-atmo__grid,
.px-honors .px-atmo__grid {
  background-image: linear-gradient(var(--px-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--px-grid-line) 1px, transparent 1px);
}

.px-hero .px-atmo__noise,
.px-honors .px-atmo__noise {
  background-image: repeating-linear-gradient(0deg, var(--px-noise) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, var(--px-noise-2) 0 1px, transparent 1px 4px);
}

.px-hero__field {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.px-hero__inner {
  position: relative;
  z-index: 4;
  display: grid;
  /* Mobile: the faculty stage starts immediately after the CTA block. */
  gap: 12px;
  align-items: center;
}

/* --- copy --- */
.px-hero__copy {
  position: relative;
  z-index: 5;
  max-width: 620px;
}

.px-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  margin-bottom: 16px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--px-ink);
  background: var(--px-chip);
  border: 1px solid var(--px-rule-2);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.px-hero__eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--px-cyan);
  box-shadow: 0 0 14px var(--px-cyan);
  animation: px-blink 2.6s steps(1, end) infinite;
}

@keyframes px-blink {
  0%,
  60% {
    opacity: 1;
  }
  61%,
  100% {
    opacity: 0.28;
  }
}

body.px-body .px-hero__title {
  margin: 0 0 14px;
  font-size: clamp(2rem, 7vw, 4.2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--px-ink);
  text-wrap: balance;
}

/* The official brand statement — a composed line, not a small chip. */
body.px-body .px-hero__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}

.px-hero__brandrule {
  flex: 0 0 auto;
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--px-gold), var(--px-cyan));
  box-shadow: 0 0 18px rgba(240, 192, 76, 0.55);
}

.px-hero__brandtext {
  font-size: clamp(1.15rem, 4.2vw, 1.9rem);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, #ffffff 0%, var(--px-violet-2) 46%, var(--px-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-theme="light"] .px-hero__brandtext {
  background: linear-gradient(120deg, #2a1266 0%, var(--px-violet) 48%, #0d94b4 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

body.px-body .px-hero__text {
  margin: 0 0 24px;
  max-width: 50ch;
  font-size: clamp(0.94rem, 2.5vw, 1.08rem);
  line-height: 1.9;
  color: var(--px-ink-2);
}

/* Two actions that stay proportionate on a 360px row and stack deliberately
   on the narrowest phones. The primary action always stays dominant. */
.px-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.px-body .px-hero__cta .px-btn {
  flex: 1 1 132px;
  min-width: 0;
  padding-inline: 16px;
}

body.px-body .px-hero__cta .px-btn:first-child {
  flex-grow: 1.35;
}

@media (max-width: 344px) {
  .px-hero__cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 480px) {
  body.px-body .px-hero__cta .px-btn,
  body.px-body .px-hero__cta .px-btn:first-child {
    flex: 0 0 auto;
    padding-inline: 26px;
  }
}

/* --------------------------------------------------------------------------
   3b. CINEMATIC LAYERED FACULTY STAGE
   Slot classes are presentation state only. No teacher name ever appears in a
   selector, so a new <button data-teacher> joins the rotation with no CSS.
   -------------------------------------------------------------------------- */
.px-faculty {
  /* One stage height drives the whole composition. The active portrait is a
     fixed fraction of it, so the "82–92% of the stage" relationship holds at
     every width without a per-breakpoint portrait size. */
  --px-stage-h: clamp(306px, 86vw, 338px);
  /* Mobile: a wide, top-anchored portrait so the face, shoulders and crossed
     arms read immediately; the lower body is deliberately outside the stage. */
  --px-t-w: 78vw;
  --px-t-h: calc(var(--px-stage-h) - 8px);
  --px-t-fit: cover;
  --px-t-pos: 50% 0%;
  position: relative;
  z-index: 3;
  display: grid;
  gap: 10px;
  width: 100%;
  margin-inline: auto;
}

.px-faculty__stage {
  position: relative;
  height: var(--px-stage-h);
  perspective: 1500px;
  perspective-origin: 50% 58%;
}

/* A quiet ready state so the entrance never plays over an empty stage.
   A stepped column of light, not a disc: nothing here may read as a ring. */
.px-faculty__stage::after {
  content: "";
  position: absolute;
  inset: 14% 24% 2%;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--px-core-a) 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  filter: blur(24px);
  transition: opacity 420ms var(--px-ease);
}

.px-faculty.is-assets-loading .px-faculty__stage::after {
  opacity: 1;
  animation: px-stage-wait 1500ms var(--px-ease) infinite alternate;
}

@keyframes px-stage-wait {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 0.85;
  }
}

.px-faculty__deck {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--px-rx, 0deg)) rotateY(var(--px-ry, 0deg));
  transition: transform 700ms var(--px-ease-out), opacity 700ms var(--px-ease-out);
  will-change: transform;
}

/* ---- PIXEL GATE: the non-circular gateway every teacher emerges from ----
   A stepped rectangular structure, a square-grid fragment field, a thin
   vertical beam and one pixel seed. There is no circle, ellipse, orbit, target
   or halo anywhere in this component, and nothing here ever traces the outline
   of a face: the gate is a vertical column of light *behind* the portraits. */
.px-core {
  position: absolute;
  top: 2%;
  inset-inline: 0;
  width: 56%;
  max-width: 320px;
  height: 86%;
  margin-inline: auto;
  transform: translateZ(-260px);
  transform-style: preserve-3d;
  pointer-events: none;
}

/* Stepped purple light — a ziggurat gateway silhouette, softened. */
.px-core__halo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--px-core-a) 34%, var(--px-core-a) 100%);
  clip-path: polygon(
    32% 0%, 68% 0%, 68% 11%, 80% 11%, 80% 31%, 91% 31%, 91% 100%,
    9% 100%, 9% 31%, 20% 31%, 20% 11%, 32% 11%
  );
  filter: blur(28px);
  opacity: 0.92;
}

/* Short horizontal light fragments — pixel debris, never a ring. */
.px-core::before {
  content: "";
  position: absolute;
  inset-inline: -8%;
  top: 36%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0% 7%, var(--px-core-b) 7% 20%,
    transparent 20% 38%, var(--px-core-b) 38% 45%,
    transparent 45% 63%, var(--px-core-b) 63% 82%,
    transparent 82% 100%
  );
  opacity: 0.5;
}

/* The one deliberate gold detail: three small pixels on the gate axis. */
.px-core::after {
  content: "";
  position: absolute;
  top: 21%;
  inset-inline: 0;
  width: 6px;
  height: 6px;
  margin-inline: auto;
  background: var(--px-core-c);
  box-shadow: 0 -15px 0 -1px var(--px-core-c), 0 27px 0 -2px var(--px-core-c);
  opacity: 0.75;
}

/* A separate element so the transition pulse never touches the gate structure.
   The pulse is a vertical beam of light travelling up the gate axis. */
.px-core__pulse {
  position: absolute;
  top: -6%;
  bottom: 0;
  left: 50%;
  width: 12px;
  margin-left: -6px;
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, transparent 0%, var(--px-core-b) 26%, var(--px-core-b) 68%, transparent 100%);
  filter: blur(7px);
  opacity: 0;
}

.px-faculty.is-shifting .px-core__pulse {
  animation: px-corebeat 900ms var(--px-ease-out);
}

@keyframes px-corebeat {
  0% {
    opacity: 0;
    transform: scaleY(0.34);
  }
  32% {
    opacity: 0.8;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform: scaleY(1.06);
  }
}

/* Square-grid fragments inside a rectangular mask — no circular mask. */
.px-core__grid {
  position: absolute;
  inset: 8% 12% 0;
  background-image: linear-gradient(var(--px-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--px-grid-line) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 6%, transparent 76%),
    linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 6%, transparent 76%),
    linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.px-core__seed {
  position: absolute;
  top: 46%;
  inset-inline: 0;
  width: 12px;
  height: 12px;
  margin: -6px auto 0;
  border-radius: 2px;
  background: var(--px-cyan);
  box-shadow: 0 0 16px var(--px-cyan), 0 -22px 0 -3px var(--px-violet-2),
    0 24px 0 -4px var(--px-cyan);
  animation: px-core-pulse 3.6s ease-in-out infinite alternate;
}

@keyframes px-core-pulse {
  from {
    transform: scale(0.85);
    opacity: 0.7;
  }
  to {
    transform: scale(1.15);
    opacity: 1;
  }
}

/* Depth haze + shared ground light — what turns cutouts into one world */
.px-haze {
  position: absolute;
  inset-inline: -10%;
  bottom: 6%;
  height: 46%;
  transform: translateZ(-200px);
  background: linear-gradient(180deg, transparent 0%, var(--px-core-a) 100%);
  opacity: 0.32;
  filter: blur(30px);
  pointer-events: none;
}

/* A straight band of ground light, faded at both physical ends — the floor is
   lit, but it is never an ellipse under the teacher. */
.px-floor {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 22%;
  transform: translateZ(-40px);
  background: linear-gradient(180deg, transparent 0%, var(--px-core-a) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
  filter: blur(18px);
  pointer-events: none;
}

/* ---- Teacher item: identical for every teacher ---- */
.px-teacher {
  --px-t-x: 0%;
  --px-t-y: 0%;
  --px-t-z: 0px;
  --px-t-s: 1;
  --px-t-o: 1;
  --px-t-b: 0px;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--px-t-w);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  transform-style: preserve-3d;
  transform-origin: bottom center;
  transform: translate3d(calc(-50% + var(--px-t-x)), var(--px-t-y), var(--px-t-z)) scale(var(--px-t-s));
  opacity: var(--px-t-o);
  filter: blur(var(--px-t-b));
  transition: transform 950ms var(--px-ease-out), opacity 760ms var(--px-ease-out),
    filter 420ms var(--px-ease);
  pointer-events: none;
  cursor: default;
}

/* A stable portrait wrapper: the box never changes, only the source does. */
.px-teacher__frame {
  position: relative;
  display: block;
  width: 100%;
  height: var(--px-t-h);
  overflow: hidden;
}

/* --teacher-scale / --teacher-x / --teacher-y are written by pixel-home.js
   from the generic data-*-scale / data-*-x / data-*-y attributes. They only
   compensate for the different transparent margins of each source canvas, so
   every visible silhouette shares one height and one horizontal centre. The
   scale is uniform: body proportions are never distorted. A teacher without
   calibration attributes simply keeps the defaults below. */
body.px-body .px-teacher__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--px-t-fit);
  object-position: var(--px-t-pos);
  transform-origin: 50% 100%;
  transform: translate(var(--teacher-x, 0%), var(--teacher-y, 0%)) scale(var(--teacher-scale, 1));
  filter: var(--px-portrait-shadow) var(--px-portrait-rim);
}

/* Restrained Pixel wipe that reveals the incoming teacher */
.px-teacher__wipe {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.55) 0% 25%, transparent 0% 50%) 0 0 / 10px 10px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 46%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 46%, transparent 100%);
  -webkit-mask-size: 100% 62%;
  mask-size: 100% 62%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 130%;
  mask-position: 0 130%;
}

@keyframes px-teacher-wipe {
  0% {
    opacity: 0;
    -webkit-mask-position: 0 132%;
    mask-position: 0 132%;
  }
  22% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    -webkit-mask-position: 0 -42%;
    mask-position: 0 -42%;
  }
}

/* Ground contact light travelling with each portrait — a flat band at the very
   bottom of the frame, never an oval behind the body. */
.px-teacher__glow {
  position: absolute;
  inset-inline: 14%;
  bottom: -2%;
  height: 11%;
  background: linear-gradient(180deg, transparent 0%, var(--px-core-a) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  filter: blur(11px);
  opacity: 0.85;
  pointer-events: none;
}

/* Rear identification — never permanent. The hint appears on hover or on
   keyboard focus, and only at desktop widths. */
.px-teacher__hint {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  display: none;
  padding: 5px 11px;
  font-family: var(--pa-font);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
  color: var(--px-ink);
  background: var(--px-cap-bg);
  border: 1px solid var(--px-cap-border);
  border-radius: 999px;
  transform-origin: bottom center;
  transform: translateX(-50%) scale(calc(1 / var(--px-t-s)));
  opacity: 0;
  transition: opacity 260ms var(--px-ease);
  pointer-events: none;
}

/* ---- Depth slots — mobile composition ----
   The active teacher owns the stage; two rear teachers sit higher and to the
   sides so their faces stay clear of the active face and of each other. */
.px-teacher.is-active {
  --px-t-x: 0%;
  --px-t-y: 0%;
  --px-t-z: 0px;
  --px-t-s: 1;
  --px-t-o: 1;
  z-index: 5;
}

/* Both rear faces sit in the band where the active teacher is only as wide as
   their own head, and far enough out that no face is ever covered. */
/* Depth is carried by scale, position and Z — the opacity ladder only has to
   stay subordinate, never to make a face unreadable. */
.px-teacher.is-rear-one {
  --px-t-x: -36%;
  --px-t-y: -44%;
  --px-t-z: -110px;
  --px-t-s: 0.52;
  --px-t-o: 0.9;
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
}

.px-teacher.is-rear-two {
  --px-t-x: 33%;
  --px-t-y: -55%;
  --px-t-z: -200px;
  --px-t-s: 0.52;
  --px-t-o: 0.78;
  z-index: 3;
  pointer-events: auto;
  cursor: pointer;
}

.px-teacher.is-rear-three {
  --px-t-x: -20%;
  --px-t-y: -68%;
  --px-t-z: -320px;
  --px-t-s: 0.38;
  --px-t-o: 0.56;
  --px-t-b: 1.2px;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}

.px-teacher.is-offstage {
  --px-t-x: 0%;
  --px-t-y: -40%;
  --px-t-z: -440px;
  --px-t-s: 0.36;
  --px-t-o: 0;
  --px-t-b: 5px;
  z-index: 1;
  pointer-events: none;
}

/* ---- Transition state (declared after the slots so it wins) ---- */
.px-teacher.is-outgoing {
  --px-t-b: 2.4px;
  pointer-events: none;
}

.px-teacher.is-incoming {
  --px-t-b: 0px;
  pointer-events: none;
}

.px-teacher.is-incoming .px-teacher__wipe {
  animation: px-teacher-wipe 900ms var(--px-ease-out);
}

body.px-body .px-teacher:focus-visible {
  outline: 3px solid var(--px-cyan);
  outline-offset: 4px;
  border-radius: var(--px-r-sm);
}

/* ---- HUD: one active caption, one progress bar, one counter ----
   Nothing here grows with the teacher count, so four, six or ten teachers
   produce exactly the same compact block. */
.px-faculty__hud {
  position: relative;
  z-index: 6;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  padding-top: 10px;
  text-align: center;
  border-top: 1px solid var(--px-rule);
}

body.px-body .px-faculty__cap {
  display: grid;
  gap: 2px;
  margin: 0;
  min-height: 42px;
  align-content: center;
  justify-items: center;
  text-align: center;
}

/* The caption is hidden for the first part of the transition and fades back in
   with the incoming teacher. One CSS animation, no second JavaScript timer. */
.px-faculty__cap.is-swapping {
  animation: px-cap-in 620ms var(--px-ease-out) 230ms both;
}

@keyframes px-cap-in {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.px-faculty__name {
  font-size: clamp(0.95rem, 3.2vw, 1.12rem);
  font-weight: 800;
  line-height: 1.4;
  color: var(--px-ink);
}

.px-faculty__subject {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--px-accent);
}

/* One compact row that shares the caption's centre: previous, progress,
   counter, next. It never wraps and it never sits at a far edge. */
.px-faculty__controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

body.px-body .px-facbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 0.82rem;
  color: var(--px-ink);
  background: var(--px-chip);
  border: 1px solid var(--px-rule-2);
  border-radius: var(--px-r-sm);
  cursor: pointer;
  transition: background-color var(--pa-t) var(--px-ease), border-color var(--pa-t) var(--px-ease),
    color var(--pa-t) var(--px-ease);
}

body.px-body .px-facbtn:hover:not([aria-disabled="true"]) {
  background: var(--px-chip-2);
  border-color: var(--px-violet-2);
}

/* Locked while a transition runs — aria-disabled rather than [disabled] so a
   keyboard user never loses focus mid-transition. */
body.px-body .px-facbtn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

/* One cycle-progress bar for the whole rotation, driven by the same clock as
   the JavaScript timer — never by a stand-alone CSS animation duration. */
.px-faculty__bar {
  position: relative;
  flex: 1 1 auto;
  min-width: 40px;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--px-rule-2);
}

.px-faculty__fill {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--px-cyan), var(--px-violet-2));
  transform: scaleX(0);
  transform-origin: left center;
}

[dir="rtl"] .px-faculty__fill {
  transform-origin: right center;
}

/* Autoplay held (hover, keyboard focus, hidden tab or reduced motion): the
   bar keeps its position and simply reads as inactive. */
.px-faculty.is-paused .px-faculty__fill {
  opacity: 0.55;
}

.px-faculty__count {
  flex: 0 0 auto;
  min-width: 44px;
  font-family: var(--pa-font);
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.06em;
  color: var(--px-ink-3);
  font-variant-numeric: tabular-nums;
  /* "2 / 4" is a numeric pair, so it keeps its own direction inside the RTL
     document instead of being reordered. */
  direction: ltr;
  unicode-bidi: isolate;
}

/* Light trail into the honours section — the shared light seam */
.px-hero__trail {
  position: absolute;
  z-index: 2;
  inset-inline-start: 50%;
  bottom: -2px;
  width: 2px;
  height: 120px;
  background: linear-gradient(180deg, transparent, var(--px-gold));
  box-shadow: 0 0 22px rgba(240, 192, 76, 0.7);
  opacity: 0.7;
}

.px-hero__trail::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--px-gold);
  box-shadow: 0 0 18px var(--px-gold);
}

/* --- hero entrance --- */
.px-hero__eyebrow {
  --px-delay: 60ms;
}

.px-hero__title {
  --px-delay: 150ms;
}

.px-hero__brand {
  --px-delay: 230ms;
}

.px-hero__text {
  --px-delay: 310ms;
}

.px-hero__cta {
  --px-delay: 390ms;
}

.px-hero [data-enter] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

.px-hero.is-ready [data-enter] {
  opacity: 1;
  transform: none;
  transition: opacity 640ms var(--px-ease-out), transform 780ms var(--px-ease-out);
  transition-delay: var(--px-delay, 0ms);
}

.px-hero .px-faculty__deck,
.px-hero .px-faculty__hud {
  opacity: 0;
}

/* The deck is only revealed once the active portrait has actually decoded, so
   the entrance can never play across a transparent placeholder. */
.px-hero.is-ready .px-faculty.is-assets-ready .px-faculty__deck {
  opacity: 1;
  transition: opacity 720ms var(--px-ease-out), transform 700ms var(--px-ease-out);
}

.px-hero.is-ready .px-faculty__hud {
  opacity: 1;
  transition: opacity 620ms var(--px-ease-out) 420ms;
}

/* --- hero responsive: mobile first --- */
@media (min-width: 480px) {
  .px-faculty {
    --px-stage-h: 356px;
    --px-t-w: 300px;
    max-width: 520px;
  }
}

@media (min-width: 560px) {
  .px-faculty {
    --px-stage-h: 400px;
    --px-t-w: 336px;
    max-width: 560px;
  }
}

@media (min-width: 768px) {
  .px-hero {
    padding-bottom: 48px;
  }

  .px-faculty {
    --px-stage-h: 470px;
    --px-t-w: 392px;
    max-width: 620px;
  }

  /* The HUD keeps one centre at every width — it only gets a little wider. */
  .px-faculty__hud {
    max-width: 400px;
    gap: 8px;
  }
}

/* ---- Desktop composition ----
   From here the portrait is bottom-anchored and shown complete: the frame
   height is a fixed 87% of the stage height and the width follows the 3:4
   source, so the active teacher always fills the stage instead of floating
   inside it. Everything below is slot state only — no teacher is ever named. */
@media (min-width: 992px) {
  .px-hero {
    padding-top: calc(var(--px-header-total) + 34px);
    padding-bottom: 70px;
  }

  .px-hero__inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 34px;
    align-items: center;
  }

  .px-faculty {
    --px-stage-h: 500px;
    --px-t-h: calc(var(--px-stage-h) * 0.87);
    --px-t-w: calc(var(--px-stage-h) * 0.6525);
    --px-t-fit: contain;
    --px-t-pos: 50% 100%;
    max-width: none;
  }

  .px-teacher__frame {
    overflow: visible;
  }

  /* The active teacher stands on the stage floor itself: no forward Z, so the
     perspective cannot push the feet past the stage into the HUD. */
  .px-teacher.is-active {
    --px-t-z: 0px;
  }

  /* The rear offsets are solved against the real perspective projection, so
     every rear face clears the active silhouette at its own height. The
     opacity ladder stays clearly graded — depth comes from scale, position and
     Z-depth — but no rear face is ever allowed to read as a black silhouette. */
  .px-teacher.is-rear-one {
    --px-t-x: -61%;
    --px-t-y: -4%;
    --px-t-z: -170px;
    --px-t-s: 0.6;
    --px-t-o: 0.9;
  }

  .px-teacher.is-rear-two {
    --px-t-x: 66%;
    --px-t-y: -12%;
    --px-t-z: -260px;
    --px-t-s: 0.5;
    --px-t-o: 0.78;
  }

  .px-teacher.is-rear-three {
    --px-t-x: -75%;
    --px-t-y: -40%;
    --px-t-z: -380px;
    --px-t-s: 0.38;
    --px-t-o: 0.58;
    --px-t-b: 1.2px;
  }

  .px-teacher.is-offstage {
    --px-t-y: -24%;
    --px-t-z: -480px;
    --px-t-s: 0.32;
  }
}

/* 992–1199px: the visual column is proportionally narrower than the portrait,
   so the rear slots come in and down a little. The active portrait keeps its
   full size — only the depth stack is tightened. */
@media (min-width: 992px) and (max-width: 1199px) {
  .px-teacher.is-rear-one {
    --px-t-x: -60%;
    --px-t-s: 0.46;
  }

  .px-teacher.is-rear-two {
    --px-t-x: 62%;
  }

  .px-teacher.is-rear-three {
    --px-t-x: -70%;
    --px-t-s: 0.36;
  }
}

@media (min-width: 1024px) {
  .px-faculty {
    --px-stage-h: 546px;
  }

  /* Rear names are a hint, never a permanent label. */
  .px-teacher__hint {
    display: block;
  }

  .px-teacher.is-rear-one:hover .px-teacher__hint,
  .px-teacher.is-rear-two:hover .px-teacher__hint,
  .px-teacher.is-rear-three:hover .px-teacher__hint,
  .px-teacher.is-rear-one:focus-visible .px-teacher__hint,
  .px-teacher.is-rear-two:focus-visible .px-teacher__hint,
  .px-teacher.is-rear-three:focus-visible .px-teacher__hint {
    opacity: 1;
  }
}

@media (min-width: 1200px) {
  .px-faculty {
    --px-stage-h: 612px;
  }

  .px-faculty__name {
    font-size: 1.18rem;
  }

  .px-faculty__subject {
    font-size: 0.84rem;
  }
}

@media (min-width: 1400px) {
  .px-hero__inner {
    gap: 40px;
  }

  .px-faculty {
    --px-stage-h: 668px;
  }
}

@media (min-width: 1700px) {
  .px-faculty {
    --px-stage-h: 730px;
  }
}

/* --------------------------------------------------------------------------
   4. HONOURS — same flagship environment, portraits kept visible
   -------------------------------------------------------------------------- */
.px-honors {
  padding-block: clamp(40px, 4.6vw, 66px);
  color: var(--px-ink);
  background: var(--px-honors-bg);
}

body.px-body .px-honors .px-title {
  color: var(--px-ink);
}

body.px-body .px-honors .px-lead {
  color: var(--px-ink-2);
}

.px-honors .px-eyebrow {
  color: var(--px-accent);
}

.px-honors .px-head {
  margin-bottom: clamp(18px, 2.4vw, 28px);
}

/* ---- One achievement wall of eleven students ----
   Below 1280px: one horizontal scroll-snap rail, the first card slightly
   wider. From 1280px: the first card becomes the featured side panel and the
   remaining ten sit in exactly 5 columns x 2 rows. Eleven unique cards, one
   composition, no duplicated featured block. */
.px-wall {
  position: relative;
  z-index: 2;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 332px;
  grid-template-columns: 82vw;
  grid-auto-columns: 75vw;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--px-pad));
  padding-inline: var(--px-pad);
  padding-bottom: 4px;
}

.px-wall::-webkit-scrollbar {
  display: none;
}

.px-wall:focus-visible {
  outline: 3px solid var(--px-cyan);
  outline-offset: 4px;
  border-radius: var(--px-r-lg);
}

.px-wall > * {
  min-width: 0;
  scroll-snap-align: start;
}

/* Separated media / information structure: nothing covers a face. */
.px-honor {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--px-card-border);
  border-radius: var(--px-r);
  background: var(--px-card-bg);
  box-shadow: var(--px-card-shadow);
  transform: perspective(900px) rotateX(var(--px-ty, 0deg)) rotateY(var(--px-tx, 0deg))
    translateY(var(--px-lift, 0px));
  transition: transform 420ms var(--px-ease-out), border-color 320ms var(--px-ease),
    box-shadow 420ms var(--px-ease);
}

.px-honor:hover {
  border-color: var(--px-surface-hover);
  box-shadow: var(--px-card-shadow), 0 0 0 1px rgba(124, 77, 255, 0.2);
}

/* Edge light that answers hover */
.px-honor::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(34, 211, 238, 0.8), transparent 42%, rgba(240, 192, 76, 0.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 320ms var(--px-ease);
  pointer-events: none;
}

.px-honor:hover::before {
  opacity: 1;
}

.px-honor__media {
  position: relative;
  overflow: hidden;
  background: var(--px-media-bg);
}

/* Every honour asset is a real transparent cut-out (measured: 1024x1536,
   37–64% transparent pixels), so the portraits are contained over a designed
   media background and the ranking numeral stays behind them. The generic
   --px-hn-* values normalise each file's own transparent margins so all
   eleven visible portraits share one height and one baseline. */
body.px-body .px-honor__img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  transform-origin: 50% 100%;
  transform: translate(var(--px-hn-x, 0%), var(--px-hn-y, 0%)) scale(var(--px-hn-s, 1));
  filter: var(--px-portrait-shadow) drop-shadow(0 0 16px rgba(124, 77, 255, 0.3));
}

/* Ranking numeral behind the portrait, never over the face. */
.px-honor__num {
  position: absolute;
  z-index: 1;
  top: 6px;
  inset-inline-end: 12px;
  font-family: var(--pa-font);
  font-size: 58px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  opacity: 0.55;
  -webkit-text-stroke: 1.5px var(--px-num-stroke);
  pointer-events: none;
}

/* The information panel is deliberately compact so the media area stays the
   dominant area of every card. Nothing here ever covers a face. */
.px-honor__body {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  align-items: end;
  gap: 2px 8px;
  min-height: 88px;
  padding: 9px 12px 11px;
  background: var(--px-surface-soft);
  border-top: 1px solid var(--px-card-border);
}

body.px-body .px-honor__name {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.38;
  color: var(--px-ink);
  text-wrap: balance;
}

.px-honor__rank {
  grid-column: 1;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--px-gold-ink);
}

.px-honor__year {
  grid-column: 2;
  font-family: var(--pa-font);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--px-ink-3);
  letter-spacing: 0.08em;
}

/* The first card carries the gold accent of the first place. */
.px-honor--first {
  border-color: var(--px-featured-border);
  background: var(--px-featured-bg);
}

.px-honor--first .px-honor__num {
  opacity: 0.9;
  -webkit-text-stroke-color: rgba(240, 192, 76, 0.5);
}

.px-honor--first .px-honor__media {
  background: radial-gradient(76% 66% at 50% 100%, rgba(240, 192, 76, 0.26) 0%, transparent 68%),
    var(--px-media-bg);
}

body.px-body .px-honor--first .px-honor__name {
  font-size: 0.98rem;
}

@media (min-width: 560px) {
  .px-wall {
    grid-template-columns: 322px;
    grid-auto-columns: 292px;
  }
}

@media (min-width: 768px) {
  .px-wall {
    grid-template-rows: 348px;
    grid-template-columns: 336px;
    grid-auto-columns: 302px;
    gap: 16px;
  }

  .px-honor__num {
    font-size: 66px;
  }

  body.px-body .px-honor__name {
    font-size: 0.9rem;
  }
}

/* Wide desktop: one composed wall — the first student becomes the featured
   side panel and the other ten fill exactly 5 columns x 2 rows. */
@media (min-width: 1280px) {
  .px-wall {
    grid-auto-flow: row;
    grid-template-columns: minmax(250px, 1.5fr) repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(2, 232px);
    grid-auto-columns: auto;
    gap: 16px;
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
  }

  .px-honor--first {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  /* Breathing room so the featured portrait can be scaled up to the same
     visible height as the others without ever touching the card edges. */
  .px-honor--first .px-honor__media {
    padding-inline: 12px;
  }

  .px-honor--first .px-honor__body {
    min-height: 132px;
    padding: 16px 18px 18px;
  }

  body.px-body .px-honor--first .px-honor__name {
    font-size: 1.14rem;
  }

  .px-honor--first .px-honor__rank {
    font-size: 0.8rem;
  }

  .px-honor--first .px-honor__num {
    font-size: 96px;
  }
}

/* --------------------------------------------------------------------------
   5. ADAPTIVE CONTENT ENVIRONMENT — story + courses + services
   One continuous surface, one card language, one reveal rhythm.
   -------------------------------------------------------------------------- */
/* One real parent environment. The gradient, the atmospheric grid and the glow
   system are declared once here; the story, the courses gateway and the
   services bento are transparent children of it, so the same radial gradient
   never restarts at the top of each section.
   overflow: clip (not hidden) keeps the story stage's position: sticky
   working while still clipping the atmosphere. */
.px-content-world {
  position: relative;
  overflow: clip;
  isolation: isolate;
  color: var(--px-ink);
  background: var(--px-content-bg);
}

.px-content-world > .px-band {
  overflow: visible;
  background: none;
  isolation: auto;
}

.px-band--content {
  color: var(--px-ink);
}

.px-band--content .px-eyebrow {
  color: var(--px-accent);
}

body.px-body .px-band--content .px-title {
  color: var(--px-ink);
}

body.px-body .px-band--content .px-lead {
  color: var(--px-ink-2);
}

.px-atmo__grid--content {
  background-image: linear-gradient(var(--px-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--px-grid-line) 1px, transparent 1px);
}

/* The three content bands read as one surface: the gradient opens and closes
   on the same colour, so every seam between them is invisible. */

/* ---- Platform story ---- */
.px-story {
  padding-block: clamp(56px, 8vw, 110px) clamp(30px, 5vw, 56px);
}

.px-story__layout {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 20px;
}

/* Below 1024px the steps become one compact accessible step selector and the
   scene stage sits permanently underneath it. The stage node is never moved
   between cards, so no step card changes height while scrolling. */
.px-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.px-step {
  position: relative;
}

body.px-body .px-step__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--px-ink);
}

body.px-body .px-step__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 14px;
  font: inherit;
  color: inherit;
  text-align: start;
  background: var(--px-surface);
  border: 1px solid var(--px-surface-border);
  border-radius: var(--px-r);
  box-shadow: var(--px-surface-shadow);
  cursor: pointer;
  transition: border-color 320ms var(--px-ease), box-shadow 320ms var(--px-ease),
    transform 320ms var(--px-ease);
}

body.px-body .px-step__btn[aria-current="true"] {
  border-color: var(--px-surface-hover);
  box-shadow: var(--px-surface-lift);
}

.px-step__num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  font-family: var(--pa-font);
  font-size: 1rem;
  font-weight: 800;
  color: var(--px-accent);
  background: var(--px-chip);
  border: 1px solid var(--px-rule-2);
  border-radius: var(--px-r-sm);
  transition: color 320ms var(--px-ease), background-color 320ms var(--px-ease),
    border-color 320ms var(--px-ease);
}

.px-step__btn[aria-current="true"] .px-step__num {
  color: #fff;
  background: linear-gradient(140deg, var(--px-violet), var(--px-violet-deep));
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(90, 42, 224, 0.36);
}

.px-step__label {
  min-width: 0;
}

/* One permanent stage container in one permanent parent. */
.px-story__stage {
  padding: 14px;
  border-radius: var(--px-r);
  background: linear-gradient(160deg, #17123c, #0a0726);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.px-story__space {
  position: relative;
  display: grid;
  min-height: 268px;
}

.px-story__frame {
  display: none;
}

.px-scene {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms var(--px-ease-out);
}

.px-scene.is-active {
  opacity: 1;
  visibility: visible;
}

.px-story__stage .px-mock {
  box-shadow: 0 14px 30px rgba(3, 2, 14, 0.5);
}

@media (min-width: 1024px) {
  .px-story__layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 46px;
    align-items: start;
  }

  /* Same node, same parent — only the sticky presentation changes. */
  .px-story__stage {
    position: sticky;
    top: calc(var(--px-header-total) + 34px);
    height: 500px;
    padding: 0;
    background: none;
    border: 0;
    perspective: 1400px;
  }

  .px-story__space {
    position: absolute;
    inset: 0;
    min-height: 0;
    transform-style: preserve-3d;
  }

  .px-story__frame {
    display: block;
    position: absolute;
    inset: 8% 6%;
    border-radius: var(--px-r-lg);
    background:
      radial-gradient(70% 70% at 30% 20%, rgba(124, 77, 255, 0.35), transparent 62%),
      linear-gradient(150deg, #191243, #08061f);
    border: 1px solid var(--px-line);
    box-shadow: 0 40px 90px rgba(3, 2, 14, 0.45);
    transform: translateZ(-120px) rotateY(6deg);
  }

  .px-story__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(circle at 40% 30%, #000, transparent 76%);
    mask-image: radial-gradient(circle at 40% 30%, #000, transparent 76%);
  }

  .px-scene {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    width: 74%;
    max-width: 400px;
    opacity: 0;
    visibility: visible;
    transform: translate3d(50%, -50%, -90px) rotateY(16deg) scale(0.9);
    transition: opacity 520ms var(--px-ease-out), transform 620ms var(--px-ease-out);
    pointer-events: none;
  }

  .px-scene.is-active {
    opacity: 1;
    transform: translate3d(50%, -50%, 60px) rotateY(6deg) scale(1);
  }

  .px-story__stage .px-mock {
    box-shadow: 0 40px 80px rgba(3, 2, 14, 0.62);
  }

  .px-steps {
    gap: 20px;
    padding-block: 40px;
  }

  body.px-body .px-step__title {
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  }

  body.px-body .px-step__btn {
    gap: 16px;
    min-height: 92px;
    padding: 22px 26px;
    border-radius: var(--px-r-lg);
  }

  body.px-body .px-step__btn[aria-current="true"] {
    transform: translateX(-6px);
  }

  .px-step__num {
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
  }
}

/* ---- Courses (login gated) ---- */
.px-courses {
  padding-block: clamp(30px, 5vw, 56px);
}

.px-courses__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.px-gate {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: clamp(28px, 6vw, 58px) clamp(20px, 5vw, 54px);
  color: var(--px-on-dark);
  border: 1px solid var(--px-line);
  border-radius: var(--px-r-lg);
  background:
    radial-gradient(80% 90% at 82% 10%, rgba(124, 77, 255, 0.5) 0%, transparent 62%),
    linear-gradient(150deg, #171040 0%, #08061f 74%);
  box-shadow: 0 34px 74px rgba(9, 6, 32, 0.34);
  perspective: 1100px;
}

.px-gate__doors {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.px-gate__door {
  position: absolute;
  inset-block: 6%;
  width: 34%;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--px-r);
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  background-color: rgba(255, 255, 255, 0.03);
}

.px-gate__door--a {
  inset-inline-start: -6%;
  transform: rotateY(26deg);
  box-shadow: 22px 0 60px rgba(0, 0, 0, 0.35);
}

.px-gate__door--b {
  inset-inline-end: -6%;
  transform: rotateY(-26deg);
  box-shadow: -22px 0 60px rgba(0, 0, 0, 0.35);
}

.px-gate__beam {
  position: absolute;
  inset-inline: 32%;
  inset-block: 0;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.24), transparent 70%);
  filter: blur(24px);
}

.px-gate__content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}

body.px-body .px-gate__title {
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 4.4vw, 2.05rem);
  font-weight: 800;
  color: #fff;
}

body.px-body .px-gate__text {
  margin: 0 0 26px;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--px-on-dark-2);
}

.px-gate__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

body.px-body .px-gate__actions .px-btn {
  flex: 1 1 auto;
  min-width: 160px;
}

@media (min-width: 480px) {
  body.px-body .px-gate__actions .px-btn {
    flex: 0 0 auto;
  }
}

.px-gate__lock {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  font-size: 1.2rem;
  color: var(--px-cyan);
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.34);
  border-radius: var(--px-r);
}

.px-courses__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Course cards share the honour/step card language exactly. */
.px-course {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--px-surface);
  border: 1px solid var(--px-surface-border);
  border-radius: var(--px-r);
  box-shadow: var(--px-surface-shadow);
  transition: transform 380ms var(--px-ease-out), box-shadow 380ms var(--px-ease),
    border-color 320ms var(--px-ease);
}

.px-course:hover {
  transform: translateY(-5px);
  border-color: var(--px-surface-hover);
  box-shadow: var(--px-surface-lift);
}

.px-course__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--px-surface-soft);
  overflow: hidden;
}

body.px-body .px-course__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.px-course__state {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  padding: 6px 12px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #fff;
  background: rgba(10, 7, 34, 0.82);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.px-course__state--free {
  background: rgba(22, 163, 74, 0.92);
}

.px-course__state--owned {
  background: rgba(124, 77, 255, 0.92);
}

.px-course__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

body.px-body .px-course__titlewrap {
  margin: 0;
}

body.px-body .px-course__title {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.6;
  color: var(--px-ink);
  text-align: start;
  background: none;
  border: 0;
  cursor: pointer;
}

body.px-body .px-course__title:hover {
  color: var(--px-accent);
}

body.px-body .px-course__teacher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--px-ink-2);
  background: var(--px-chip);
  border: 1px solid var(--px-rule-2);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--pa-t) var(--px-ease), background-color var(--pa-t) var(--px-ease),
    border-color var(--pa-t) var(--px-ease);
}

body.px-body .px-course__teacher:hover {
  color: var(--px-accent);
  background: var(--px-chip-2);
  border-color: var(--px-violet-2);
}

.px-courses__status {
  position: relative;
  z-index: 2;
}

.px-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  color: var(--px-ink-2);
  background: var(--px-surface-soft);
  border: 1px dashed var(--px-rule-2);
  border-radius: var(--px-r);
}

.px-note--error {
  color: var(--pa-danger);
  background: var(--pa-danger-bg);
  border-style: solid;
  border-color: rgba(225, 29, 72, 0.24);
}

/* ---- Services — bento, same content world ---- */
.px-services {
  padding-block: clamp(30px, 5vw, 56px) clamp(56px, 8vw, 110px);
}

/* Below 560px the bento is one full-width column: no 150px card ever has to
   carry a full Arabic paragraph. Two columns only arrive once they fit. */
.px-bento {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}

.px-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 190px;
  overflow: hidden;
  color: #fff;
  border-radius: var(--px-r-lg);
  border: 1px solid var(--px-surface-border);
  box-shadow: var(--px-surface-shadow);
  transition: transform 380ms var(--px-ease-out), box-shadow 380ms var(--px-ease),
    border-color 320ms var(--px-ease);
}

.px-tile:hover {
  transform: translateY(-5px);
  border-color: var(--px-surface-hover);
  box-shadow: var(--px-surface-lift);
}

body.px-body .px-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--px-ease-out);
}

.px-tile:hover .px-tile__img {
  transform: scale(1.06);
}

.px-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 6, 30, 0.1) 0%, rgba(8, 6, 30, 0.7) 54%, rgba(6, 4, 24, 0.94) 100%);
}

.px-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%);
  mask-image: linear-gradient(180deg, #000, transparent 55%);
  opacity: 0.7;
}

.px-tile__body {
  position: relative;
  z-index: 3;
  padding: 18px;
}

.px-tile__icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  color: #fff;
  background: rgba(124, 77, 255, 0.9);
  border-radius: var(--px-r-sm);
  box-shadow: 0 10px 22px rgba(90, 42, 224, 0.4);
}

body.px-body .px-tile__title {
  margin: 0 0 8px;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  font-weight: 800;
  color: #fff;
}

body.px-body .px-tile__text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
}

.px-tile--lead {
  min-height: 260px;
}

@media (min-width: 560px) {
  .px-bento {
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .px-tile--lead {
    grid-column: span 2;
    min-height: 300px;
  }
}

@media (min-width: 768px) {
  .px-bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
  }

  .px-tile--lead {
    grid-column: span 3;
    grid-row: span 2;
    min-height: 420px;
  }

  .px-tile--b,
  .px-tile--c {
    grid-column: span 3;
    min-height: 200px;
  }

  .px-tile--d,
  .px-tile--e {
    grid-column: span 3;
    min-height: 230px;
  }

  .px-tile__body {
    padding: 24px;
  }
}

@media (min-width: 1200px) {
  .px-tile--lead {
    min-height: 470px;
  }
}

/* --------------------------------------------------------------------------
   6. DARK CLOSING ENVIRONMENT — final CTA into the footer
   -------------------------------------------------------------------------- */
.px-cta {
  position: relative;
  padding-block: clamp(58px, 9vw, 118px) clamp(58px, 9vw, 112px);
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 50% 110%, rgba(240, 192, 76, 0.16) 0%, transparent 62%),
    radial-gradient(80% 80% at 20% 0%, rgba(34, 211, 238, 0.18) 0%, transparent 58%),
    linear-gradient(180deg, #07051e 0%, #0a0722 100%);
}

.px-cta__panel {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(28px, 6vw, 56px);
  text-align: center;
  color: #fff;
  border: 1px solid var(--px-line-2);
  border-radius: var(--px-r-lg);
  background: linear-gradient(150deg, rgba(40, 29, 104, 0.72), rgba(9, 7, 30, 0.88));
  box-shadow: 0 40px 90px rgba(3, 2, 14, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.px-cta__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 50% 0%, #000, transparent 72%);
}

body.px-body .px-cta__title {
  position: relative;
  margin: 0 0 26px;
  font-size: clamp(1.5rem, 5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.4;
  color: #fff;
}

.px-cta__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Auth-aware CTA. data-auth is set on <html> by the pixel-public.js phase-1
   bootstrap, before the body paints, so the correct variant is the only one
   ever rendered — no guest-then-student flash. Guest stays the default when
   the attribute is absent (scripting disabled). */
.px-cta__variant--student {
  display: none;
}

:root[data-auth="in"] .px-cta__variant--student {
  display: block;
}

/* The body-qualified selector is listed too so this reliably outranks
   `body.px-body .px-btn` instead of winning on source order alone. */
:root[data-auth="in"] .px-cta__variant--guest,
:root[data-auth="in"] .px-auth-guest,
:root[data-auth="in"] body.px-body .px-auth-guest {
  display: none;
}

/* Footer account column: the same guest/student swap, so a signed-in student
   is never offered "تسجيل الدخول" / "إنشاء حساب" anywhere on the page. */
li.px-auth-student {
  display: none;
}

:root[data-auth="in"] li.px-auth-student {
  display: list-item;
}

/* Hero actions. The student pair lives in the same .px-hero__cta flex row as
   the guest pair, so the row keeps its existing gap, wrapping and breakpoints.
   display:none also removes the hidden pair from the tab order and the
   accessibility tree — no offscreen focus traps. */
/* These must outrank `body.px-body .px-btn { display: inline-flex }` (0,2,1),
   so the body qualifier is carried on both rules. */
body.px-body .px-hero__cta .px-auth-student {
  display: none;
}

:root[data-auth="in"] body.px-body .px-hero__cta .px-auth-student {
  display: inline-flex;
}

/* :first-child still resolves to the hidden guest button, so the student
   primary is given the same emphasis explicitly below 480px. */
:root[data-auth="in"] body.px-body .px-hero__cta .px-auth-student:nth-of-type(3) {
  flex-grow: 1.35;
}

@media (min-width: 480px) {
  :root[data-auth="in"] body.px-body .px-hero__cta .px-auth-student:nth-of-type(3) {
    flex: 0 0 auto;
  }
}

body.px-body .px-cta__actions .px-btn {
  flex: 1 1 auto;
  min-width: 160px;
}

@media (min-width: 480px) {
  body.px-body .px-cta__actions .px-btn {
    flex: 0 0 auto;
    min-width: 190px;
  }
}

.px-cta__pix {
  position: relative;
  justify-content: center;
  margin-bottom: 22px;
}

/* The closing environment continues straight into the footer: the CTA ends on
   exactly the colour the footer starts from, so the seam is a hairline only. */
.px-footer {
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* --------------------------------------------------------------------------
   7. Light-mode art direction that cannot come from a token alone
   -------------------------------------------------------------------------- */
html[data-theme="light"] body.px-body .px-hero .px-btn--ghost {
  color: var(--px-violet-deep);
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(74, 32, 189, 0.28);
  box-shadow: 0 8px 22px rgba(52, 28, 122, 0.12);
}

html[data-theme="light"] body.px-body .px-hero .px-btn--ghost:hover {
  color: var(--px-violet-deep);
  background: #ffffff;
  border-color: rgba(74, 32, 189, 0.5);
  box-shadow: 0 14px 30px rgba(52, 28, 122, 0.18);
}

/* The gate reads as structure on the light hero, never as a dark wash behind
   the deep-purple outfits. */
html[data-theme="light"] .px-haze {
  opacity: 0.2;
}

html[data-theme="light"] .px-core__halo {
  opacity: 0.72;
}

html[data-theme="light"] .px-teacher__glow {
  opacity: 0.55;
}

/* A softer trail so the gold seam does not glare on the light hero. */
html[data-theme="light"] .px-hero__trail {
  opacity: 0.5;
  box-shadow: 0 0 18px rgba(176, 127, 17, 0.5);
}

html[data-theme="light"] .px-honor:hover {
  border-color: rgba(74, 32, 189, 0.42);
}

html[data-theme="light"] body.px-body .px-honor__img {
  filter: var(--px-portrait-shadow) drop-shadow(0 0 14px rgba(255, 255, 255, 0.9));
}

/* The interface panels stay dark inside the light content environment. */
html[data-theme="light"] .px-story__stage {
  background: linear-gradient(160deg, #1b1546, #0c0930);
  border-color: rgba(74, 32, 189, 0.2);
}

@media (min-width: 1024px) {
  html[data-theme="light"] .px-story__stage {
    background: none;
    border-color: transparent;
  }
}

/* --------------------------------------------------------------------------
   8. Motion control — tab pausing and reduced motion
   -------------------------------------------------------------------------- */
html.px-paused .px-core__seed,
html.px-paused .px-hero__eyebrow::before,
html.px-paused .px-faculty__stage::after {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .px-core__seed,
  .px-hero__eyebrow::before,
  .px-core__pulse,
  .px-teacher__wipe,
  .px-faculty__cap,
  .px-faculty__stage::after {
    animation: none !important;
  }

  .px-hero [data-enter],
  .px-hero .px-faculty__deck,
  .px-hero .px-faculty__hud,
  .px-hero.is-ready .px-faculty.is-assets-ready .px-faculty__deck {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .px-teacher,
  .px-teacher__hint {
    transition: none;
  }

  /* The progress indicator stays present but never animates. */
  .px-faculty__fill {
    transition: none !important;
  }

  .px-honor {
    transform: none !important;
    transition: none;
  }

  .px-scene {
    transition: none;
  }
}