/* Homepage hero: a character in front of a glass planet, over one continuous
   deep-blue atmosphere that runs from the hero into the work grid.
   Builds on portal.css. See DESIGN.md for the rules behind these values. */
:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }
::selection { background: rgb(140 207 255 / 0.35); color: #fff; }

/* ---------- page atmosphere ---------- */
/* A page-tall gradient, not a hero panel that ends at a line. */
body { background: linear-gradient(180deg, #070a12 0%, #0a1122 38%, #0b1426 62%, #080c16 100%); }
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px); background-size: 28px 28px; }
.page-glow {
  position: absolute; left: 0; right: 0; top: 40vh; height: 140vh; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 45% at 70% 20%, rgb(60 120 255 / 0.13), transparent 70%), radial-gradient(50% 40% at 20% 70%, rgb(70 110 220 / 0.08), transparent 70%);
  -webkit-mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}
/* The hero visual bleeds slightly past the right edge; never let it cause sideways scroll. */
html, body { overflow-x: clip; }
main, .footer, .topbar { position: relative; z-index: 1; }
.topbar { z-index: 20; }

/* Hero-only layer: planet horizon, stars, background planets. Fades out before the work grid. */
.bg {
  position: absolute; left: 0; right: 0; top: 0; height: max(110vh, 760px); z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(#000 45%, transparent 98%); mask: linear-gradient(#000 45%, transparent 98%);
}
.bg-planet {
  position: absolute; left: -20%; right: -20%; bottom: -146vh; height: 160vh; border-radius: 50%;
  background: radial-gradient(closest-side, #0a1120 92%, transparent 100%);
  box-shadow: 0 -2px 0 rgb(170 220 255 / 0.5), 0 -18px 60px rgb(120 190 255 / 0.26), 0 -90px 220px rgb(80 140 255 / 0.2), inset 0 26px 80px rgb(120 190 255 / 0.16);
}
.bg-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgb(255 255 255 / 0.65), transparent 60%),
    radial-gradient(1px 1px at 28% 62%, rgb(255 255 255 / 0.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 26%, rgb(200 230 255 / 0.75), transparent 60%),
    radial-gradient(1px 1px at 63% 12%, rgb(255 255 255 / 0.55), transparent 60%),
    radial-gradient(1px 1px at 72% 48%, rgb(255 255 255 / 0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 30%, rgb(200 230 255 / 0.65), transparent 60%),
    radial-gradient(1px 1px at 92% 70%, rgb(255 255 255 / 0.45), transparent 60%),
    radial-gradient(1px 1px at 8% 82%, rgb(255 255 255 / 0.35), transparent 60%),
    radial-gradient(1px 1px at 38% 8%, rgb(255 255 255 / 0.5), transparent 60%),
    radial-gradient(1px 1px at 55% 40%, rgb(255 255 255 / 0.3), transparent 60%);
}
/* Out-of-focus background planets: each drifts on its own path and scrolls at its own depth. */
.bubbles i {
  --depth: 1;
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgb(110 150 255 / 0.22), rgb(40 70 180 / 0.12) 60%, rgb(30 50 140 / 0.05));
  box-shadow: inset 0 0 0 1px rgb(150 185 255 / 0.12), inset -20px -30px 60px rgb(10 20 60 / 0.35);
  filter: blur(1px);
  translate: 0 calc(var(--hs, 0) * var(--depth) * 1px); transition: translate 500ms var(--ease-out);
}
.bubbles .b1 { --depth: 260; width: 34vw; height: 34vw; left: -12vw; top: 46vh; filter: blur(4px); animation: drift-a 16s ease-in-out infinite alternate; }
.bubbles .b2 { --depth: 120; width: 26vw; height: 26vw; right: -8vw; top: -6vw; animation: drift-b 20s ease-in-out infinite alternate; }
.bubbles .b3 { --depth: 340; width: 12vw; height: 12vw; right: 6vw; top: 62vh; animation: drift-c 12s ease-in-out infinite alternate; }
.bubbles .b4 { --depth: 420; width: 7vw; height: 7vw; left: 30vw; top: 8vh; filter: blur(6px); animation: drift-b 14s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -40px) scale(1.04); } 100% { transform: translate(-20px, -70px) scale(0.98); } }
@keyframes drift-b { 0% { transform: translate(0, 0); } 50% { transform: translate(-36px, 28px); } 100% { transform: translate(24px, 50px); } }
@keyframes drift-c { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-28px, -34px) scale(1.08); } 100% { transform: translate(20px, -12px) scale(0.95); } }
.twinkle { translate: 0 calc(var(--hs, 0) * 60px); }
.twinkle i { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #9fe8ff; box-shadow: 0 0 8px #6fd6ff; opacity: 0.2; animation: twinkle 4.5s ease-in-out var(--d) infinite; }
@keyframes twinkle { 50% { opacity: 0.9; } }

/* ---------- hero ---------- */
.kv { position: relative; min-height: clamp(450px, calc(100vh - 230px), 670px); padding-top: 42px; }
.kv-copy { position: relative; z-index: 2; }
.kv-desc { text-shadow: 0 2px 24px rgb(7 10 16 / 0.6); }
.kv h1, .kv h1 em { text-shadow: none; }
.hero-visual { position: absolute; z-index: 1; top: 50%; right: max(-3vw, -40px); width: min(50vw, 700px); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; }

/* Glass planet behind the character: drifts on its own; on scroll it lags, swells and fades. */
.sphere {
  position: absolute; left: 22%; top: 17%; width: 56%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; clip-path: circle(50%);
  background:
    radial-gradient(circle at 32% 26%, rgb(220 239 255 / 0.78), transparent 38%),
    radial-gradient(circle at 64% 82%, rgb(105 222 255 / 0.68), transparent 42%),
    radial-gradient(circle at 50% 50%, #86baff 0%, #608ff1 34%, #3557be 70%, #1e327d 100%);
  box-shadow: inset -26px -34px 70px rgb(12 22 80 / 0.55), inset 18px 22px 50px rgb(210 230 255 / 0.22), 0 30px 90px rgb(20 40 140 / 0.45), 0 0 120px rgb(80 140 255 / 0.18);
  filter: brightness(1.2);
  opacity: calc(0.78 - var(--hs, 0) * 0.25);
  translate: 0 calc(var(--hs, 0) * 170px);
  scale: calc(1 + var(--hs, 0) * 0.32);
  transition: translate 400ms var(--ease-out), scale 400ms var(--ease-out);
  animation: orb-drift 11s ease-in-out infinite alternate;
}
.sphere-tint { position: absolute; inset: -25%; background: conic-gradient(from 90deg, rgb(120 180 255 / 0) 0%, rgb(155 222 255 / 0.75) 22%, rgb(90 225 235 / 0) 40%, rgb(116 139 255 / 0.72) 64%, rgb(120 180 255 / 0) 85%); filter: blur(18px); mix-blend-mode: soft-light; animation: spin 18s linear infinite; }
.sphere-sheen { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(220 235 255 / 0.25), inset 0 10px 24px rgb(255 255 255 / 0.12); }
@keyframes orb-drift { 0% { transform: translate(-16px, 14px) rotate(0deg); } 50% { transform: translate(18px, -22px) rotate(12deg); } 100% { transform: translate(-10px, -8px) rotate(22deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Character: floats in place; on scroll it rises a little faster than the page. */
.character {
  position: absolute; left: 50%; bottom: 13%; height: 59%; aspect-ratio: 900 / 1124; transform: translateX(-50%);
  translate: 0 calc(var(--hs, 0) * -90px); transition: translate 400ms var(--ease-out);
}
.character img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 40px rgb(0 0 0 / 0.45)); animation: float 5.5s ease-in-out infinite alternate; }
.character-shadow { position: absolute; left: 12%; right: 12%; bottom: 0; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 0.55), transparent); animation: shadow 5.5s ease-in-out infinite alternate; }
@keyframes float { from { transform: translateY(10px) rotate(-0.6deg); } to { transform: translateY(-26px) rotate(0.6deg); } }
@keyframes shadow { from { transform: scaleX(1); opacity: 1; } to { transform: scaleX(0.7); opacity: 0.45; } }

/* Handwritten aside pointing at the character. */
.hero-note { position: absolute; left: 0; top: 23%; margin: 0; font: 500 24px/1.05 "Caveat", cursive; color: #a9d3ff; transform: rotate(-6deg); }
.hero-note svg { display: block; width: 70px; margin: 4px 0 0 58px; fill: none; stroke: #a9d3ff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform: scaleX(-1); }

/* Keep the atmosphere aligned with the shortened desktop hero. */
@media (min-width: 901px) {
  .bg { top: -90px; }
  .page-glow { top: calc(40vh - 90px); }
}

@media (max-width: 900px) {
  .kv { min-height: 0; margin-top: -24px; padding-top: 24px; padding-bottom: 24px; }
  .bg { top: -24px; }
  .page-glow { top: calc(40vh - 24px); }
  .hero-visual { position: relative; top: auto; right: auto; width: 92%; margin: -8% auto -10%; transform: none; order: -1; }
  .hero-note { display: none; }
  /* Phone: no scroll parallax; it repainted blurs and shadows every frame and stuttered. Ambient animations stay. */
  .sphere { opacity: 0.78; scale: none; }
  .sphere, .character, .bubbles i, .twinkle { translate: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sphere, .sphere-tint, .bubbles i, .twinkle i, .character img, .character-shadow { animation: none; }
}

/* Floating dust: a few soft particles wandering across the page (drawn by hero.js). */
.dust { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }