:root {
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* Global type */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    background: #f8fafc;
    line-height: 2;
    overflow-x: hidden; /* Prevent horizontal scroll on body */
}

h1,
h2,
h3,
.font-display {
    font-family: 'Roboto', sans-serif;
}

/* Hero bg animation */
.hero-bg {
    animation: hero-bg-zoom 20s linear infinite;
    will-change: transform;
    transform-origin: 50% 16%;
    background-image: url('assets/img/caught_fish.jpeg');
    background-size: cover;
    background-position: center;
}

@media (orientation:portrait) {
    .hero-bg {
        background-image: url('assets/img/caught_fish_portrait.jpeg');
    }
}

@keyframes hero-bg-zoom {
    0% {
        transform: scale(1) translateY(0)
    }

    50% {
        transform: scale(1.15) translateY(-20px)
    }

    100% {
        transform: scale(1) translateY(0)
    }
}

.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s var(--ease-in-out), transform .8s var(--ease-in-out)
}

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

.h-screen {
    height: 450px !important
}

/* Fixed transparent header on top; gains bg on scroll */
#site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    transition: background-color .25s ease, backdrop-filter .25s ease, box-shadow .25s ease;
}

#site-header.scrolled {
    background: rgba(15, 23, 42, .85);
    backdrop-filter: saturate(180%) blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

/* Our Mission container with persistent image + dual layers */
#slideshow-container {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    background-image: url('assets/img/pexels-nithin-thenkara-19419664-20214378.jpg');
    background-size: cover;
    background-position: center;
    background-color: #0a2540;
}

.slideshow-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    border-radius: 1rem;
    opacity: 0;
    transition: opacity 1.2s var(--ease-in-out);
    will-change: opacity
}

.slideshow-bg.show {
    opacity: 1
}

/* Products carousel */
#products-carousel-container {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    border-radius: .75rem
}

#products-carousel {
    display: flex;
    gap: 2rem;
    transition: transform .7s var(--ease-in-out);
    will-change: transform;
    padding: 0;
    align-items: center;
}

.product-slide {
    flex: 0 0 auto;
    width: 320px;
    opacity: .7;
    transition: opacity .3s var(--ease-in-out), transform .3s var(--ease-in-out);
    user-select: none
}

.product-slide.active,
.product-slide:hover {
    opacity: 1;
    transform: scale(1.02)
}

.product-slide img {
    width: 100%;
    height: 220px;
    border-radius: .75rem;
    object-fit: cover;
    box-shadow: 0 10px 30px rgb(59 130 246 / .25);
    transition: transform .3s var(--ease-in-out)
}

.product-slide img:hover {
    transform: scale(1.05)
}

/* Team Carousel */
#team-carousel-container {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    border-radius: .75rem
}

#team-carousel {
    display: flex;
    gap: 3rem;
    transition: transform .7s var(--ease-in-out);
    will-change: transform;
    padding: 0;
    align-items: center;
}

.team-slide {
    flex: 0 0 auto;
    width: 320px;
    opacity: .7;
    transition: opacity .3s var(--ease-in-out), transform .3s var(--ease-in-out);
    user-select: none
}

.team-slide.active,
.team-slide:hover {
    opacity: 1;
    transform: scale(1.02)
}

/* Buttons */
button {
    transition: all .35s var(--ease-in-out);
    border-radius: .75rem;
    box-shadow: 0 4px 12px rgb(59 130 246 / .4);
    will-change: transform, box-shadow
}

button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgb(59 130 246 / .6)
}

button:active {
    transform: scale(.95);
    box-shadow: 0 2px 10px rgb(59 130 246 / .4)
}

/* Animated logo */
.hero-logo {
    width: 240px;
    height: 240px;
    margin: 0 auto 1.5rem;
    opacity: 0;
    transform: scale(.8);
    animation: logo-pulse 2.5s ease-in-out forwards;
    user-select: none
}

@keyframes logo-pulse {
    0% {
        opacity: 0;
        transform: scale(.8)
    }

    50% {
        opacity: 1;
        transform: scale(1.1)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

/* Section anchor offset */
section {
    scroll-margin-top: 72px
}

/* Scroll-to-top */
#scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}

#scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

/* Mobile logo margin fix */
@media (max-width: 768px) {
    .hero-logo {
        margin-top: 3rem !important;
    }
}

/* Contact section mobile fix */
@media (max-width: 1024px) {
    #contact .flex {
        flex-direction: column;
    }

    #contact .h-96 {
        height: 250px !important;
    }

    /* Contact info card spacing */
    #contact .bg-white {
        margin-top: 2rem;
        padding: 1.5rem;
    }
}

