/* Home: features bento "Why Nexus" (T07, Figma 307:3237).
   Section tokens live in tokens.css under "added by features"; fallbacks guard against shared-file races. */
.s-features {
  --f-panel: var(--sand-100, #f2e9d5);
  --f-tag: var(--features-tag, #d2fccd);
  --f-dot: var(--features-dot, #4a1e06);
  --f-term: var(--features-term, #09090b);
  --f-ok: var(--features-term-ok, #31ffba);
  --f-bubble: var(--features-chat-bubble, rgb(27 241 7 / 0.2));
  --f-pad: var(--space-6);
  --f-panel-radius: var(--radius-xl);
  --font-mono: ui-monospace, "SFMono-Regular", "Chivo Mono", Menlo, Consolas, monospace;
}

/* Heading (uses .section-head / .tag from components.css) */
.s-features__head { max-width: 700px; gap: var(--space-2); }
.s-features__tag { height: 32px; padding-inline: 17px; margin-bottom: var(--space-3); background: var(--f-tag); border-color: rgb(0 0 0 / 0.04); }
.s-features__head .section-head__text { margin-top: var(--space-3); }
.s-features__br { display: none; }

/* Bento grid: 1 column on mobile, 2 x 3 from 768 */
.s-features__bento {
  display: grid; gap: var(--space-3); padding: var(--space-3);
  background: var(--f-panel); border-radius: var(--f-panel-radius);
}
.s-features__card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-4);
  min-width: 0; padding: var(--f-pad) var(--f-pad) 0;
  background: var(--base-high); border-radius: var(--radius-lg);
}
.s-features__card-title { font-size: var(--h5-size); line-height: var(--h5-lh); letter-spacing: var(--h5-ls); }
.s-features__card-text { margin-top: var(--space-2); max-width: 44ch; font-size: var(--para-md-size); line-height: var(--para-md-lh); letter-spacing: var(--para-md-ls); color: var(--text-medium); }
.s-features__visual { position: relative; flex: 1; min-height: 240px; }

/* 1. Dot grid */
.s-features__visual--dots { display: flex; align-items: flex-end; justify-content: center; min-height: 220px; }
.s-features__dots {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(14, 8px); gap: var(--space-5);
  padding: var(--space-6) var(--space-8) var(--space-2);
  background: var(--base-high); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.s-features__dots span { width: 8px; height: 8px; background: var(--f-dot); opacity: var(--o, 0.5); }
.s-features__glow { position: absolute; bottom: -40px; width: 60%; height: 140px; border-radius: 50%; filter: blur(30px); opacity: 0.3; }
.s-features__glow--a { left: -20%; background: var(--red-500); }
.s-features__glow--b { right: -20%; background: var(--emerald-300); }

/* 2. Lead gate */
.s-features__visual--gate { display: flex; align-items: center; justify-content: center; padding-block: var(--space-6); }
.s-features__pixels {
  position: absolute; inset: 10% 0 0; opacity: 0.55;
  background-image: radial-gradient(var(--f-dot) 1.6px, transparent 1.8px);
  background-size: 10px 10px;
  -webkit-mask-image: radial-gradient(ellipse 50% 45% at 50% 45%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 50% 45% at 50% 45%, #000 30%, transparent 75%);
}
.s-features__gate {
  position: relative; z-index: 1; display: grid; gap: var(--space-4); width: min(100%, 297px);
  padding: var(--space-8); background: var(--base-high); border: 1px solid var(--border-thin);
  border-radius: var(--radius-xl); box-shadow: 0 20px 31px rgb(0 0 0 / 0.15);
}
.s-features__gate-field {
  display: flex; align-items: center; gap: 9px; height: 40px; padding-inline: var(--space-4);
  background: rgb(0 0 0 / 0.03); border-radius: 4px; color: var(--f-dot);
}
.s-features__gate-icon { flex: none; }
.s-features__gate-field input { flex: 1; min-width: 0; border: 0; background: none; font-size: 12px; color: var(--text-strong); }
.s-features__gate-field input::placeholder { color: var(--text-low); }
.s-features__gate-field input:focus { outline: none; }
.s-features__gate-field:focus-within { box-shadow: 0 0 0 2px var(--amber-600); }
.s-features__gate-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 40px;
  border-radius: var(--radius-pill); background: var(--amber-600); color: var(--text-negative);
  font-size: 12px; font-weight: var(--fw-semibold); transition: background var(--dur) var(--ease);
}
.s-features__gate-btn:hover { background: var(--amber-800); }
.s-features__gate.is-invalid .s-features__gate-field { box-shadow: 0 0 0 2px var(--red-500); }
.s-features__gate.is-done .s-features__gate-btn { background: var(--green-600); }
/* Mobile QC: the gate card fits narrow phones */
@media (max-width: 479px) {
  .s-features__gate { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); }
  .s-features__gate-btn { padding-inline: var(--space-3); }
}
.s-features__cursor { position: absolute; z-index: 2; right: 12%; bottom: 20%; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.25)); }

/* 3. Terminal */
.s-features__visual--terminal { display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.s-features__term {
  display: flex; flex-direction: column; width: 100%; max-width: 446px; height: 332px; padding: 3px;
  background: var(--f-term); border: 1px solid var(--border-solid); border-radius: 4px 4px 0 0; overflow: hidden;
}
.s-features__term-bar {
  display: flex; align-items: center; gap: 10px; flex: none; height: 28px; padding-inline: 10px;
  background: rgb(255 255 255 / 0.13); font-size: 9px; line-height: 1; letter-spacing: 0;
  text-transform: uppercase; color: var(--text-negative); font-weight: var(--fw-semibold);
}
.s-features__term-dots { display: flex; gap: 5px; }
.s-features__term-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--red-500); }
.s-features__term-dots i:nth-child(2) { background: var(--yellow-500); }
.s-features__term-dots i:nth-child(3) { background: var(--green-600); }
.s-features__term-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-features__term-status { color: var(--f-ok); font-weight: 700; font-size: 8px; }
.s-features__term-body {
  flex: 1; margin: 0; padding: 7px 14px; overflow: hidden; white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-mono); font-size: 9.6px; line-height: 2.1; letter-spacing: 0; color: var(--text-negative);
}
.s-features__term-body .is-muted { color: #71717b; }
.s-features__term-body .is-prompt { color: #d4d4d8; }
.s-features__term-body .is-dim { color: #e4e4e7; }
.s-features__term-body .is-ok { color: var(--f-ok); }
.s-features__term-caret { display: inline-block; width: 6px; height: 11px; vertical-align: -1px; background: var(--text-negative); animation: s-features-blink 1s steps(1) infinite; }
@keyframes s-features-blink { 50% { opacity: 0; } }

/* 4. Edge performance (dark card) */
.s-features__card--edge { background: radial-gradient(120% 90% at 85% 100%, #6b2a08 0%, var(--amber-950) 55%); }
.s-features__card--edge .s-features__card-title { color: var(--text-negative); }
.s-features__card--edge .s-features__card-text { max-width: 340px; color: rgb(255 255 255 / 0.8); }
.s-features__visual--edge { min-height: 300px; }
.s-features__score { position: relative; z-index: 1; padding-top: var(--space-6); color: var(--text-negative); }
.s-features__score-num { display: flex; align-items: baseline; gap: 1px; font-family: var(--font-heading); font-weight: var(--fw-heading); line-height: 1; }
.s-features__score-num span { font-size: 62px; letter-spacing: -1.24px; }
.s-features__score-num small { margin-left: 3px; font-size: 24px; letter-spacing: -0.24px; color: rgb(255 255 255 / 0.6); }
.s-features__score-label { margin-top: var(--space-3); font-size: var(--para-sm-size); color: rgb(255 255 255 / 0.6); }
.s-features__status { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding: 6px 10px 6px 8px; border: 1px solid rgb(255 255 255 / 0.1); border-radius: var(--radius-full, 999px); background: rgb(255 255 255 / 0.08); font-size: 12px; color: rgb(255 255 255 / 0.85); }
.s-features__status i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgb(74 222 128 / 0.2); }
/* 470px globe canvas, cropped by the card's right and bottom edges; smaller on narrow cards */
.s-features__globe { position: absolute; right: calc(-90px - var(--f-pad)); bottom: -150px; width: 470px; height: 470px; pointer-events: none; }
@media (max-width: 1023px) {
  .s-features__globe { right: calc(-120px - var(--f-pad)); bottom: -130px; width: 380px; height: 380px; }
}

/* 5. Telemetry chat */
.s-features__visual--chat { min-height: 280px; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.s-features__chat { display: grid; gap: var(--space-4); padding: var(--space-6) var(--space-4) 0; font-size: 13px; line-height: 1.4; letter-spacing: 0; color: var(--black-90); }
.s-features__bubble { justify-self: end; padding: 7px 12px; border-radius: 28px; background: var(--f-bubble); font-weight: var(--fw-medium); }
.s-features__steps { display: grid; gap: 10px; }
.s-features__steps li { display: flex; align-items: center; gap: var(--space-2); }
.s-features__steps svg { flex: none; opacity: 0.5; }
.s-features__code {
  margin: 0 0 0 var(--space-6); padding: 14px; overflow: hidden; white-space: pre;
  background: var(--black-5); border: 1px solid var(--black-10); border-radius: 4px;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.35; color: var(--border-solid);
}
.s-features__working { display: flex; align-items: center; gap: var(--space-2); }
.s-features__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--amber-600); animation: s-features-pulse 1.4s ease-in-out infinite; }
@keyframes s-features-pulse { 50% { opacity: 0.3; } }

@media (min-width: 640px) {
  .s-features { --f-pad: var(--space-8); }
  .s-features__br { display: inline; }
}

@media (min-width: 768px) {
  .s-features { --f-panel-radius: 32px; }
  .s-features__head { margin-bottom: var(--space-16); }
  .s-features__bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(400px, auto); gap: var(--space-4); padding: var(--space-4); }
  .s-features__card--terminal { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--space-6); padding-top: var(--space-10); }
  .s-features__card--terminal .s-features__visual { align-self: stretch; }
  .s-features__card--terminal .s-features__copy { flex: 1; padding-bottom: var(--space-10); }
}

@media (min-width: 1024px) {
  .s-features { --f-pad: var(--space-12); }
  .s-features__head { margin-bottom: var(--space-20); }
  .s-features__bento { grid-auto-rows: minmax(409px, auto); }
  .s-features__card--terminal .s-features__copy { padding-inline: var(--space-12); }
}

@media (min-width: 1280px) {
  .s-features__bento { grid-auto-rows: 398px; }
  .s-features__visual { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .s-features__pulse, .s-features__term-caret { animation: none; }
}

/* Mobile: copy above terminal, dot grid fits narrow cards */
@media (max-width: 767px) {
  .s-features__card--terminal .s-features__copy { order: -1; }
  .s-features__card--terminal { padding-bottom: 0; }
  .s-features__dots { grid-template-columns: repeat(10, 8px); gap: var(--space-4); padding-inline: var(--space-4); }
  .s-features__dots span:nth-child(14n + 11), .s-features__dots span:nth-child(14n + 12), .s-features__dots span:nth-child(14n + 13), .s-features__dots span:nth-child(14n) { display: none; }
}

/* Figma QC: dot clusters sit off the form's top-left and bottom-right corners; bigger cursor; lower score */
@media (min-width: 1024px) {
  .s-features__pixels {
    inset: 0; opacity: 0.9;
    -webkit-mask-image: radial-gradient(circle 64px at 16% 34%, #000 25%, transparent 100%), radial-gradient(circle 56px at 84% 76%, #000 25%, transparent 100%);
            mask-image: radial-gradient(circle 64px at 16% 34%, #000 25%, transparent 100%), radial-gradient(circle 56px at 84% 76%, #000 25%, transparent 100%);
  }
  .s-features__cursor { width: 30px; height: auto; right: 9%; bottom: 16%; }
  .s-features__card-text { margin-top: 20px; }
  .s-features__score { padding-top: 34px; }
}

/* ---------------------------------------------------------------------------
   Interactions (plan/motion-convention.md). The head uses data-reveal and the cards use .hover-lift
   from the shared system. Each card's inner choreography is section-specific: its hidden states only
   apply once features.js adds .s-features--motion (IntersectionObserver present, no reduced-motion
   preference), so content is never hidden without JS.
   --------------------------------------------------------------------------- */

/* Base transitions for hover and focus states */
.s-features__glow { transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out); }
.s-features__cursor { transition: transform var(--dur-slow) var(--ease-out); }
.s-features__gate-field { transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.s-features__gate-field:focus-within { background: var(--base-high); }
.s-features__gate-btn { transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); }
.s-features__gate-btn:focus-visible { outline: 2px solid var(--amber-600); outline-offset: 3px; }
.s-features__gate.is-done .s-features__gate-field { opacity: 0.6; }
.s-features__term { transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
.s-features__term-status { transition: text-shadow var(--dur) var(--ease); }
.s-features__code { transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.s-features__steps svg { transition: opacity var(--dur) var(--ease); }
.s-features__bubble { transition: transform var(--dur-slow) var(--ease-out); transform-origin: right center; }

@media (hover: hover) {
  .s-features__card--connectors:hover .s-features__glow { opacity: 0.5; }
  .s-features__gate-btn:hover { box-shadow: 0 8px 18px -8px rgb(225 113 0 / 0.7); }
  .s-features__card--terminal:hover .s-features__term { box-shadow: 0 24px 40px -20px rgb(9 9 11 / 0.55); }
  .s-features__card--terminal:hover .s-features__term-status { text-shadow: 0 0 8px var(--f-ok); }
  .s-features__card--telemetry:hover .s-features__code { border-color: var(--amber-600); background: var(--base-high); }
  .s-features__card--telemetry:hover .s-features__steps svg { opacity: 1; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* 1. Dots ripple diagonally across the grid, glows drift inward */
  .s-features__card--connectors:hover .s-features__dots span { animation: s-features-dot-wave 1.1s var(--ease-in-out) calc((var(--x, 0) + var(--y, 0)) * 35ms) 1; }
  .s-features__card--connectors:hover .s-features__glow--a { transform: translateX(14%); }
  .s-features__card--connectors:hover .s-features__glow--b { transform: translateX(-14%); }
  /* 2. Cursor drifts toward the unlock button; button lifts like .btn */
  .s-features__card--gate:hover .s-features__cursor { transform: translate(-18px, -12px); }
  .s-features__gate-btn:hover { transform: translateY(-1px); }
  /* 3-5 */
  .s-features__card--terminal:hover .s-features__term { transform: translateY(-6px); }
  /* The white needle arc pushes a little further round */
  .s-features__card--telemetry:hover .s-features__bubble { transform: translateY(-2px) scale(1.03); }
}
@media (prefers-reduced-motion: no-preference) {
  .s-features__gate-btn:active { transform: scale(0.98); }
  /* Form feedback: the field shakes on a bad email, the button pops when unlocked */
  .s-features__gate.is-invalid .s-features__gate-field { animation: s-features-shake 400ms var(--ease); }
  .s-features__gate.is-done .s-features__gate-btn { animation: s-features-pop 450ms var(--ease-spring); }
}
@keyframes s-features-dot-wave { 40% { opacity: 1; transform: scale(1.4); } }
@keyframes s-features-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes s-features-pop { 40% { transform: scale(1.06); } }

/* Card entrances (features.js adds .is-in, staggered by --d for cards entering together) */
@keyframes s-features-rise { from { opacity: 0; transform: translateY(var(--reveal-distance, 24px)); } }
@keyframes s-features-fade { from { opacity: 0; } }
@keyframes s-features-dot-in { from { opacity: 0; transform: scale(0); } }
@keyframes s-features-gate-in { from { opacity: 0; transform: translateY(16px) scale(0.94); } }
@keyframes s-features-cursor-in {
  0% { opacity: 0; transform: translate(48px, 40px); }
  70% { opacity: 1; transform: translate(0, 0); }
  85% { transform: scale(0.82); }
}
@keyframes s-features-bubble-in { from { opacity: 0; transform: translateX(12px) scale(0.9); } }

.s-features--motion .s-features__card:not(.is-in) { opacity: 0; }
.s-features--motion .s-features__card.is-in { animation: s-features-rise var(--dur-reveal) var(--ease-out) var(--d, 0ms) backwards; }
.s-features--motion .is-in .s-features__card-title { animation: s-features-rise var(--dur-reveal) var(--ease-out) calc(var(--d, 0ms) + 120ms) backwards; }
.s-features--motion .is-in .s-features__card-text { animation: s-features-rise var(--dur-reveal) var(--ease-out) calc(var(--d, 0ms) + 200ms) backwards; }

/* 1. Dots pop in on a diagonal sweep (.is-settled is added afterwards so the hover ripple can take over) */
.s-features--motion .is-in:not(.is-settled) .s-features__dots span { animation: s-features-dot-in 450ms var(--ease-out) calc(var(--d, 0ms) + 200ms + (var(--x, 0) + var(--y, 0)) * 28ms) backwards; }
.s-features--motion .is-in .s-features__glow { animation: s-features-fade 1.2s ease-out calc(var(--d, 0ms) + 200ms) backwards; }

/* 2. Form lifts in, then the cursor glides over and clicks */
.s-features--motion .is-in .s-features__pixels { animation: s-features-fade 1s ease-out calc(var(--d, 0ms) + 200ms) backwards; }
.s-features--motion .is-in .s-features__gate { animation: s-features-gate-in var(--dur-reveal) var(--ease-out) calc(var(--d, 0ms) + 200ms) backwards; }
.s-features--motion .is-in .s-features__cursor { animation: s-features-cursor-in 1.1s var(--ease-out) calc(var(--d, 0ms) + 600ms) backwards; }

/* 3. Terminal slides up from the card edge, then replays its log (features.js) */
.s-features--motion .is-in .s-features__term { animation: s-features-rise 900ms var(--ease-out) calc(var(--d, 0ms) + 100ms) backwards; }

/* 4. Globe fades up while the response time counts up (features.js) */
@keyframes s-features-globe-in { from { opacity: 0; transform: scale(0.94); } }
.s-features--motion .is-in .s-features__globe { animation: s-features-globe-in 1.4s var(--ease-out) calc(var(--d, 0ms) + 200ms) backwards; }
.s-features--motion .is-in .s-features__score-label, .s-features--motion .is-in .s-features__status { animation: s-features-fade 800ms ease-out calc(var(--d, 0ms) + 500ms) backwards; }

/* 5. Chat builds up: prompt, each step, then the code and status */
.s-features--motion .is-in .s-features__bubble { animation: s-features-bubble-in 600ms var(--ease-out) calc(var(--d, 0ms) + 250ms) backwards; }
.s-features--motion .is-in .s-features__steps li { animation: s-features-rise 600ms var(--ease-out) calc(var(--d, 0ms) + 400ms) backwards; }
.s-features--motion .is-in .s-features__steps li:nth-child(2) { animation-delay: calc(var(--d, 0ms) + 520ms); }
.s-features--motion .is-in .s-features__steps li:nth-child(3) { animation-delay: calc(var(--d, 0ms) + 640ms); }
.s-features--motion .is-in .s-features__code { animation: s-features-rise var(--dur-reveal) var(--ease-out) calc(var(--d, 0ms) + 760ms) backwards; }
.s-features--motion .is-in .s-features__working { animation: s-features-fade 600ms ease-out calc(var(--d, 0ms) + 900ms) backwards; }