/* ===========================
   AcrossOcean • Ultra Lively Theme
   ===========================
   Motion principles:
   - Rich, creative animations
   - Layered micro-interactions
   - Respect prefers-reduced-motion
   - Performance-optimized transforms
*/

:root{
  --primary:#0d6efd; --brand-start:#0b3b8d; --brand-end:#0d47a1;
  --water-50:#f6fbff; --water-100:#e8f4ff; --water-200:#cfe8ff; --water-800:#0d47a1;
  --ink:#111827; --ink-2:#1f2937; --white:#fff;
  --shadow-sm:0 6px 14px rgba(13,71,161,.12);
  --shadow:0 12px 36px rgba(13,71,161,.18);
  --shadow-xl:0 25px 50px rgba(13,71,161,.25);
  --radius:18px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --bounce: cubic-bezier(.68,-0.55,.265,1.55);
  --elastic: cubic-bezier(.175,.885,.32,1.275);
}

/* Typography families */
html[dir="rtl"] body{font-family:'Cairo',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
html[dir="ltr"] body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
body{
  color:var(--ink-2); 
  background:linear-gradient(180deg,var(--water-50),#fff 40%,var(--water-100)); 
  -webkit-font-smoothing:antialiased;
  overflow-x: hidden;
}

/* Enhanced cursor interactions */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
    rgba(13,110,253,0.03), transparent 40%);
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.3s ease;
  opacity: 0;
}
body.mouse-active::before { opacity: 1; }

/* Floating elements background */
.floating-elements {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.float-bubble {
  position: absolute;
  background: linear-gradient(45deg, rgba(13,110,253,0.1), rgba(11,59,141,0.05));
  border-radius: 50%;
  animation: float 20s infinite linear;
  backdrop-filter: blur(1px);
}

@keyframes float {
  0% { transform: translateY(100vh) rotate(0deg) scale(0.8); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-10vh) rotate(360deg) scale(1.2); opacity: 0; }
}

/* Links */
a{
  text-decoration:none; 
  transition:all .3s var(--ease);
  position: relative;
}
a:hover{
  color:var(--primary);
  transform: translateY(-1px);
}

/* =================
   NAVBAR & HEADER
   ================= */
.navbar{
  background:linear-gradient(135deg,var(--brand-start),var(--brand-end)) !important;
  box-shadow:none; 
  transition: all .4s var(--ease);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.navbar::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  50% { left: -100%; }
  100% { left: 100%; }
}

.navbar.scrolled{ 
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
  transform: translateY(0);
}
.navbar.hide { 
  transform: translateY(-110%);
}

.navbar .nav-link{ 
  color:#fff !important; 
  opacity:.92; 
  position:relative;
  transition: all .3s var(--ease);
}

.navbar .nav-link:hover {
  transform: scale(1.05);
  text-shadow: 0 0 8px rgba(255,255,255,0.3);
}

.navbar .nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  transform:scaleX(0); transform-origin:left; background:#fff; 
  transition:transform .4s var(--bounce);
}
.navbar .nav-link:hover::after, .navbar .nav-link.active::after{ 
  transform:scaleX(1);
  box-shadow: 0 0 8px rgba(255,255,255,0.5);
}
.navbar-brand{ 
  color:#fff !important;
  transition: all .3s var(--ease);
}
.navbar-brand:hover {
  transform: scale(1.1) rotate(2deg);
  filter: brightness(1.2);
}

/* Dropdown must escape the navbar box */
.navbar { overflow: visible; z-index: 1040; }

/* Ensure proper layering on small screens too */
.navbar .dropdown-menu { z-index: 999999; }
/* remove overflow only when a dropdown exists */
.navbar:has(.dropdown-menu) { overflow: visible; }

@media (max-width: 991.98px) {
  .navbar .dropdown-menu { position: absolute; }
}


/* =================
   HERO (live bg)
   ================= */
.hero{
  position:relative; min-height:92vh; display:grid; place-items:center;
  text-align:center; color:#fff; overflow:clip;
}

.hero video,.hero .poster{ 
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; 
  filter:saturate(1.08) contrast(1.05) brightness(.98);
  transition: filter .6s var(--ease);
}

.hero:hover video, .hero:hover .poster {
  filter:saturate(1.15) contrast(1.08) brightness(1.02) blur(0.5px);
}

.hero .glass{ 
  position:absolute; inset:0; z-index:-1;
  background: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,.18), rgba(0,0,0,.58));
}

