/* ─── Motion layer ──────────────────────────────────────
   Everything here sits on top of style.css and is scoped under html.motion,
   which an inline script in <head> sets only when the visitor has not asked
   for reduced motion. Without that class (reduced motion, or no JS at all)
   every page renders exactly as it did before this file existed.

   Anything that starts hidden is hidden by motion.js, never by CSS alone,
   except the hero sequence below, which reveals itself with pure CSS
   animations so it cannot get stuck if the script fails to load. */

@property --spin {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ─── Aurora canvas (inserted by motion.js) ──────────── */

.aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

.aurora-canvas.is-on { opacity: 1; }

.has-aurora { overflow: hidden; }
.has-aurora > .container { position: relative; z-index: 1; }

/* ─── Scroll progress ────────────────────────────────── */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 200;
  pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--gold-bright) 60%, #fff4d0);
  box-shadow: 0 0 12px rgba(240, 192, 64, 0.7);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

nav { transition: padding 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; }
.motion nav.is-scrolled {
  padding: 4px 0;
  background: rgba(7, 9, 13, 0.92);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.8);
}
.motion nav.is-scrolled .nav-logo-img { height: 44px; width: 44px; }
.nav-logo-img { transition: box-shadow 0.2s ease, transform 0.2s ease, height 0.3s ease, width 0.3s ease; }

/* ─── Hero headline: word-by-word ────────────────────── */

.hero-title .line { display: block; }

.hero-title .line-gold .w {
  background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold-bright) 30%, #fff4d0 45%, var(--gold-bright) 60%, var(--gold-deep) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.motion .hero-title .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em) rotateX(-40deg);
  transform-origin: 50% 100%;
  filter: blur(8px);
  animation: word-in 0.9s cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
  animation-delay: calc(0.25s + var(--i) * 0.075s);
}

.motion .hero-title .line-gold .w {
  animation:
    word-in 0.9s cubic-bezier(0.2, 0.75, 0.2, 1) forwards,
    glint 6s ease-in-out infinite;
  animation-delay:
    calc(0.25s + var(--i) * 0.075s),
    calc(1.6s + var(--i) * 0.09s);
}

.motion .hero-title { perspective: 600px; }

@keyframes word-in {
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes glint {
  0%, 55%  { background-position: 100% 0; }
  80%, 100% { background-position: 0% 0; }
}

/* Inner-page hero headlines get the same glint, as one sweep */
.motion #hero h1.gradient-text,
.motion .article-title.gradient-text {
  background-image: linear-gradient(110deg, #f7f8fa 0%, #f7f8fa 38%, #fff4d0 46%, var(--gold-bright) 62%, var(--gold-deep) 80%, #f7f8fa 100%);
  background-size: 250% 100%;
  animation: headline-sweep 9s ease-in-out 1s infinite;
}

@keyframes headline-sweep {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

/* ─── Hero console: the inbox plays out ──────────────── */

.console-wrap {
  position: relative;
  border-radius: 18px;
  animation: rise 0.7s 0.12s ease both;
}

.console-wrap .agent-console { animation: none; position: relative; }

.console-float { position: relative; border-radius: 17px; }

/* rotating gold/teal rim */
.console-float::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  padding: 1px;
  background: conic-gradient(from var(--spin), transparent 0deg, rgba(45, 212, 191, 0.9) 50deg, transparent 110deg, transparent 180deg, rgba(240, 192, 64, 0.9) 230deg, transparent 290deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}

.motion .console-float::before {
  opacity: 1;
  animation: spin 7s linear infinite;
}

/* soft glow pool under the console */
.console-float::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -40px;
  height: 80px;
  background: radial-gradient(closest-side, rgba(45, 212, 191, 0.28), transparent);
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}

@keyframes spin { to { --spin: 360deg; } }

.motion .console-float { animation: float 8s ease-in-out 1.2s infinite; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.agent-console { transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }

.console-body .agent-row:nth-child(2) { --r: 1; }
.console-body .agent-row:nth-child(3) { --r: 2; }
.console-body .agent-row:nth-child(4) { --r: 3; }
.console-body .agent-row:nth-child(5) { --r: 4; }
.console-body .agent-row:nth-child(6) { --r: 5; }

.motion .console-body .agent-row {
  opacity: 0;
  transform: translateY(14px);
  animation: row-in 0.6s cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
  animation-delay: calc(0.7s + var(--r, 0) * 1s);
}

.motion .console-body .agent-detail {
  clip-path: inset(0 100% 0 0);
  animation: type-in 0.9s steps(28, end) forwards;
  animation-delay: calc(0.95s + var(--r, 0) * 1s);
}

.motion .console-body .agent-status {
  opacity: 0;
  transform: scale(0.4);
  animation: pop-in 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) forwards;
  animation-delay: calc(1.5s + var(--r, 0) * 1s);
}

@keyframes row-in  { to { opacity: 1; transform: none; } }
@keyframes type-in { to { clip-path: inset(0 0 0 0); } }
@keyframes pop-in  { to { opacity: 1; transform: none; } }

/* LIVE pills keep breathing once they land */
.motion .console-body .status-active {
  animation:
    pop-in 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) forwards,
    live-pulse 2.6s ease-in-out infinite;
  animation-delay: calc(1.5s + var(--r, 0) * 1s), calc(2.2s + var(--r, 0) * 1s);
}

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.14), 0 0 16px rgba(52, 211, 153, 0.35); }
}

