/* Homepage-only styles. Intentionally separate from kl-design-system.css:
   the interior pages share one system, but this hero card is a one-off
   layout that doesn't reuse the shared header/nav at all. */

.kl-home { margin: 0; padding: 0; background: #ffffff; font-family: 'Open Sans', system-ui, sans-serif; }
.kl-home, .kl-home * { box-sizing: border-box; }

/* The homepage otherwise has no heading elements at all (it's all images
   and links), which leaves screen reader users with no landmark when
   navigating by heading. This adds one without touching the visual design. */
.kl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.kl-home-hero { width: 92vw; max-width: 1060px; margin: 0 auto; padding: 32px 0 40px; display: flex; flex-direction: column; align-items: center; }

/* ---------- floating items + sprite ----------
   The sprite (Kevin's photo) is the layout anchor: it's centered in the
   orbit and everything else - including the hanger bar he's suspended
   from - is drawn INTO the sprite sheet artwork itself, not built out of
   separate DOM/CSS. The 4 floating items are positioned around it as
   percentages of the shared .kl-home-orbit box. */

:root {
  /* Aspect ratio of ONE of the 9 frames in kevin_spritesheet.webp.
     This is only a fallback - kl-home.js measures the real sheet on load
     and overwrites it, so the art is never distorted regardless of the
     file's true dimensions. */
  --kl-sprite-ratio: 1062 / 481;
}

/* Orbit width MUST match .kl-home-terminal's width. A sprite FRAME spans
   the full column (the hanger bar drawn into the art runs edge to edge and
   lines up with the console below); Kevin himself is only ~30% of his own
   frame by artwork, so the frame is sized to 100% here and he comes out at
   the right size automatically. Every position below was measured off a
   real screenshot as a % of this shared column. */
/* A sprite frame is 1500x700. The orbit is 130 units taller so the items can
   sit clear ABOVE each fingertip - the finger points at them across a gap
   rather than touching. The sprite stays anchored to the bottom.
   The two middle items sit 28 units higher than the two outer ones, so the
   row arcs like an umbrella over Kevin instead of running dead level. */
.kl-home-orbit { position: relative; width: 100%; max-width: 1060px; aspect-ratio: 1500 / 830; margin: 0 0 4px; }

.kl-home-item { position: absolute; z-index: 2; display: block; text-decoration: none; filter: drop-shadow(0 10px 18px rgba(16, 25, 45, .16)); transition: transform .3s var(--spring, ease); }
.kl-home-item img { width: 100%; height: auto; display: block; pointer-events: none; }
/* Grow is a MOBILE affordance only (JS adds .kl-home-item-active while
   auto-cycling, since there is no hover there). On desktop the sprite
   pointing at the item is the feedback - no hover grow.
   NB: needs the .kl-home-item prefix for specificity - .kl-home-item-active
   alone ties with each item's own .kl-home-item-<name> rule (both 0,1,0),
   and the per-item rule is defined later below, so it was silently winning
   and cancelling the scale entirely. */
.kl-home-item.kl-home-item-active { transform: var(--kl-home-item-rot, none) scale(1.18); }
.kl-home-item:focus-visible { transform: var(--kl-home-item-rot, none) scale(1.18); }

/* NB: these size the whole PNG canvas, which carries a lot of transparent
   padding (the pin is only ~36% of its own image), so they are deliberately
   larger than the object's visible footprint. Values solved by rendering and
   measuring the actual ink against Kevin's screenshot - don't "correct" them
   to the visible-object percentages or the small items shrink. */
.kl-home-item-laptop { left: 20.93%; top: 0.36%; width: 10.67%; --kl-home-item-rot: rotate(-11deg); transform: rotate(-11deg); }
.kl-home-item-notebook { left: 32.60%; top: -3.79%; width: 10.10%; --kl-home-item-rot: rotate(-5deg); transform: rotate(-5deg); }
.kl-home-item-pin { left: 53.48%; top: -0.57%; width: 7.60%; --kl-home-item-rot: rotate(4deg); transform: rotate(4deg); }
.kl-home-item-resume { left: 66.18%; top: -0.64%; width: 10.13%; --kl-home-item-rot: rotate(9deg); transform: rotate(9deg); }

/* Full-column sprite stage, anchored to the bottom of the orbit so the
   hanger bar baked into the art sits flush above the social row. It is
   pointer-transparent: hovering "Kevin" is handled by the small hotspot
   below, so the mostly-empty frame doesn't swallow the whole hero. */
.kl-home-stage { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; pointer-events: none; }
.kl-home-sprite-viewport { display: block; overflow: hidden; width: 100%; aspect-ratio: var(--kl-sprite-ratio); position: relative; }
/* No transition here on purpose: switching poses should be an instant cut,
   not a slide across the sheet - only translateX (frame index) changes. */
.kl-home-sprite-img { position: absolute; top: 0; left: 0; height: 100%; width: 900%; max-width: none; }

/* Hover/click target sized to Kevin's actual body within the frame. */
.kl-home-sprite-hotspot { position: absolute; z-index: 2; left: 38.80%; top: 34.10%; width: 23.67%; height: 63.13%; text-decoration: none; }

/* ---------- social row ---------- */

/* Evenly spaced, but the row is anchored so the OUTER two icons sit exactly
   where frames 6 and 9 gesture (32.13% / 69.07%). Aligning all four to their
   hands put them in two clusters with a hole in the middle, which read as
   broken - even pitch across that span keeps the gestures roughly honest. */
.kl-home-social { position: relative; width: 100%; max-width: 1060px; height: 76px; margin-bottom: 16px; }
.kl-home-social-link { position: absolute; top: 0; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 18px; transition: transform .2s var(--spring, ease); }
/* No hover grow/lift on desktop, matching the orbit items above - the
   terminal text change on mouseenter is the feedback. Keyboard focus keeps
   a transform so tab users still get a visible indicator. */
.kl-home-social-link:focus-visible { transform: translateX(-50%) translateY(-3px); }
.kl-home-social-link svg { width: 38px; height: 38px; }
.kl-home-social-linkedin { left: 32.13%; background: #0a66c2; }
.kl-home-social-linkedin svg { fill: #fff; }
.kl-home-social-email { left: 44.44%; background: #fff; border: 2px solid var(--ink, #0e1526); }
.kl-home-social-email svg { fill: none; stroke: var(--ink, #0e1526); stroke-width: 2; }
.kl-home-social-github { left: 56.76%; background: #0e1526; }
.kl-home-social-github svg { fill: #fff; }
.kl-home-social-itch { left: 69.07%; background: #fa5c5c; font: 700 14px/1 'JetBrains Mono', monospace; color: #fff; flex-direction: column; gap: 3px; }
.kl-home-social-itch svg { width: 32px; height: 32px; fill: #fff; }

/* ---------- terminal ---------- */

.kl-home-terminal { width: 100%; max-width: 1060px; border: 3px solid #34e0b2; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 44px -18px rgba(16, 25, 45, .28); }
.kl-home-terminal-head { display: flex; align-items: center; gap: 10px; background: #0b1512; padding: 10px 14px; border-bottom: 1px solid rgba(52, 224, 178, .35); }
.kl-home-terminal-dot { width: 10px; height: 10px; border-radius: 50%; background: #34e0b2; flex: 0 0 auto; }
.kl-home-terminal-title { font: 700 14px/1 'JetBrains Mono', monospace; color: #eafff6; }
.kl-home-terminal-controls { margin-left: auto; display: flex; align-items: center; gap: 12px; color: #6b8f83; font: 400 15px/1 'JetBrains Mono', monospace; }
/* Fixed height (not min-height): sized to hold 3 wrapped messages + the
   waiting prompt line without the box growing as lines fill in. Overflow
   is hidden as a safety net - enforceMaxLines() in kl-home.js normally
   keeps content within this before it would ever need to clip. */
.kl-home-terminal-body { background: #060b09; height: 230px; overflow: hidden; padding: 18px 20px; font: 400 15px/1.7 'JetBrains Mono', monospace; }
.kl-home-terminal-body .terminal-idle,
.kl-home-terminal-body .terminal-line,
.kl-home-terminal-body .terminal-prompt { color: #ffffff; white-space: pre-wrap; word-break: break-word; }
/* The prompt prefixes the line the text types INTO, so output appears
   inline after "C:\Users\Kevin>" like a real shell - not on the line below. */
.kl-home-terminal-body .terminal-line::before,
.kl-home-terminal-body .terminal-prompt::before { content: "C:\\Users\\Kevin> "; color: #34e0b2; }
.cursor-underscore { display: inline-block; animation: kl-home-blink 1s step-end infinite; }

@keyframes kl-home-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ---------- small screens ---------- */

@media (max-width: 480px) {
  .kl-home-hero { padding: 24px 0 28px; }

  /* Orbit items: the visible art stays the size it was tuned at (percentages
     are load-bearing for the composition, see notes above), but the actual
     tap target is expanded with an invisible ::after so small ones (the pin
     is only ~26px visible on a typical phone) are still comfortably tappable. */
  .kl-home-item::after { content: ""; position: absolute; inset: -8px; }
  /* Invisible hit-slop alone still left the pin (~26px visible) too small to
     comfortably hit. Bump each item's actual size ~40-55% on top of that.
     At these sizes, simply recentering on the original (desktop-tuned)
     center points isn't enough room - laptop and notebook centers are only
     ~11% apart, so their enlarged boxes overlapped. Instead, spread all four
     out with a fixed ~4% gap between edges, sized around the same midpoint
     as the original row. */
  .kl-home-item-laptop { left: 16%; width: 15%; }
  .kl-home-item-notebook { left: 35%; width: 14.5%; }
  .kl-home-item-pin { left: 53.5%; width: 12%; }
  .kl-home-item-resume { left: 69.5%; width: 14.5%; }

  /* Social row: at mobile widths the desktop % positions (tuned to align
     with the sprite's hand gestures) put icon centers closer together than
     the icons are wide, so they visibly overlap. Below this breakpoint we
     drop the absolute/percentage layout for a plain centered flex row with
     real gaps and 44px targets instead of trying to shrink icons to fit. */
  .kl-home-social { display: flex; justify-content: center; align-items: center; gap: 12px; height: auto; }
  .kl-home-social-link { position: static; transform: none; width: 44px; height: 44px; border-radius: 12px; }
  .kl-home-social-link:focus-visible { transform: translateY(-3px); }
  .kl-home-social-link svg { width: 22px; height: 22px; }
  .kl-home-social-itch { font-size: 10px; gap: 2px; }
  .kl-home-social-itch svg { width: 18px; height: 18px; }
  /* Grow is a mobile affordance here too, same as the orbit items: JS adds
     .kl-home-item-active while auto-cycling since there's no hover to react
     to. Needs the extra class-on-class specificity to win over the flex
     reset above (equal specificity, so source order would otherwise lose). */
  .kl-home-social-link.kl-home-item-active { transform: scale(1.18); }

  /* Terminal: mobile's narrower column wraps each message across more
     lines than desktop, so the fixed height needs real headroom for 3 long
     messages + the waiting prompt. overflow-y auto is a safety net so any
     combo that's still too tall scrolls instead of clipping mid-line. */
  .kl-home-terminal-body { height: 300px; overflow-y: auto; }
}