/* ══════════════════════════════════════════════════════════
   OrdiExpress — Advanced Design Layer
   ══════════════════════════════════════════════════════════ */

/* ── CUSTOM SCROLLBAR ─────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #060d1c; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #2563eb, #4f9eff); border-radius: 3px; }

/* ── PAGE TRANSITION OVERLAY ──────────────────────────────── */
#oe-transition {
  position: fixed; inset: 0; z-index: 99999;
  background: linear-gradient(135deg, #060d1c 0%, #0a1a3a 40%, #081630 100%);
  pointer-events: none;
  will-change: transform;
}

/* ── CURSOR GLOW ──────────────────────────────────────────── */
#cursor-glow {
  position: fixed; z-index: 1;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,158,255,0.055) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform;
}

/* ── AURORA ORBS ──────────────────────────────────────────── */
@keyframes aurora {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  33%       { transform: translateY(-60px) scale(1.15) rotate(6deg); }
  66%       { transform: translateY(30px) scale(0.92) rotate(-4deg); }
}
.aurora {
  position: fixed; pointer-events: none; z-index: 0;
  border-radius: 50%; filter: blur(110px);
  animation: aurora 18s ease-in-out infinite;
}
.aurora-1 {
  width: 900px; height: 650px;
  background: radial-gradient(ellipse, rgba(29,78,216,0.28) 0%, transparent 70%);
  top: -220px; left: -300px;
}
.aurora-2 {
  width: 750px; height: 550px;
  background: radial-gradient(ellipse, rgba(99,102,241,0.2) 0%, transparent 70%);
  top: 35vh; right: -350px;
  animation-delay: -6s;
}
.aurora-3 {
  width: 650px; height: 450px;
  background: radial-gradient(ellipse, rgba(14,165,233,0.18) 0%, transparent 70%);
  bottom: 8vh; left: 18%;
  animation-delay: -12s;
}

/* ── NAV SHRUNK STATE ─────────────────────────────────────── */
.nav { transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; }
.nav-inner { transition: height 0.4s ease; }
.nav-shrunk {
  background: rgba(6, 13, 28, 0.97) !important;
  border-bottom-color: rgba(79, 158, 255, 0.18) !important;
  box-shadow: 0 4px 40px rgba(0,0,0,0.4);
}
.nav-shrunk .nav-inner { height: 60px !important; }

/* ── REVEAL — GSAP handles motion, CSS just sets initial ──── */
.reveal { opacity: 0; transform: none; transition: none; }

/* ── HERO ELEMENTS — hidden until GSAP reveals ────────────── */
.hero-badge,
.hero-title,
.hero-desc,
.hero-actions,
.hero-stats,
.hero-visual { opacity: 0; }

/* ── PAGE HEADER ELEMENTS — hidden until GSAP ────────────── */
.page-title, .page-subtitle, .breadcrumb { opacity: 0; }

/* ── GRADIENT TEXT ON SECTION TITLES ─────────────────────── */
.section-title {
  background: linear-gradient(135deg, #f0f6ff 0%, #93c5fd 55%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-title {
  background: linear-gradient(135deg, #ffffff 0%, #bae0ff 60%, #93c5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── GLASS CARDS ──────────────────────────────────────────── */
.card {
  background: rgba(13, 28, 65, 0.55) !important;
  border: 1px solid rgba(79, 158, 255, 0.13) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.4s ease,
              border-color 0.4s ease !important;
  position: relative !important;
}
.card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255,255,255,0.045) 0%, transparent 55%);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-10px) scale(1.015) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,0.45),
              0 0 0 1px rgba(79,158,255,0.3),
              inset 0 1px 0 rgba(255,255,255,0.09) !important;
  border-color: rgba(79, 158, 255, 0.38) !important;
}

/* ── PRICING CARD UPGRADE ─────────────────────────────────── */
.pricing-card {
  background: rgba(13, 28, 65, 0.55) !important;
  border: 1px solid rgba(79, 158, 255, 0.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease !important;
}
.pricing-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 28px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(79,158,255,0.32) !important;
}
.pricing-card.featured {
  background: linear-gradient(135deg, rgba(29,78,216,0.22), rgba(10,22,55,0.7)) !important;
  border-color: rgba(79,158,255,0.42) !important;
  box-shadow: 0 0 40px rgba(79,158,255,0.08) !important;
}

/* ── TOOL CARDS ───────────────────────────────────────────── */
.tool-card {
  background: rgba(13, 28, 65, 0.55) !important;
  border: 1px solid rgba(79, 158, 255, 0.1) !important;
  backdrop-filter: blur(12px) !important;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease !important;
}
.tool-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 22px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(79,158,255,0.28) !important;
  border-color: rgba(79,158,255,0.3) !important;
}

/* ── PRODUCT CARDS ────────────────────────────────────────── */
.product-card {
  background: rgba(13, 28, 65, 0.55) !important;
  border: 1px solid rgba(79, 158, 255, 0.1) !important;
  backdrop-filter: blur(12px) !important;
}
.product-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 28px 55px rgba(0,0,0,0.45), 0 0 0 1px rgba(79,158,255,0.25) !important;
  border-color: rgba(79,158,255,0.28) !important;
}

