/* ==========================================================
   Action motion
   The hover, the focus, the press and the answer of the
   integration rows of a component page. Hooks on [data-act];
   an action without a part of its own gets the generic one.
   Script: site/action-motion.js
   ========================================================== */

/* The tint of a row: its own colour for Webflow and the AI, the site's
   accent for every other action. */
.act-row[data-act] {
  --am-tint: var(--accent);
  --am-warn: #ff4b3e;
  --am-out: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.act-row[data-act="webflow"] { --am-tint: #146ef5; }
.act-row[data-act="ai"] { --am-tint: var(--ai); }
.act-row.is-locked[data-act] { --am-tint: var(--muted); }

/* ---------- The viewfinder corners around the icon ---------- */

.act-row[data-act] .act-icon { position: relative; }

.act-row[data-act] .act-icon::after {
  content: "";
  position: absolute;
  inset: -5px;
  --m: 6px;
  --c: var(--am-tint);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--m) 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--m),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--m) 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--m),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--m) 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--m),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--m) 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--m);
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(0.72);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.5s var(--am-out);
}

.act-row[data-act]:focus-visible .act-icon::after,
.act-row[data-act][data-state="done"] .act-icon::after {
  opacity: 1;
  transform: scale(1);
}

@media (hover: hover) {
  .act-row[data-act]:hover .act-icon::after {
    opacity: 1;
    transform: scale(1);
  }
}

/* The answer: the corners close on the box and blink, a focus that locks. */
.act-row[data-act].am-lock .act-icon::after { animation: am-lock 0.62s var(--am-out) both; }
.act-row[data-act].am-fail .act-icon::after { --c: var(--am-warn); animation: am-lock 0.62s var(--am-out) both; }

@keyframes am-lock {
  0% { transform: scale(1); opacity: 1; }
  30% { transform: scale(0.84); opacity: 1; }
  38% { opacity: 0.15; }
  50% { opacity: 1; }
  60% { opacity: 0.15; }
  72% { transform: scale(0.84); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- The icon and what the script lays over it ---------- */

.act-row[data-act] .act-icon svg path,
.act-row[data-act] .act-go path {
  transform-box: fill-box;
  transform-origin: center;
}

.act-row[data-act] .am-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--am-tint);
  pointer-events: none;
}

.act-row[data-act] .am-layer > * { grid-area: 1 / 1; }

.act-row[data-act] .am-check { opacity: 0; }
.act-row[data-act] .am-check path { stroke-dasharray: 1; stroke-dashoffset: 1; }


/* The AI label: one pass of light, the way a running tool call reads. */
.act-row[data-act] .act-label.am-shimmer {
  background: linear-gradient(100deg, var(--text) 0%, var(--text) 38%, var(--ai) 47%, #fff 50%, var(--ai) 53%, var(--text) 62%, var(--text) 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: am-shimmer 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes am-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

/* ---------- The line under a row ---------- */

/* It lies on the hairline that closes the row and only ever scales or fades. */
.act-row[data-act]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--am-tint);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Code: the download fills it tick by tick. */
.act-row[data-act].am-load::after { opacity: 0.9; animation: am-load 0.6s steps(12, end) both; }

@keyframes am-load {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* AI: a short light runs along it while the prompt is built. */
.act-row[data-act].am-run::after {
  opacity: 1;
  transform: none;
  background: linear-gradient(90deg, transparent, var(--am-tint) 45%, #fff 50%, var(--am-tint) 55%, transparent) 0 0 / 40% 100% no-repeat;
  animation: am-run 0.85s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

@keyframes am-run {
  from { background-position: -70% 0; }
  to { background-position: 170% 0; }
}

/* The answer: the whole line in the tint, then it lets go. */
.act-row[data-act].am-lock::after {
  transform: none;
  background: var(--am-tint);
  animation: am-line 1.5s ease-out both;
}

@keyframes am-line {
  0% { opacity: 0; }
  12% { opacity: 0.95; }
  45% { opacity: 0.95; }
  100% { opacity: 0; }
}

/* ---------- Without motion: colour and opacity only ---------- */

@media (prefers-reduced-motion: reduce) {
  .act-row[data-act] .act-icon::after {
    transform: none;
    transition: opacity 0.2s ease;
  }

  .act-row[data-act].am-lock .act-icon::after,
  .act-row[data-act].am-fail .act-icon::after { animation: none; transform: none; opacity: 1; }

  .act-row[data-act].am-load::after,
  .act-row[data-act].am-run::after,
  .act-row[data-act].am-lock::after { animation: none; }

  .act-row[data-act].am-lock::after { opacity: 0.9; transform: none; }

  .act-row[data-act] .act-label.am-shimmer { animation: none; background: none; color: var(--text); }

  .integrate-rail .act-row[data-act]:hover .act-go { transform: none; }
}