/* ============================================================
   ANOVA PROJECTS — Components
   Buttons · Links · Inputs · Cards · Tags · Icons · Focus points
   Mirrors asset map 06. UI COMPONENTS
   ============================================================ */

/* ------------------------------------------------------------
   1. Icon system
   One coherent family: monoline, 24px grid, rounded joins,
   optional ice-blue accent dot. Sprite is inlined per page.
   ------------------------------------------------------------ */

.icon {
  width: var(--icon-md);
  height: var(--icon-md);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-sw);
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--text-2);
  transition: color var(--dur-2) var(--ease);
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); --icon-sw: 1.9; }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); --icon-sw: 1.6; }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); --icon-sw: 1.45; }

/* The blue accent dot inside icons — the signature focus point. */
.icon .dot {
  fill: var(--accent);
  stroke: none;
  transition: opacity var(--dur-2) var(--ease);
}
.icon .dot-ring { stroke: var(--accent); }
.icon .accent-stroke { stroke: var(--accent); }

/* Icon plate: the rounded module an icon sits in on cards. */
.icon-plate {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(34, 208, 238, .07), transparent 62%),
    var(--bg-inset);
  color: var(--text-2);
  flex: none;
  transition:
    border-color var(--dur-2) var(--ease),
    background var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}
.icon-plate .icon { color: var(--text); }
.icon-plate--sm { width: 40px; height: 40px; border-radius: var(--r-sm); }

/* ------------------------------------------------------------
   2. Focus point — the recurring luminous marker
   ------------------------------------------------------------ */

.focus-point {
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: var(--glow-dot);
  flex: none;
}
.focus-point--lg { width: 8px; height: 8px; box-shadow: var(--glow-dot-lg); }
.focus-point--pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  opacity: 0;
  animation: fp-pulse 3.6s var(--ease) infinite;
}
@keyframes fp-pulse {
  0%   { opacity: .55; transform: scale(.6); }
  70%  { opacity: 0;   transform: scale(1.7); }
  100% { opacity: 0;   transform: scale(1.7); }
}

/* ------------------------------------------------------------
   3. Buttons
   ------------------------------------------------------------ */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 46px;
  padding: 12px 22px;
  border-radius: var(--r-sm);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: 0.005em;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition:
    background var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease);
}
.btn .icon { width: 18px; height: 18px; color: currentColor; stroke-width: 2; }
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primary — solid ice blue, dark type */
.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--text-on-accent);
  --btn-bd: var(--accent);
  box-shadow: 0 8px 30px -14px rgba(34, 208, 238, .8);
}
.btn--primary:hover {
  --btn-bg: var(--accent-bright);
  --btn-bd: var(--accent-bright);
  box-shadow: 0 12px 38px -14px rgba(34, 208, 238, .95);
}

/* Secondary — outlined, ice-blue hairline */
.btn--secondary {
  --btn-bd: var(--border-accent);
  --btn-fg: var(--text-strong);
  background: rgba(34, 208, 238, .04);
}
.btn--secondary:hover {
  --btn-bd: var(--accent);
  background: var(--accent-tint);
  box-shadow: var(--glow-edge);
}

/* Ghost — steel hairline, quiet */
.btn--ghost { --btn-bd: var(--border); --btn-fg: var(--text-2); }
.btn--ghost:hover {
  --btn-bd: var(--border-strong);
  --btn-fg: var(--text-strong);
  background: rgba(255, 255, 255, .02);
}

.btn--lg { min-height: 54px; padding: 16px 28px; font-size: var(--fs-body); }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  cursor: not-allowed;
  transform: none;
  --btn-bg: var(--disabled-bg);
  --btn-fg: var(--disabled-text);
  --btn-bd: var(--disabled-border);
  box-shadow: none;
}

/* Nav CTA: outlined button carrying a focus point on its edge */
.btn--node { padding-right: 26px; }
.btn--node .focus-point {
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
}

/* Tertiary link — label, rule, focus point (asset map) */
.link-node {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  padding: 6px 0;
  transition: color var(--dur-2) var(--ease);
}
.link-node__rule {
  display: block;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-line), var(--accent));
  transition: width var(--dur-3) var(--ease);
}
.link-node:hover { color: var(--accent-bright); }
.link-node:hover .link-node__rule { width: 52px; }