/* ── BUTTON SHINE ─────────────────────────────────────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  box-shadow: 0 4px 20px rgba(37,99,235,0.4), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease !important;
}
.btn-primary::before {
  content: '';
  position: absolute; top: 0; left: -110%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
}
.btn-primary:hover::before { left: 160%; }
.btn-primary:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 10px 35px rgba(37,99,235,0.55) !important;
}

.btn-secondary {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
              background 0.3s ease, border-color 0.3s ease !important;
}
.btn-secondary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.28) !important;
}

/* ── PAGE HEADER UPGRADE ──────────────────────────────────── */
.page-header {
  background:
    linear-gradient(to bottom, rgba(8,20,52,0.52) 0%, rgba(8,20,52,0.8) 100%),
    url('../images/narbonne-canal.jpg') center 55% / cover no-repeat !important;
  filter: brightness(1.25) saturate(1.3);
  border-bottom: 1px solid rgba(79,158,255,0.18) !important;
  padding: 5.5rem 0 3rem !important;
}

/* ── HERO CARD UPGRADE ────────────────────────────────────── */
.hero-card {
  background: rgba(8, 18, 46, 0.72) !important;
  border: 1px solid rgba(79, 158, 255, 0.28) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  box-shadow: 0 12px 50px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* ── SECTION TOP GLOW LINE ────────────────────────────────── */
.section { position: relative; }
.section-divider-glow {
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79,158,255,0.18), transparent);
  pointer-events: none;
}

/* ── SECTION BACKGROUNDS ──────────────────────────────────── */
body { position: relative; }

/* ── CTA BANNER ───────────────────────────────────────────── */
.cta-banner {
  background: linear-gradient(135deg,
    rgba(29,78,216,0.18) 0%,
    rgba(13,28,65,0.6) 50%,
    rgba(99,102,241,0.12) 100%) !important;
  border: 1px solid rgba(79, 158, 255, 0.25) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 0 60px rgba(29,78,216,0.1), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ── FOOTER UPGRADE ───────────────────────────────────────── */
.footer {
  background: linear-gradient(180deg, rgba(4,9,22,0.99) 0%, #030710 100%) !important;
  border-top: 1px solid rgba(79, 158, 255, 0.12) !important;
}

/* ── NAV LINK HOVER ───────────────────────────────────────── */
.nav-link {
  position: relative;
  transition: color 0.25s ease !important;
}
.nav-link::after {
  content: '';
  position: absolute; bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  transform-origin: left;
}
.nav-link:hover::after { transform: scaleX(1); }

/* ── CARD-LINK HOVER ──────────────────────────────────────── */
.card-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  transition: gap 0.25s ease, color 0.25s ease !important;
}
.card-link:hover { gap: 0.6rem !important; }

/* ── GUARANTEE BADGE ──────────────────────────────────────── */
.guarantee-badge {
  background: rgba(34,197,94,0.12) !important;
  border: 1px solid rgba(34,197,94,0.28) !important;
  backdrop-filter: blur(8px) !important;
}

/* ── SERVICE LIST ITEMS ───────────────────────────────────── */
.service-list-item {
  color: #c8ddf5 !important;
  transition: color 0.2s, padding-left 0.25s ease;
}
.service-list-item:hover { color: #f0f6ff !important; padding-left: 0.4rem; }
.service-list-item .icon {
  background: rgba(79,158,255,0.14) !important;
  transition: background 0.2s, transform 0.2s ease;
}
.service-list-item:hover .icon { background: rgba(79,158,255,0.25) !important; transform: scale(1.1); }

/* ── HOURS GRID ───────────────────────────────────────────── */
.hours-row {
  background: rgba(13, 28, 65, 0.5) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(79,158,255,0.08);
  transition: background 0.2s, border-color 0.2s;
}
.hours-row:hover { background: rgba(13,28,65,0.75) !important; border-color: rgba(79,158,255,0.18); }

/* ── FLOATING TAGS ────────────────────────────────────────── */
.floating-tag {
  background: rgba(8, 18, 46, 0.88) !important;
  border: 1px solid rgba(79,158,255,0.32) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35) !important;
}

/* ── GRID CARDS — set stagger base opacity ────────────────── */
.grid-3 > *:not(.reveal),
.grid-2 > *:not(.reveal),
.grid-tools > *:not(.reveal),
.grid-products > *:not(.reveal) { opacity: 0; }

/* ── HERO CONTENT Z-INDEX OVER OVERLAY ────────────────────── */
.hero-content { z-index: 2 !important; }

/* ── INFO BOX ─────────────────────────────────────────────── */
.info-box {
  background: rgba(13, 28, 65, 0.45) !important;
  border: 1px solid rgba(79,158,255,0.14) !important;
  backdrop-filter: blur(10px) !important;
}
.info-box.green {
  background: rgba(34,197,94,0.07) !important;
  border-color: rgba(34,197,94,0.18) !important;
}

/* ── DIVIDER ──────────────────────────────────────────────── */
.divider {
  background: linear-gradient(90deg, transparent, rgba(79,158,255,0.2), transparent) !important;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .aurora { display: none; }
  #cursor-glow { display: none; }
}

/* ── SMOOTH SCROLL OVERRIDE ───────────────────────────────── */
html { scroll-behavior: auto !important; }