/* --- Brutalist Luxury Palette --- */
:root {
    --slide-interval: 6000ms;
    --total-slides: 3;
    --hero-bg-image-fade-duration: 1500ms;
    --hero-bg-image-zoom-duration: var(--slide-interval);
}
body {
    color: #cccccc;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.bg-gradient-main {
    background: linear-gradient(to bottom, #222222, #0a0a0a);
}
.bg-gradient-accent {
    background: linear-gradient(to bottom, #333333, #111111);
}
h1, h2, h3, h4, .font-heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}
.nav-link, button {
     font-family: 'Source Sans Pro', sans-serif;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
}
.nav-link {
    @apply text-gray-300 transition-colors duration-300 hover:bg-red-600 hover:text-white px-3 py-1;
}

/* --- Text Glow Effect --- */
.text-glow {
    /* A very heavy, multi-layered black shadow as requested */
    text-shadow: 0 0 20px black, 0 0 40px black, 0 0 60px black;
}


/* --- Hero Styles --- */
#hero {
    background-color: #0a0a0a;
    background-image: url('images/helm.jpg'); /* Default Desktop Image */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.hero-content {
    position: relative; 
    z-index: 2;
    width: 100%; 
    height: 100%;
}

@keyframes fadeCycle {
    0%, 33.33%, 100% { opacity: 0; pointer-events: none; }
    2% { opacity: 1; pointer-events: auto; }
    31.33% { opacity: 1; pointer-events: auto; }
}
.hero-slide {
    position: absolute; 
    opacity: 0; 
    pointer-events: none;
    inset: 0; /* Make slide fill the parent */
    padding: 6%; /* Inset margin for all screen sizes */
    
    /* Flex properties to align content INSIDE the slide */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* Animation properties */
    animation-name: fadeCycle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: calc(var(--slide-interval) * var(--total-slides));
}

@media (min-width: 768px) {
    .hero-slide {
        justify-content: flex-start; /* Align text left on desktop */
        text-align: left;
    }
}

.hero-slide:nth-child(1) { animation-delay: calc(var(--slide-interval) * 0); }
.hero-slide:nth-child(2) { animation-delay: calc(var(--slide-interval) * 1); }
.hero-slide:nth-child(3) { animation-delay: calc(var(--slide-interval) * 2); }

/* --- Parallax Divider --- */
.parallax-divider {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 25vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-attachment: fixed; /* Enabled for all devices */
}

/* This rule specifically disables parallax on the worldview section ONLY */
#worldview {
    background-attachment: scroll !important;
}


/* --- Silver Thread Gradient Borders --- */
.silver-border-box {
    position: relative;
    padding: 1px; /* This padding creates the space for the gradient border */
    overflow: hidden;
}
.silver-border-box::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: linear-gradient(120deg, #6B7280, #D1D5DB, #4B5563, #D1D5DB, #6B7280);
    background-size: 300% 300%;
    background-position: 0% 0%;
    transition: background-position 0.5s ease-in-out;
}
.silver-border-box:hover::before {
    background-position: 100% 100%;
}

.silver-thread-y {
    border-style: solid;
    border-width: 1px 0;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, rgba(107,114,128,0.2), #9CA3AF, rgba(107,114,128,0.2));
}
.silver-thread-b {
    border-style: solid;
    border-width: 0 0 1px 0;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, rgba(107,114,128,0.2), #9CA3AF, rgba(107,114,128,0.2));
}
.silver-thread-t {
    border-style: solid;
    border-width: 1px 0 0 0;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, rgba(107,114,128,0.2), #9CA3AF, rgba(107,114,128,0.2));
}

/* --- Gradient Ghost Button --- */
.gradient-button-ghost-inner {
    @apply block bg-transparent text-red-500 font-bold py-3 px-12 transition duration-300;
}
.silver-border-box:hover .gradient-button-ghost-inner {
    @apply bg-red-500 text-white;
}

.icon-shadow {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 8px 30px rgba(0, 0, 0, 0.3);
}


/* --- Responsive Background Images --- */

/* Default Desktop Backgrounds */
#divider-1 { background-image: url('images/ocean1.jpg'); }
#divider-2 { background-image: url('images/ocean2.jpg'); }
#worldview { background-image: url('images/map.jpg'); }
#divider-3 { background-image: url('images/ocean4.jpg'); }

/* Mobile Backgrounds */
@media (max-width: 767px) {
    #hero { background-image: url('images/sailing3_mobile.jpg'); } /* Mobile Hero Image */
    #divider-1 { background-image: url('images/docked_mobile.jpg'); }
    #divider-2 { background-image: url('images/wheel_mobile.jpg'); }
    #worldview { background-image: url('images/hands_mobile.jpg'); }
    #divider-3 { background-image: url('images/islands_mobile.jpg'); }

    /* Nudge hero content down from vertical center on mobile */
    .hero-slide > div {
        margin-top: 15vh;
    }

    /* Make all hero text white on mobile */
    .hero-slide h1,
    .hero-slide h2,
    .hero-slide p {
        color: #FFFFFF;
    }
}