/* Asterism's four aurora inks, with deeper text colors for light surfaces. */
:root {
  --aurora-1: #16a05a;
  --aurora-2: #2f6fe8;
  --aurora-3: #e8542a;
  --aurora-4: #e0a800;
  --aurora-text: linear-gradient(105deg, #24714c 0%, #315bb2 34%, #b3462b 68%, #906b0b 100%);
  --aurora-spectrum: linear-gradient(105deg, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4));
  --aurora-strength: 60%;
}
:root[data-theme=dark] {
  --aurora-1: #3ddc84;
  --aurora-2: #4d8dff;
  --aurora-3: #ff6a3d;
  --aurora-4: #ffd23f;
  --aurora-text: linear-gradient(105deg, #62d9a0 0%, #83aaff 34%, #ff9876 68%, #efcf72 100%);
  --aurora-strength: 67%;
}
.topbar { border-image: linear-gradient(90deg, transparent, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4), transparent) 1; }
h1 > span, .brand-symbol, .tiny-star, .name-dot, .skill-symbol {
  background: var(--aurora-text);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
h1 > span { display: inline-block; }
h1 > span .name-dot { color: inherit; background: none; }
.hero .primary {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--fg), var(--fg)) padding-box, var(--aurora-spectrum) border-box;
}
.hero .primary:hover { color: var(--bg); box-shadow: 0 0 22px color-mix(in srgb, var(--aurora-2) 20%, transparent); }
.career-focus { color: var(--fg); border-left: 2px solid transparent; border-image: linear-gradient(var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4)) 1; padding-left: 10px; }
.impact-strip, .expertise-section, .education-section { border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--aurora-1) 40%, var(--line)), color-mix(in srgb, var(--aurora-2) 40%, var(--line)), color-mix(in srgb, var(--aurora-3) 40%, var(--line)), color-mix(in srgb, var(--aurora-4) 40%, var(--line)), transparent) 1; }
.artwork { background: #e9edf0; isolation: isolate; }
:root[data-theme=dark] .artwork { background: #10151e; }
:root[data-theme=dark] .artwork::after { content: ""; position: absolute; inset: auto 0 0; height: 80px; background: linear-gradient(transparent, #0b0f1866); pointer-events: none; }
.art-grid { opacity: .19; }
.aurora-curtain { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.aurora-curtain::before, .aurora-curtain::after {
  content: ""; position: absolute; inset: -10% -20% -8%;
  transform-origin: 50% 95%; filter: blur(20px);
}
.aurora-curtain::before {
  background:
    radial-gradient(ellipse 24% 75% at 24% 84%, color-mix(in oklch, var(--aurora-1) var(--aurora-strength), transparent), transparent),
    radial-gradient(ellipse 24% 83% at 43% 75%, color-mix(in oklch, var(--aurora-2) var(--aurora-strength), transparent), transparent),
    radial-gradient(ellipse 23% 80% at 62% 90%, color-mix(in oklch, var(--aurora-3) var(--aurora-strength), transparent), transparent),
    radial-gradient(ellipse 19% 65% at 77% 87%, color-mix(in oklch, var(--aurora-4) var(--aurora-strength), transparent), transparent);
  transform: skewX(-13deg);
}
.aurora-curtain::after {
  opacity: 0;
  background:
    radial-gradient(ellipse 23% 65% at 28% 80%, color-mix(in oklch, var(--aurora-2) var(--aurora-strength), transparent), transparent),
    radial-gradient(ellipse 25% 85% at 47% 84%, color-mix(in oklch, var(--aurora-1) var(--aurora-strength), transparent), transparent),
    radial-gradient(ellipse 25% 68% at 67% 80%, color-mix(in oklch, var(--aurora-4) var(--aurora-strength), transparent), transparent),
    radial-gradient(ellipse 20% 80% at 80% 93%, color-mix(in oklch, var(--aurora-3) var(--aurora-strength), transparent), transparent);
}
/* Lead with the resume; keep the orbital scene as a compact signature. */
.hero { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "copy art" "impact impact"; gap: 32px 48px; padding: 40px 0 0; }
.hero-copy { grid-area: copy; }
.hero h1 { font-size: clamp(60px, 5.7vw, 82px); margin: 22px 0; }
.hero h1 br { display: none; }
.hero h1 > span { margin-left: .16em; }
.hero-description { max-width: 660px; }
.hero-line { font-size: 30px; }
.impact-strip { grid-area: impact; }
.artwork { grid-area: art; width: 320px; height: 320px; justify-self: end; }
#scene { inset: 0; }
.artwork > .motion-button { position: absolute; right: 12px; bottom: 12px; z-index: 2; }
@media (min-width: 741px) and (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) 250px; gap: 28px; }
  .hero h1 br { display: block; }
  .hero h1 > span { margin-left: 0; }
  .artwork { width: 250px; height: 250px; }
}
@media (max-width: 740px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "impact" "art"; gap: 24px; padding: 32px 0 0; }
  .hero h1 { font-size: clamp(62px, 16vw, 96px); }
  .hero h1 br { display: block; }
  .hero h1 > span { margin-left: 0; }
  .artwork { width: min(100%, 300px); height: 200px; justify-self: center; }
  .artwork > .motion-button { width: 44px; height: 44px; right: 8px; bottom: 8px; }
}
@media(prefers-reduced-motion:no-preference) {
  .aurora-curtain::before { animation: aurora-swell 16s ease-in-out infinite; animation-play-state: paused; }
  .aurora-curtain::after { animation: aurora-drift 21s ease-in-out infinite; animation-play-state: paused; }
  .artwork[data-motion=running] .aurora-curtain::before, .artwork[data-motion=running] .aurora-curtain::after { animation-play-state: running; }
}
@keyframes aurora-swell {
  0%,100% { opacity: .85; transform: skewX(-13deg) scaleY(1); }
  35% { opacity: 1; transform: skewX(-6deg) scaleY(1.15); }
  70% { opacity: .65; transform: skewX(-18deg) scaleY(.9); }
}
@keyframes aurora-drift {
  0%,100% { opacity: 0; transform: translateX(-4%) skewX(8deg); }
  40% { opacity: .6; transform: translateX(4%) skewX(-8deg) scaleY(1.1); }
  75% { opacity: .25; transform: translateX(-2%) skewX(6deg); }
}
@media(forced-colors:active) {
  h1 > span,.brand-symbol,.tiny-star,.name-dot,.skill-symbol { color: CanvasText; background:none; }
  .hero .primary { background:ButtonFace; color:ButtonText; border:1px solid ButtonText; }
  .aurora-curtain { display:none; }
}