/* All in One Mobile Marine — Custom Styles */

body {
    font-family: 'Manrope', system-ui, sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

/* ── Hero Section ── */
.hero-section {
    background-color: #060E1A;
}

.hero-gradient {
    background:
        radial-gradient(ellipse 80% 60% at 20% 60%, rgba(0, 58, 112, 0.4) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 80% 30%, rgba(200, 153, 62, 0.08) 0%, transparent 60%);
}

.hero-wave {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23003A70' fill-opacity='0.06' d='M0,224L48,213.3C96,203,192,181,288,186.7C384,192,480,224,576,218.7C672,213,768,171,864,165.3C960,160,1056,192,1152,197.3C1248,203,1344,181,1392,170.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 50%;
}

/* ── Navbar ── */
#navbar {
    background: transparent;
}

#navbar.scrolled {
    background: rgba(6, 14, 26, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-text {
    color: #fff;
}

.nav-text-sub {
    color: rgba(255, 255, 255, 0.5);
}

.nav-link {
    color: rgba(255, 255, 255, 0.6);
}

.nav-link:hover {
    color: #C8993E;
}

#navbar.scrolled .nav-text {
    color: #fff;
}

/* Hamburger animation */
#mobile-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(3px, 5px);
}

#mobile-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

#mobile-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(3px, -5px);
}

/* ── Compass ── */
@keyframes compass-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.compass-rotate {
    animation: compass-spin 120s linear infinite;
}

/* ── Reveal Animations ── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--delay, 0s);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--delay, 0s);
}

.reveal-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Service Card Hover State ── */
.service-card .bg-sea-50 {
    position: relative;
}

.service-card .bg-sea-50::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #003A70, #C8993E);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 0 0 16px 16px;
}

.service-card:hover .bg-sea-50::after {
    transform: scaleX(1);
}

/* ── Selection Color ── */
::selection {
    background: rgba(200, 153, 62, 0.3);
    color: #0C1829;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #060E1A;
}

::-webkit-scrollbar-thumb {
    background: #1A3358;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #003A70;
}

/* ── Mobile Menu Transition ── */
#mobile-menu.open {
    max-height: 400px;
    opacity: 1;
}