/* ============================================
   MARINEA — Premium Marine Theme
   Colors from Logo: Ocean Blue + Ship Wheel Gold
   ============================================ */

/* === BASE === */
* { font-family: 'Almarai', sans-serif; margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background: #f0f7ff;
    background-image:
        radial-gradient(ellipse at 50% -20%, rgba(30, 136, 229, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(166, 124, 82, 0.08) 0%, transparent 40%);
    min-height: 100vh;
    color: #1e293b;
    overflow-x: hidden;
}

/* === TOP HERO WAVE BACKGROUND === */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 450px;
    background: linear-gradient(135deg, #0A1628 0%, #0D3B66 40%, #1565C0 75%, #1E88E5 100%);
    z-index: 0;
    clip-path: ellipse(120% 100% at 50% 0%);
}

/* === GLASS COMPONENTS === */
.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 4px 30px rgba(0,0,0,0.06);
}

.glass-light {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.5);
}

/* === CARDS === */
.card-dark {
    background: #ffffff;
    border: 1px solid rgba(30, 136, 229, 0.08);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(30, 136, 229, 0.15), 0 8px 16px rgba(0,0,0,0.06);
    border-color: rgba(30, 136, 229, 0.2);
}

/* === TYPOGRAPHY === */
.gradient-text {
    background: linear-gradient(135deg, #1565C0 0%, #1E88E5 50%, #42A5F5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* === BUTTONS === */
.btn-primary {
    background: linear-gradient(135deg, #1565C0 0%, #1E88E5 60%, #42A5F5 100%);
    color: #ffffff !important;
    font-weight: 600;
    border: none;
    box-shadow: 0 4px 15px rgba(21, 101, 192, 0.35);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    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;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(21, 101, 192, 0.45);
}

.btn-primary:hover::after { left: 100%; }

/* === GOLDEN ACCENT (from ship wheel) === */
.btn-amber, .badge-gold {
    background: linear-gradient(135deg, #C49A3C 0%, #D4AF37 50%, #E8C547 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(196, 154, 60, 0.3);
}

.btn-emerald {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3);
}

/* === INPUT FIELDS === */
.input-dark {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    color: #1e293b;
    transition: all 0.3s;
}

.input-dark:focus {
    border-color: #1E88E5;
    outline: none;
    box-shadow: 0 0 0 4px rgba(30, 136, 229, 0.12);
}

.input-dark::placeholder { color: #94a3b8; }

/* === HERO GLOW === */
.hero-glow {
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(30,136,229,0.12) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    animation: glow-float 6s ease-in-out infinite;
}

@keyframes glow-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.05); }
}

/* === OCEAN WAVE DIVIDER === */
.wave-divider {
    position: relative;
    height: 80px;
    overflow: hidden;
}

.wave-divider svg {
    position: absolute;
    bottom: 0;
    width: 200%;
    animation: wave-slide 10s linear infinite;
}

@keyframes wave-slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* === OCEAN WAVES FOOTER === */
.ocean-waves {
    position: fixed;
    bottom: 0; left: 0;
    width: 100%; height: 100px;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ocean-waves svg {
    position: absolute;
    bottom: 0;
    width: 200%; height: 100%;
    animation: wave-move 8s linear infinite;
}

.ocean-waves svg:nth-child(2) {
    animation: wave-move 12s linear infinite reverse;
    opacity: 0.6;
    bottom: -5px;
}

@keyframes wave-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* === FLOATING BUBBLES === */
.bubble {
    position: fixed;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(30,136,229,0.15), rgba(30,136,229,0.03));
    border: 1px solid rgba(30,136,229,0.08);
    pointer-events: none;
    z-index: 0;
    animation: bubble-rise linear infinite;
}

@keyframes bubble-rise {
    0% { transform: translateY(100vh) scale(0.5); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-100px) scale(1); opacity: 0; }
}

/* === SHIMMER === */
.shimmer {
    position: relative;
    overflow: hidden;
}

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

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