.hero .container {
  animation: heroFloat 6s ease-in-out infinite;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(0.5deg); }
}

.hero .badge{
  background:rgba(255,255,255,.12); 
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  transition: all .4s var(--bounce);
  animation: badgePulse 4s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.3); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}

.hero .badge:hover {
  transform: scale(1.1) rotate(3deg);
  background: rgba(255,255,255,0.2);
}

.btn-glow{ 
  box-shadow:0 12px 28px rgba(13,110,253,.45);
  transition: all .4s var(--ease);
  position: relative;
  overflow: hidden;
}

.btn-glow::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.btn-glow:hover::before {
  left: 100%;
}

.btn-glow:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 20px 40px rgba(13,110,253,.6);
}

/* Enhanced waves with multiple layers */
.waves{ 
  position:absolute; bottom:-1px; left:0; width:100%; 
  will-change:transform;
  z-index: 1;
}
.waves svg{ 
  display:block; width:200%; height:140px; 
  animation:wave 20s linear infinite;
}

.waves::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 300%; height: 80px;
  background: linear-gradient(90deg, 
    rgba(13,110,253,0.1), 
    rgba(11,59,141,0.2), 
    rgba(13,110,253,0.1));
  animation: waveSecondary 15s linear infinite reverse;
}

@keyframes wave{ 
  from{ transform:translateX(0)} 
  to{ transform:translateX(-50%)} 
}

@keyframes waveSecondary{ 
  from{ transform:translateX(0)} 
  to{ transform:translateX(-33.33%)} 
}

/* =================
   SECTION STYLES
   ================= */
.section-title{ 
  color:var(--water-800); 
  letter-spacing:.2px;
  position: relative;
  overflow: visible;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 10; left: 0;
  width: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--brand-end));
  animation: titleUnderline 1s var(--ease) forwards;
  animation-delay: 0.5s;
}

@keyframes titleUnderline {
  to { width: 60px; }
}

.sub{ 
  color:#375a9e;
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease) forwards;
  animation-delay: 0.3s;
}

/* Enhanced Feature & cards with advanced effects */
.card-water, .feature{
  border:0; border-radius:var(--radius); box-shadow:var(--shadow); background:#fff;
  transition: all .5s var(--ease);
  position:relative; overflow:hidden;
  transform-style: preserve-3d;
}

.card-water:hover, .feature:hover{ 
  transform: translateY(-8px) scale(1.02) rotateX(5deg);
  box-shadow:var(--shadow-xl);
}

/* Multiple floating orbs */
.card-water::before, .feature::before{
  content:""; position:absolute; 
  width:120px; height:120px; 
  right:-40px; top:-40px;
  background: radial-gradient(closest-side, rgba(13,110,253,.2), transparent 70%);
  border-radius: 50%;
  filter: blur(15px); 
  transition: all .6s var(--ease);
  animation: orbFloat 4s ease-in-out infinite;
}

.card-water::after, .feature::after{
  content:""; position:absolute; 
  width:80px; height:80px; 
  left:-20px; bottom:-20px;
  background: radial-gradient(closest-side, rgba(11,59,141,.15), transparent 70%);
  border-radius: 50%;
  filter: blur(10px); 
  transition: all .6s var(--ease);
  animation: orbFloat 6s ease-in-out infinite reverse;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-5px, -8px) scale(1.1); }
  66% { transform: translate(8px, -3px) scale(0.9); }
}

.card-water:hover::before, .feature:hover::before{ 
  transform: translate(-15px, 10px) scale(1.3);
  filter: blur(20px);
}

.card-water:hover::after, .feature:hover::after{ 
  transform: translate(10px, -15px) scale(1.2);
  filter: blur(12px);
}

.card-water .icon, .feature .icon{ 
  font-size:2rem; color:var(--primary);
  transition: all .4s var(--bounce);
  filter: drop-shadow(0 4px 8px rgba(13,110,253,0.2));
}

.card-water:hover .icon, .feature:hover .icon {
  transform: scale(1.2) rotate(10deg) translateY(-5px);
  color: var(--brand-end);
  filter: drop-shadow(0 8px 16px rgba(13,110,253,0.4));
}

/* Animated backgrounds for cards */
.card-water .card-body, .feature .feature-body {
  position: relative;
  z-index: 2;
}

