/**
 * ==============================================================================
 * Ship Chandler In Tunisia - Enhanced Animations & Visual Effects Library
 * Synthesized from "Tunsia" Template + "Central Africa Website" Scroll System
 * ==============================================================================
 */

/* ==========================================================================
   1. CSS VARIABLES & THEME TOKENS
   ========================================================================== */
:root {
  --primary: #bc810e;
  --primary-rgb: 188, 129, 14;
  --brand-color: #bc810e;
  --brand-color-rgb: 188, 129, 14;
  --secondary: #34AD54;
  --secondary-rgb: 52, 173, 84;
  --secondary-color: #181717;
  --body-color: #111111;
  --bar: #f1ce6a;
  --bar-rgb: 241, 206, 106;
  --light: #EEF9FF;
  --dark: #111111;
  --dark-surface: #1b1b1b;
  --dark-border: rgba(255, 255, 255, 0.08);
}


/* ==========================================================================
   2. SCROLL PROGRESS INDICATOR BAR
   ========================================================================== */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--bar), #FFFFFF);
  z-index: 100000;
  box-shadow: 0 0 10px rgba(188, 129, 14, 0.8), 0 0 20px rgba(241, 206, 106, 0.5);
  transition: width 0.1s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

/* ==========================================================================
   3. SECTION TITLE UPGRADED LUMINOUS COMET TRACER
   ========================================================================== */
.section-title {
  position: relative;
}

.section-title::before {
  position: absolute;
  content: "";
  width: 150px;
  height: 5px;
  left: 0;
  bottom: 0;
  background: var(--bar);
  border-radius: 4px;
}

.section-title.text-center::before {
  left: 50%;
  margin-left: -75px;
}

.section-title.section-title-sm::before {
  width: 90px;
  height: 3px;
}

