/* ==========================================================================
   SAFE WAY — AWWWARDS-TIER ULTRA-PREMIUM MOTION & GLASSMORPHISM STYLESHEET
   ========================================================================== */

:root {
  --sw-neon: #00FF66;
  --sw-neon-glow: rgba(0, 255, 102, 0.4);
  --sw-neon-subtle: rgba(0, 255, 102, 0.12);
  --sw-neon-dim: #00d655;
  --sw-emerald: #004346;
  --sw-dark-surface: rgba(8, 14, 18, 0.72);
  --sw-glass-border: rgba(223, 231, 224, 0.12);
  --sw-glass-border-glow: rgba(0, 255, 102, 0.28);
  --sw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sw-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Lenis Smooth Scrolling Base ── */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* ── Global Scroll Progress Indicator ── */
#scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0, 255, 102, 0.05);
  z-index: 99999;
  pointer-events: none;
}
#scrollProgressBar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00d655 0%, var(--sw-neon) 70%, #80ffb0 100%);
  box-shadow: 0 0 12px var(--sw-neon), 0 0 24px rgba(0, 255, 102, 0.5);
  transform-origin: left;
  transition: width 0.08s ease-out;
}

/* ── Ultra-Smooth Interactive Magnetic Cursor ── */
.cur-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sw-neon);
  box-shadow: 0 0 16px var(--sw-neon);
  pointer-events: none;
  z-index: 999999;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--sw-ease-out), height 0.3s var(--sw-ease-out), background 0.3s, transform 0.06s linear, opacity 0.3s;
  opacity: 0;
}
.cur-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 102, 0.45);
  box-shadow: 0 0 20px rgba(0, 255, 102, 0.15);
  pointer-events: none;
  z-index: 999998;
  transform: translate(-50%, -50%);
  transition: width 0.35s var(--sw-ease-out), height 0.35s var(--sw-ease-out), border-color 0.3s, transform 0.14s ease-out, opacity 0.3s;
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .cur-dot, .cur-ring { opacity: 1; }
}
.cur-dot.act {
  width: 38px;
  height: 38px;
  background: rgba(0, 255, 102, 0.15);
  box-shadow: 0 0 30px var(--sw-neon-glow);
  mix-blend-mode: normal;
  border: 1px solid var(--sw-neon);
}
.cur-ring.act {
  width: 64px;
  height: 64px;
  border-color: var(--sw-neon);
  box-shadow: 0 0 35px var(--sw-neon-glow);
  background: rgba(0, 255, 102, 0.04);
}

/* ── Seamless Page Transition Curtain ── */
.page-curtain {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 50%, #081617 0%, #030507 90%);
  z-index: 100000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  transition: opacity 0.4s var(--sw-ease-out), visibility 0.4s;
}
.page-curtain.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.page-curtain-logo {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: rgba(0, 255, 102, 0.08);
  border: 1px solid rgba(0, 255, 102, 0.3);
  box-shadow: 0 0 45px rgba(0, 255, 102, 0.25);
  animation: pulseLogo 1.6s ease-in-out infinite;
}
.page-curtain-logo img {
  width: 52px;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(0, 255, 102, 0.4));
}
.page-curtain-text {
  font-family: var(--font-ar, 'IBM Plex Sans Arabic', sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #dfe7e0;
}
@keyframes pulseLogo {
  0%, 100% { transform: scale(1); box-shadow: 0 0 35px rgba(0, 255, 102, 0.2); }
  50% { transform: scale(1.06); box-shadow: 0 0 55px rgba(0, 255, 102, 0.4); }
}

/* ── Advanced Glassmorphic Cards & Elevating Depth ── */
.glass-panel,
.laser-card,
.card,
.panel-card,
.policy-card,
.sidebar-card,
.review-card {
  background: linear-gradient(145deg, rgba(10, 24, 26, 0.65) 0%, rgba(5, 10, 14, 0.82) 100%) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  border: 1px solid rgba(223, 231, 224, 0.1) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  position: relative;
  transition: transform 0.45s var(--sw-ease-out), border-color 0.45s var(--sw-ease-out), box-shadow 0.45s var(--sw-ease-out);
  transform-style: preserve-3d;
}

.glass-panel:hover,
.card:hover,
.review-card:hover {
  border-color: rgba(0, 255, 102, 0.38) !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 255, 102, 0.14), inset 0 1px 0 rgba(0, 255, 102, 0.3) !important;
}

/* ── 3D Card Tilt Glare Effect ── */
.tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 10;
  mix-blend-mode: screen;
  transition: opacity 0.4s ease;
}

/* ── Hero Split Text Words Reveal ── */
.sw-word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.06em;
}
.sw-word {
  display: inline-block;
  will-change: transform, opacity;
  transform: translate3d(0, 115%, 0);
  opacity: 0;
}
.sw-revealed .sw-word {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* ── Ambient Floating Glow Orbs ── */
.ambient-glow-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  filter: blur(80px);
  opacity: 0.18;
  mix-blend-mode: screen;
  will-change: transform;
}
.orb-1 {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, var(--sw-neon) 0%, transparent 70%);
  top: -10%;
  left: 10%;
}
.orb-2 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, #00776b 0%, transparent 70%);
  top: 40%;
  right: -5%;
}
.orb-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #004346 0%, transparent 70%);
  bottom: 5%;
  left: 20%;
}

/* ── Magnetic Hover Smoothing ── */
[data-magnetic] {
  will-change: transform;
  display: inline-flex;
}

/* ── Horizontal Scroll Immersive Strip (Awwwards Style) ── */
.horizontal-scroll-container {
  overflow: hidden;
  width: 100%;
}
.horizontal-scroll-track {
  display: flex;
  gap: 32px;
  width: max-content;
  will-change: transform;
  padding: 20px 0;
}
.horizontal-scroll-track .card {
  width: clamp(320px, 28vw, 420px);
  flex-shrink: 0;
}

/* ── Button Glow & Interactive Shimmer ── */
.btn-primary, .btn-calc, .nav-cta-btn {
  position: relative;
  overflow: hidden;
}
.btn-primary::after, .btn-calc::after, .nav-cta-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: rotate(25deg);
  pointer-events: none;
  transition: none;
}
.btn-primary:hover::after, .btn-calc:hover::after, .nav-cta-btn:hover::after {
  animation: btnShimmer 1s ease forwards;
}
@keyframes btnShimmer {
  0% { left: -60%; }
  100% { left: 140%; }
}

/* ── Refined Badges with Pulse Dot ── */
.eyebrow .dot, .page-hero-badge .dot, .live-dot {
  box-shadow: 0 0 14px var(--sw-neon), 0 0 28px rgba(0, 255, 102, 0.6);
  animation: glowPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ── Animated Stats Numbers ── */
[data-count] {
  font-variant-numeric: tabular-nums;
  will-change: contents;
}

/* ── Responsive Safeguards ── */
@media (max-width: 768px) {
  .cur-dot, .cur-ring {
    display: none !important;
  }
  .horizontal-scroll-track {
    flex-direction: column;
    width: 100% !important;
    transform: none !important;
  }
  .horizontal-scroll-track .card {
    width: 100% !important;
  }
}