/* Wan Power Tech — "lux" layer
 * A signature finish on top of the dark/blue theme. Everything here is
 * decorative polish: remove this file and the site still works untouched.
 * Motifs are drawn from the trade itself — the section labels are lift
 * floor displays, the partner hub pulses like the wireless kit, and on
 * very wide screens a pair of guide rails runs down the viewport edges.
 */

/* ------------------------------------------------------------------
   1. Film grain — a whisper of texture so the blacks read as material,
   not as empty screen. Sits under the lightbox (mfp is z-index 1042+).
   ------------------------------------------------------------------ */
body::after {
   content: "";
   position: fixed;
   inset: 0;
   z-index: 1000;
   pointer-events: none;
   opacity: .05;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
   background-size: 180px 180px;
}

/* ------------------------------------------------------------------
   2. Reading progress — a hairline of brand gradient along the top.
   --wpt-scroll is written by wpt-lux.js.
   ------------------------------------------------------------------ */
.wpt-progress {
   position: fixed;
   top: 0; left: 0; right: 0;
   height: 3px;
   z-index: 10001;
   background: linear-gradient(90deg, var(--wpt-sky), #1647D8 55%, var(--wpt-royal));
   transform-origin: 0 50%;
   transform: scaleX(var(--wpt-scroll, 0));
   pointer-events: none;
}

/* ------------------------------------------------------------------
   3. Section connectors become lift floor displays: the label sits in
   a dark indicator window with an LED glow and a patient up arrow —
   the thing everyone stares at while waiting for the car.
   ------------------------------------------------------------------ */
.wpt-link-label {
   padding: 8px 16px 7px;
   border-radius: 8px;
   background: rgba(2, 3, 8, .8);
   border: 1px solid rgba(var(--wpt-sky-rgb), .32);
   box-shadow:
      inset 0 0 18px rgba(var(--wpt-sky-rgb), .13),
      0 0 22px rgba(var(--wpt-sky-rgb), .12);
   color: var(--wpt-sky) !important;
   text-shadow: 0 0 10px rgba(var(--wpt-sky-rgb), .85);
   font-variant-numeric: tabular-nums;
}
.wpt-link-label::before {
   content: "\25B2"; /* ▲ */
   display: inline-block;
   margin-right: 11px;
   font-size: 8px;
   transform: translateY(-2px);
   animation: wptBlink 2.4s steps(2, start) infinite;
}
@keyframes wptBlink { 50% { opacity: .15; } }

/* ------------------------------------------------------------------
   4. Cards get a gradient light-edge (bright where the light falls,
   fading out) and a gentle rise on hover. `translate` is used instead
   of `transform` so GSAP's reveal transforms are never fought.
   ------------------------------------------------------------------ */
.wpt-num-card, .wpt-partner-card, .wpt-pillar-panel { position: relative; }
.wpt-num-card::after,
.wpt-partner-card::after,
.wpt-pillar-panel::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   padding: 1px;
   background: linear-gradient(135deg,
      rgba(var(--wpt-sky-rgb), .55),
      rgba(var(--wpt-sky-rgb), .06) 34%,
      rgba(var(--wpt-sky-rgb), 0) 55%,
      rgba(var(--wpt-sky-rgb), .28));
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
           mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
           mask-composite: exclude;
   pointer-events: none;
}
.wpt-num-card, .wpt-partner-card {
   transition: translate .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.wpt-num-card:hover, .wpt-partner-card:hover {
   translate: 0 -5px;
   box-shadow: 0 26px 54px -26px rgba(var(--wpt-sky-rgb), .38);
}

/* ------------------------------------------------------------------
   5. Buttons: a light sweep crosses the pill once on hover.
   ------------------------------------------------------------------ */
.wpt-btn, .tp-btn-event {
   position: relative;
   overflow: hidden;
}
.wpt-btn::after, .tp-btn-event::after {
   content: "";
   position: absolute;
   top: -40%; bottom: -40%;
   left: -45%;
   width: 32%;
   transform: skewX(-22deg);
   background: linear-gradient(90deg,
      rgba(255,255,255,0), rgba(255,255,255,.42), rgba(255,255,255,0));
   opacity: 0;
   pointer-events: none;
}
.wpt-btn:hover::after, .tp-btn-event:hover::after {
   opacity: 1;
   animation: wptSweep .72s cubic-bezier(.3,.6,.3,1) 1;
}
@keyframes wptSweep { to { left: 115%; } }

/* ------------------------------------------------------------------
   6. Partner hub: radar rings, a nod to the wireless systems.
   ------------------------------------------------------------------ */
.wpt-hub-core::before, .wpt-hub-core::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 1px solid rgba(var(--wpt-sky-rgb), .55);
   animation: wptRadar 4.2s ease-out infinite;
   pointer-events: none;
}
.wpt-hub-core::after { animation-delay: 2.1s; }
@keyframes wptRadar {
   0%   { transform: scale(1);   opacity: .75; }
   100% { transform: scale(2.2); opacity: 0; }
}

