/* public/css/site.css (global minimal) */
:root{
  --rx-green:#1a841a; --rx-text:#222; --rx-bg:#f9f9f9; --rx-white:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Rubik,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--rx-text);background:#fff}
img{max-width:100%;display:block}
.rx-container{max-width:1200px;margin:0 auto;padding:0 16px}

/* =========================================================
   Page Transition — triggered by navbar navigation
   ========================================================= */

/* The main content wrapper that gets animated */
#app > .rx-page-animate {
  animation: rx-page-enter .45s cubic-bezier(.4,0,.2,1) both;
}

@keyframes rx-page-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Exit state — added by JS on nav click before leaving */
body.rx-page-exit #app > .rx-page-animate {
  animation: rx-page-exit .3s cubic-bezier(.4,0,.2,1) both;
  pointer-events: none;
}

@keyframes rx-page-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-14px);
  }
}

/* Thin progress bar at the top (like NProgress) */
.rx-page-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #1a841a, #20c997);
  z-index: 9999;
  border-radius: 0 3px 3px 0;
  transition: width .25s ease;
  box-shadow: 0 0 8px rgba(26,132,26,.6);
  pointer-events: none;
}
.rx-page-bar.rx-page-bar--go   { width: 85%; transition: width 2.5s cubic-bezier(.1,0,.1,1); }
.rx-page-bar.rx-page-bar--done { width: 100%; transition: width .15s ease; }
.rx-page-bar.rx-page-bar--hide { opacity: 0;  transition: opacity .25s ease .1s; }

@media (prefers-reduced-motion: reduce) {
  #app > .rx-page-animate { animation: none !important; }
  body.rx-page-exit #app > .rx-page-animate { animation: none !important; }
  .rx-page-bar { display: none; }
}

/* =========================================================
   Global Text Animations (animations.js)
   ========================================================= */

/* h1 / h2 letter spans */
.letter {
  display: inline-block;
  white-space: pre;
}

/* p mist word spans */
.mist-word {
  display: inline-block;
  white-space: pre-wrap;
  will-change: opacity, transform, filter;
}

@media (prefers-reduced-motion: reduce) {
  .letter    { opacity: 1 !important; transform: none !important; }
  .mist-word { opacity: 1 !important; filter: none !important; transform: none !important; }
}

/* =========================================================
   Scroll To Top
   ========================================================= */
.rx-scrolltop{
  position:fixed;right:16px;bottom:16px;z-index:999;
  width:44px;height:44px;border-radius:999px;border:none;
  background:var(--rx-green);color:#fff;font-weight:700;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.18);opacity:0;transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease;
}
.rx-scrolltop.is-visible{opacity:1;transform:translateY(0)}