/* ============================================================
   StarTech Prestige — MAXED VISUAL SUITE  v4.1
   Loaded AFTER startech-3d.css. Adds the full premium FX set:
     • Aurora drifting background blobs
     • Dot-grid section overlay
     • Service card 3D flip (with "what's included" back face)
     • Neon border pulse (staggered) + travelling-light variant
     • Spotlight cursor glow on nav
     • Animated underline nav indicator
     • Progress-ring + odometer stat tiles
     • Ripple click effect on buttons
     • Review star-fill on scroll
     • Branded page loader
     • Section scroll parallax hooks
   GPU-only. Fully reduced-motion safe.
   ============================================================ */

/* ============================================================
   1. AURORA DRIFTING BACKGROUND
   Soft, blurred colour blobs that slowly drift behind the page.
   Mounted on body::before via .stp-aurora wrapper injected by JS,
   but we also provide a pure-CSS fallback on .stp.
   ============================================================ */
.stp-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.stp-aurora span{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.45;
  will-change:transform}
.stp-aurora .a1{width:46vw;height:46vw;left:-8vw;top:-6vw;
  background:radial-gradient(circle,rgba(79,158,255,.55),transparent 70%);animation:aur1 26s ease-in-out infinite}
.stp-aurora .a2{width:38vw;height:38vw;right:-6vw;top:18vh;
  background:radial-gradient(circle,rgba(44,111,214,.50),transparent 70%);animation:aur2 32s ease-in-out infinite}
.stp-aurora .a3{width:40vw;height:40vw;left:22vw;bottom:-12vw;
  background:radial-gradient(circle,rgba(127,181,255,.40),transparent 70%);animation:aur3 30s ease-in-out infinite}
@keyframes aur1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,6vh) scale(1.15)}}
@keyframes aur2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,9vh) scale(1.1)}}
@keyframes aur3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,-7vh) scale(1.2)}}
/* keep all real content above the aurora.
   NOTE: do NOT include .stp-guide / .stp .actionbar here — they are
   position:fixed floaters; forcing position:relative drops them out of the
   viewport (Leon rendered inline at page-bottom + mobile action bar unstuck).
   Their own z-index (940/960) already sits above the aurora (z-index 1). */
.stp .nav,.stp section,.stp footer{position:relative;z-index:2}

/* ============================================================
   2. DOT-GRID SECTION OVERLAY
   Subtle dot matrix on alt sections (Linear/Vercel aesthetic).
   ============================================================ */
.stp .sec--alt{position:relative}
.stp .sec--alt > .wrap{position:relative;z-index:1}
.stp .sec--grid::before{
  background-image:radial-gradient(rgba(127,181,255,.10) 1px,transparent 1px) !important;
  background-size:26px 26px !important;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 40%,transparent 80%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 40%,transparent 80%);
  opacity:1 !important}

/* ============================================================
   3. SERVICE CARD 3D FLIP
   Applied to .card.svc.flip — the front keeps the photo+title,
   the back (injected by JS) shows the inclusions + CTA.
   ============================================================ */
.stp .card.flip{background:transparent !important;border:none !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  perspective:1500px;padding:0 !important;overflow:visible !important}
.stp .card.flip::before,.stp .card.flip::after{display:none !important}
.stp .card.flip .flip-inner{position:relative;width:100%;height:100%;min-height:340px;
  transition:transform .75s cubic-bezier(.22,1,.36,1);transform-style:preserve-3d}
