/* ── Ambient background ───────────────────────────────── */
.aurora {
  position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 58% at 20% 20%, rgba(59,107,255,.26), rgba(59,107,255,.08) 45%, transparent 72%),
    radial-gradient(42% 52% at 80% 10%, rgba(242,193,78,.13), rgba(242,193,78,.04) 45%, transparent 72%),
    radial-gradient(58% 68% at 60% 90%, rgba(67,224,176,.11), rgba(67,224,176,.03) 45%, transparent 72%);
  will-change: transform;
  animation: aurora 28s ease-in-out infinite alternate;
}
:root[data-theme="light"] .aurora { opacity: .55; }
@keyframes aurora { from { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1); } to { transform: translate3d(3%, 2%, 0) rotate(6deg) scale(1.08); } }

/* ── Reversed scroll progress ─────────────────────────── */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; background: var(--line); }
.progress i { display: block; height: 100%; width: 100%; transform: scaleX(var(--p, 1)); transform-origin: left; background: linear-gradient(90deg, var(--cobalt), var(--falcon)); transition: transform .15s linear; will-change: transform; }

/* ── Text that glitches, and text that hangs ───────────── */
.glitch-text { position: relative; display: inline-block; animation: gt-base 7s steps(1) infinite; }
.glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
.glitch-text::before { color: #ff3c78; clip-path: inset(15% 0 55% 0); animation: gt-a 7s steps(1) infinite; }
.glitch-text::after { color: #3cdcff; clip-path: inset(60% 0 8% 0); animation: gt-b 7s steps(1) infinite; }
@keyframes gt-base { 0%, 88%, 100% { transform: none; filter: none } 89% { transform: translateX(3px) skewX(-8deg) } 91% { transform: translateX(-4px); filter: contrast(2) } 93% { transform: translateX(2px) skewX(6deg) } 95% { transform: none } }
@keyframes gt-a { 0%, 88%, 96%, 100% { opacity: 0 } 89% { opacity: 1; transform: translate(-7px, 2px) } 91% { transform: translate(6px, -2px); clip-path: inset(35% 0 30% 0) } 93% { transform: translate(-4px, 1px); clip-path: inset(5% 0 80% 0) } 95% { opacity: 1; transform: translate(2px, 0) } }
@keyframes gt-b { 0%, 88%, 96%, 100% { opacity: 0 } 89% { opacity: 1; transform: translate(6px, -1px) } 91% { transform: translate(-5px, 2px); clip-path: inset(70% 0 0 0) } 93% { transform: translate(3px, -2px); clip-path: inset(45% 0 35% 0) } 95% { opacity: 1; transform: translate(-2px, 0) } }

.hang { position: relative; display: inline-block; transform-origin: 10% 0; will-change: transform; will-change: transform; animation: hang-sway 5s ease-in-out infinite; }
.hang::before { content: ""; position: absolute; left: 10%; top: .04em; width: .12em; height: .12em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ddd, #666); box-shadow: 0 1px 3px rgba(0,0,0,.7); z-index: 1; }
.hang::after { content: ""; position: absolute; left: 10%; top: -.9em; width: 1px; height: .94em; background: var(--text-3); transform: translateX(.06em); }
@keyframes hang-sway { 0%, 100% { transform: rotate(5deg) } 45% { transform: rotate(8deg) translateY(.02em) } 70% { transform: rotate(6deg) } 76% { transform: rotate(10deg) translateY(.06em) } 82% { transform: rotate(7deg) translateY(.04em) } }
.hang-r { transform-origin: 90% 0; animation-name: hang-sway-r; }
.hang-r::before, .hang-r::after { left: auto; right: 10%; }
@keyframes hang-sway-r { 0%, 100% { transform: rotate(-7deg) } 45% { transform: rotate(-11deg) translateY(.04em) } 70% { transform: rotate(-8deg) } 76% { transform: rotate(-14deg) translateY(.1em) } 82% { transform: rotate(-10deg) translateY(.08em) } }
.slip { display: inline-block; transform: translate(.1em, .42em) rotate(28deg); opacity: .9; }

/* ── Nonsense controls ────────────────────────────────── */
.toggle { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-elev); font-size: 13px; color: var(--text-2); cursor: pointer; user-select: none; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .knob { width: 38px; height: 22px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background .3s; }
.toggle .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transform: translateX(16px); transition: transform .3s var(--ease-spring); }
.toggle input:checked ~ .knob { background: var(--line-strong); }
.toggle input:checked ~ .knob::after { transform: translateX(0); }
.toggle input:not(:checked) ~ .knob { background: var(--mint); }
.toggle b { color: var(--text); }
.bell { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); }
.bell:hover { background: var(--bg-elev-2); color: var(--text); }
.bell b { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--coral); color: #fff; font: 700 10px var(--font-mono); display: grid; place-items: center; }
.chip.sort { appearance: none; -webkit-appearance: none; padding-right: 26px; background: var(--bg-elev) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a84a6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; cursor: pointer; }
.count { font-size: 13px; color: var(--text-3); margin: -10px 0 14px; }
.stepnote { display: block; font-size: 11px; color: var(--text-3); margin-top: 4px; }
.stepnote .mono { color: var(--falcon); }
.lang { display: inline-flex; gap: 8px; align-items: center; }
.lang select { background: var(--bg-elev); color: var(--text-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 12px; }

/* ── Hero ─────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center;
  padding: clamp(56px, 9vw, 120px) 0 72px;
}
.hero h1 {
  font-size: clamp(42px, 6.4vw, 88px); font-weight: 700; letter-spacing: -0.035em; margin: 18px 0 36px;
  font-variation-settings: "opsz" 96;
}
.accent { color: var(--falcon); }
.lede { font-size: clamp(16px, 1.4vw, 19px); color: var(--text-2); max-width: 54ch; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.facts { margin: 36px 0 0; padding-top: 22px; border-top: 1px solid var(--line); max-width: 56ch; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.facts span { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.facts sup { font-size: 10px; color: var(--falcon); }
.hero .reveal:nth-child(1) { transition-delay: .05s } .hero .reveal:nth-child(2) { transition-delay: .15s }
.hero .reveal:nth-child(3) { transition-delay: .25s } .hero .reveal:nth-child(4) { transition-delay: .35s } .hero .reveal:nth-child(5) { transition-delay: .45s }

/* ── Signature: eight-semester rail ─────────────────── */
.rail {
  position: relative; border-radius: var(--radius-l); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-elev-2), var(--bg-elev));
  box-shadow: var(--shadow); padding: 18px; overflow: hidden;
  transform: perspective(1400px) rotateY(-8deg) rotateX(4deg);
  transition: transform 1.2s var(--ease-out);
  animation: rail-in 1.4s var(--ease-out) both .2s;
}
.rail:hover { transform: perspective(1400px) rotateY(-3deg) rotateX(1.5deg); }
@keyframes rail-in { from { opacity: 0; transform: perspective(1400px) rotateY(-18deg) rotateX(8deg) translateX(40px); } }
.rail-head, .rail-foot { display: grid; grid-template-columns: repeat(4, 1fr); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.rail-head span { padding: 0 0 12px 6px; }
.rail-foot { grid-template-columns: 1fr auto; padding: 14px 6px 0; border-top: 1px solid var(--line); margin-top: 14px; align-items: center; }
.rail-ok { color: var(--mint); display: inline-flex; align-items: center; gap: 6px; }
.rail-ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35 } }
.rail-cols { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; min-height: 300px; }
.rail-col { display: grid; align-content: start; gap: 6px; padding: 6px; border-radius: 10px; background: var(--bg-elev); border: 1px dashed var(--line); }
.rail-col:nth-child(2n) { border-style: solid; }
.rail-chip {
  height: 38px; border-radius: 7px; padding: 5px 6px; font-family: var(--font-mono); font-size: 9.5px; line-height: 1.25; overflow: hidden;
  color: var(--text); background: hsl(var(--h) 70% 55% / .2); border: 1px solid hsl(var(--h) 70% 60% / .4);
  animation: chip-in .7s var(--ease-spring) both; animation-delay: var(--d);
}
.rail-chip b { display: block; font-weight: 700; white-space: nowrap; letter-spacing: -0.02em; }
.rail-chip span { display: block; color: var(--text-2); font-size: 8.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes chip-in { from { opacity: 0; transform: translateY(-14px) scale(.9); } }
.rail-chip.drift { animation: drift 5s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translateY(-2px); } }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; gap: 40px; }
  .rail { transform: none; }
  .rail-cols { grid-template-columns: repeat(4, 1fr); } .rail-col:nth-child(n+5) { display: none; }
  .rail-head { grid-template-columns: repeat(2, 1fr); } .rail-head span:nth-child(n+3) { display: none; }
}

