/* Full-screen introduction followed by a naturally scrolling dashboard cover. */
.student-home-shell .topbar { position: sticky; top: 0; z-index: 60; }
.dashboard-experience { position: relative; isolation: isolate; }
.dashboard-experience.has-intro {
  --scene-header: 100px;
  --scene-offset: 132px;
  --reveal-progress: 0;
  width: calc(100% + 64px);
  margin-inline: -32px;
}
.student-home-shell .has-intro .paid-intro {
  position: sticky;
  top: var(--scene-header);
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(0,1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: 25px 28px;
  min-height: calc(100svh - var(--scene-offset));
  padding: 65px 36px 80px;
  margin: 0;
  border: 0;
  background: #061020;
  opacity: calc(1 - var(--reveal-progress) * .42);
  transform: scale(calc(1 - var(--reveal-progress) * .035));
  transform-origin: center 35%;
}
.has-intro .intro-copy { grid-column: 1; grid-row: 1; align-self: end; padding: 0!important; }
.student-home-shell .has-intro .intro-copy h1 {
  font-size: clamp(42px,4.7vw,68px); line-height: 1.06; margin: 25px 0 22px;
}
.student-home-shell .has-intro .intro-copy > p { font-size: 16px; max-width: 510px; }
.student-home-shell .has-intro .intro-copy > .intro-overview { color: #94a5c5; font-size: 14px; max-width: 405px; margin-top: 10px; }
.student-home-shell .has-intro .intro-copy .intro-context { margin: 18px 0 0; font-size: 12px; color: #a18acb; }
.has-intro .compass-art { grid-column: 2; grid-row: 1/3; width: 100%; height: 430px; align-self: center; }
.has-intro .compass-art img { width: min(440px,100%); }
.has-intro .compass-aura { width: 430px; height: 350px; }
.has-intro .compass-orbits { width: 128%; height: 116%; inset: -8% -14%; }
.has-intro .intro-actions { grid-column: 1; grid-row: 2; align-self: start; position: relative; z-index: 2; }
.student-home-shell .intro-actions > .btn { min-height: 54px; min-width: 286px; padding: 15px 24px; font-size: 14px; gap: 35px; }
.intro-actions > .btn .icon { width: 17px; height: 17px; transform: rotate(90deg); }
.intro-actions > small { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #8b9cbd; margin-top: 16px; }
.intro-actions > small .icon { width: 11px; height: 11px; transform: rotate(90deg); }
.has-intro .intro-aurora { inset: 0 -4%; animation: scene-aurora 24s ease-in-out infinite alternate; will-change: transform; }
.has-intro .aurora-flow { animation: none; will-change: auto; }
.has-intro .compass-float { will-change: transform; }
.has-intro .compass-orbits { animation: scene-orbit 16s ease-in-out infinite alternate; will-change: transform; }
.has-intro .compass-orbits .orbit-light { animation: none; }
.student-home-shell .has-intro #assessment-dashboard {
  position: relative;
  z-index: 3;
  min-height: calc(100svh - var(--scene-header));
  padding: 52px 36px 55px;
  margin-top: 0;
  scroll-margin-top: calc(var(--scene-header) + 16px);
  background: linear-gradient(180deg,#0e192f 0%,#081326 27%,#061020 90%);
  border: 1px solid rgba(191,196,231,.24);
  border-bottom: 0;
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -22px 70px rgba(0,0,0,.35),inset 0 1px rgba(237,226,255,.12);
  animation: none;
}
.has-intro #assessment-dashboard::before {
  content: ""; position: absolute; top: 17px; left: 50%; width: 42px; height: 4px;
  border-radius: 10px; transform: translateX(-50%); background: #c4b5fd57;
}
.has-intro.intro-covered .paid-intro { pointer-events: none; }
.has-intro.intro-covered :is(.aurora-flow,.compass-float,.orbit-light,.compass-spark) { animation-play-state: paused; }
.has-intro.intro-covered :is(.intro-aurora,.compass-orbits) { animation-play-state: paused; }
.student-home-shell .has-intro + .footer { margin-top: 0; }
@keyframes scene-aurora { from { transform: translate3d(-15px,12px,0) scale(1.04); opacity: .8; } to { transform: translate3d(18px,-10px,0) scale(1.08); opacity: 1; } }
@keyframes scene-orbit { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

@media(max-width:1000px) {
  .student-home-shell .has-intro .paid-intro { padding: 44px 30px 55px; gap: 24px 15px; }
  .student-home-shell .has-intro .intro-copy h1 { font-size: 47px; }
  .has-intro .compass-art { height: 340px; }
  .has-intro .compass-art img { width: 340px; max-width: 100%; }
  .student-home-shell .has-intro #assessment-dashboard { padding: 48px 30px; }
}
@media(max-width:780px) {
  .dashboard-experience.has-intro { width: calc(100% + 44px); margin-inline: -22px; --scene-header: 78px; --scene-offset: 108px; }
  .student-home-shell .has-intro .paid-intro { padding: 40px 24px 55px; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
  .student-home-shell .has-intro .intro-copy h1 { font-size: 40px; }
  .student-home-shell .has-intro .intro-copy > p { font-size: 14px; }
  .student-home-shell .has-intro .intro-copy > .intro-overview { font-size: 12px; }
  .has-intro .compass-art { height: 290px; }
  .student-home-shell .intro-actions > .btn { min-width: 0; width: 100%; gap: 14px; font-size: 12px; }
  .student-home-shell .has-intro #assessment-dashboard { padding: 46px 24px 35px; border-radius: 25px 25px 0 0; }
}
@media(max-width:550px) {
  .dashboard-experience.has-intro { width: calc(100% + 36px); margin-inline: -18px; --scene-header: 76px; --scene-offset: 106px; }
  .student-home-shell .has-intro .paid-intro {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    justify-items: center;
    gap: 12px;
    padding: 26px 23px 34px;
  }
  .student-home-shell .has-intro .intro-copy { display: block; grid-column: 1; grid-row: 1; text-align: center; width: 100%; }
  .has-intro .intro-kicker { justify-content: center; font-size: 8px; }
  .student-home-shell .has-intro .intro-copy h1 { font-size: clamp(31px,8.5vw,41px); line-height: 1.08; margin: 18px 0 13px; }
  .student-home-shell .has-intro .intro-copy > p { font-size: 12px; line-height: 1.65; padding: 0; max-width: 320px; margin-inline: auto; }
  .student-home-shell .has-intro .intro-copy > .intro-overview { font-size: 11px; max-width: 270px; margin-top: 8px; }
  .student-home-shell .has-intro .intro-copy .intro-context { font-size: 10px; margin-top: 12px; }
  .has-intro .compass-art { position: relative; grid-column: 1; grid-row: 2; top: auto; right: auto; width: 100%; height: clamp(180px,27svh,260px); margin: 4px 0; }
  .has-intro .compass-art img { width: clamp(185px,29svh,265px); max-width: 88%; }
  .has-intro .compass-float { inset: -9px 0; }
  .has-intro .compass-aura { width: 260px; height: 225px; }
  .has-intro .compass-orbits { width: 112%; height: 115%; inset: -8% -6%; }
  .has-intro .compass-spark { right: 25%; top: 0; }
  .has-intro .intro-actions { grid-column: 1; grid-row: 3; width: 100%; max-width: 350px; align-self: auto; }
  .student-home-shell .intro-actions > .btn { min-height: 49px; font-size: 13px; width: 100%; justify-content: center; gap: 22px; }
  .intro-actions > small { justify-content: center; font-size: 10px; margin-top: 12px; }
  .student-home-shell .has-intro #assessment-dashboard { padding: 43px 18px 28px; border-radius: 24px 24px 0 0; }
}
@media(max-width:550px) and (max-height:700px) {
  .student-home-shell .has-intro .paid-intro { padding-top: 20px; padding-bottom: 24px; gap: 8px; }
  .student-home-shell .has-intro .intro-copy h1 { font-size: 30px; margin: 13px 0 10px; }
  .student-home-shell .has-intro .intro-copy > .intro-overview { max-width: 300px; font-size: 10px; }
  .has-intro .compass-art { height: 150px; margin: 0; }
  .has-intro .compass-art img { width: 165px; }
}
@media(max-width:550px) and (max-height:650px) {
  .student-home-shell .has-intro .intro-copy > .intro-overview { display: none; }
  .has-intro .compass-art { height: 140px; }
  .has-intro .compass-art img { width: 155px; }
}
@media(prefers-reduced-motion:reduce) {
  .student-home-shell .has-intro .paid-intro { opacity: 1; transform: none; }
}
