/* AgentTrust — effects layer styles */

/* -------- LOADER -------- */
#at-loader {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center;
  background: #020409;
  transition: opacity 600ms var(--at-ease);
}
#at-loader::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 400px at 50% 40%, rgba(16,185,129,.08), transparent 60%),
    linear-gradient(rgba(148,163,184,.05) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px) 0 0 / 40px 40px;
  mask-image: radial-gradient(ellipse 700px 400px at 50% 50%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 700px 400px at 50% 50%, #000, transparent 70%);
}
.term-window {
  position: relative;
  width: min(560px, 90vw);
  background: rgba(10,16,32,.85);
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 14px;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(16,185,129,.06);
  backdrop-filter: blur(20px);
  font-family: var(--at-font-mono);
  overflow: hidden;
}
.term-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(148,163,184,.08);
  background: rgba(15,23,42,.6);
  font-size: 11.5px; color: var(--at-text-3);
}
.term-bar .dot { width: 11px; height: 11px; border-radius: 50%; }
.term-bar .title { margin-left: 12px; }
.term-bar .tag {
  margin-left: auto; color: var(--at-accent);
  padding: 2px 8px; border-radius: 6px;
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.24);
  font-size: 10.5px;
}
.term-log {
  padding: 22px 24px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  min-height: 230px;
  color: var(--at-text-2);
}
.term-log div::after {
  content: "";
  display: inline-block; width: 7px; height: 12px;
  background: var(--at-accent);
  margin-left: 4px; vertical-align: -2px;
  animation: atCaret 1s steps(2) infinite;
  opacity: 0;
}
.term-log div:last-child::after { opacity: 1; }
@keyframes atCaret { 50% { opacity: 0; } }

.term-progress {
  height: 2px; background: rgba(148,163,184,.1);
  overflow: hidden;
}
.term-progress > i {
  display: block; height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #10B981, #60A5FA);
  transition: width 160ms var(--at-ease);
  box-shadow: 0 0 12px rgba(16,185,129,.6);
}

/* -------- CUSTOM CURSOR -------- */
#at-cursor-ring, #at-cursor-dot {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9998;
  border-radius: 50%;
  will-change: transform;
  mix-blend-mode: screen;
}
#at-cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(16,185,129,.6);
  transition: width 220ms var(--at-ease), height 220ms var(--at-ease), border-color 220ms var(--at-ease), background 220ms var(--at-ease);
}
#at-cursor-ring.hot {
  width: 54px; height: 54px;
  border-color: rgba(16,185,129,.9);
  background: rgba(16,185,129,.08);
}
#at-cursor-dot {
  width: 5px; height: 5px;
  background: #10B981;
  box-shadow: 0 0 8px rgba(16,185,129,.8);
}
@media (pointer: coarse) { #at-cursor-ring, #at-cursor-dot { display: none; } }

/* -------- SCROLL REVEALS -------- */
.at-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--at-ease), transform 700ms var(--at-ease);
  transition-delay: var(--at-rd, 0ms);
}
.at-reveal.in { opacity: 1; transform: translateY(0); }
.at-reveal.slow { transition-duration: 1000ms; }

/* -------- RIPPLE -------- */
.at-btn-primary, .at-btn-ghost, .at-ripple { position: relative; overflow: hidden; }
.at-ripple-ink {
  position: absolute;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  transform: translate(-50%,-50%);
  animation: atRipple 700ms cubic-bezier(.2,.8,.2,1) forwards;
  pointer-events: none;
}
.at-btn-primary .at-ripple-ink { background: rgba(4,32,20,.35); }
@keyframes atRipple {
  to { width: 520px; height: 520px; opacity: 0; }
}

/* -------- MAGNETIC WRAPPER -------- */
[data-magnetic] { transition: transform 240ms var(--at-ease); will-change: transform; }

/* -------- 3D CENTERPIECE CANVAS -------- */
#at-hero-3d { display: block; width: 100%; height: 100%; }

/* -------- HIDE BODY UNTIL READY -------- */
body:not(.at-ready) #root { opacity: 0; pointer-events: none; }
#root { transition: opacity 400ms var(--at-ease); }