/* The subject shortcuts arrive before the hero. The atmosphere spans the page. */
.home-container { padding-top: 20px; }
.home-container::before { display: none; }
.home-atmosphere { position: fixed; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; }
.atmosphere-wash, .atmosphere-aura, .atmosphere-pointer,
.atmosphere-grid, .atmosphere-ribbons, .atmosphere-canvas { position: absolute; pointer-events: none; }
.atmosphere-wash { inset: 0; background: linear-gradient(128deg, #e2ece1, #f4f1e7 42%, #dbe9e8 78%, #d1e4e8); }
.atmosphere-aura { border-radius: 50%; filter: blur(75px); animation: atmosphere-drift 23s ease-in-out infinite alternate; }
.aura-sage { width: 74vw; height: 77vh; right: -27vw; top: -34vh; background: radial-gradient(ellipse, #9bc8ae91, #c4dec25e 52%, transparent 74%); }
.aura-peach { width: 65vw; height: 105vh; left: -33vw; top: -20vh; background: radial-gradient(ellipse, #edcaa598, #f0ddbe61 49%, transparent 75%); animation-delay: -8s; animation-duration: 29s; }
.aura-blue { width: 85vw; height: 105vh; right: -41vw; bottom: -55vh; background: radial-gradient(ellipse, #88bbce9e, #bad8dc73 48%, transparent 75%); animation-delay: -16s; animation-duration: 31s; }
.aura-violet { width: 80vw; height: 70vh; left: -35vw; bottom: -45vh; background: radial-gradient(ellipse, #c4bdd66e, #e0d5d850 52%, transparent 75%); animation-delay: -12s; }
.atmosphere-pointer { inset: 0; background: radial-gradient(500px circle at var(--ambient-x, 75vw) var(--ambient-y, 20vh), #fcffdc68, transparent 72%); }
.atmosphere-grid { inset: 0; opacity: .35; background-image: linear-gradient(#4c7e7010 1px, transparent 1px), linear-gradient(90deg, #4c7e7010 1px, transparent 1px); background-size: 76px 76px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 25%, transparent 75%, #000); mask-image: linear-gradient(90deg, #000, transparent 25%, transparent 75%, #000); }
.atmosphere-ribbons { inset: 0; width: 100%; height: 100%; opacity: .9; }
.ribbon-traveller { stroke-dasharray: 60 1450; animation: ribbon-flow 32s linear infinite; opacity: .65; }
.atmosphere-glyph { position: absolute; color: transparent; -webkit-text-stroke: 1px #7ea9943b; font-family: Georgia, serif; font-weight: 500; animation: glyph-float 17s ease-in-out infinite alternate; }
.glyph-letters { left: 1.5vw; top: 35%; font-size: clamp(85px, 9vw, 150px); transform: rotate(-13deg); }
.glyph-geometry { right: 2.5vw; top: 57%; font-size: clamp(95px, 11vw, 180px); transform: rotate(11deg); animation-delay: -9s; }
.atmosphere-canvas { inset: 0; width: 100%; height: 100%; opacity: .7; }
.home-scroll-progress { position: fixed; z-index: 15; top: 0; left: 0; width: 100%; height: 2px; pointer-events: none; }
.home-scroll-progress > span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #448e83, #afba88, #c2a06c); transform: scaleX(var(--page-progress, 0)); transform-origin: left; }
.subject-launcher {
  position: relative; z-index: 5; isolation: isolate;
  display: flex; align-items: center; gap: 19px;
  padding: 14px 18px; margin-bottom: 20px;
  border: 1px solid #ffffffde; border-radius: 17px;
  background: #fffffff0; box-shadow: 0 9px 28px -17px #2f665b45, inset 0 0 0 1px #cbded32e;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.subject-launcher-heading { flex: 0 0 115px; }
.subject-launcher-heading > span { display: block; font-size: 8px; letter-spacing: 1.3px; font-weight: 700; color: #6e8b7b; white-space: nowrap; }
.subject-launcher-heading > a { display: inline-flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 10px; font-weight: 650; color: #2f776c; }
.subject-launcher-heading .icon { width: 13px; height: 13px; transition: transform 250ms; }
.subject-launcher-heading > a:hover .icon { transform: translateX(3px); }
.subject-shortcuts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; min-width: 0; flex: 1; }
.subject-shortcut {
  position: relative; isolation: isolate; overflow: hidden;
  min-width: 0; min-height: 55px; display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border: 1px solid #dfe9df; border-radius: 10px;
  background: #f8faf5; color: #315849;
  transform: perspective(500px) rotateX(var(--tile-pitch, 0deg)) rotateY(var(--tile-yaw, 0deg));
  transition: transform 300ms cubic-bezier(.2,.7,.3,1), box-shadow 300ms, border-color 300ms, background-color 300ms;
}
.subject-shortcut.peach { background: #fcf6ee; }
.subject-shortcut.sky, .subject-shortcut.blue { background: #f0f7f8; }
.subject-shortcut.lavender { background: #f6f3fb; }
.subject-shortcut::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(110px circle at var(--tile-x, 50%) var(--tile-y, 50%), #fffef2, transparent 80%); transition: opacity 250ms; }
.subject-shortcut::after { content: ""; position: absolute; inset: -60% 0; width: 35%; background: linear-gradient(90deg, transparent, #ffffffb3, transparent); opacity: 0; transform: translateX(-180%) rotate(22deg); transition: transform 900ms cubic-bezier(.2,.6,.3,1), opacity 400ms; pointer-events: none; }
.subject-shortcut:hover, .subject-shortcut:focus-visible { transform: perspective(500px) translateY(-3px) rotateX(var(--tile-pitch, 0deg)) rotateY(var(--tile-yaw, 0deg)); border-color: #a4c6b2; box-shadow: 0 8px 16px -9px #236b6047; }
.subject-shortcut:hover::before, .subject-shortcut:focus-visible::before { opacity: 1; }
.subject-shortcut:hover::after { opacity: .65; transform: translateX(380%) rotate(22deg); }
.shortcut-mark { width: 33px; height: 35px; display: block; flex: none; transition: transform 350ms; }
.shortcut-mark > svg { width: 100%; height: 100%; }
.subject-shortcut:hover .shortcut-mark { transform: rotate(-6deg) scale(1.08); }
.shortcut-label { font-size: 10px; font-weight: 650; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.shortcut-label small { display: block; font-weight: 400; font-size: 8px; color: #879b8b; margin-top: 4px; white-space: nowrap; }
.home-container .welcome { background: linear-gradient(112deg, #fffdf1e8 0%, #eef4e8ed 48%, #dceae3d6 100%); box-shadow: inset 0 0 0 1px #fff, 0 27px 50px -32px #275d5652, 0 5px 16px #3d6d5605; }
.home-container .welcome::after { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 #ffffffed, inset 1px 0 0 #ffffffa6, inset 0 -1px 0 #a4c6b347; }
.home-container .portal-canvas { opacity: 1; }
.home-container .scene-portal { box-shadow: inset 0 0 0 1px #ffffff78, inset 0 -22px 45px #061e3657, 0 0 0 9px #ffffff36, 0 0 0 10px #729f8d47, 0 25px 55px -20px #245f646b, 0 0 70px #e7e6bd4d; }
.hero-light-orbit { position: absolute; z-index: 1; border: 1px solid #78a58d5c; border-radius: 50%; width: 93%; height: 82%; top: 4%; left: 1%; transform: rotate(-24deg) rotateX(38deg); animation: light-orbit 15s ease-in-out infinite alternate; pointer-events: none; }
.hero-light-orbit::after { content: ""; position: absolute; left: 14%; top: 10%; width: 6px; height: 6px; background: #fff5d2; border: 1px solid #b4a06a8c; border-radius: 50%; box-shadow: 0 0 12px #fffbe4, 0 0 20px #b4cca7b8; }
.hero-light-orbit.orbit-second { width: 107%; height: 95%; left: -6%; top: -2%; border-color: #c7b57e54; animation-direction: alternate-reverse; animation-duration: 21s; }
.orbit-second::after { left: auto; right: 3%; top: 29%; width: 4px; height: 4px; }
.hero-floor-glow { position: absolute; left: 5%; right: 2%; bottom: 20px; height: 72px; border-radius: 50%; background: radial-gradient(ellipse, #90b9a67d, #e8ead400 66%); filter: blur(11px); transform: rotate(-7deg); pointer-events: none; }
.home-container .welcome-actions .button-primary { position: relative; overflow: hidden; background: linear-gradient(120deg, #173d52, #245b62); box-shadow: 0 7px 19px -5px #1c5c5d52; }
.home-container .welcome-actions .button-primary::after { content: ""; position: absolute; top: -70%; bottom: -70%; width: 35%; background: linear-gradient(90deg, transparent, #f1ffdd30, transparent); transform: translateX(-190%) rotate(22deg); animation: button-light 11s ease-in-out infinite; pointer-events: none; }
.home-container .welcome-actions .button-primary > .icon { transition: transform 250ms; }
.home-container .welcome-actions .button-primary:hover > .icon { transform: translateX(3px); }
.home-container .learning-path { background: #ffffff59; border: 1px solid #ffffff8c; border-top: 0; border-radius: 0 0 19px 19px; margin-inline: 17px; padding-inline: 24px; }
.home-container .learning-showcase { background: #fffef9f2; border-color: #ffffffb8; box-shadow: 0 17px 35px -24px #34695d3d; }
.home-container .showcase-stage { background: radial-gradient(ellipse at 80% 20%, #eaf3d8e6, transparent 60%), linear-gradient(145deg, #dcece1, #d1e4e4); }
.home-container .showcase-stage-orbit { animation: showcase-orbit 23s ease-in-out infinite alternate; }
.home-container .subject-card::after { background: radial-gradient(180px circle at var(--tile-x, 0%) var(--tile-y, 100%), #deedce94, transparent 85%); }
.home-container .compendium-card { background: #fffffff5; box-shadow: 0 9px 21px -18px #1c5c4b40; }
.home-container[data-effects-paused="true"] .atmosphere-aura,
.home-container[data-effects-paused="true"] .atmosphere-glyph,
.home-container[data-effects-paused="true"] .ribbon-traveller,
.home-container[data-effects-paused="true"] .hero-light-orbit,
.home-container[data-effects-paused="true"] .button-primary::after,
.home-container[data-effects-paused="true"] .showcase-stage-orbit,
.welcome[data-effects-paused="true"] .hero-light-orbit,
.welcome[data-effects-paused="true"] .button-primary::after { animation-play-state: paused; }
@keyframes atmosphere-drift { from { translate: -2vw -2vh; scale: .96; } to { translate: 3vw 3vh; scale: 1.08; } }
@keyframes glyph-float { from { translate: 0 -10px; } to { translate: 0 16px; } }
@keyframes ribbon-flow { to { stroke-dashoffset: -3020; } }
@keyframes light-orbit { from { transform: rotate(-24deg) rotateX(38deg); } to { transform: rotate(-9deg) rotateX(24deg); } }
@keyframes button-light { 0%, 65% { transform: translateX(-190%) rotate(22deg); } 88%, 100% { transform: translateX(450%) rotate(22deg); } }
@keyframes showcase-orbit { from { transform: rotateX(15deg) rotateZ(-12deg) scale(.98); } to { transform: rotateX(4deg) rotateZ(1deg) scale(1.03); } }
@media (max-width: 1100px) { .subject-launcher { gap: 14px; } .subject-launcher-heading { flex-basis: 102px; } .subject-shortcut { padding-inline: 7px; gap: 6px; } .shortcut-mark { width: 29px; height: 32px; } .shortcut-label { font-size: 9px; } }
@media (max-width: 1000px) { .subject-shortcuts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .shortcut-secondary { display: none; } .shortcut-mark { width: 34px; height: 36px; } .shortcut-label { font-size: 11px; } }
@media (max-width: 760px) {
  .home-container { padding-top: 17px; }
  .subject-launcher { display: block; padding: 13px; margin-bottom: 17px; }
  .subject-launcher-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
  .subject-launcher-heading > span { font-size: 8px; }
  .subject-launcher-heading > a { margin-top: 0; font-size: 9px; }
  .subject-shortcut { min-height: 56px; gap: 6px; padding: 7px 8px; }
  .shortcut-mark { width: 30px; height: 32px; }
  .shortcut-label { font-size: 10px; }
  .shortcut-label small { font-size: 7px; }
  .atmosphere-aura { filter: blur(55px); }
  .atmosphere-ribbons { opacity: .75; }
  .atmosphere-glyph { opacity: .7; }
  .home-container .learning-path { margin-inline: 12px; padding-inline: 15px; }
}
@media (max-width: 540px) {
  .home-container { padding-top: 13px; }
  .subject-launcher { border-radius: 13px; padding: 11px; margin-bottom: 14px; }
  .subject-launcher-heading { margin-bottom: 9px; }
  .subject-launcher-heading > span { font-size: 7px; letter-spacing: 1.1px; }
  .subject-shortcuts { gap: 5px; }
  .subject-shortcut { flex-direction: column; justify-content: flex-start; gap: 5px; min-height: 77px; padding: 7px 3px; border-radius: 8px; text-align: center; }
  .shortcut-mark { width: 31px; height: 32px; }
  .shortcut-label { font-size: 9px; line-height: 1.25; }
  .shortcut-label small { display: none; }
  .atmosphere-grid { background-size: 52px 52px; opacity: .25; }
  .atmosphere-aura { filter: blur(40px); }
  .aura-peach { width: 120vw; left: -67vw; }
  .aura-blue { width: 130vw; right: -82vw; }
  .atmosphere-glyph { font-size: 95px; opacity: .5; }
  .glyph-letters { left: -20px; }
  .glyph-geometry { right: -18px; }
  .home-container .learning-path { margin-inline: 9px; padding-inline: 12px; }
  .hero-light-orbit { left: 6%; width: 88%; top: 5%; height: 87%; }
  .hero-light-orbit.orbit-second { left: 0; width: 100%; height: 100%; top: -1%; }
  .hero-floor-glow { bottom: 16px; left: 7%; right: 7%; height: 55px; }
}
@media (max-width: 360px) { .subject-shortcuts { gap: 4px; } .shortcut-label { font-size: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .home-container .atmosphere-aura, .home-container .atmosphere-glyph,
  .home-container .ribbon-traveller, .home-container .hero-light-orbit,
  .home-container .button-primary::after, .home-container .showcase-stage-orbit { animation: none; }
  .home-container .subject-shortcut, .home-container .subject-shortcut::after,
  .home-container .shortcut-mark, .home-container .subject-launcher-heading .icon { transition: none; }
  .home-container .subject-shortcut:hover, .home-container .subject-shortcut:focus-visible,
  .home-container .subject-shortcut:hover .shortcut-mark { transform: none; }
  .home-container .subject-shortcut::after { display: none; }
}