/* ── Majors section ───────────────────────────────────── */
.majors-section { padding: 48px 0 24px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.section-head h2, .how h2 { font-size: clamp(30px, 4vw, 48px); margin-top: 8px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--text-2); transition: all .3s var(--ease-out); }
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: transparent; }
.search {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--bg-elev); color: var(--text-3); margin-bottom: 22px; transition: border-color .3s, box-shadow .3s;
}
.search:focus-within { border-color: var(--cobalt-soft); box-shadow: var(--glow); }
.search input { flex: 1; background: none; border: 0; color: var(--text); font: inherit; font-size: 15px; outline: none; }

.majors { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.major {
  --h: 220;
  position: relative; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 18px; row-gap: 4px;
  align-items: start; min-height: 172px; padding: 22px 24px 20px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--bg-elev); color: var(--text);
  transform-style: preserve-3d; transition: transform .5s var(--ease-out), border-color .4s, box-shadow .5s, opacity .4s, scale .4s; will-change: transform;
  overflow: hidden; isolation: isolate;
}
.major.tilting { transition-property: border-color, box-shadow, opacity, scale; }
.major::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; opacity: 0; transition: opacity .5s;
  background: radial-gradient(120% 90% at var(--mx, 50%) var(--my, 0%), hsl(var(--h) 85% 60% / .18), transparent 60%);
}
.major:hover { border-color: hsl(var(--h) 70% 60% / .55); box-shadow: 0 24px 48px -30px hsl(var(--h) 80% 50% / .5); }
.major:hover::before { opacity: 1; }
.major .glyph {
  grid-row: 1 / -1; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: hsl(var(--h) 70% 55% / .14); border: 1px solid hsl(var(--h) 70% 60% / .3);
  font-family: var(--font-display); font-weight: 800; font-size: 24px; color: hsl(var(--h) 85% 70%); letter-spacing: -0.04em;
}
:root[data-theme="light"] .major .glyph { color: hsl(var(--h) 70% 38%); }
.major h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.major .dept { font-size: 13px; color: var(--text-3); }
.major .tag { font-size: 14px; color: var(--text-2); margin-top: 6px; }
.major .credits { align-self: end; font-size: 13px; color: var(--text-3); margin-top: 12px; }
.major .credits b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.major.hide { opacity: 0; scale: .96; pointer-events: none; position: absolute; }