/* ─── Console footer: one email, three places ────────── */

.console-sync {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 4px 18px 18px;
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.03), transparent);
}

.sync-lines {
  display: block;
  width: 100%;
  height: 34px;
  overflow: visible;
}

.sync-lines path {
  fill: none;
  stroke: rgba(45, 212, 191, 0.18);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.sync-lines .spark {
  stroke: var(--gold-bright);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 120;
  stroke-dashoffset: 8;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(240, 192, 64, 0.9));
}

.motion .sync-lines .spark {
  animation: spark 3.2s cubic-bezier(0.5, 0, 0.3, 1) infinite;
  animation-delay: calc(2.1s + var(--n) * 0.12s);
}

@keyframes spark {
  0%   { stroke-dashoffset: 8;    opacity: 0; }
  8%   { opacity: 1; }
  45%  { stroke-dashoffset: -110; opacity: 1; }
  50%, 100% { stroke-dashoffset: -110; opacity: 0; }
}

.sync-nodes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.sync-node {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: #9aa4b2;
  font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
  padding: 8px 6px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
}

.sync-node i { color: var(--accent); font-size: 12px; }

.motion .sync-node {
  animation: node-hit 3.2s ease-out infinite;
  animation-delay: calc(2.1s + 1.35s + var(--n) * 0.12s);
}

@keyframes node-hit {
  0%   { border-color: rgba(240, 192, 64, 0.8); color: #fff4d0; box-shadow: 0 0 0 0 rgba(240, 192, 64, 0.5), 0 0 22px rgba(240, 192, 64, 0.35); background: rgba(240, 192, 64, 0.1); }
  40%  { box-shadow: 0 0 0 8px rgba(240, 192, 64, 0), 0 0 0 rgba(240, 192, 64, 0); }
  70%, 100% { border-color: rgba(255, 255, 255, 0.06); color: #9aa4b2; background: rgba(255, 255, 255, 0.02); }
}

.sync-caption {
  margin-top: 10px;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4d5866;
  font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
}

@media (max-width: 480px) {
  .sync-node { font-size: 10px; gap: 5px; padding: 7px 4px; }
  .sync-node i { font-size: 10.5px; }
}

/* ─── Scroll reveal (classes added by motion.js) ─────── */

.rv {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(0.97);
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.9s ease;
  transition-delay: var(--d, 0s);
}

/* belt and braces: a revealing element never widens the page */
.motion main { overflow-x: clip; }

.rv.rv-blur { filter: blur(10px); }
.rv.rv-left { transform: translate3d(-40px, 0, 0); }
.rv.rv-right { transform: translate3d(40px, 0, 0); }
.rv.rv-pop { transform: translate3d(0, 20px, 0) scale(0.85); }

.rv.in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* the gold rule beside each section label draws itself in */
.section-label.rv::before { width: 0; transition: width 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--d, 0s) + 0.3s); }
.section-label.rv.in::before { width: 24px; }