/* ------------------------------------------------------------------
   7. Guide rails on very wide screens: two hairlines at the viewport
   edges with a slow light running along them, like a car in its shaft.
   ------------------------------------------------------------------ */
.wpt-rails { display: none; }
@media (min-width: 1560px) {
   .wpt-rails { display: block; }
   .wpt-rails i {
      position: fixed;
      top: 0; bottom: 0;
      width: 1px;
      z-index: 3;
      background: rgba(var(--wpt-line-rgb), .07);
      pointer-events: none;
   }
   .wpt-rails i:first-child { left: 26px; }
   .wpt-rails i:last-child  { right: 26px; }
   .wpt-rails i::after {
      content: "";
      position: absolute;
      left: -2px;
      width: 5px; height: 44px;
      border-radius: 3px;
      background: linear-gradient(180deg, transparent, var(--wpt-sky), transparent);
      opacity: .45;
      animation: wptRail 16s linear infinite;
   }
   .wpt-rails i:last-child::after { animation-delay: -8s; }
   @keyframes wptRail {
      from { top: -8%; }
      to   { top: 105%; }
   }
}

/* ------------------------------------------------------------------
   8. Sticky header turns to smoked glass once the page scrolls.
   ------------------------------------------------------------------ */
.header-sticky {
   background: rgba(9, 12, 17, .74) !important;
   -webkit-backdrop-filter: blur(16px) saturate(1.25);
           backdrop-filter: blur(16px) saturate(1.25);
   border-bottom: 1px solid rgba(var(--wpt-sky-rgb), .13);
}

/* ------------------------------------------------------------------
   9. Closing CTA: a thin light runs around the card's edge.
   ------------------------------------------------------------------ */
@property --wptA { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.tp-fi-cta-bg::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 18px;
   padding: 1.5px;
   background: conic-gradient(from var(--wptA, 0deg),
      rgba(var(--wpt-sky-rgb), 0) 0 72%,
      rgba(var(--wpt-sky-rgb), .9) 84%,
      rgba(255, 255, 255, .95) 88%,
      rgba(var(--wpt-sky-rgb), 0) 97%);
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
           mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
           mask-composite: exclude;
   animation: wptSpin 8s linear infinite;
   pointer-events: none;
}
@keyframes wptSpin { to { --wptA: 360deg; } }

/* ------------------------------------------------------------------
   10. Hero accent word in gradient ink.
   ------------------------------------------------------------------ */
.wpt-accent {
   background: linear-gradient(100deg, #A6CDFF, var(--wpt-sky) 52%, #2E6FE8);
   -webkit-background-clip: text;
           background-clip: text;
   -webkit-text-fill-color: transparent;
   color: var(--wpt-sky); /* fallback paints before clip applies */
}

/* ------------------------------------------------------------------
   11. Scrollbar in house colours.
   ------------------------------------------------------------------ */
html { scrollbar-color: #1647D8 #05070B; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #05070B; }
::-webkit-scrollbar-thumb {
   background: linear-gradient(180deg, var(--wpt-sky), #1647D8 70%, var(--wpt-royal));
   border-radius: 8px;
   border: 2px solid #05070B;
}

/* ------------------------------------------------------------------
   12. WhatsApp float: one soft ping ring.
   ------------------------------------------------------------------ */
.wpt-wa-float { position: fixed; }
.wpt-wa-float::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   border: 2px solid rgba(37, 211, 102, .55);
   animation: wptRadar 3.4s ease-out infinite;
   pointer-events: none;
}

/* ------------------------------------------------------------------
   Respect reduced motion: keep the looks, stop the movement.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
   .wpt-link-label::before,
   .wpt-hub-core::before, .wpt-hub-core::after,
   .wpt-rails i::after,
   .tp-fi-cta-bg::after,
   .wpt-wa-float::before { animation: none; }
   .wpt-btn:hover::after, .tp-btn-event:hover::after { animation: none; opacity: 0; }
   .wpt-num-card:hover, .wpt-partner-card:hover { translate: none; }
}