/* ─────────────────────────────────────────────────────────────────────────
   art.css: THE ART COMES BACK (1.16). The layer that makes meetkurus.com
   look like the game again, on top of site.css's system: the stage (the
   home's layered hero), the pearl, Kurus. Linked by the pages that carry
   the art (<!--S:head art="1"-->). Colours are site.css's tokens, plus the
   pearl's own few below; nothing here is a new palette.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --void-rgb: 11, 14, 22;
  --pearl-rgb: 174, 191, 232;
  --pearl-mid: #cdd9f5;
  /* the golden pole: where a golden rectangle's squares converge */
  --pole-x: 72.36%;
  --pole-y: 27.64%;
}

/* ── the stage ──────────────────────────────────────────────────────────── */
.hero--art {
  padding: var(--s6) 0 var(--s7);
  background: var(--void);
}
/* the deep light the pearl sits in (the still sky; the WebGL sky paints
   over it when it runs) */
.hero--art::before {
  inset: auto;
  left: var(--pole-x); top: 22%;
  width: 150vw; max-width: 1200px; height: auto; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  background:
    radial-gradient(closest-side, rgba(var(--pearl-rgb), 0.16), rgba(64, 84, 150, 0.14) 32%, rgba(40, 52, 96, 0.08) 55%, transparent 76%);
}
.hero__sky { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1.4s var(--ease); pointer-events: none; }
.hero__sky.is-live { opacity: 1; }
.hero__stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; transition: opacity 1.4s var(--ease); }
.hero__stars .s-dim { fill: rgba(var(--pearl-rgb), 0.34); }
.hero__stars .s-mid { fill: rgba(238, 242, 247, 0.62); animation: art-twinkle 5.8s ease-in-out infinite; }
.hero__stars .s-gold { fill: rgba(var(--gold-rgb), 0.8); animation: art-twinkle 8.2s ease-in-out -2s infinite; }
.has-sky .hero__stars { opacity: 0; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--void-rgb), 0.2), rgba(var(--void-rgb), 0) 30%, rgba(var(--void-rgb), 0.35) 78%, var(--void) 100%);
}
.has-sky .hero__scrim {
  background:
    radial-gradient(38% 30% at var(--pole-x) 22%, transparent, rgba(var(--void-rgb), 0.45) 100%),
    linear-gradient(180deg, rgba(var(--void-rgb), 0.3), rgba(var(--void-rgb), 0.15) 30%, rgba(var(--void-rgb), 0.55) 78%, var(--void) 100%);
  /* the sky's pearl sits under this scrim: a hole over the eye, centred by
     hero-sky.js (--eye-cx, --eye-cy, --eye-r), keeps it as bright as the still */
  -webkit-mask-image: radial-gradient(circle at var(--eye-cx, var(--pole-x)) var(--eye-cy, var(--pole-y)), transparent calc(var(--eye-r, 60px) * 0.75), #000 calc(var(--eye-r, 60px) * 1.45));
  mask-image: radial-gradient(circle at var(--eye-cx, var(--pole-x)) var(--eye-cy, var(--pole-y)), transparent calc(var(--eye-r, 60px) * 0.75), #000 calc(var(--eye-r, 60px) * 1.45));
}
.hero__line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.hero--art .hero__in { position: relative; z-index: 3; }

/* ── the wordmark: the game's own, BUY THE over a leaning gold DIP ─────── */
.hero--art .eyebrow { display: flex; align-items: center; gap: var(--s2); color: var(--gold-lt); }
.live-dot { width: 7px; height: 7px; border-radius: 99px; flex: none; background: var(--up); box-shadow: 0 0 8px rgba(38, 166, 154, 0.8); animation: art-live 2.4s ease-in-out infinite; }
.hero__mark { position: relative; }
.logotype {
  margin: 0;
  max-width: none;
  font-family: var(--num);
  font-weight: 700;
  font-size: clamp(56px, min(16vw, 12.5vh), 132px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: nowrap;
}
.hero--art h1.logotype { font-size: clamp(56px, min(16vw, 12.5vh), 132px); line-height: 0.86; letter-spacing: -0.035em; max-width: none; margin: 0; }
.logotype .lt-buy { display: block; margin-left: -0.064em; }
.logotype .lt-dip {
  display: inline-block;
  margin-left: -0.064em;
  color: var(--gold-lt);
  transform: rotate(-2deg);
  transform-origin: left bottom;
  filter: drop-shadow(0.045em 0.045em 0 color-mix(in srgb, var(--down) 85%, transparent)) drop-shadow(0 0 26px rgba(var(--gold-rgb), 0.42));
}
.logotype .strap {
  display: block;
  margin-top: var(--s5);
  max-width: 21ch;
  font: 600 clamp(19px, 2vw, 25px)/1.25 var(--num);
  letter-spacing: -0.01em;
  text-transform: none;
  text-wrap: balance;
  color: var(--ink);
}
.hero--art .lede { max-width: 36ch; margin: var(--s4) 0 0; font-size: clamp(16px, 1.5vw, 18px); color: var(--ink2); }
.hero--art .hero__cta { margin: var(--s5) 0 var(--s4); }

/* ── the pearl's still: the sky's own body, a halo, 89 embers on the golden angle ── */
.hero__eye {
  position: absolute; z-index: 3;
  width: clamp(112px, 31vw, 140px); aspect-ratio: 1;
  right: 2%; top: calc(0.43em * 0);
  pointer-events: none;
  transition: opacity 1.2s var(--ease);
}
.hero__eye > * { position: absolute; display: block; }
.eye__glow {
  inset: -42%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--pearl-rgb), 0.42), rgba(var(--pearl-rgb), 0.12) 46%, rgba(var(--gold-rgb), 0.05) 64%, transparent 78%);
  /* a hole the body's size (15.5% of the eye is 17% of this glow's radius),
     so the glow never veils the sky's pearl once the still has faded */
  -webkit-mask-image: radial-gradient(closest-side, transparent 0 17%, #000 24%);
  mask-image: radial-gradient(closest-side, transparent 0 17%, #000 24%);
  animation: art-breathe 4.8s ease-in-out infinite;
}
.eye__embers { inset: 0; width: 100%; height: 100%; fill: var(--pearl-mid); animation: art-spin 120s linear infinite; }
.eye__embers .e-gold { fill: var(--gold-lt); }
/* THE PEARL, IN THE ROUND (1.17b): the still is a rendered frame of the
   sky's own 3D pearl (public/img/pearl.webp, scripts/render-pearl.mjs), so
   the first paint, reduced motion, no WebGL and the social card all show
   the same body the live sky draws. The image carries its corona and halo
   (the body is 62.5% of it), so it overhangs the disc by 30% each side.
   Under the image a plain nacre disc is the placeholder while it loads.
   When the sky runs, the still fades and the sky's pearl is underneath, in
   the same place, at the same size. THE PEARL, FAR OFF (1.25): the disc is
   31% of the eye (was 46%), deep inside its ember ring: far away. */
.eye__pearl {
  inset: 34.5%; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #eef3ff 0%, #a4b5e2 46%, #55659f 86%, #3b4880 100%);
  box-shadow: inset -8px -11px 20px rgba(22, 30, 70, 0.42), inset 6px 8px 14px rgba(255, 255, 255, 0.4);
  transition: opacity 0.8s var(--ease);
}
.eye__pearl img { position: absolute; left: -30%; top: -30%; width: 160%; height: 160%; max-width: none; display: block; }
.hero__eye.is-flare .eye__pearl img { animation: art-pearl-flare 1.4s var(--ease); }
.hero__eye.is-flare .eye__glow { animation: art-flare 1.4s var(--ease); }
.has-sky .eye__pearl { opacity: 0; transition-delay: 0.6s; } /* the sky fades in over 1.4 s; its pearl is under this one */
.has-sky .eye__embers { opacity: 0; } /* the sky's ember tide takes their place */
.eye__embers { transition: opacity 1.2s var(--ease); }

/* ── the air: the tape's zone (drawn on the canvas behind the copy) ───── */
.hero__air { height: clamp(150px, 21svh, 210px); margin: var(--s4) 0 0; }
.hero__perch { position: absolute; width: 64px; height: 64px; left: 0; bottom: -76px; pointer-events: none; }

@media (max-width: 899px) {
  /* the pearl sits beside DIP; the eyebrow's line and BUY THE end before it */
  .hero__eye { top: calc(clamp(56px, min(16vw, 12.5vh), 132px) * 0.86 * 1.5 - clamp(112px, 31vw, 140px) / 2); }
}
@media (max-width: 560px) {
  .hero--art .hero__facts { display: flex; }
}

@media (min-width: 900px) {
  /* the golden stage: the copy on the left, the pearl at the golden pole,
     the tape in the right column's lower part, the spiral between them */
  .hero--art {
    display: flex; align-items: center;
    min-height: clamp(620px, calc(100svh - var(--site-head-h)), 980px);
    padding: var(--s7) 0;
  }
  .hero--art::before { top: var(--pole-y); width: 90vw; }
  .hero--art .hero__in { position: static; width: 100%; display: block; }
  .hero--art .hero__copy { max-width: 600px; }
  .hero--art .hero__copy > :not(.hero__mark):not(.hero__air),
  .hero--art .hero__mark > h1 { position: relative; z-index: 3; }
  .hero--art .hero__mark { position: static; }
  .hero__eye {
    left: var(--pole-x); top: var(--pole-y); right: auto;
    width: clamp(160px, 16vw, 244px);
    transform: translate(-50%, -50%);
  }
  .hero__air { position: absolute; left: 50%; right: 4%; top: 45%; bottom: 13%; height: auto; margin: 0; }
  .hero__perch { bottom: auto; left: calc(var(--pole-x) - 17vw); top: calc(var(--pole-y) + 2vw); }
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(var(--void-rgb), 0.82) 0%, rgba(var(--void-rgb), 0.55) 34%, rgba(var(--void-rgb), 0) 56%),
      linear-gradient(180deg, rgba(var(--void-rgb), 0) 70%, var(--void) 100%);
  }
  .has-sky .hero__scrim {
    background:
      linear-gradient(90deg, rgba(var(--void-rgb), 0.86) 0%, rgba(var(--void-rgb), 0.62) 34%, rgba(var(--void-rgb), 0.1) 58%),
      linear-gradient(180deg, rgba(var(--void-rgb), 0) 70%, var(--void) 100%);
  }
}