/* compare lists: marks land one by one after the column arrives */
.motion .compare-col.in .compare-list li::before,
.motion .compare-col.rv-done .compare-list li::before {
  animation: mark-in 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.motion .compare-col .compare-list li:nth-child(1)::before { animation-delay: 0.45s; }
.motion .compare-col .compare-list li:nth-child(2)::before { animation-delay: 0.6s; }
.motion .compare-col .compare-list li:nth-child(3)::before { animation-delay: 0.75s; }
.motion .compare-col .compare-list li:nth-child(4)::before { animation-delay: 0.9s; }
.motion .compare-col .compare-list li:nth-child(5)::before { animation-delay: 1.05s; }

@keyframes mark-in {
  from { opacity: 0; transform: scale(0) rotate(-90deg); }
  to   { opacity: 1; transform: none; }
}
.compare-list li::before { display: inline-block; }

/* review stars fill left to right */
.motion .review-card.in .review-stars,
.motion .review-card.rv-done .review-stars {
  background: linear-gradient(90deg, var(--gold-bright) 50%, rgba(232, 182, 76, 0.18) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: stars-fill 1.1s cubic-bezier(0.5, 0, 0.3, 1) 0.4s forwards;
  display: inline-block;
}

@keyframes stars-fill { to { background-position: 0 0; } }

/* ─── Cards: cursor spotlight + tilt ─────────────────── */

.fx-card {
  position: relative;
  isolation: isolate;
  --mx: 50%;
  --my: 50%;
  --glow: 0;
}

.fx-card::before,
.fx-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--glow);
  transition: opacity 0.35s ease;
}

/* fill light, behind the content */
.fx-card::before {
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(45, 212, 191, 0.10), transparent 45%);
}

/* rim light, only on the border */
.fx-card::after {
  z-index: 1;
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(240, 192, 64, 0.85), rgba(45, 212, 191, 0.35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* the service icon lifts toward the viewer while tilting */
.fx-tilting .service-icon { transform: translateZ(30px); }
.fx-tilting { transform-style: preserve-3d; }
.service-icon { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* ─── Buttons: shine + magnetic pull ─────────────────── */

.btn-primary,
.nav-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-primary::after,
.nav-cta::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  z-index: -1;
  pointer-events: none;
}

.motion .btn-primary:hover::after,
.motion .nav-cta:hover::after {
  animation: shine 0.75s ease;
}

/* the hero's main button catches the light on its own now and then */
.motion #hero .btn-primary::after { animation: shine 1.1s ease 3.2s, shine-idle 7s ease 6s infinite; }

@keyframes shine { to { left: 130%; } }
@keyframes shine-idle {
  0%, 84% { left: -60%; }
  100%    { left: 130%; }
}

.magnetic { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.2s ease; will-change: transform; }

/* ─── Chips and small touches ────────────────────────── */

.motion .link-chips a {
  transition: color 0.15s, border-color 0.15s, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.25s;
}

.motion .link-chips a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px -8px rgba(232, 182, 76, 0.45);
}

.motion .hero-eyebrow::before { animation: beacon 2.4s ease-in-out infinite; }

@keyframes beacon {
  0%, 100% { box-shadow: 0 0 8px rgba(45, 212, 191, 0.9), 0 0 0 0 rgba(45, 212, 191, 0.5); }
  50%      { box-shadow: 0 0 8px rgba(45, 212, 191, 0.9), 0 0 0 7px rgba(45, 212, 191, 0); }
}

.motion .hero-owner img { animation: halo 4s ease-in-out 2s infinite; }

@keyframes halo {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04); }
  50%      { box-shadow: 0 0 0 4px rgba(232, 182, 76, 0.12), 0 0 26px rgba(232, 182, 76, 0.35); }
}

/* big numbers count up (see motion.js); tabular so the width holds still */
[data-count] { font-variant-numeric: tabular-nums; }

.plan-price { transition: text-shadow 0.4s ease; }
.motion .audit-section:hover .plan-price { text-shadow: 0 0 24px rgba(240, 192, 64, 0.45); }

@media (prefers-reduced-motion: reduce) {
  .console-wrap { animation: none; }
  .rv { opacity: 1 !important; transform: none !important; filter: none !important; }
  .scroll-progress { display: none; }
}

