/* =========================================================
   WOW layer - optional visual upgrades (loader, spotlight,
   border beams, magnetic buttons, metric rings, energy line, grain).
   Everything here is additive. Remove this file + js/wow.js to fall back to v2-base.
   ========================================================= */

/* ---------- Loader ---------- */
.wow-loader {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: var(--bg); transition: opacity .7s ease, visibility .7s;
}
.wow-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.wow-loader .mark { position: relative; width: 126px; height: 138px; display: grid; place-items: center; }
.wow-loader .mark img { width: 108px; height: auto; filter: drop-shadow(0 8px 30px rgba(246,182,22,.45)); animation: wow-logo-pulse 1.4s ease-in-out infinite; }
.wow-loader .ring { position: absolute; inset: -14px -8px; border-radius: 22px; border: 1px solid rgba(246,182,22,.35); animation: wow-ring 1.4s ease-out infinite; }
.wow-loader .ring.r2 { animation-delay: .45s; }
.wow-loader .bar { position: absolute; left: 50%; bottom: 14vh; width: 140px; height: 2px; transform: translateX(-50%); background: var(--line); border-radius: 2px; overflow: hidden; }
.wow-loader .bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold), var(--cyan)); transform: scaleX(0); transform-origin: right; animation: wow-bar .9s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes wow-logo-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes wow-ring { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes wow-bar { to { transform: scaleX(1); } }

/* (custom cursor removed 19.8 - native cursor) */

/* ---------- Hero: spotlight + 3D tilt ---------- */
.wow-spot {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(420px 420px at var(--x, 50%) var(--y, 50%), rgba(88,215,255,.10), rgba(22,139,255,.05) 40%, transparent 70%);
}
.hero:hover .wow-spot { opacity: 1; }

/* ---------- Flip cards (round 3): border beam on hover ---------- */
@property --wow-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.flip-face::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--wow-a), transparent 0 62%, var(--accent, var(--cyan)) 80%, #fff 86%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .5s; animation: wow-spin 3.2s linear infinite;
}
.flip-card:hover .flip-face::after, .flip-card.is-flipped .flip-face::after { opacity: 1; }
@keyframes wow-spin { to { --wow-a: 360deg; } }

/* ---------- Magnetic gold buttons + shine ---------- */
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after {
  content: ''; position: absolute; top: -40%; bottom: -40%; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); transition: left .7s cubic-bezier(.2,.7,.2,1);
}
.btn-gold:hover::after { left: 130%; }

/* ---------- Metrics: drawing rings ---------- */
.stat { padding-inline-start: 26px; }
.stat .wow-ring { position: absolute; left: 20px; top: 20px; width: 54px; height: 54px; }
.stat .wow-ring circle { fill: none; stroke-width: 2; }
.stat .wow-ring .bg { stroke: var(--line); }
.stat .wow-ring .fg { stroke: var(--cyan); stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(88,215,255,.7)); transform: rotate(-90deg); transform-origin: 50% 50%; }
.stat.gold .wow-ring .fg { stroke: var(--gold); filter: drop-shadow(0 0 6px rgba(246,182,22,.7)); }
.stat .wow-ring text { fill: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; }

/* ---------- About: scroll-lit paragraph ---------- */
.about-copy .lead .wow-w { display: inline-block; opacity: .22; will-change: opacity; }
.about-copy .lead .wow-w.en { display: inline; unicode-bidi: isolate; direction: ltr; }   /* Latin runs stay in order and may wrap */

/* ---------- Grain ---------- */
.wow-grain {
  position: fixed; inset: -50%; z-index: 80; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 300px 300px; animation: wow-grain 1.2s steps(4) infinite;
}
@keyframes wow-grain { 0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); } 50% { transform: translate(2%,-3%); } 75% { transform: translate(-1%,-1%); } 100% { transform: translate(0,0); } }

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .wow-grain, .wow-spot { display: none; }
  .service::after { animation: none; }
}