/* === AD BANNER === */
.ad-slide { transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; }
.ad-slide.hidden { display: none; }
.ad-slide.active { display: block; animation: ad-fade-in 0.5s ease-out; }
@keyframes ad-fade-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
.ad-dot.active { width: 1.5rem; background: linear-gradient(135deg, #1565C0, #1E88E5); }

/* === SCROLL ANIMATIONS === */
.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.7s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* === PULSE === */
.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* === FOOTER === */
footer {
    background: linear-gradient(180deg, #0A1628 0%, #0D2847 100%);
    color: #ffffff;
    position: relative;
    z-index: 1;
}

footer .glass {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}

footer a { color: rgba(255,255,255,0.7); }
footer a:hover { color: #42A5F5; }

/* === RESPONSIVE NAV in hero zone === */
nav.glass {
    transition: all 0.3s;
}

/* When nav is in the hero zone (dark bg), make it transparent */
nav.at-top {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

nav.at-top a, nav.at-top span, nav.at-top p, nav.at-top button { color: #ffffff; }
nav.at-top .btn-primary { color: #ffffff !important; }

/* === STAT CARD === */
.stat-card {
    background: linear-gradient(135deg, rgba(30,136,229,0.08) 0%, rgba(166,124,82,0.05) 100%);
    border: 1px solid rgba(30,136,229,0.1);
    border-radius: 16px;
}

/* === ICON BOUNCE === */
.icon-bounce { animation: icon-bounce 2s ease-in-out infinite; }
@keyframes icon-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* === MAGNETIC EFFECT === */
.magnetic { transition: transform 0.3s ease; }

/* === TILT CARD === */
.tilt-card { transition: transform 0.5s; }
.tilt-card:hover { transform: perspective(1000px) rotateX(3deg) rotateY(-3deg); }

/* === ANIMATE FLOAT === */
.animate-float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

/* === PARTICLES === */
.particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0; }
.particle { position: absolute; width: 4px; height: 4px; background: rgba(30, 136, 229, 0.25); border-radius: 50%; animation: particle-float 20s infinite; }
@keyframes particle-float { 0% { transform: translateY(100vh) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 0.5; } 100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; } }

/* === STAGGER === */
.stagger-children > * { opacity: 0; transform: translateY(20px); }
.stagger-children.visible > *:nth-child(1) { animation: stagger-fade 0.5s 0.1s forwards; }
.stagger-children.visible > *:nth-child(2) { animation: stagger-fade 0.5s 0.2s forwards; }
.stagger-children.visible > *:nth-child(3) { animation: stagger-fade 0.5s 0.3s forwards; }
.stagger-children.visible > *:nth-child(4) { animation: stagger-fade 0.5s 0.4s forwards; }
@keyframes stagger-fade { to { opacity: 1; transform: translateY(0); } }

/* === GLOW BORDER === */
.glow-border { position: relative; }
.glow-border::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(45deg, #1565C0, #42A5F5, #C49A3C, #1565C0); background-size: 400%; border-radius: inherit; z-index: -1; animation: glow-rotate 4s linear infinite; filter: blur(8px); opacity: 0; transition: opacity 0.3s; }
.glow-border:hover::before { opacity: 1; }
@keyframes glow-rotate { 0% { background-position: 0% 50%; } 100% { background-position: 400% 50%; } }

/* === HERO SLIDER === */
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; }
.hero-slide.active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.3s; border: none; }
.hero-dot.active { width: 28px; border-radius: 5px; background: linear-gradient(135deg, #C49A3C, #D4AF37); }

/* === ANIMATE GRADIENT === */
.animate-gradient { animation: gradient-move 3s ease infinite; }
@keyframes gradient-move { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* === GRADIENT SHIFT === */
@keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* === COUNTER === */
.counter { display: inline-block; }

/* === TEXT REVEAL === */
.text-reveal { clip-path: inset(0 100% 0 0); animation: text-reveal 1s 0.5s forwards; }
@keyframes text-reveal { to { clip-path: inset(0 0 0 0); } }

/* === RIPPLE === */
.ripple { position: relative; overflow: hidden; }
.ripple-effect { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.4); transform: scale(0); animation: ripple-anim 0.6s linear; pointer-events: none; }
@keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }

/* === SCALE IN === */
.scale-in { opacity: 0; transform: scale(0.8); transition: all 0.6s ease; }
.scale-in.visible { opacity: 1; transform: scale(1); }

.rotate-in { opacity: 0; transform: rotate(-10deg) scale(0.9); transition: all 0.8s ease; }
.rotate-in.visible { opacity: 1; transform: rotate(0) scale(1); }

.fade-in-right { opacity: 0; transform: translateX(60px); transition: all 0.8s ease; }
.fade-in-right.visible { opacity: 1; transform: translateX(0); }

.fade-in-left { opacity: 0; transform: translateX(-60px); transition: all 0.8s ease; }
.fade-in-left.visible { opacity: 1; transform: translateX(0); }

/* === TYPING === */
.typing { overflow: hidden; white-space: nowrap; animation: typing 3s steps(30) 1s forwards, blink 0.75s step-end infinite; border-left: 3px solid #1E88E5; }
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blink { 50% { border-color: transparent; } }

/* === VIP BADGE === */
.vip-badge { background: linear-gradient(135deg, #C49A3C, #D4AF37); }

/* === GOLDEN GLOW === */
.glow { box-shadow: 0 0 30px rgba(30, 136, 229, 0.15); }
.glow-text { text-shadow: 0 0 20px rgba(30, 136, 229, 0.3); }

/* === CONTENT RELATIVE === */
main, section, .relative { position: relative; z-index: 1; }
nav { position: relative; z-index: 50; }