/* =========================================================
   ap.css — Animation-only pack + fake loader overlay
   Safe: uses .ap-* only
   ========================================================= */

:root{
  --ap-fast: 140ms;
  --ap-med: 240ms;
  --ap-slow: 520ms;
  --ap-ease: cubic-bezier(.2,.9,.2,1);
  --ap-ease2: cubic-bezier(.16,1,.3,1);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- Scroll reveal (repeatable) ---------- */
.ap-reveal{
  opacity:0;
  transform: translateY(14px) scale(.985);
  filter: blur(6px);
  transition:
    opacity var(--ap-med) var(--ap-ease),
    transform var(--ap-med) var(--ap-ease),
    filter var(--ap-med) var(--ap-ease);
  will-change: opacity, transform, filter;
}
.ap-reveal.ap-in{
  opacity:1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.ap-reveal.ap-out{
  opacity:0;
  transform: translateY(14px) scale(.985);
  filter: blur(6px);
}
.ap-reveal.ap-left{ transform: translateX(-16px) scale(.985); }
.ap-reveal.ap-right{ transform: translateX(16px) scale(.985); }
.ap-reveal.ap-left.ap-in,
.ap-reveal.ap-right.ap-in{ transform: translateX(0) scale(1); }

.ap-delay-1{ transition-delay: 60ms; }
.ap-delay-2{ transition-delay: 120ms; }
.ap-delay-3{ transition-delay: 180ms; }

/* ---------- Sticky nav hide/show on scroll ---------- */
.nav.ap-nav{
  transition: transform var(--ap-med) var(--ap-ease), opacity var(--ap-med) var(--ap-ease);
  will-change: transform, opacity;
}
.nav.ap-nav.ap-hide{
  transform: translateY(-110%);
  opacity: .98;
}

/* ---------- Buttons micro animations ---------- */
.pill, .btn, .iconBtn, .calBtn, .sBtn, .fab{
  transition: transform var(--ap-fast) var(--ap-ease), filter var(--ap-fast) var(--ap-ease);
  will-change: transform;
}
.pill:active, .btn:active, .iconBtn:active, .calBtn:active, .sBtn:active, .fab:active{
  transform: translateY(1px) scale(.99);
}
@media (hover:hover){
  .pill:hover, .btn:hover, .iconBtn:hover, .calBtn:hover, .sBtn:hover, .fab:hover{
    transform: translateY(-1px);
    filter: brightness(1.03);
  }
}

/* ---------- Back to top ---------- */
#toTop{
  transition: transform var(--ap-med) var(--ap-ease), opacity var(--ap-med) var(--ap-ease);
  opacity:0;
  transform: translateY(10px) scale(.98);
  pointer-events:none;
}
#toTop.ap-show{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}

/* =========================================================
   Fake Loader Overlay (Theme/Language)
   - Blurs page
   - Shows progress bar
   ========================================================= */

.ap-mask{
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: none;
  place-items: center;
  pointer-events: none;
}

.ap-mask.ap-show{
  display: grid;
  pointer-events: auto;
}

.ap-mask .ap-back{
  position:absolute; inset:0;
  background: rgba(0,0,0,.26);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity var(--ap-fast) var(--ap-ease);
}

[data-theme="light"] .ap-mask .ap-back{
  background: rgba(255,255,255,.22);
}

.ap-mask.ap-show .ap-back{ opacity: 1; }

.ap-mask .ap-card{
  position: relative;
  width: min(520px, 92vw);
  border-radius: 18px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,28,.68);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 26px 90px rgba(0,0,0,.45);
  transform: translateY(10px) scale(.98);
  opacity: 0;
  transition: transform var(--ap-med) var(--ap-ease), opacity var(--ap-med) var(--ap-ease);
}

[data-theme="light"] .ap-mask .ap-card{
  background: rgba(255,255,255,.74);
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 26px 90px rgba(15,23,42,.18);
}

.ap-mask.ap-show .ap-card{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.ap-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom: 10px;
}

.ap-title{
  display:flex; align-items:center; gap:10px;
  font-family: Inter, system-ui;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 14px;
}

.ap-pill{
  font-size: 12px;
  opacity: .85;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
}
[data-theme="light"] .ap-pill{
  border-color: rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
}

.ap-bar{
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
}
[data-theme="light"] .ap-bar{
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.10);
}

.ap-fill{
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(59,130,246,.95), rgba(34,197,94,.95), rgba(251,146,60,.95));
  transform-origin: left;
  transition: width var(--ap-slow) var(--ap-ease2);
}

.ap-hint{
  margin-top: 10px;
  font-size: 12px;
  opacity: .82;
  line-height: 1.4;
}