/* ============================================================================
 *  animations.css — tasteful, professional motion (shadcn-clean)
 *  GPU-friendly (transform/opacity only). Fully disabled for users who
 *  prefer reduced motion. Loaded last so it can refine base/sections.
 * ========================================================================== */

@keyframes spin       { to { transform: rotate(360deg); } }
@keyframes ringPulse  { 0%,100% { transform: scale(1); opacity:.9 } 50% { transform: scale(1.12); opacity:.4 } }
@keyframes dotPulse   { 0%,100% { transform: scale(.7) } 50% { transform: scale(1) } }
@keyframes barSlide   { 0% { transform: translateX(-100%) } 100% { transform: translateX(260%) } }
@keyframes fadeUp     { from { opacity:0; transform: translateY(22px) } to { opacity:1; transform:none } }
@keyframes fadeIn     { from { opacity:0 } to { opacity:1 } }
@keyframes scaleIn    { from { opacity:0; transform: scale(.94) } to { opacity:1; transform:none } }
@keyframes popIn      { 0% { opacity:0; transform: scale(.9) translateY(10px) }
                        100% { opacity:1; transform:none } }
@keyframes slideDown  { from { opacity:0; transform: translateY(-8px) } to { opacity:1; transform:none } }
@keyframes kenburns   { from { transform: scale(1) } to { transform: scale(1.12) } }
@keyframes floatY     { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }

/* ---- Page entrance --------------------------------------------------- */
body { animation: fadeIn .4s ease both; }

/* ---- Premium boot loader (replaces plain spinner) ------------------- */
.boot { gap:1.25rem; }
.boot__spinner { display:none; }                 /* legacy element, unused */
.boot__logo { position:relative; width:64px; height:64px; display:grid; place-items:center; }
.boot__ring { position:absolute; inset:0; border-radius:50%;
  border:2px solid rgb(var(--border));
  border-top-color:rgb(var(--primary));
  animation: spin .9s linear infinite; }
.boot__ring::after { content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgb(var(--primary) / .15); animation: ringPulse 1.8s ease-in-out infinite; }
.boot__dot { width:14px; height:14px; border-radius:50%;
  background:rgb(var(--primary)); animation: dotPulse 1.2s ease-in-out infinite; }
.boot__text { color:rgb(var(--muted-foreground)); font-size:.92rem; letter-spacing:.01em;
  animation: fadeIn .6s ease both; }
.boot__bar { width:180px; height:4px; border-radius:999px; overflow:hidden;
  background:rgb(var(--muted)); position:relative; }
.boot__bar span { position:absolute; left:0; top:0; bottom:0; width:38%;
  border-radius:999px; background:rgb(var(--primary));
  animation: barSlide 1.25s cubic-bezier(.4,0,.2,1) infinite; }
body.ready .boot { opacity:0; pointer-events:none; transition:opacity .45s ease; }

/* ---- Branded error page --------------------------------------------- */
.fatal { background:
  radial-gradient(120% 90% at 50% 0%, rgb(var(--accent)), rgb(var(--background))); }
.fatal__box { max-width:440px; text-align:center; padding:2.5rem 2rem;
  background:rgb(var(--card)); border:1px solid rgb(var(--border));
  border-radius:calc(var(--radius) + .25rem); box-shadow:var(--shadow-lg); }
.fatal__icon { width:64px; height:64px; margin:0 auto 1.25rem; border-radius:50%;
  display:grid; place-items:center; background:rgb(var(--accent));
  color:rgb(var(--primary)); animation: floatY 3s ease-in-out infinite; }
.fatal__icon svg { width:30px; height:30px; }
.fatal__title { font-size:1.5rem; margin-bottom:.5rem; }
.fatal__msg { color:rgb(var(--muted-foreground)); margin-bottom:1.5rem; }
.fatal__actions { display:flex; gap:.6rem; justify-content:center; }
.fatal__brand { margin-top:1.5rem; font-size:.78rem; color:rgb(var(--muted-foreground)); }
.fatal__brand b { color:rgb(var(--foreground)); font-weight:600; }
.pop-in { animation: popIn .45s cubic-bezier(.34,1.56,.64,1) both; }

