/* ===== Emeso · Diepgang — base & helpers ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { -webkit-font-smoothing: antialiased; background: #02100E; }
a { text-decoration: none; color: inherit; }
::selection { background: #5FF0D0; color: #02100E; }

/* ===== keyframes ===== */
@keyframes ab-spin   { to { transform: rotate(360deg); } }
@keyframes ab-rise   { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } }
@keyframes ab-reveal { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes ab-chev   { 0% { transform: translateY(0); opacity: .3; } 50% { opacity: 1; } 100% { transform: translateY(10px); opacity: .3; } }
@keyframes ab-pulse  { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ===== link underline hover ===== */
.ab-link-u { position: relative; }
.ab-link-u::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s cubic-bezier(.6,0,.2,1);
}
.ab-link-u:hover::after { transform: scaleX(1); transform-origin: left; }

/* ===== scroll-driven reveal ===== */
[data-reveal] {
  animation: ab-reveal 1.1s cubic-bezier(.6,0,.2,1) both;
  animation-timeline: view();
  animation-range: entry 0% cover 22%;
}
#ab-top [data-reveal] { animation: none; opacity: 1; transform: none; }

[data-proj] [data-proj-img] { will-change: transform; }

/* ===== glassmorphism panel ===== */
.ab-glass {
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(95,240,208,.14);
}

/* ===== hover-states (overrides van inline styles → !important) ===== */
[data-pillar]:hover {
  background: rgba(95,240,208,.08) !important;
  border-color: rgba(95,240,208,.45) !important;
  box-shadow: 0 0 50px rgba(95,240,208,.12) !important;
}
#ab-mail:hover {
  background: #5FF0D0 !important;
  color: #02100E !important;
  border-color: #5FF0D0 !important;
}
#ab-terms:hover { opacity: 1 !important; }

/* ===== loader fade ===== */
#ab-loader { transition: opacity .8s ease; }

@media (max-width: 900px) { #ab-gauge { display: none; } }