.stp .card.flip:hover .flip-inner,.stp .card.flip:focus-within .flip-inner{transform:rotateY(180deg)}
.stp .card.flip .flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 50px -20px rgba(0,0,0,.70)}
/* front face = original card body */
.stp .card.flip .flip-front{background:var(--surface);display:flex;flex-direction:column}
.stp .card.flip .flip-front .ph{position:relative}
.stp .card.flip .flip-front .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(10,11,16,.66))}
.stp .card.flip .flip-front .flip-hint{position:absolute;right:14px;bottom:14px;z-index:2;color:var(--accent);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;background:rgba(10,11,16,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(79,158,255,.25);
  border-radius:99px;padding:5px 10px}
.stp .card.flip .flip-front .flip-hint svg{width:13px;height:13px;animation:flipSpin 4s linear infinite}
@keyframes flipSpin{to{transform:rotate(360deg)}}
/* back face */
.stp .card.flip .flip-back{transform:rotateY(180deg);
  background:linear-gradient(160deg,#141822,#0E1016);padding:24px 24px 22px;
  display:flex;flex-direction:column}
.stp .card.flip .flip-back h3{font-family:var(--fh);font-weight:700;font-size:1.3rem;margin-bottom:14px;color:var(--accent-2)}
.stp .card.flip .flip-back ul{list-style:none;display:flex;flex-direction:column;gap:9px;flex:1;margin:0;padding:0}
.stp .card.flip .flip-back li{display:flex;align-items:flex-start;gap:9px;color:var(--ink-soft);font-size:.88rem;line-height:1.4}
.stp .card.flip .flip-back li svg{width:17px;height:17px;flex:0 0 auto;stroke:var(--accent);fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.stp .card.flip .flip-back .flip-cta{margin-top:16px;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;background:linear-gradient(135deg,#4F9EFF,#2C6FD6);color:#fff;text-decoration:none;
  font-family:var(--fh);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;
  padding:12px;border-radius:10px;box-shadow:0 6px 20px -6px rgba(79,158,255,.55)}
.stp .card.flip .flip-back .flip-cta:hover{filter:brightness(1.08)}
/* on touch devices, flip on tap via .flipped class */
.stp .card.flip.flipped .flip-inner{transform:rotateY(180deg)}

/* ============================================================
   4. NEON BORDER PULSE — applied to .card.neon (the why-us grid)
   Staggered so the four cards breathe out of phase.
   ============================================================ */
.stp .card.neon{animation:neonPulse 4.2s ease-in-out infinite}
.stp .grid .card.neon:nth-child(2){animation-delay:1.05s}
.stp .grid .card.neon:nth-child(3){animation-delay:2.1s}
.stp .grid .card.neon:nth-child(4){animation-delay:3.15s}
@keyframes neonPulse{
  0%,100%{border-color:rgba(79,158,255,.12);
    box-shadow:0 14px 44px -20px rgba(0,0,0,.65),0 0 0 0 rgba(79,158,255,0)}
  50%{border-color:rgba(79,158,255,.50);
    box-shadow:0 14px 44px -20px rgba(0,0,0,.65),0 0 26px -2px rgba(79,158,255,.42),
      inset 0 0 26px -12px rgba(79,158,255,.32)}
}

/* travelling-light variant — a dot of light orbits the border */
@property --stp-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.stp .card.neon-travel{position:relative;z-index:0;animation:none}
.stp .card.neon-travel::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg);padding:1.5px;
  background:conic-gradient(from var(--stp-ang,0deg),transparent 0%,transparent 72%,
    var(--accent-2) 86%,var(--accent) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:stpTravel 4.5s linear infinite;z-index:1;pointer-events:none}
@keyframes stpTravel{to{--stp-ang:360deg}}

/* ============================================================
   5. SPOTLIGHT CURSOR GLOW ON NAV
   A soft radial light follows the cursor across the navbar.
   JS sets --mx / --my as % coordinates.
   ============================================================ */
.stp .nav{position:relative;overflow:hidden}
.stp .nav::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),
    rgba(79,158,255,.14),transparent 60%);
  opacity:0;transition:opacity .3s ease}
.stp .nav.spot::after{opacity:1}
.stp .nav .wrap,.stp .nav .brand,.stp .nav-links,.stp .nav .btn-primary,.stp .nav-search,.stp .burger{position:relative;z-index:1}

/* ============================================================
   6. ANIMATED UNDERLINE NAV INDICATOR
   ============================================================ */
.stp .nav-links a{position:relative}
.stp .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 8px rgba(79,158,255,.6);transition:right .3s var(--ease);opacity:.0}
.stp .nav-links a:hover::after{right:0;opacity:1}

/* ============================================================
   7. PROGRESS-RING STAT TILES
   The JS converts each .stat into a ring + animated number.
   ============================================================ */
.stp .stat{position:relative}
.stp .stat .ring{position:absolute;top:18px;right:18px;width:46px;height:46px;transform:rotate(-90deg)}
.stp .stat .ring circle{fill:none;stroke-width:4}
.stp .stat .ring .bg{stroke:rgba(255,255,255,.08)}
.stp .stat .ring .fg{stroke:url(#stpRingGrad);stroke-linecap:round;
  stroke-dasharray:126;stroke-dashoffset:126;transition:stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1)}
.stp .stat.on .ring .fg{stroke-dashoffset:var(--off,30)}

/* ============================================================
   8. RIPPLE CLICK EFFECT
   ============================================================ */
.stp .btn-primary,.stp .btn-ghost,.stp .float-book{position:relative;overflow:hidden}
.stp .stp-ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:rgba(255,255,255,.40);animation:stpRipple .6s ease-out forwards;z-index:0}
@keyframes stpRipple{to{transform:scale(2.6);opacity:0}}