/* ── How it works ─────────────────────────────────────── */
.how { padding: 72px 0 96px; }
.steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
.steps li { position: relative; display: grid; gap: 10px; align-content: start; }
.steps li::before { counter-increment: step; content: "Step " counter(step); font-size: 13px; color: var(--text-3); }
.steps h3 { font-size: 20px; }
.steps p { color: var(--text-2); font-size: 14px; }
.step-art { height: 120px; border-radius: 12px; background: var(--bg-elev-2); border: 1px solid var(--line); position: relative; overflow: hidden; margin: 6px 0; }
.art-pick span { position: absolute; left: 14px; right: 14px; height: 22px; border-radius: 6px; background: var(--line-strong); }
.art-pick span:nth-child(1) { top: 16px; } .art-pick span:nth-child(2) { top: 48px; background: var(--cobalt); width: 60%; box-shadow: var(--glow); animation: pick 3s infinite; } .art-pick span:nth-child(3) { top: 80px; }
@keyframes pick { 0%,100% { transform: translateX(0) } 50% { transform: translateX(10px) } }
.art-drag i { position: absolute; top: 16px; bottom: 16px; width: 20%; border-radius: 6px; border: 1px dashed var(--line-strong); }
.art-drag i:nth-child(1){left:6%} .art-drag i:nth-child(2){left:29%} .art-drag i:nth-child(3){left:52%} .art-drag i:nth-child(4){left:75%}
.art-drag b { position: absolute; top: 28px; left: 9%; width: 14%; height: 20px; border-radius: 5px; background: var(--falcon); animation: dragchip 4s var(--ease-out) infinite; }
@keyframes dragchip { 0%,15% { transform: translate(0, 0) } 45%,60% { transform: translate(329%, 24px) } 90%,100% { transform: translate(0, 0) } }
.art-export i { position: absolute; left: 50%; top: 50%; width: 46px; height: 58px; translate: -50% -50%; border-radius: 6px; background: var(--text); opacity: .9; animation: export 3s var(--ease-spring) infinite; }
.art-export i::after { content: "PDF"; position: absolute; inset: auto 0 8px; text-align: center; font: 700 10px var(--font-mono); color: var(--bg); }
@keyframes export { 0%,20% { translate: -50% -50% } 50%,70% { translate: -50% -70% } 100% { translate: -50% -50% } }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }