/* ============================================================
   EFFECTS.CSS – Professional UI Enhancements
   Wave Dividers | Teal Glow | Shimmer Sweep | Glow Ring
   Banner Images | Ken Burns | CTA Background
   Loaded last – safely overrides section-level defaults
============================================================ */

/* ═══════════════════════════════════════════════════════════
   BANNER IMAGES – خلفيات صور الـ page banners
═══════════════════════════════════════════════════════════ */
.page-banner { overflow: hidden; }

.banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.20;
  z-index: 0;
  filter: saturate(0.75);
  pointer-events: none;
  transition: opacity .4s;
}

.page-banner .container { position: relative; z-index: 2; }
.page-banner::before    { z-index: 1; }

/* ═══════════════════════════════════════════════════════════
   ABOUT IMAGE – Ken Burns Zoom Effect
═══════════════════════════════════════════════════════════ */
.about-image {
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
}

.about-img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  display: block;
  animation: kenburns 14s ease-in-out infinite alternate;
  transform-origin: center center;
}

@keyframes kenburns {
  from { transform: scale(1)    translate(0%,     0%); }
  to   { transform: scale(1.09) translate(-1.8%, -1.2%); }
}

/* ═══════════════════════════════════════════════════════════
   CTA SECTION – Subtle Background Image
═══════════════════════════════════════════════════════════ */
.cta-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.09;
  z-index: 0;
  filter: saturate(0.4);
  pointer-events: none;
}



/* ═══════════════════════════════════════════════════════════
   WAVE SECTION DIVIDERS
═══════════════════════════════════════════════════════════ */
.wave-divider {
  line-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  display: block;
}
.wave-divider svg {
  display: block;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   SERVICE CARDS – Teal Glow + Border Highlight on Hover
═══════════════════════════════════════════════════════════ */
.service-card {
  transition:
    transform .35s var(--ease),
    box-shadow .35s var(--ease),
    border-color .35s var(--ease);
}
.service-card:hover {
  border-color: rgba(29,187,176,.38);
  box-shadow:
    0 20px 48px -12px rgba(29,187,176,.22),
    0  6px 20px  -6px rgba(29,187,176,.12);
}

/* ═══════════════════════════════════════════════════════════
   TRUST ITEMS – Teal Side Accent on Hover
═══════════════════════════════════════════════════════════ */
.trust-item {
  border-inline-start: 3px solid transparent;
  transition:
    background .3s var(--ease),
    border-color .3s var(--ease);
}
.trust-item:hover {
  border-inline-start-color: var(--teal);
}

/* ═══════════════════════════════════════════════════════════
   CTA BUTTONS – Shimmer Sweep on Hover
═══════════════════════════════════════════════════════════ */
.btn.btn-primary,
.btn-quote,
.btn-submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn.btn-primary::after,
.btn-quote::after,
.btn-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,.24) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  pointer-events: none;
}

.btn.btn-primary:hover::after,
.btn-quote:hover::after,
.btn-submit:hover::after {
  animation: shimmer-sweep .58s ease forwards;
}

@keyframes shimmer-sweep {
  to { transform: translateX(120%); }
}

/* Glow ring on primary buttons */
.btn.btn-primary:hover,
.btn-quote:hover {
  box-shadow:
    0  0 0 3px rgba(29,187,176,.18),
    0 14px 36px -8px rgba(29,187,176,.40);
}

/* ═══════════════════════════════════════════════════════════
   PAGE BANNER – Glow Pulse
═══════════════════════════════════════════════════════════ */
@keyframes banner-glow-pulse {
  0%, 100% { opacity: .08; transform: translate(-50%, -50%) scale(1);    }
  50%       { opacity: .18; transform: translate(-50%, -50%) scale(1.22); }
}
.page-banner::before {
  animation: banner-glow-pulse 7s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION SAFETY
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero-video                { animation: none !important; }
  .btn.btn-primary::after,
  .btn-quote::after,
  .btn-submit::after         { animation: none !important; }
  .page-banner::before       { animation: none !important; }
}