/* ============================================
   VINTAGE MARITIME CREATIVE EFFECTS
   Old Boats, Aged Paper, Nautical Animations
   ============================================ */

/* ===== VINTAGE TEXTURES & BACKGROUNDS ===== */

/* Aged Parchment Effect */
.aged-parchment {
    background:
        url('https://www.transparenttextures.com/patterns/old-mathematics.png'),
        linear-gradient(135deg, #f5e6c8 0%, #ede4d4 50%, #e8dcc8 100%);
    position: relative;
}

.aged-parchment::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(139, 90, 43, 0.1) 100%);
    pointer-events: none;
}

/* Rope Border Effect */
.rope-border {
    border-image: repeating-linear-gradient(45deg,
            #8B6914,
            #8B6914 2px,
            #D4A84B 2px,
            #D4A84B 4px,
            #8B6914 4px,
            #8B6914 6px) 10;
    border-width: 4px;
    border-style: solid;
}

/* Weathered Wood Texture */
.wood-texture {
    background:
        url('https://www.transparenttextures.com/patterns/wood-pattern.png'),
        linear-gradient(180deg, #5c4033 0%, #3d2817 100%);
    background-blend-mode: overlay;
}

/* ===== NAUTICAL ANIMATIONS ===== */

/* Ship Wheel Rotation on Hover */
@keyframes wheelRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes wheelWobble {

    0%,
    100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

.logo-container .fa-dharmachakra {
    transition: transform 0.5s ease;
    animation: wheelWobble 4s ease-in-out infinite;
}

.logo-container:hover .fa-dharmachakra {
    animation: wheelRotate 2s linear infinite;
}

/* Wave Animation */
@keyframes waveMotion {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-3px) rotate(1deg);
    }

    50% {
        transform: translateY(0) rotate(0deg);
    }

    75% {
        transform: translateY(3px) rotate(-1deg);
    }
}

.wave-float {
    animation: waveMotion 3s ease-in-out infinite;
}

/* Anchor Drop Animation */
@keyframes anchorDrop {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    50% {
        transform: translateY(5px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.grid-item:hover .item-icon {
    animation: anchorDrop 0.4s ease-out;
}

/* Compass Spin */
@keyframes compassSpin {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Gentle Bobbing (like a boat) */
@keyframes boatBob {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-2px) rotate(0.5deg);
    }

    75% {
        transform: translateY(2px) rotate(-0.5deg);
    }
}

.vintage-panel {
    animation: boatBob 6s ease-in-out infinite;
}

/* Disable bobbing on hover for better UX */
.vintage-panel:hover {
    animation-play-state: paused;
}

/* Rope Swing */
@keyframes ropeSwing {

    0%,
    100% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);
    }
}

/* ===== HOVER EFFECTS ===== */

/* Category Card Vintage Hover */
.grid-item {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.grid-item:hover::before {
    left: 100%;
}

.grid-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.15),
        0 0 0 2px var(--gold),
        inset 0 0 20px rgba(184, 155, 74, 0.1);
}

/* Icon Glow Effect */
.item-icon {
    transition: all 0.3s ease;
    text-shadow: none;
}

.grid-item:hover .item-icon {
    color: var(--gold);
    text-shadow:
        0 0 10px rgba(184, 155, 74, 0.5),
        0 0 20px rgba(184, 155, 74, 0.3);
    transform: scale(1.15);
}

/* Navigation Link Underline Wave */
.nav-menu li a {
    position: relative;
    overflow: hidden;
}

.nav-menu li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.nav-menu li a:hover::after {
    transform: scaleX(1);
}

/* Social Icon Flip */
.header-social-icons .social-link {
    transition: all 0.4s ease;
    transform-style: preserve-3d;
}

.header-social-icons .social-link:hover {
    transform: rotateY(180deg) translateY(-3px);
}

.header-social-icons .social-link i {
    backface-visibility: hidden;
}

/* Button Vintage Press Effect */
.btn-vintage-brown,
.btn-vintage-navy {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 0 #5a4533,
        0 6px 10px rgba(0, 0, 0, 0.3);
}

.btn-vintage-brown:hover,
.btn-vintage-navy:hover {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 #5a4533,
        0 3px 5px rgba(0, 0, 0, 0.3);
}

.btn-vintage-brown:active,
.btn-vintage-navy:active {
    transform: translateY(4px);
    box-shadow:
        0 0 0 #5a4533,
        0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ===== DECORATIVE ELEMENTS ===== */

/* Corner Anchors for Panels */
.vintage-panel::after {
    content: '⚓';
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: 1.2rem;
    color: rgba(184, 155, 74, 0.3);
    transition: all 0.3s ease;
}

.vintage-panel:hover::after {
    color: var(--gold);
    transform: rotate(15deg) scale(1.2);
}

/* Compass Rose Decoration */
.panel-header::before {
    content: '✦';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    font-size: 0.8rem;
    opacity: 0.6;
}

.panel-header::after {
    content: '✦';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    font-size: 0.8rem;
    opacity: 0.6;
}

/* ===== SCROLL REVEAL ANIMATIONS ===== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.boutique-panel {
    animation: fadeInLeft 0.8s ease-out;
}

.blog-panel {
    animation: fadeInRight 0.8s ease-out;
}

.team-panel {
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.contact-question-block {
    animation: fadeInUp 0.8s ease-out 0.3s both;
}

/* ===== VINTAGE FILTER EFFECTS ===== */

/* Sepia Photo Effect */
.vintage-photo {
    filter: sepia(0.3) contrast(1.1) brightness(0.95);
    transition: filter 0.5s ease;
}

.vintage-photo:hover {
    filter: sepia(0) contrast(1) brightness(1);
}

/* Old Map Overlay */
.lighthouse-bg-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://www.transparenttextures.com/patterns/old-map.png');
    opacity: 0.1;
    pointer-events: none;
}

/* ===== FOOTER WAVE ANIMATION ===== */

.footer-reference::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' fill='%231a2640'/%3E%3C/svg%3E");
    background-size: cover;
}

/* ===== LOADING SHIMMER ===== */

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.loading-shimmer {
    background: linear-gradient(90deg,
            #f0e6d3 25%,
            #fff5e6 50%,
            #f0e6d3 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* ===== TYPEWRITER EFFECT FOR HEADERS ===== */

@keyframes typewriter {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blinkCursor {

    0%,
    100% {
        border-right-color: var(--gold);
    }

    50% {
        border-right-color: transparent;
    }
}

/* ===== SMOOTH SCROLLING ===== */

html {
    scroll-behavior: smooth;
}

/* ===== REDUCED MOTION PREFERENCE ===== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}