/* About: Kurus sits beside the page's name (his face: kurus.css) */
.about-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); }
.about-head h1 { margin-bottom: 0; }
.about-head + .lede, .about-head + .intro, .about-head + p { margin-top: var(--s5); }
/* the app's box on every lesson: Kurus peeks over its top edge (kurus.css) */
.cta { position: relative; }

/* ── /learn/: the lessons sky, faint, and star-chart eyebrows ────────────── */
/* the stations' pattern (public/lessons/lessons.css): a still sky under the
   page, scrimmed hard toward the void so a long read keeps its contrast */
body.learn { background: transparent; }
body.learn::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--void-rgb), 0.38) 0%, rgba(var(--void-rgb), 0.72) 34%, rgba(var(--void-rgb), 0.9) 70%, rgba(var(--void-rgb), 0.94) 100%),
    url('/img/ambient/lessons.webp') center top / cover no-repeat,
    var(--void);
}
@media (prefers-reduced-data: reduce) { body.learn::before { background: var(--void); } }
.eb-glyph { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; color: #5ec8bb; }
.eb-glyph svg { width: 16px; height: 16px; }

/* ── the social card (scripts/shot-og.mjs renders /?og=1 at 1200x630) ──── */
html.og .hero--art { min-height: 630px; padding: 0; display: flex; align-items: center; }
html.og .hero--art .hero__copy { padding-left: 72px; max-width: 640px; }
html.og .hero--art h1.logotype { font-size: 104px; }
html.og .hero--art .strap { font-size: 26px; }
html.og .hero--art .lede, html.og .hero--art .hero__facts, html.og .hero--art .btn-ghost { display: none; }
html.og .hero--art .hero__cta { margin: var(--s5) 0 0; }
html.og .hero__eye { width: 200px; }
html.og .hero__air { left: 52%; right: 5%; top: 46%; bottom: 10%; }

/* ── motion ─────────────────────────────────────────────────────────────── */
@keyframes art-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes art-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes art-breathe { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes art-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes art-pearl-flare { 0% { filter: brightness(1); transform: scale(1); } 30% { filter: brightness(1.7); transform: scale(1.04); } 100% { filter: brightness(1); transform: scale(1); } }
@keyframes art-flare { 0% { filter: brightness(1); } 30% { filter: brightness(1.9); } 100% { filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero__stars g, .live-dot, .eye__glow, .eye__embers, .eye__pearl img { animation: none !important; }
  .hero__sky, .hero__stars, .hero__eye { transition: none; }
}