/* ============================================================
   9. REVIEW STAR-FILL ON SCROLL
   ============================================================ */
.stp .stars-anim{display:inline-flex;gap:3px}
.stp .stars-anim .st{color:rgba(255,209,102,.22);transition:color .35s ease,text-shadow .35s ease;
  text-shadow:none}
.stp .stars-anim.on .st{color:#FFD166;text-shadow:0 0 10px rgba(255,209,102,.55)}
.stp .stars-anim.on .st:nth-child(1){transition-delay:.05s}
.stp .stars-anim.on .st:nth-child(2){transition-delay:.15s}
.stp .stars-anim.on .st:nth-child(3){transition-delay:.25s}
.stp .stars-anim.on .st:nth-child(4){transition-delay:.35s}
.stp .stars-anim.on .st:nth-child(5){transition-delay:.45s}

/* ============================================================
   10. BRANDED PAGE LOADER
   A short splash overlay shown until window load (then fades).
   ============================================================ */
.stp-loader{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 40%,#10131c,#070810);
  transition:opacity .55s ease,visibility .55s ease}
.stp-loader.hide{opacity:0;visibility:hidden}
.stp-loader .ldr{display:flex;flex-direction:column;align-items:center;gap:18px}
.stp-loader .ldr-logo{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(160deg,#141822,#0E1016);border:1px solid rgba(79,158,255,.25);
  box-shadow:0 0 30px -6px rgba(79,158,255,.5);animation:ldrPulse 1.6s ease-in-out infinite}
.stp-loader .ldr-logo svg{width:36px;height:36px}
@keyframes ldrPulse{50%{box-shadow:0 0 46px -2px rgba(79,158,255,.85);transform:scale(1.05)}}
.stp-loader .ldr-bar{width:160px;height:3px;border-radius:3px;background:rgba(255,255,255,.10);overflow:hidden}
.stp-loader .ldr-bar i{display:block;height:100%;width:40%;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));animation:ldrBar 1.1s ease-in-out infinite}
@keyframes ldrBar{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}
.stp-loader .ldr-txt{font-family:var(--mono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-mute)}

/* ============================================================
   11. SECTION TITLE GRADIENT SWEEP on reveal
   ============================================================ */
.stp .sec h2{position:relative}
.stp .sec.on h2 .grad-text{animation:shimmerText 4s linear infinite}

/* ============================================================
   12. ENHANCED EYEBROW with animated dot
   ============================================================ */
.stp .eyebrow{position:relative}
.stp .eyebrow::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--accent);margin-left:8px;vertical-align:middle;
  box-shadow:0 0 8px rgba(79,158,255,.8);animation:eyeBlink 2s ease-in-out infinite}
@keyframes eyeBlink{0%,100%{opacity:1}50%{opacity:.3}}

/* ============================================================
   13. GALLERY — parallax depth on scroll (JS sets --py)
   ============================================================ */
.stp .gallery .media img{transform:translateY(var(--py,0px)) scale(1.05);transition:transform .1s linear}

/* ============================================================
   14. AREA CHIPS — glow on hover
   ============================================================ */
.stp .area-chip:hover{box-shadow:0 0 16px -4px rgba(79,158,255,.4);border-color:rgba(79,158,255,.4) !important}

/* ============================================================
   15. SCROLLBAR — accent glow thumb
   ============================================================ */
.stp ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent-deep),var(--accent));
  box-shadow:0 0 8px rgba(79,158,255,.4)}

/* ============================================================
   MOBILE PERFORMANCE GUARDS
   ============================================================ */
@media(max-width:760px){
  .stp-aurora span{filter:blur(60px);opacity:.35}
  .stp .card.flip .flip-inner{min-height:300px}
}
@media(max-width:640px){
  /* Disable the heaviest effects on small screens */
  .stp-aurora .a3{display:none}
  .stp .nav::after{display:none}
}

/* ============================================================
   REDUCED MOTION — kill all max-suite animation
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .stp-aurora span,
  .stp .card.neon,
  .stp .card.neon-travel::before,
  .stp .eyebrow::after,
  .stp-loader .ldr-logo,
  .stp-loader .ldr-bar i,
  .stp .card.flip .flip-front .flip-hint svg{animation:none !important}
  .stp .card.flip:hover .flip-inner,
  .stp .card.flip:focus-within .flip-inner{transform:none}
  .stp .card.flip.flipped .flip-inner{transform:rotateY(180deg)} /* tap still works */
  .stp .gallery .media img{transform:scale(1.05) !important}
  .stp .stat .ring .fg{transition:none}
  .stp .stars-anim .st{transition:none}
}