/* Inline arrow link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: color var(--dur-2) var(--ease), gap var(--dur-2) var(--ease);
}
.link-arrow .icon { width: 16px; height: 16px; color: var(--accent); }
.link-arrow:hover { color: var(--accent); gap: var(--s-3); }

/* ------------------------------------------------------------
   4. Cards
   ------------------------------------------------------------ */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition:
    border-color var(--dur-3) var(--ease),
    background var(--dur-3) var(--ease),
    transform var(--dur-3) var(--ease),
    box-shadow var(--dur-3) var(--ease);
}
/* Corner contour — a quiet nod to the field-line motif */
.card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(120px 120px at 100% 0%, rgba(34, 208, 238, .1), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
  pointer-events: none;
}
.card:hover, .card:focus-within {
  border-color: var(--border);
  background: var(--bg-surface-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-raise);
}
.card:hover::after, .card:focus-within::after { opacity: 1; }
.card:hover .icon-plate, .card:focus-within .icon-plate { border-color: var(--border-accent); }
.card > * { position: relative; z-index: 1; }
.card h3 { margin: 0; }
.card p  { color: var(--text-2); margin: 0; }

.card__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}
.card__foot {
  margin-top: auto;
  padding-top: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  border-top: 1px solid var(--hairline);
}

/* Whole-card link: stretched hit area, keyboard-safe */
.card--link .card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

/* On touch, and in the stacked single-column layout, the whole card is the
   tap target — arrow, icon and empty space included.

   `.card > *` positions every direct child, which makes .pillar__head the
   containing block for the stretched link, so it only ever covered the title
   row. Releasing that inside the card lets `inset: 0` resolve against .card
   itself. Layout is unaffected: `position: relative` with no offsets moves
   nothing, it only changes stacking.

   Pointer devices at desktop widths keep exactly the previous behaviour,
   including the per-item hover on the capability lists. */
@media (hover: none), (max-width: 899px) {
  .card--link { isolation: isolate; }
  /* z-index must be released too: these are flex items, and z-index applies
     to a flex item even when it is statically positioned, which would keep
     each one in its own stacking layer above the overlay. */
  .card--link > * { position: static; z-index: auto; }

  /* The corner glow would otherwise paint over the now-static content;
     inside the isolated card it sits above the background, below the text. */
  .card--link::after { z-index: -1; }

  /* Case-study visuals position their own SVG and must stay a containing
     block. They are not ancestors of the link, so this is safe. */
  .card--link .work-card__visual { position: relative; }
}
.card--link:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.card--link .card__link:focus-visible { outline: none; }

/* Feature card (asset map: icon plate → title → copy → arrow) */
.card__arrow {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  color: var(--text-3);
  flex: none;
  transition:
    border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}
.card__arrow .icon { width: 16px; height: 16px; color: currentColor; }
.card:hover .card__arrow, .card:focus-within .card__arrow {
  border-color: var(--border-accent);
  color: var(--accent);
  transform: translateX(2px);
}

/* Quote card */
.card--quote { gap: var(--s-5); }
.card--quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  line-height: 1.45;
  color: var(--text-strong);
}
.quote-mark {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: .7;
  color: var(--accent);
  opacity: .9;
}

/* Numbered / step card */
.step__index {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-label);
  color: var(--text-4);
}

/* Bordered list module used for capability lists */
.spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.spec-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--anova-steel);
  transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.spec-list li:hover::before { background: var(--accent); box-shadow: var(--glow-dot); }

/* ------------------------------------------------------------
   5. Tags / status
   ------------------------------------------------------------ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px 12px 5px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, .015);
  color: var(--text-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: .01em;
  line-height: 1.5;
  white-space: nowrap;
}
.tag__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--anova-steel);
}
.tag--active   { color: var(--text-strong); border-color: var(--border-accent); }
.tag--active   .tag__dot { background: var(--accent); box-shadow: var(--glow-dot); }
.tag--progress .tag__dot { background: var(--success); }
.tag--complete .tag__dot { background: transparent; border: 1.5px solid var(--success); }
.tag--hold     .tag__dot { background: transparent; border: 1.5px solid var(--warning); }
.tag--critical .tag__dot { background: var(--error); }

/* ------------------------------------------------------------
   6. Forms
   ------------------------------------------------------------ */

.field { display: grid; gap: var(--s-2); }

.field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.field__optional {
  font-size: var(--fs-caption);
  font-weight: var(--fw-normal);
  color: var(--text-4);
  letter-spacing: .02em;
}
.field__hint { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; }

.input, .textarea, .select {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-inset);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  transition:
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    background var(--dur-2) var(--ease);
  appearance: none;
}
.textarea { min-height: 122px; resize: vertical; padding-top: 14px; }

.input::placeholder, .textarea::placeholder { color: var(--text-4); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--border-strong); }

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-surface);
  box-shadow: 0 0 0 1px var(--accent), var(--glow-edge);
}

