/* ============================================================
   mayurkakade.dev — hero "a tap becomes a system"
   All classes prefixed hx- (zero collision with styles.css).
   Requires styles.css to be loaded first (design tokens).
   ============================================================ */

/* ---- layout: copy left, animation right ---- */
.hx-hero { position: relative; padding: 48px 0 8px; }
.hx-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 44px;
  align-items: center;
  min-height: 480px;
}
.hx-title {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(34px, 3.6vw, 48px);
  color: var(--text);
  margin: 0 0 18px;
}
.hx-lede {
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.6;
  max-width: 44ch;
  margin: 0 0 30px;
}
.hx-ctarow { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hx-status {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.hx-status__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px var(--green-tint);
}

/* ---- stage + radial edge fade ---- */
.hx-stage { position: relative; }
.hx-fademask {
  -webkit-mask-image: radial-gradient(92% 84% at 50% 50%, #000 58%, rgba(0, 0, 0, 0) 98%);
  mask-image: radial-gradient(92% 84% at 50% 50%, #000 58%, rgba(0, 0, 0, 0) 98%);
}
.hx-scene { width: 100%; height: auto; display: block; }
.hx-camera { transform-origin: 0 0; will-change: transform; }

/* ---- scene typography ---- */
.hx-scene text { font-family: var(--mono); user-select: none; }
.hx-nlabel { font-size: 19px; font-weight: 600; letter-spacing: 0.2px; fill: var(--text); }
.hx-nsub   { font-size: 13.5px; font-weight: 500; letter-spacing: 0.4px; fill: var(--text-3); }
.hx-clientlabel { fill: var(--text-2); }

/* phone UI micro-type (Inter for chat realism) */
.hx-t-name   { font: 600 4.9px var(--body); fill: var(--text); }
.hx-t-online { font: 400 3.4px var(--body); fill: var(--text-2); }
.hx-t-msg    { font: 400 4.7px var(--body); fill: var(--text); }
.hx-t-chip   { font: 500 4.5px var(--body); fill: var(--text-2); }
.hx-t-chip--hot { fill: #EA6A0F; font-weight: 600; }
.hx-t-flowtitle { font: 600 3.4px var(--mono); letter-spacing: 0.5px; fill: var(--text-3); }

/* ---- architecture nodes ---- */
.hx-node { filter: drop-shadow(0 8px 18px rgba(23, 35, 59, 0.10)); transition: opacity 0.55s ease, transform 0.55s ease; }
.hx-node rect { fill: var(--surface); stroke: var(--border-2); stroke-width: 1.5; }
.hx-node--llm { filter: drop-shadow(0 16px 30px rgba(23, 35, 59, 0.30)); }
.hx-node--llm rect { fill: var(--navy); stroke: var(--navy); }
.hx-node--llm .hx-nlabel { font-size: 24px; font-weight: 700; fill: #FFFFFF; }
.hx-node--llm .hx-nsub { fill: #93A6C6; }

/* ---- edges ---- */
.hx-edge { fill: none; stroke: #A9BACF; stroke-width: 1.8; stroke-linecap: round; transition: opacity 0.3s ease; }

/* ---- phone internals: workflow rows ---- */
.hx-row circle { fill: var(--accent); transition: fill 0.3s ease; }
.hx-row text { font: 500 4.8px var(--mono); fill: var(--text); transition: fill 0.3s ease; }
.hx-row--api text { font-size: 5px; font-weight: 700; fill: #EA6A0F; }

.hx-chips { transition: opacity 0.35s ease; }
.hx-chips.hx-dim { opacity: 0.45; }
.hx-chip1 { transform-box: fill-box; transform-origin: center; transition: transform 0.18s ease; }
.hx-chip1.hx-press { transform: scale(0.9); }

.hx-ripple {
  fill: none; stroke: var(--accent); stroke-width: 1.4; opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
.hx-pulse, .hx-pulse-out { opacity: 0; }

/* ---- animation gating ----
   Default (no JS / reduced motion / mobile) = final resting frame:
   everything visible, camera wide. .hx-anim hides the not-yet-fired
   pieces so the timeline can bring them in. */
.hx-fade { transition: opacity 0.45s ease, transform 0.45s ease; }
.hx-anim .hx-fade:not(.hx-on) { opacity: 0; transform: translateY(4px); }
.hx-anim .hx-node:not(.hx-on) { opacity: 0; transform: translateY(10px); }
.hx-anim .hx-edge:not(.hx-on) { opacity: 0; }
.hx-anim .hx-row:not(.hx-on) circle { fill: #CBD6E5; }
.hx-anim .hx-row:not(.hx-on) text { fill: var(--text-3); }
.hx-anim .hx-reply.hx-on { animation: hx-pop 0.4s var(--ease-spring); transform-box: fill-box; transform-origin: center; }
@keyframes hx-pop { from { transform: scale(0.6); opacity: 0; } }

/* ---- replay control ---- */
.hx-replay {
  position: absolute; right: 10px; bottom: 4px;
  font-family: var(--mono); font-size: 12px;
  color: var(--text-3);
  background: none; border: 0; padding: 6px 8px; cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease, color 0.2s ease;
}
.hx-replay.hx-show { opacity: 1; pointer-events: auto; }
.hx-replay:hover { color: var(--accent); }

/* ---- reduced motion: no transitions, JS renders final frame ---- */
@media (prefers-reduced-motion: reduce) {
  .hx-camera, .hx-node, .hx-edge, .hx-fade,
  .hx-row circle, .hx-row text, .hx-chips, .hx-chip1 { transition: none !important; }
  .hx-anim .hx-reply.hx-on { animation: none; }
}

/* ---- mobile: copy stacks above a static wide diagram ---- */
@media (max-width: 760px) {
  .hx-hero { padding: 28px 0 0; }
  .hx-hero__grid { grid-template-columns: 1fr; gap: 10px; min-height: 0; }
  .hx-title { font-size: clamp(27px, 7.4vw, 34px); }
  .hx-lede { margin-bottom: 24px; }
  .hx-ctarow { margin-bottom: 10px; }
  .hx-replay { display: none; }
  .hx-nsub { display: none; }           /* secondary labels off at small sizes */
  .hx-t-online, .hx-t-flowtitle { display: none; }
}