/* ═══════════════════════════════════════════════════════════════
   ARF.IO — TUI-Inspired Effects
   Color palette and rainbow hue rotation lifted from the ARF TUI
   (crates/arf-cli/src/tui/theme.rs). Applied subtly to navigatable
   items so the web feels visually continuous with the terminal app.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* TUI accent palette — exact RGB from arf-cli/src/tui/theme.rs */
  --tui-pink:    #FF4FD8;
  --tui-purple:  #C989FF;
  --tui-blue:    #86A7FF;
  --tui-cyan:    #70D7D0;
  --tui-green:   #A6D56A;
  --tui-yellow:  #E8C76F;
  --tui-orange:  #FF9A4F;
  --tui-red:     #E08AA8;
  --tui-lime:    #A7FF4F;
  --tui-rose:    #FF78A0;
  --tui-gold:    #E8C76F;

  /* Per-screen TUI backgrounds — used as subtle accents on cards */
  --tui-bg-welcome:  #161228;  /* indigo */
  --tui-bg-agents:   #1E1228;  /* purple-indigo */
  --tui-bg-rules:    #281218;  /* deep red-brown */
  --tui-bg-evidence: #0E2828;  /* deep teal */
  --tui-bg-workgr:   #122816;  /* deep green */
  --tui-bg-activity: #121828;  /* indigo-blue */
  --tui-bg-diff:     #282012;  /* sepia */
  --tui-bg-branches: #102820;  /* deep emerald */
  --tui-bg-hitl:     #281030;  /* magenta */
  --tui-bg-settings: #241228;  /* mauve */
}

/* ═══════════════════════════════════════════════════════════════
   RAINBOW HUE ROTATION — applied to navigatable items.
   Mimics the TUI's per-tick hue advance (1° per 200ms tick →
   ~72-second full rotation). Web version is slower and more subtle.
   ═══════════════════════════════════════════════════════════════ */

@keyframes arf-hue-cycle {
  0%   { filter: hue-rotate(0deg);   }
  100% { filter: hue-rotate(360deg); }
}

@keyframes arf-pulse-glow {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1.0;  }
}

@keyframes arf-breathing {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1.0;  }
}

@keyframes arf-cursor-bloom {
  0%, 100% { box-shadow: 0 0 4px var(--tui-cyan), 0 0 8px rgba(112,215,208,0.3); }
  50%      { box-shadow: 0 0 8px var(--tui-cyan), 0 0 18px rgba(112,215,208,0.55); }
}

/* Hue cycling on nav items — 75s for a full 360° rotation (~208ms per
   degree, close to the TUI's native 200ms tick). Only colored nav items
   participate: active link, hovered dropdown items, breadcrumb, branded
   buttons, the arf.io wordmark.
   Honors prefers-reduced-motion (no animation if user opts out). */
@media (prefers-reduced-motion: no-preference) {
  .nav-links > li > a.active,
  .nav-dropdown li a:hover,
  .hero-breadcrumb .current,
  .hero-breadcrumb a:hover,
  .bc-fullname,
  .footer-links a:hover,
  .footer-legal,
  .p-link:hover,
  .btn-copper,
  .btn-verdis {
    animation: arf-hue-cycle 75s linear infinite;
  }

  /* The arf.io wordmark in the header gets both effects — same as the
     footer-mark below — so the corners match across the page. */
  .wordmark {
    animation: arf-breathing 12s ease-in-out infinite,
               arf-hue-cycle 75s linear infinite;
  }

  .hero-eyebrow,
  .section-eyebrow,
  .section-eyebrow-copper {
    animation: arf-breathing 8s ease-in-out infinite;
  }
}

/* Breadcrumb fourth segment — long-form ARF name. Slightly mauve, italic,
   with a subtle hue cycle. */
.bc-fullname {
  color: var(--mauve-bright);
  font-style: italic;
  letter-spacing: 0.16em;
  text-transform: none;
}

/* Hero rotator — text colors are handled by the existing c-dim / c-copper
   / c-verdis classes in arf.css. The rotator JS only swaps text content;
   the color classes stay on the spans, so the copper + verdis accents
   render the same way for all 60 variants. No CSS needed here. */

/* ═══════════════════════════════════════════════════════════════
   TUI SCREEN CAPTURE EMBED
   Used in arf-tui.html to drop in the real animated captures.
   ═══════════════════════════════════════════════════════════════ */

.tui-clip {
  position: relative;
  background: var(--tui-bg-welcome);
  padding: 1.2rem;
  margin: 0;
  clip-path: polygon(0% 1%, 99% 0%, 100% 99%, 1% 100%);
  border: 1px solid rgba(112, 215, 208, 0.15);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.tui-clip video,
.tui-clip img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.tui-clip figcaption {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tui-cyan);
  margin-top: 0.9rem;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT FORM STYLING
   Used by contact.html
   ═══════════════════════════════════════════════════════════════ */

.contact-form {
  background: var(--surface-raised);
  padding: 2.5rem 2rem;
  clip-path: polygon(0% 1.5%, 99% 0%, 100% 98.5%, 1% 100%);
  border-left: 3px solid var(--copper);
  display: grid;
  gap: 1.5rem;
  max-width: 720px;
}

.contact-form label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.4rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 0.95rem;
  padding: 0.7rem 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--tui-cyan);
  box-shadow: 0 0 0 1px var(--tui-cyan);
  animation: arf-cursor-bloom 2.5s ease-in-out infinite;
}

.contact-form textarea {
  resize: vertical;
  min-height: 140px;
  font-family: var(--f-body);
  line-height: 1.6;
}

.contact-form button[type="submit"] {
  background: var(--copper);
  color: var(--text);
  border: none;
  padding: 1rem 2.4rem;
  font-family: var(--f-display);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  clip-path: polygon(9px 0%, 100% 0%, calc(100% - 9px) 100%, 0% 100%);
  transition: background 0.25s;
}
.contact-form button[type="submit"]:hover {
  background: var(--copper-bright);
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 600px) {
  .contact-form .form-row { grid-template-columns: 1fr; }
}

.contact-form-status {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--verdis);
  background: rgba(78, 122, 84, 0.08);
  color: var(--verdis-bright);
  display: none;
}
.contact-form-status.error {
  border-left-color: #E08AA8;
  background: rgba(224, 138, 168, 0.08);
  color: #E08AA8;
}
.contact-form-status.visible { display: block; }

/* ═══════════════════════════════════════════════════════════════
   ENGAGEMENT TIER CARDS (consulting page)
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* footer-mark gets both: gentle opacity breathing + the same 75s hue cycle */
  .footer-mark {
    animation: arf-breathing 12s ease-in-out infinite,
               arf-hue-cycle 75s linear infinite;
  }
}