/* ============================================================
   MOTION LAYER — dynamic, coding-style animations
   Loaded after style.css / cms.css. Purely visual: no markup
   or logic from the original site is changed.
   ============================================================ */

/* ---------- scroll progress bar ---------- */
.scroll-progress{position:fixed;left:0;top:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--acc),var(--acc2));box-shadow:0 0 14px rgba(34,224,161,.6);
  transition:width .1s linear}

/* ---------- animated ambient background ---------- */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(rgba(34,224,161,.05) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(34,224,161,.05) 1px,transparent 1px) 0 0/64px 64px;
  mask-image:radial-gradient(900px 520px at 50% 0%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(900px 520px at 50% 0%,#000 0%,transparent 75%);
  animation:gridDrift 26s linear infinite}
body::after{content:"";position:fixed;inset:-20% -20% auto -20%;height:70vh;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(14,165,233,.16),transparent 70%);
  filter:blur(20px);animation:auroraFloat 18s ease-in-out infinite alternate}
@keyframes gridDrift{to{background-position:64px 64px,64px 64px}}
@keyframes auroraFloat{from{transform:translate3d(-4%,0,0) scale(1)}to{transform:translate3d(6%,3%,0) scale(1.12)}}

/* ---------- scroll reveal ---------- */
[data-reveal]{opacity:0;transform:translate3d(0,26px,0) scale(.985);
  transition:opacity .7s cubic-bezier(.22,.8,.28,1),transform .7s cubic-bezier(.22,.8,.28,1);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
[data-reveal="left"]{transform:translate3d(-32px,0,0)}
[data-reveal="right"]{transform:translate3d(32px,0,0)}
[data-reveal="zoom"]{transform:scale(.9)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- hero ---------- */
.hero h1{position:relative}
.hero h1 span{background-size:220% 100%;animation:sheen 6s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero .caret{display:inline-block;width:3px;height:1em;margin-left:4px;vertical-align:-2px;
  background:var(--acc);animation:blink 1s steps(1) infinite;box-shadow:0 0 10px var(--acc)}
@keyframes blink{50%{opacity:0}}

.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;font-size:12.5px;
  font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:#bff3e2;margin-bottom:20px;
  border:1px solid rgba(34,224,161,.3);background:linear-gradient(135deg,rgba(34,224,161,.12),rgba(14,165,233,.1))}
.eyebrow .pulse{width:8px;height:8px;border-radius:50%;background:var(--acc);position:relative}
.eyebrow .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--acc);
  animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{to{transform:scale(3.2);opacity:0}}

/* ---------- terminal / coding animation ---------- */
.term{max-width:760px;margin:34px auto 0;text-align:left;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#0b1322,#080e1a);
  box-shadow:0 30px 70px -34px #000,0 0 0 1px rgba(34,224,161,.06)}
.term-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02)}
.term-bar i{width:11px;height:11px;border-radius:50%;display:block}
.term-bar i:nth-child(1){background:#f43f5e}.term-bar i:nth-child(2){background:#f59e0b}.term-bar i:nth-child(3){background:#22e0a1}
.term-bar b{margin-left:8px;font:600 12px/1 ui-monospace,Menlo,Consolas,monospace;color:var(--mut)}
.term-body{padding:16px 18px;min-height:212px;font:13px/1.85 ui-monospace,Menlo,Consolas,monospace;
  white-space:pre-wrap;overflow-wrap:anywhere;color:#cfe2f5}
.term-body .l{opacity:0;animation:lineIn .45s forwards}
@keyframes lineIn{to{opacity:1;transform:none}}
.term-body .c-key{color:#7dd3fc}.term-body .c-ok{color:var(--acc)}
.term-body .c-mut{color:var(--mut)}.term-body .c-warn{color:var(--warn)}
.term-body .c-cmd{color:#e7edf8}
.term-cursor{display:inline-block;width:8px;height:15px;vertical-align:-2px;background:var(--acc);animation:blink 1s steps(1) infinite}

/* ---------- index checker widget ---------- */
.checker{max-width:640px;margin:26px auto 0}
.checker form{display:flex;gap:10px;flex-wrap:wrap;padding:8px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);backdrop-filter:blur(6px)}
.checker input{flex:1 1 240px;background:transparent;border:0;font:14px/1 var(--font);padding:12px 14px}
.checker input:focus{outline:none}
.checker .btn{flex:0 0 auto}
.checker-out{margin-top:14px;font-size:13.5px;color:var(--mut);min-height:24px}
.checker-out .bar{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin:10px 0}
.checker-out .bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .5s ease}

/* ---------- stats counters ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:38px}
.stats .s{padding:18px;border-radius:14px;text-align:center;
  border:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.stats .s b{display:block;font-size:28px;font-weight:800;
  background:linear-gradient(135deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stats .s span{font-size:12.5px;color:var(--mut);letter-spacing:.3px}

/* ---------- feature cards ---------- */
.feat{position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.22,.8,.28,1),border-color .3s,box-shadow .3s}
.feat::before{content:"";position:absolute;inset:-1px;border-radius:inherit;opacity:0;transition:opacity .3s;
  background:radial-gradient(340px 180px at var(--mx,50%) var(--my,0%),rgba(34,224,161,.14),transparent 70%)}
.feat:hover{transform:translateY(-6px);border-color:rgba(34,224,161,.35);box-shadow:0 26px 50px -28px rgba(0,0,0,.9)}
.feat:hover::before{opacity:1}
.feat .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:12px;font-size:19px;
  background:linear-gradient(135deg,rgba(34,224,161,.18),rgba(14,165,233,.18));border:1px solid rgba(34,224,161,.25)}
.feat:hover .ico{animation:pop .45s ease}
@keyframes pop{40%{transform:translateY(-5px) rotate(-6deg) scale(1.08)}}

/* ---------- pricing hover ---------- */
.price{transition:transform .3s cubic-bezier(.22,.8,.28,1),box-shadow .3s,border-color .3s}
.price:hover{transform:translateY(-7px);border-color:rgba(34,224,161,.4);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.price .amt{transition:transform .3s}
.price:hover .amt{transform:scale(1.05)}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:left .55s ease}
.btn:hover::after{left:140%}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}

/* ---------- logo / engine marquee ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);margin-top:34px}
.marquee ul{display:flex;gap:46px;list-style:none;margin:0;padding:0;width:max-content;animation:slide 22s linear infinite}
.marquee li{color:var(--mut);font-size:14px;font-weight:600;letter-spacing:.4px;white-space:nowrap;display:flex;align-items:center;gap:8px}
.marquee:hover ul{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- misc polish ---------- */
.card{transition:transform .3s cubic-bezier(.22,.8,.28,1),border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-4px);border-color:rgba(34,224,161,.28)}
.tag.indexed,.tag.submitted,.tag.approved{animation:tagGlow 2.6s ease-in-out infinite}
@keyframes tagGlow{50%{box-shadow:0 0 0 3px rgba(34,224,161,.1)}}
html{scroll-behavior:smooth}
::selection{background:rgba(34,224,161,.28)}

/* ---------- mobile ---------- */
@media(max-width:820px){
  .term-body{font-size:12px;min-height:180px;padding:14px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .marquee ul{gap:30px}
  body::before{background-size:44px 44px,44px 44px}
}
@media(max-width:520px){
  .checker form{padding:8px}
  .checker input{flex:1 1 100%;text-align:center}
  .checker .btn{width:100%}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
}