/* Stats chips with enhanced animation */
.stat{ 
  background:linear-gradient(135deg, #0b3b8d, #0d47a1); 
  color:#e6f0ff; 
  border-radius:var(--radius); 
  box-shadow:var(--shadow-sm);
  transition: all .4s var(--bounce);
  position: relative;
  overflow: hidden;
}

.stat::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.6s ease;
}

.stat:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 15px 30px rgba(11,59,141,0.4);
}

.stat:hover::before {
  left: 100%;
}

/* FAQ with smooth accordion animations */
.faq .accordion-button{ 
  font-weight:600;
  transition: all .3s var(--ease);
}

.faq .accordion-button:hover {
  transform: translateX(8px);
  background-color: rgba(13,110,253,0.05);
}

.faq .accordion-button:focus{ 
  box-shadow:0 0 0 .2rem rgba(13,110,253,.12);
}

.faq .accordion-collapse {
  overflow: hidden;
}

.faq .accordion-body {
  animation: slideInUp 0.4s var(--ease);
}

@keyframes slideInUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Contact form with enhanced interactions */
.contact-form{ 
  background:#fff; 
  border-radius:var(--radius); 
  box-shadow:var(--shadow);
  transition: all .4s var(--ease);
}

.contact-form:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

.contact-form .form-control{ 
  padding:.9rem 1rem; 
  border-radius:14px; 
  border:1px solid #e6eefb; 
  transition:all .3s var(--ease);
  position: relative;
}

.contact-form .form-control:focus{ 
  border-color:#b6d2ff; 
  box-shadow:0 0 0 .2rem rgba(13,110,253,.12);
  transform: translateY(-2px) scale(1.01);
}

.contact-form .form-control:hover:not(:focus) {
  border-color: #cfe8ff;
  transform: translateY(-1px);
}

/* Footer with subtle animations */
footer{ 
  background:linear-gradient(135deg, #0b315f, #0d47a1); 
  color:#cfe8ff;
  position: relative;
  overflow: hidden;
}

footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(13,110,253,0.5), 
    transparent);
  animation: topBorderFlow 3s ease-in-out infinite;
}

@keyframes topBorderFlow {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

footer a{ 
  color:#e8f4ff;
  transition: all .3s var(--ease);
  position: relative;
}

footer a:hover {
  color: #fff;
  transform: translateX(5px);
}

footer a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .3s var(--ease);
}

footer a:hover::after {
  width: 100%;
}

.footer-title{ 
  color:#fff; 
  font-weight:700; 
  margin-bottom:.75rem;
  animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% { text-shadow: none; }
  50% { text-shadow: 0 0 10px rgba(255,255,255,0.3); }
}

/* Utilities */
.rounded-2xl{ border-radius:var(--radius)!important }
.object-cover{ object-fit:cover }
html[dir="rtl"] .ms-auto{ margin-left:0!important; margin-right:auto!important }

/* Enhanced Map */
.map-wrap{ 
  position:relative; 
  padding-top:56.25%; 
  border-radius:var(--radius); 
  overflow:hidden; 
  box-shadow:var(--shadow);
  transition: all .4s var(--ease);
}

.map-wrap:hover {
  box-shadow: var(--shadow-xl);
  transform: scale(1.02);
}

.map-wrap iframe{ 
  position:absolute; inset:0; width:100%; height:100%; border:0;
  transition: all .4s var(--ease);
}

/* =================
   SCROLL REVEALS
   ================= */
.will-reveal{ 
  opacity:0; 
  transform: translateY(30px) scale(.95) rotateX(10deg); 
  transition: all .8s var(--ease);
  transform-style: preserve-3d;
}

.revealed{ 
  opacity:1; 
  transform: none;
}

/* Enhanced stagger with more dramatic effects */
.stagger > *{ 
  opacity:0; 
  transform: translateY(40px) rotateY(-10deg); 
  transition: all .8s var(--bounce);
  transform-style: preserve-3d;
}

.stagger.revealed > *{ 
  opacity:1; 
  transform:none;
}

.stagger.revealed > *:nth-child(1){ transition-delay:.1s }
.stagger.revealed > *:nth-child(2){ transition-delay:.2s }
.stagger.revealed > *:nth-child(3){ transition-delay:.3s }
.stagger.revealed > *:nth-child(4){ transition-delay:.4s }
.stagger.revealed > *:nth-child(5){ transition-delay:.5s }
.stagger.revealed > *:nth-child(6){ transition-delay:.6s }

/* =================
   3D TILT (cards)
   ================= */
.tilt{ 
  transform-style:preserve-3d; 
  transition: all .3s var(--ease);
  position: relative;
}