/* ---- 404 page (shares fatal styling) -------------------------------- */
.errpage { min-height:100vh; display:grid; place-content:center; padding:1.5rem;
  background: radial-gradient(120% 90% at 50% 0%, rgb(var(--accent)), rgb(var(--background))); }
.errpage__code { font-size:clamp(4rem,14vw,8rem); font-weight:760;
  letter-spacing:-.04em; line-height:1; color:rgb(var(--primary));
  animation: scaleIn .5s ease both; }

/* ---- Hero entrance (staggered) -------------------------------------- */
.hero__slide.is-active .hero__eyebrow { animation: fadeUp .7s ease .05s both; }
.hero__slide.is-active h1            { animation: fadeUp .7s ease .15s both; }
.hero__slide.is-active .hero__sub    { animation: fadeUp .7s ease .28s both; }
.hero__slide.is-active .hero__actions{ animation: fadeUp .7s ease .40s both; }
.hero__slide.is-active .hero__meta   { animation: fadeUp .7s ease .52s both; }
.hero--media.is-active .hero__bg     { animation: kenburns 14s ease-out both; }

/* ---- Scroll reveal (variants + stagger) ----------------------------- */
.reveal { opacity:0; will-change:opacity, transform; }
.reveal[data-reveal="up"], .reveal:not([data-reveal]) { transform: translateY(22px); }
.reveal[data-reveal="scale"] { transform: scale(.95); }
.reveal[data-reveal="left"]  { transform: translateX(-26px); }
.reveal[data-reveal="right"] { transform: translateX(26px); }
.reveal.in { opacity:1; transform:none;
  transition: opacity .6s ease, transform .65s cubic-bezier(.22,1,.36,1); }
/* children of a grid reveal in sequence */
.in.stagger > * , .grid.in > * { animation: fadeUp .55s ease both; }
.grid.in > *:nth-child(2){ animation-delay:.06s }
.grid.in > *:nth-child(3){ animation-delay:.12s }
.grid.in > *:nth-child(4){ animation-delay:.18s }
.grid.in > *:nth-child(5){ animation-delay:.24s }
.grid.in > *:nth-child(6){ animation-delay:.30s }
.grid.in > *:nth-child(7){ animation-delay:.36s }
.grid.in > *:nth-child(8){ animation-delay:.42s }

/* ---- Header on scroll ----------------------------------------------- */
.site-header { transition: box-shadow .25s ease, background .25s ease; }
.site-header.scrolled { box-shadow: 0 1px 0 rgb(var(--border)), var(--shadow);
  background: rgb(var(--background) / .92); }
.mobile-nav.open { animation: slideDown .25s ease both; }
.nav a::after { content:""; display:block; height:2px; width:0; margin-top:2px;
  background:rgb(var(--primary)); border-radius:2px; transition: width .22s ease; }
.nav a:hover::after { width:100%; }

/* ---- Micro-interactions --------------------------------------------- */
.btn { transition: background .15s, color .15s, box-shadow .2s, transform .12s; }
.btn--primary:hover { box-shadow: 0 8px 22px -8px rgb(var(--primary) / .5); transform: translateY(-1px); }
.btn--outline:hover, .btn--ghost:hover { transform: translateY(-1px); }
.chip { transition: background .18s, color .18s, transform .12s, border-color .18s; }
.chip:hover { transform: translateY(-1px); }
.card--hover { transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; }
.pcard__img { transition: transform .5s cubic-bezier(.22,1,.36,1); }
.card--hover:hover .pcard__img { transform: scale(1.06); }
.badge--primary { animation: popIn .4s ease both; }

/* image fade-in once loaded (JS adds .loaded) */
img { opacity:1; }
img.img-fade { opacity:0; transition: opacity .6s ease; }
img.img-fade.loaded { opacity:1; }

/* lightbox */
.lightbox { animation: fadeIn .25s ease both; }
.lightbox img { animation: scaleIn .3s ease both; }

/* open/closed pulse dot */
.open-pill::before { animation: dotPulse 2s ease-in-out infinite; }

/* ---- Respect reduced motion (kill everything) ----------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity:1 !important; transform:none !important; }
  .boot__ring { border-top-color: rgb(var(--primary)); }
}