.select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
  cursor: pointer;
}
.select option { background: var(--anova-moon); color: var(--text); }

.field--invalid .input,
.field--invalid .textarea,
.field--invalid .select { border-color: var(--error); }
.field--invalid .input:focus,
.field--invalid .textarea:focus { box-shadow: 0 0 0 1px var(--error); }

.field__error {
  display: none;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--error);
}
.field--invalid .field__error { display: flex; }

.form-note { font-size: var(--fs-xs); color: var(--text-4); line-height: 1.6; }

/* Feedback panel after submit */
.form-status {
  display: none;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-inset);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.form-status.is-shown { display: flex; }
.form-status .icon { flex: none; }
.form-status--ok    { border-color: rgba(52, 211, 153, .4); }
.form-status--ok    .icon { color: var(--success); }
.form-status--error { border-color: rgba(242, 100, 92, .45); }
.form-status--error .icon { color: var(--error); }

/* ------------------------------------------------------------
   7. Field-line graphics (asset map 05 / 13)
   Pure SVG + CSS. No canvas, no WebGL.
   ------------------------------------------------------------ */

.field-lines {
  position: absolute;
  inset: 0;
  z-index: var(--z-field);
  pointer-events: none;
  overflow: hidden;
}
.field-lines > svg { width: 100%; height: 100%; }
.fl-ring {
  fill: none;
  stroke: var(--anova-steel);
  vector-effect: non-scaling-stroke;
}
.fl-node { fill: var(--accent); stroke: none; }

.fl-rotate {
  transform-box: fill-box;
  transform-origin: center;
  animation: fl-spin var(--dur-field) linear infinite;
}
.fl-rotate--rev { animation-direction: reverse; animation-duration: calc(var(--dur-field) * 1.7); }
@keyframes fl-spin { to { transform: rotate(360deg); } }

.fl-breathe {
  animation: fl-breathe 7s var(--ease-in-out) infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes fl-breathe {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.05); }
}

/* Dot grid motif */
.dot-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(34, 208, 238, .28) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(68% 68% at 50% 40%, #000 8%, transparent 76%);
          mask-image: radial-gradient(68% 68% at 50% 40%, #000 8%, transparent 76%);
  opacity: .5;
}

/* Animated drawn path — the "flow" motif */
.path-flow {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 5 11;
  animation: path-dash 14s linear infinite;
}
@keyframes path-dash { to { stroke-dashoffset: -160; } }

/* ------------------------------------------------------------
   8. Small shared modules
   ------------------------------------------------------------ */

/* Divider carrying a focus point */
.node-rule { display: flex; align-items: center; gap: var(--s-4); }
.node-rule::before, .node-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}

/* Key/value stat — used only for facts we can actually support */
.stat { display: grid; gap: var(--s-2); }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem);
  font-weight: var(--fw-light);
  color: var(--text-strong);
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat__label { font-size: var(--fs-sm); color: var(--text-3); }

/* Callout panel */
.panel {
  position: relative;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  padding: clamp(20px, 2.6vw, 32px);
}
.panel--inset { background: var(--bg-inset); }
.panel--accent {
  border-color: var(--border-accent);
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(34, 208, 238, .08), transparent 58%),
    var(--bg-surface);
}
.panel > * { position: relative; z-index: 1; }

/* Hero field bundle: a slow oscillation around the convergence point. */
.hero__figure .fl-ring,
.hero__figure .fl-path { color: var(--field-line-strong); stroke: var(--field-line-strong); }

.fl-drift {
  transform-box: view-box;
  transform-origin: 420px 300px;
  animation: fl-drift 34s var(--ease-in-out) infinite;
}
@keyframes fl-drift {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* Narrow phones: long problem-led CTA labels must not run off the screen.
   Buttons go full width and are allowed to wrap onto a second line. */
.btn { max-width: 100%; }

@media (max-width: 560px) {
  .btn--lg {
    width: 100%;
    white-space: normal;
    line-height: 1.32;
    padding-block: 15px;
  }
  .hero__actions .btn,
  .cta-band__actions .btn { flex: 1 1 100%; }
  .cta-band__actions { width: 100%; }
}

/* Links inside spec lists are still sentence-inline, but a little padding
   makes them comfortable to hit on touch. */
.spec-list a { display: inline-block; padding-block: 3px; }

/* The privacy pointer under the form has to read as a link, not as more
   fine print, and sits on its own line so it is not lost in the sentence. */
.form-note a {
  display: inline-block;
  margin-top: var(--s-2);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.form-note a:hover { color: var(--accent-bright); }