.tilt .tilt-inner{ 
  transform: translateZ(20px);
  transition: all .3s var(--ease);
}

.tilt:hover .tilt-inner {
  transform: translateZ(30px) scale(1.02);
}

/* =================
   ENHANCED RIPPLE
   ================= */
.btn, .nav-link, .card-water, .feature{
  position:relative; overflow:hidden;
}

.ripple{
  position:absolute; border-radius:50%; 
  transform: translate(-50%,-50%) scale(0);
  background: rgba(255,255,255,.4); 
  animation:rippleEffect .8s var(--ease); 
  pointer-events:none;
  box-shadow: 0 0 20px rgba(255,255,255,0.3);
}

@keyframes rippleEffect{ 
  0% { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  50% { opacity: 0.6; }
  100% { transform: translate(-50%,-50%) scale(6); opacity: 0; }
}

/* =================
   SCROLL UP BUTTON
   ================= */
.scroll-up-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--brand-end));
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s var(--bounce);
  z-index: 9999;
  backdrop-filter: blur(10px);
}

.scroll-up-btn.show {
  opacity: 1;
  visibility: visible;
  animation: buttonBounce 2s ease-in-out infinite;
}

@keyframes buttonBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.1); }
}

.scroll-up-btn:hover {
  background: linear-gradient(135deg, var(--brand-end), var(--primary));
  transform: translateY(-8px) scale(1.15);
  box-shadow: var(--shadow-xl);
}

.scroll-up-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: linear-gradient(45deg, var(--primary), var(--brand-end), var(--primary));
  z-index: -1;
  animation: spinBorder 3s linear infinite;
}

@keyframes spinBorder {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =================
   UTILITY ANIMATIONS
   ================= */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* =================
   REDUCED MOTION
   ================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ 
    animation-duration: 0.1s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1s !important;
    scroll-behavior: auto !important;
  }
  
  .floating-elements,
  .float-bubble {
    display: none;
  }
  
  body::before {
    display: none;
  }
}

/* floating background bubbles */
.floating-elements{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.float-bubble{
  position: absolute;
  bottom: -80px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,.35) 60%, rgba(255,255,255,0));
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(13,71,161,.14);
  animation: floatUp linear infinite, drift ease-in-out infinite;
  opacity: .55;
}
@keyframes floatUp{
  from{ transform: translateY(0) }
  to{ transform: translateY(-120vh) }
}
@keyframes drift{
  0%,100%{ margin-left: -8px }
  50%{ margin-left: 8px }
}

/* cursor-reactive glow (shows only when mouse moves) */
body.mouse-active::before{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background: radial-gradient(300px 300px at var(--mouse-x,50%) var(--mouse-y,50%),
    rgba(13,110,253,.10), transparent 60%);
  transition: opacity .4s ease;
  opacity: 1;
}
body::before{ opacity: 0 }

/* 3D reveal base */
.will-reveal{ opacity:0; transform: translateY(16px) scale(.98) rotateX(6deg); transform-origin: 50% 100%; will-change: transform, opacity }
.revealed{ opacity:1; transform: none; transition: transform .7s var(--ease, cubic-bezier(.22,.61,.36,1)), opacity .7s var(--ease) }
.revealed{ perspective: 800px; }
.revealed > *{ transform: translateZ(var(--reveal-depth, 18px)); }

/* stagger helper */
.stagger > *{ opacity:0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease) }
.stagger.revealed > *{ opacity:1; transform:none }
.stagger.revealed > *:nth-child(1){ transition-delay:.06s }
.stagger.revealed > *:nth-child(2){ transition-delay:.12s }
.stagger.revealed > *:nth-child(3){ transition-delay:.18s }
.stagger.revealed > *:nth-child(4){ transition-delay:.24s }
.stagger.revealed > *:nth-child(5){ transition-delay:.30s }

/* scroll-up button (if you don’t have it already) */
.scroll-up-btn{
  position: fixed;
  right: 24px; bottom: 24px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--bs-primary,#0d6efd); color:#fff;
  display:flex; align-items:center; justify-content:center;
  border:none; box-shadow:0 10px 24px rgba(0,0,0,.22);
  opacity:0; visibility:hidden; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
  z-index: 99999;
}
.scroll-up-btn.show{ opacity:1; visibility:visible; transform: translateY(0) }
.scroll-up-btn:hover{ background:#0b63ff; transform: translateY(-2px) }