/* Static-CSS equivalents of the interactive parts of the Claude Design
   component library (Button.jsx hover/press states, Marquee.jsx keyframes,
   Input/Textarea.jsx focus states, and every literal style-hover="..."
   attribute from the Fase 2 HTML export). Colors/timings are copied
   1:1 from _ds/.../_ds_bundle.js and the page source — see docs/BUILD-PLAN.md
   Fase 2b. Using real :hover/:focus/:active here (instead of the React
   mouseenter/mouseleave state the components used) needs no JS and renders
   pixel-identical. */

/* ---- Marquee (components/core/Marquee.jsx) ---- */
@keyframes wg-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}
.wg-marquee { overflow: hidden; width: 100%; }
.wg-marquee--red { background: var(--wg-red); color: var(--wg-white); }
.wg-marquee--lime { background: var(--wg-lime); color: var(--wg-black); }
.wg-marquee--black { background: var(--wg-black); color: var(--wg-white); }
.wg-marquee--white { background: var(--wg-white); color: var(--wg-black); }
.wg-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  white-space: nowrap;
  padding: 10px 0;
  width: max-content;
  animation: wg-marquee-scroll var(--marquee-dur) linear infinite;
  font-family: var(--font-core);
  font-weight: var(--weight-black);
  font-size: 28px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.wg-marquee__sep { opacity: .5; }

/* ---- Button (components/core/Button.jsx) ---- */
.wg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-core);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transform: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.wg-btn:active:not([disabled]) { transform: scale(var(--state-press-scale)); }
.wg-btn[disabled] { cursor: not-allowed; opacity: var(--state-disabled-opacity); }
.wg-btn--full { display: flex; width: 100%; }

.wg-btn--sm { height: var(--control-h-sm); padding: 0 18px; font-size: 14px; }
.wg-btn--md { height: var(--control-h); padding: 0 26px; font-size: 16px; }
.wg-btn--lg { height: var(--control-h-lg); padding: 0 38px; font-size: 20px; }

.wg-btn--square { border-radius: var(--radius-0); }
.wg-btn--pill { border-radius: var(--radius-pill); }

.wg-btn--primary { background: var(--wg-red); color: var(--wg-white); border: 2px solid var(--wg-red); }
.wg-btn--primary:hover:not([disabled]) { background: var(--wg-lime); color: var(--wg-black); border-color: var(--wg-lime); }

.wg-btn--lime { background: var(--wg-lime); color: var(--wg-black); border: 2px solid var(--wg-lime); }
.wg-btn--lime:hover:not([disabled]) { background: var(--wg-white); color: var(--wg-black); border-color: var(--wg-white); }

.wg-btn--outline { background: transparent; color: var(--wg-white); border: var(--border-strong); }
.wg-btn--outline:hover:not([disabled]) { background: var(--wg-white); color: var(--wg-black); border-color: var(--wg-white); }

.wg-btn--ghost { background: transparent; color: var(--wg-white); border: 2px solid transparent; }
.wg-btn--ghost:hover:not([disabled]) { background: transparent; color: var(--wg-lime); border-color: transparent; }

/* ---- Form fields (components/forms/Input.jsx, Textarea.jsx) ---- */
.wg-field {
  width: 100%;
  background: transparent;
  color: var(--wg-white);
  font-family: var(--font-core);
  font-weight: var(--weight-black);
  font-size: var(--type-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 2px solid var(--wg-ink-500);
  border-radius: var(--radius-0);
  padding: 0 var(--space-4);
  height: var(--control-h);
  outline: none;
}
.wg-field:focus { border-color: var(--wg-lime); }
textarea.wg-field { padding: var(--space-3) var(--space-4); height: auto; resize: vertical; }

/* ---- Literal style-hover="..." attributes from the HTML export ---- */
.wg-hover-lime:hover { color: var(--wg-lime); }
.wg-hover-white:hover { color: var(--wg-white); }
.wg-hover-red:hover { color: var(--wg-red); }
.wg-hover-lime-border:hover { border-color: var(--wg-lime); color: var(--wg-lime); }
.wg-hover-fill-white:hover { background: var(--wg-white); color: var(--wg-black); }
.wg-hover-lift:hover { border-color: var(--wg-lime); transform: translateY(-4px); }