/* Team section director messages */
.director-message {
    font-style: italic;
    color: #4b5563;
    margin-top: 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    border-left: 3px solid #3b82f6;
    padding-left: 1rem;
}

/* Mobile team section adjustments */
@media (max-width: 640px) {
    .team-grid {
        gap: 2rem !important;
    }

    .director-card {
        padding: 1rem;
    }
}

/* Product Carousel Mobile Fixes */
@media (max-width: 768px) {
    #products-carousel-container {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 0 1rem;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    #products-carousel {
        gap: 1rem;
        padding: 0;
        justify-content: flex-start;
    }

    .product-slide {
        width: 280px;
        min-width: 280px;
        opacity: 0.7;
    }

    .product-slide img {
        height: 180px;
    }

    .product-slide h3 {
        font-size: 1.25rem;
        margin-top: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .product-slide p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
}

/* Team Carousel Mobile Fixes */
@media (max-width: 768px) {
    #team-carousel-container {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 0 1rem;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    #team-carousel {
        gap: 1.5rem;
        padding: 0;
        justify-content: flex-start;
    }

    .team-slide {
        width: 280px;
        min-width: 280px;
        opacity: 0.7;
    }

    .team-slide img {
        width: 120px;
        height: 120px;
    }

    .team-slide h3 {
        font-size: 1.25rem;
        margin-top: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .director-message {
        font-size: 0.85rem;
        padding-left: 0.75rem;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .product-slide {
        width: 260px;
        min-width: 260px;
    }

    .product-slide img {
        height: 160px;
    }

    .team-slide {
        width: 260px;
        min-width: 260px;
    }

    .team-slide img {
        width: 100px;
        height: 100px;
    }
}

/* Ensure carousel container doesn't cause horizontal scroll */
#products-carousel-container,
#team-carousel-container {
    overflow-x: hidden;
}

/* Improve carousel alignment for all screens */
#products-carousel,
#team-carousel {
    align-items: center;
}

.product-slide,
.team-slide {
    text-align: center;
}

/* Hero Section Improvements */
.hero-section {
    min-height: 500px;
    height: 80vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-content {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 80px; /* Added to prevent logo from going under header */
    padding-bottom: 2rem; /* Added bottom padding to prevent button from being cut off */
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

/* Ensure the hero content has enough space at the bottom */
.hero-content .p-8 {
    padding-bottom: 2rem;
}

/* Medium height devices (tablets in landscape, short screens) */
@media (max-height: 700px) and (min-width: 769px) {
    .hero-section {
        height: auto;
        min-height: 600px;
    }
    
    .hero-logo {
        width: 180px;
        height: 180px;
        margin-bottom: 1rem;
    }
    
    .hero-content h1 {
        font-size: 2.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-content p {
        font-size: 1.25rem !important;
        margin-bottom: 1.5rem !important;
    }
}

/* Small height devices */
@media (max-height: 600px) {
    .hero-section {
        height: auto;
        min-height: 500px;
    }
    
    .hero-logo {
        width: 150px;
        height: 150px;
        margin-bottom: 0.5rem;
    }
    
    .hero-content h1 {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .hero-content p {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-content .p-8 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

@media (max-width: 768px) {
    .hero-section {
        height: 100svh;
        min-height: 500px;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    .hero-content {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
        padding-top: 60px; /* Reduced for mobile */
    }
    
    /* Mobile devices in landscape */
    @media (max-height: 500px) {
        .hero-section {
            height: auto;
            min-height: 400px;
        }
        
        .hero-logo {
            width: 120px;
            height: 120px;
            margin-bottom: 0.5rem;
        }
        
        .hero-content h1 {
            font-size: 1.75rem !important;
            margin-bottom: 0.5rem !important;
        }
        
        .hero-content p {
            font-size: 0.9rem !important;
            margin-bottom: 1rem !important;
        }
        
        .hero-content .p-8 {
            padding: 1rem !important;
        }
    }
}

/* Additional mobile overflow prevention */
@media (max-width: 768px) {
    main {
        overflow-x: hidden;
    }
    
    section {
        overflow-x: hidden;
    }
}

/* Add margin to Our Mission section to ensure spacing */
#slideshow-container {
    margin-top: 2rem;
}