/* E-VOLT — enhance.css
   Layers extra dynamism on top of styles.css without overriding layout.
   Safe-additive: only new classes, new keyframes, and a few :hover upgrades
   scoped to existing classes via .fx-on (feature flag set in enhance.js).
*/

/* ---------- 0. Motion preferences guard ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-on *,
  .fx-on *::before,
  .fx-on *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- 1. Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 200;
  pointer-events: none;
}
.scroll-progress::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--sp, 0%);
  background: linear-gradient(90deg, var(--ink, #0A1628), var(--terra, #C85B38));
  transition: width 0.08s linear;
  box-shadow: 0 0 14px rgba(200, 91, 56, 0.35);
}

/* ---------- 2. Nav: subtle solidification on scroll ---------- */
.fx-on .nav {
  transition: background-color 0.35s ease, backdrop-filter 0.35s ease,
              border-color 0.35s ease, box-shadow 0.35s ease;
  border-bottom: 1px solid transparent;
}
.fx-on .nav.is-scrolled {
  background-color: rgba(245, 242, 234, 0.78);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(10, 22, 40, 0.08);
  box-shadow: 0 8px 24px -22px rgba(10, 22, 40, 0.35);
}

/* ---------- 3. Hero ambient glow + cursor-follow ---------- */
.fx-on .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.fx-on .hero::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(520px circle at var(--mx, 30%) var(--my, 20%),
                    rgba(200, 91, 56, 0.14),
                    transparent 60%),
    radial-gradient(680px circle at 85% 85%,
                    rgba(10, 22, 40, 0.06),
                    transparent 65%);
  z-index: -1;
  transition: background 0.25s ease;
  pointer-events: none;
}
.fx-on .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 34%, rgba(10, 22, 40, 0.18) 50%, transparent 51%),
    radial-gradient(1px 1px at 67% 18%, rgba(10, 22, 40, 0.14) 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 72%, rgba(200, 91, 56, 0.22) 50%, transparent 51%),
    radial-gradient(1px 1px at 24% 81%, rgba(10, 22, 40, 0.12) 50%, transparent 51%);
  background-size: 420px 420px;
  animation: fx-drift 32s linear infinite;
  z-index: -1;
  opacity: 0.7;
  pointer-events: none;
}
@keyframes fx-drift {
  to { background-position: 420px 420px, -420px 420px, 420px -420px, -420px -420px; }
}

/* ---------- 4. Hero title word-level reveal ---------- */
.fx-on .hero__title .fx-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) skewY(4deg);
  animation: fx-word-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 60ms + 120ms);
}
@keyframes fx-word-in {
  to { opacity: 1; transform: translateY(0) skewY(0); }
}

