/* ============================================================
   Home hero — greeting, animated subtitle, search, quick actions
   ============================================================ */

.home-hero {
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(28px, 6vh, 64px) 20px 40px;
  text-align: center;
  max-width: 1180px; margin: 0 auto;
}

/* NOTE: the hero used to carry its own profile + assistant pair on the end
   side, which put a second AI button and a second avatar directly under the
   global header's pair on the dashboard - four icons stacked in the corner,
   doing the same job twice. The header pair is the one that follows you into
   every section, so the hero copies were removed and the hero CTA
   ("Ask the assistant instead") is the only assistant entry point here. */

/* ---- Greeting ---- */
.hero-greet {
  display: inline-flex; align-items: baseline;
  gap: 10px;
  font-weight: 760;
  letter-spacing: -.02em;
  line-height: 1.15;
  font-size: clamp(28px, 4.2vw, 46px);
  position: relative;
}
/* Matched by id, not class: the greeting spans are <span id="heroHi"> and
   <span id="heroName"> with no hero-hi / hero-name classes, so the class-based
   selectors never matched and the greeting rendered as flat solid text. */
#heroHi, #heroName {
  /* Orange leads every pass: both ends of the gradient are orange, so each
     sweep arrives orange no matter the direction. */
  background: linear-gradient(100deg,
    #f59e0b 0%, #fb923c 10%,
    var(--accent) 24%, var(--accent-2) 38%,
    var(--accent-3) 50%, #e879a8 60%,
    #a855f7 70%, var(--accent-2) 80%,
    #fb923c 90%, #f59e0b 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroSweep 3.4s linear infinite;
}
#heroName { font-weight: 760; position: relative }

/* Travelling glow: a soft orange halo that crosses the whole greeting in sync
   with the colour sweep, so the part the sweep is passing glows a little. */
.hero-greet::before {
  content: '';
  position: absolute;
  top: -18%; bottom: -18%;
  width: 90px;
  background: radial-gradient(closest-side, rgba(245,158,11,.34), transparent 72%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
  animation: heroGlowSweep 3.4s linear infinite;
}
@keyframes heroGlowSweep {
  0%   { left: -100px; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-greet::before { animation: none; display: none; }
}

/* Radiating pixels on the name: two offset shadow rings plus a glow, so the
   word appears to emit light rather than just be coloured. */
@keyframes heroRadiate {
  0%   { text-shadow: 0 0 6px rgba(139,92,246,.30), 0 0 14px rgba(87,116,183,.22); }
  50%  { text-shadow: 0 0 12px rgba(139,92,246,.62), 0 0 30px rgba(232,121,168,.34), 0 0 46px rgba(47,158,143,.18); }
  100% { text-shadow: 0 0 6px rgba(139,92,246,.30), 0 0 14px rgba(87,116,183,.22); }
}
/* -webkit-text-fill-color:transparent kills text-shadow on the glyph fill, so
   the glow rides on a blurred pseudo-element behind the word instead. */
#heroName::after {
  content: attr(data-name);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  pointer-events: none;
  -webkit-text-fill-color: currentColor;
  color: var(--accent-2);
  filter: blur(14px);
  opacity: .5;
  z-index: -1;
  animation: heroRadiate 2.2s ease-in-out infinite;
}

/* Blinking writing/pen icon — its own cycle, independent of the typing loop. */
.hero-pen {
  display: inline-flex; align-items: center;
  width: .78em; height: .78em;
  color: var(--primary);
  -webkit-text-fill-color: var(--primary);
  transform-origin: 50% 80%;
  animation: heroPenBlink 1.5s ease-in-out infinite;
}
.hero-pen svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

@keyframes heroSweep {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}
@keyframes heroPenBlink {
  0%, 100% { opacity: 1;   transform: rotate(-8deg) scale(1); }
  50%      { opacity: .28; transform: rotate(6deg)  scale(.92); }
}

/* ---- Rotating subtitle with typing caret ---- */
.hero-sub {
  display: inline-flex; align-items: center;
  min-height: 26px; margin-top: 12px;
  font-size: clamp(13px, 1.5vw, 16px);
  color: var(--muted);
}
.hero-caret {
  display: inline-block;
  width: 2px; height: 1.05em; margin-left: 2px;
  background: var(--primary); border-radius: 2px;
  animation: heroCaret .95s steps(2, start) infinite;
}
@keyframes heroCaret { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }

/* ---- Search ---- */
.hero-search {
  display: flex; align-items: center; gap: 10px;
  width: min(680px, 100%);
  margin-top: 30px; padding: 0 16px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--shadow);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.hero-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft), var(--shadow);
}
.hero-search .i {
  width: 17px; height: 17px; flex: 0 0 17px;
  fill: none; stroke: var(--icon); stroke-width: 1.9; stroke-linecap: round;
}
.hero-search input {
  flex: 1 1 auto; min-width: 0;
  border: none; background: none; outline: none;
  font: inherit; font-size: 13.5px; color: var(--text);
}
.hero-search input::placeholder { color: var(--muted) }
.hero-search kbd {
  flex: 0 0 auto;
  font-family: inherit; font-size: 10.5px; font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; padding: 2px 6px;
  background: var(--elev);
}
.hero-hint {
  margin-top: 9px; min-height: 15px;
  font-size: 11px; color: var(--muted);
}