/* ─── How updates work: the email travels ────────────── */
/* Track sits above the three steps; dot centres match the grid's column
   centres (three columns, 20px gaps). The envelope rides it on a loop and
   turns into a check at the last step. */

.email-track {
  position: relative;
  height: 28px;
  margin-top: 44px;
  --c1: calc((100% - 40px) / 6);
  --c3: calc(100% - (100% - 40px) / 6);
}

.email-track + .steps { margin-top: 10px; }

.track-line {
  position: absolute;
  top: 50%;
  left: var(--c1);
  right: var(--c1);
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, var(--accent-border), var(--gold-border));
  transform-origin: 0 50%;
  transition: transform 1.2s cubic-bezier(0.5, 0, 0.3, 1) 0.3s;
}

.track-dot {
  position: absolute;
  top: 50%;
  left: calc(var(--c1) + (var(--c3) - var(--c1)) * var(--p) / 2);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--gold);
}

.track-mail {
  position: absolute;
  top: 50%;
  left: var(--c1);
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold-grad);
  color: #14100a;
  font-size: 14px;
  box-shadow: 0 0 0 4px rgba(232, 182, 76, 0.15), 0 0 24px rgba(240, 192, 64, 0.55);
}

.track-mail i { grid-area: 1 / 1; }
.track-mail .fa-check { opacity: 0; }

.motion .email-track:has(~ .email-flow .step.rv:not(.in)) .track-line { transform: scaleX(0); }

.motion .track-mail { animation: mail-ride 5s cubic-bezier(0.6, 0, 0.3, 1) 1s infinite; }
.motion .track-mail .fa-envelope { animation: mail-icon 5s linear 1s infinite; }
.motion .track-mail .fa-check { animation: check-icon 5s linear 1s infinite; }
.motion .track-dot { animation: dot-hit 5s ease-out infinite; animation-delay: calc(1s + var(--p) * 1.8s); }

@keyframes mail-ride {
  0%       { left: var(--c1); opacity: 0; transform: scale(0.6); }
  8%       { left: var(--c1); opacity: 1; transform: none; }
  36%, 44% { left: 50%; }
  72%, 90% { left: var(--c3); opacity: 1; transform: none; }
  100%     { left: var(--c3); opacity: 0; transform: scale(0.6); }
}
@keyframes mail-icon  { 0%, 70% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes check-icon { 0%, 70% { opacity: 0; } 74%, 100% { opacity: 1; } }
@keyframes dot-hit {
  0%   { background: var(--gold-bright); box-shadow: 0 0 0 0 rgba(240, 192, 64, 0.6); }
  25%  { box-shadow: 0 0 0 12px rgba(240, 192, 64, 0); }
  40%, 100% { background: var(--bg-card); box-shadow: none; }
}

@media (max-width: 768px) {
  .email-track { display: none; }
  .email-track + .steps { margin-top: 36px; }
}

/* the never-list strikes itself through, one pill at a time */
.never-list li::after { transition: transform 0.5s cubic-bezier(0.5, 0, 0.3, 1) calc(var(--d, 0s) + 0.45s); }
.motion .never-list li.rv:not(.in)::after { transform: scaleX(0); }

/* ─── Text or email Ken button ───────────────────────────────── */
/* Fill mode is backwards, not both, so once it has landed the magnetic pull
   in motion.js (an inline transform) is free to move it. */

.contact-fab { overflow: hidden; isolation: isolate; }

.contact-fab::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  z-index: -1;
  pointer-events: none;
}

.motion .contact-fab {
  animation: fab-in 0.8s cubic-bezier(0.3, 1.5, 0.5, 1) 1.6s backwards;
}

.motion .contact-fab::after { animation: shine-idle 8s ease 4s infinite; }
.motion .contact-fab:hover::after { animation: shine 0.75s ease; }

.motion .contact-fab .fab-email i { animation: wiggle 8s ease-in-out 3s infinite; }

@keyframes fab-in {
  from { opacity: 0; transform: translateY(30px) scale(0.6); }
}

@keyframes wiggle {
  0%, 88%, 100% { transform: none; }
  90% { transform: rotate(-14deg) scale(1.15); }
  92% { transform: rotate(12deg) scale(1.15); }
  94% { transform: rotate(-8deg); }
  96% { transform: rotate(4deg); }
}