/* ---------- 5. Hero accent shimmer ---------- */
.fx-on .hero__accent {
  background: linear-gradient(
    90deg,
    var(--terra, #C85B38) 0%,
    #e07a5a 45%,
    var(--terra, #C85B38) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: fx-shimmer 6s ease-in-out infinite;
}
@keyframes fx-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---------- 6. Buttons: glow, ripple, magnetic transform ---------- */
.fx-on .btn {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.3s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  will-change: transform;
}
.fx-on .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    180px circle at var(--bx, 50%) var(--by, 50%),
    rgba(255, 255, 255, 0.28),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.fx-on .btn:hover::after { opacity: 1; }
.fx-on .btn--primary:hover {
  box-shadow: 0 18px 38px -18px rgba(10, 22, 40, 0.55),
              0 0 0 1px rgba(10, 22, 40, 0.9);
}
.fx-on .btn--ghost:hover {
  background: var(--ink, #0A1628);
  color: var(--cream, #F5F2EA);
}
.fx-on .btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  animation: fx-ripple 0.65s ease-out forwards;
  pointer-events: none;
}
@keyframes fx-ripple {
  to { transform: scale(3.2); opacity: 0; }
}

/* ---------- 7. Nav links: animated underline glow ---------- */
.fx-on .nav__links a {
  position: relative;
  transition: color 0.25s ease, transform 0.25s ease;
}
.fx-on .nav__links a:hover { transform: translateY(-1px); }

/* ---------- 8. Service cards: tilt + border glow ---------- */
.fx-on .service {
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s ease,
              border-color 0.25s ease;
  will-change: transform;
}
.fx-on .service:hover {
  box-shadow: 0 28px 60px -28px rgba(10, 22, 40, 0.35),
              0 0 0 1px rgba(200, 91, 56, 0.2);
}
.fx-on .service__num {
  transition: letter-spacing 0.35s ease, color 0.25s ease;
}
.fx-on .service:hover .service__num {
  letter-spacing: 0.14em;
  color: var(--terra, #C85B38);
}

/* ---------- 9. Gallery: refined hover + parallax image ---------- */
.fx-on .gallery__item {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s ease;
}
.fx-on .gallery__img {
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.4s ease;
}
.fx-on .gallery__item:hover { transform: translateY(-4px); }
.fx-on .gallery__item:hover .gallery__img {
  transform: scale(1.06);
  filter: brightness(0.92) saturate(1.08);
}
.fx-on .gallery__tag {
  transition: transform 0.3s ease, background-color 0.25s ease;
}
.fx-on .gallery__item:hover .gallery__tag {
  transform: translateY(-2px);
  background: var(--terra, #C85B38);
  color: var(--cream, #F5F2EA);
}

/* ---------- 10. Map pins: refined pulse ring ---------- */
.fx-on .pin__dot {
  position: relative;
}
.fx-on .pin__dot::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.6;
  animation: fx-pin-pulse 2.4s ease-out infinite;
}
.fx-on .pin--hot .pin__dot::before {
  animation-duration: 1.6s;
  border-color: var(--terra, #C85B38);
}
@keyframes fx-pin-pulse {
  0%   { transform: scale(0.6); opacity: 0.65; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ---------- 11. Stagger reveal variants ---------- */
.fx-on [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.fx-on [data-reveal="left"]  { transform: translateX(-32px); }
.fx-on [data-reveal="right"] { transform: translateX(32px); }
.fx-on [data-reveal="scale"] { transform: scale(0.94); }
.fx-on [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- 12. Tariff bars: grow-in animation ---------- */
.fx-on .tariff__bar {
  transition: transform 0.3s ease, filter 0.3s ease;
}
.fx-on .tariff__bar:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 10px 16px rgba(10, 22, 40, 0.18));
}
.fx-on .tariff__fill {
  transform-origin: bottom;
  animation: fx-grow-y 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--bar-i, 0) * 90ms);
}
@keyframes fx-grow-y {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ---------- 13. Hero stat: float loop ---------- */
.fx-on .hero__stat {
  animation: fx-float 7s ease-in-out infinite;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
@keyframes fx-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ---------- 14. KPI numbers: metallic text shine ---------- */
.fx-on [data-counter] {
  background: linear-gradient(
    180deg,
    var(--ink, #0A1628) 0%,
    var(--ink, #0A1628) 60%,
    rgba(10, 22, 40, 0.72) 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---------- 15. Section numbering flourish (optional hooks) ---------- */
.fx-on .section__title::selection { background: var(--terra, #C85B38); color: #fff; }

/* ---------- 16. FAQ chevron bounce ---------- */
.fx-on .faq__q { transition: color 0.25s ease, padding-left 0.3s ease; }
.fx-on .faq__item:hover .faq__q { padding-left: 6px; color: var(--terra, #C85B38); }
.fx-on .faq__item.is-open .faq__q { color: var(--terra, #C85B38); }

/* ---------- 17. Footer anchor glow ---------- */
.fx-on footer a { transition: color 0.2s ease, transform 0.2s ease; }
.fx-on footer a:hover { transform: translateX(2px); }

/* ---------- 18. CTA section pulse ring ---------- */
.fx-on .section--contact { position: relative; overflow: hidden; }
.fx-on .section--contact::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 720px; height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 91, 56, 0.10), transparent 60%);
  transform: translate(-50%, -50%);
  animation: fx-pulse-slow 9s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.fx-on .section--contact > * { position: relative; z-index: 1; }
@keyframes fx-pulse-slow {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.7; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 1;   }
}

/* ---------- 19. Dynamic link caret on primary CTAs ---------- */
.fx-on .btn--primary .arrow,
.fx-on .btn--ghost .arrow { display: inline-block; transition: transform 0.3s ease; }
.fx-on .btn:hover .arrow { transform: translateX(4px); }