/* Modified Glowing Comet Streak */
.section-title::after {
  position: absolute;
  content: "";
  width: 32px;
  height: 5px;
  bottom: 0px;
  background: linear-gradient(90deg, transparent, #FFFFFF 60%, var(--bar) 90%, transparent);
  border-radius: 3px;
  box-shadow: 0 0 10px #FFFFFF, 0 0 18px var(--primary);
  animation: cometRunLeft 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.section-title.text-center::after {
  animation: cometRunCenter 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.section-title.section-title-sm::after {
  height: 3px;
  width: 22px;
  animation: cometRunSm 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes cometRunLeft {
  0% { left: 0px; }
  50% { left: 118px; }
  100% { left: 0px; }
}

@keyframes cometRunCenter {
  0% { left: 50%; margin-left: -75px; }
  50% { left: 50%; margin-left: 43px; }
  100% { left: 50%; margin-left: -75px; }
}

@keyframes cometRunSm {
  0% { left: 0px; }
  50% { left: 68px; }
  100% { left: 0px; }
}

/* ==========================================================================
   4. PICTURE / IMAGE ANIMATIONS ON SCROLL ("Pics pr animation")
   ========================================================================== */

/* 4.1 Cinematic Curtain Clip-Path Reveal */
.img-reveal-container {
  overflow: hidden;
  position: relative;
  border-radius: 8px;
}

.img-reveal-curtain {
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transform: scale(1.15);
  opacity: 0;
  transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1),
              transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s ease;
  will-change: clip-path, transform, opacity;
}

.img-reveal-curtain.revealed {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform: scale(1.0);
  opacity: 1;
}

/* 4.2 Smooth Image Zoom on Hover with Golden Maritime Shadow */
.img-hover-zoom {
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1),
              box-shadow 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform, box-shadow;
}

.img-hover-zoom:hover {
  transform: scale(1.04) translateY(-4px);
  box-shadow: 0 20px 40px rgba(188, 129, 14, 0.28), 0 0 0 1px rgba(241, 206, 106, 0.4);
}

/* 4.3 Image 3D Depth Tilt on Hover */
.img-depth-tilt {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.img-depth-tilt:hover {
  transform: perspective(1000px) rotateY(-3deg) rotateX(2deg) translateY(-6px);
}

/* 4.4 Shimmer Frame Border on Showcase Images */
.img-shimmer-frame {
  position: relative;
  padding: 6px;
  background: linear-gradient(135deg, rgba(188, 129, 14, 0.6), rgba(241, 206, 106, 0.2), rgba(188, 129, 14, 0.6));
  border-radius: 12px;
  animation: shimmerBorder 6s ease-in-out infinite;
}

@keyframes shimmerBorder {
  0% { filter: hue-rotate(0deg) brightness(1); }
  50% { filter: hue-rotate(15deg) brightness(1.25); }
  100% { filter: hue-rotate(0deg) brightness(1); }
}

/* 4.5 Floating Harmonic Oscillation for Badges and Decorative Pics */
.floating-harmonic {
  animation: floatingHarmonic 5s ease-in-out infinite alternate;
}

@keyframes floatingHarmonic {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(1deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

/* ==========================================================================
   5. SCROLL-TRIGGERED ENTRANCE SYSTEM (Central Africa Benchmark)
   ========================================================================== */
.scroll-animate {
  opacity: 0;
  will-change: opacity, transform, filter;
  transition-property: opacity, transform, filter;
  transition-duration: 0.85s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fade Up */
.scroll-fade-up {
  transform: translateY(40px);
}

.scroll-fade-up.scroll-in {
  opacity: 1;
  transform: translateY(0);
}

/* Zoom In */
.scroll-zoom-in {
  transform: scale(0.88);
  filter: blur(4px);
}

.scroll-zoom-in.scroll-in {
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
}

/* Slide From Left */
.scroll-slide-left {
  transform: translateX(-50px);
}

.scroll-slide-left.scroll-in {
  opacity: 1;
  transform: translateX(0);
}

/* Slide From Right */
.scroll-slide-right {
  transform: translateX(50px);
}

.scroll-slide-right.scroll-in {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger Delay Classes */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* ==========================================================================
   6. UPGRADED SERVICE CARDS & DIAMOND ROTATING ICON
   ========================================================================== */
.card_services {
  background-color: var(--bar) !important;
  border-radius: 8px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
}

.card_services:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 35px rgba(188, 129, 14, 0.25);
  border-color: var(--primary) !important;
}

/* Dynamic Diamond Icon */
.service-icon {
  margin-top: 10px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  border-radius: 3px;
  transform: rotate(-42deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease,
              background 0.4s ease;
}

.service-icon i {
  transform: rotate(42deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: #FFFFFF !important;
}

.card_services:hover .service-icon {
  transform: rotate(48deg) scale(1.1);
  background: #000000;
  box-shadow: 0 0 15px rgba(188, 129, 14, 0.6);
}

.card_services:hover .service-icon i {
  transform: rotate(-48deg) scale(1.05);
  color: var(--bar) !important;
}

/* Service Details Arrow Button */
.card_services .card-footer a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  transition: transform 0.3s ease, color 0.3s ease;
  text-decoration: none;
}

.card_services:hover .card-footer a {
  transform: translateX(4px);
  color: var(--primary) !important;
}

/* ==========================================================================
   7. METALLIC GOLD SHINE SWEEP ON BUTTONS
   ========================================================================== */
.btn-primary,
.btn-shine-sweep {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-primary::after,
.btn-shine-sweep::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 50px;
  height: 200%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(35deg);
  transition: all 650ms cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
}

.btn-primary:hover::after,
.btn-shine-sweep:hover::after {
  left: 150%;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(188, 129, 14, 0.45);
}

/* ==========================================================================
   8. STICKY NAVBAR GLASSOVERLAY
   ========================================================================== */
.sticky-top.navbar-dark {
  position: fixed !important;
  background: rgba(17, 17, 17, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 2px solid rgba(188, 129, 14, 0.35) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.4s ease-in-out;
}

.sticky-top.navbar-dark .navbar-nav .nav-link {
  color: #FFFFFF !important;
  padding: 20px 0 !important;
}

.sticky-top.navbar-dark .navbar-nav .nav-link:hover,
.sticky-top.navbar-dark .navbar-nav .nav-link.active {
  color: var(--bar) !important;
}

/* ==========================================================================
   9. FACTS COUNTERS HOVER & POP
   ========================================================================== */
.facts .bg-primary,
.facts .bg-white {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  border-radius: 6px;
}

.facts .col-lg-4:hover .bg-primary,
.facts .col-lg-4:hover .bg-white {
  transform: translateY(-6px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================================
   10. BACK TO TOP LEVITATION
   ========================================================================== */
.back-to-top {
  position: fixed;
  display: none;
  right: 35px;
  bottom: 35px;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  background: var(--primary) !important;
  color: #FFFFFF !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 6px 18px rgba(188, 129, 14, 0.4);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              background 0.3s ease,
              box-shadow 0.3s ease;
}

.back-to-top:hover {
  transform: translateY(-5px) scale(1.08);
  background: var(--bar) !important;
  color: #000000 !important;
  box-shadow: 0 12px 28px rgba(188, 129, 14, 0.6);
}