/* ---- Ask the assistant ----
   This button was in the markup, wired to a click handler and even given an
   is-lit state, and had NO rule in any stylesheet - so it rendered as bare
   unstyled button text below the search bar. Sized to match the search field
   and the card radius so it reads as part of the same control group. */
.hero-ask {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 0 18px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--shadow);
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast),
    background-color var(--dur-fast), color var(--dur-fast),
    transform var(--dur-fast);
}
.hero-ask .i {
  width: 15px; height: 15px; flex: 0 0 15px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.hero-ask:hover {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft), var(--shadow);
  transform: translateY(-1px);
}
.hero-ask:active { transform: translateY(0); }
.hero-ask:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft), var(--shadow);
}
/* Lights up once there is something to send. The click hands the typed query to
   the chat, so from that moment this is the real submit action and should
   outrank the search box as the obvious next step. */
.hero-ask.is-lit {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 10px 24px -8px var(--primary);
}
.hero-ask.is-lit:hover {
  color: #fff; background: var(--primary);
  box-shadow: 0 14px 30px -8px var(--primary);
}

/* ---- Quick action cards ---- */
.hero-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
  gap: 16px;
  width: 100%;
  margin-top: 34px;
  text-align: left;
}
.qcard {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 196px;
  padding: 20px 20px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow);
  text-decoration: none;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  animation: qcardIn .5s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
  transition: transform var(--dur-normal), box-shadow var(--dur-normal), border-color var(--dur-normal);
}
.qcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-pop);
  border-color: var(--line);
}
.qcard-body { position: relative; z-index: 2 }
.qcard h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text) }
.qcard p {
  margin: 6px 0 0; max-width: 30ch;
  font-size: 11.5px; line-height: 1.6; color: var(--muted);
}
/* Illustration sits bottom-right, matching the reference card composition. */
.qcard-art {
  position: absolute; right: 16px; bottom: 14px;
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  opacity: .92;
  transition: transform var(--dur-slow) var(--ease);
}
.qcard-art svg {
  width: 30px; height: 30px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.qcard:hover .qcard-art { transform: scale(1.1) rotate(-3deg) }

.qcard-cta {
  position: absolute; left: 20px; bottom: 18px; z-index: 2;
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 13px;
  border-radius: 999px;
  font-size: 11px; font-weight: 650;
  color: var(--label);
  background: var(--elev);
  border: 1px solid var(--border);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.qcard:hover .qcard-cta { background: var(--primary); color: #fff; border-color: var(--primary) }

.tone-green  .qcard-art { background: var(--primary-soft); color: var(--primary-dark) }
.tone-blue   .qcard-art { background: var(--info-soft);    color: var(--info) }
.tone-amber  .qcard-art { background: var(--warn-soft);    color: var(--warn-text) }
.tone-red    .qcard-art { background: var(--danger-soft);  color: var(--danger) }
.tone-violet .qcard-art { background: var(--purple-soft);  color: var(--purple) }
.tone-cyan   .qcard-art { background: var(--teal-soft);   color: var(--teal) }

/* The fetch-from-database card is a <button> rather than a link, so the
   browser's default button styling has to be undone before it can sit in the
   same grid as the anchors without looking like a different thing. */
.qcard-action {
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.qcard-action:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.qcard-action.is-busy { opacity: .6; pointer-events: none; }
.qcard-action.is-busy .qcard-art { animation: qcardSpin 1.1s linear infinite; }

@keyframes qcardSpin {
  to { transform: rotate(360deg) }
}

/* Where the fetch button reports what came back. */
.hero-fetch-status {
  margin-top: 12px;
  min-height: 16px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}
.hero-fetch-status.is-ok { color: var(--primary-dark); }
.hero-fetch-status.is-error { color: var(--danger); }

@keyframes qcardIn {
  to { opacity: 1; transform: translateY(0) }
}

@media (prefers-reduced-motion: reduce) {
  .hero-greet, .hero-pen, .hero-caret, .qcard { animation: none !important }
  .qcard { opacity: 1; transform: none }
}

@media (max-width: 640px) {
  .hero-cards { grid-template-columns: 1fr }
  .hero-search { height: 48px }
}