/* 
    Custom CSS for Limosa Adventure
    This file contains design system tokens, irregular organic styles, animations, and transitions.
*/

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Soporte para Viewport Units modernas en mobile */
@supports (height: 100svh) {
    .h-screen {
        height: 100svh;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #191b1f; /* limosa-dark */
}
::-webkit-scrollbar-thumb {
    background: #f2a03c; /* limosa-primary */
    border-radius: 5px;
    border: 2px solid #191b1f;
}
::-webkit-scrollbar-thumb:hover {
    background: #bb893f; /* limosa-accent */
}

/* Typography Enhancements */
h1, h2, h3, h4, h5, h6 {
    text-rendering: optimizeLegibility;
}

/* Text Shadows */
.text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.text-shadow-lg {
    text-shadow: 0 4px 16px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.6);
}

/* Organic Radii (Non-Square Adventures) */
.organic-radius-1 {
    border-radius: 30px 15px 40px 20px / 20px 40px 15px 30px;
}
.organic-radius-2 {
    border-radius: 40px 25px 35px 30px / 25px 35px 20px 40px;
}
.organic-radius-3 {
    border-radius: 20px 40px 25px 35px / 30px 20px 40px 25px;
}
.organic-radius-lg-1 {
    border-radius: 80px 40px 100px 30px / 50px 100px 40px 120px;
}
.organic-radius-lg-2 {
    border-radius: 120px 50px 80px 60px / 40px 90px 50px 110px;
}

/* Continuous Floating Animation */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(1.5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}
.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float-delayed {
    0% { transform: translateY(-10px) rotate(1deg); }
    50% { transform: translateY(5px) rotate(-1deg); }
    100% { transform: translateY(-10px) rotate(1deg); }
}
.animate-float-delayed {
    animation: float-delayed 8s ease-in-out infinite;
}

/* Hero Zoom Animation */
@keyframes hero-zoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}
.animate-hero-zoom {
    animation: hero-zoom 25s ease-out forwards;
}

/* Scroll Reveal Base & Directions */
.reveal-on-scroll {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
}

.reveal-up {
    transform: translateY(40px);
}
.reveal-down {
    transform: translateY(-40px);
}
.reveal-left {
    transform: translateX(40px);
}
.reveal-right {
    transform: translateX(-40px);
}
.reveal-scale {
    transform: scale(0.92);
}
.reveal-rotate-l {
    transform: translateY(30px) rotate(-3deg);
}
.reveal-rotate-r {
    transform: translateY(30px) rotate(3deg);
}

/* Scroll Reveal Triggered State */
.reveal-on-scroll.reveal-visible {
    opacity: 1;
    transform: translate(0) scale(1) rotate(0);
}

/* Staggered Delay Utilities */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Clip Paths for Asymmetrical Sections */
.clip-wave-bottom {
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
.clip-wave-top {
    clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
}
.clip-diagonal-1 {
    clip-path: polygon(0 0, 100% 4%, 100% 96%, 0 100%);
}
.clip-diagonal-2 {
    clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 96%);
}

/* Hover effects for organic elements */
.hover-adventure {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hover-adventure:hover {
    transform: translateY(-10px) scale(1.03) rotate(1deg);
    box-shadow: 0 25px 50px -12px rgba(242, 160, 60, 0.25);
}
.hover-adventure-alt:hover {
    transform: translateY(-10px) scale(1.03) rotate(-1deg);
    box-shadow: 0 25px 50px -12px rgba(187, 137, 63, 0.25);
}

/* Ken Burns Portadas Effect */
@keyframes kenburns-portada {
    0% { transform: scale(1) translate(0, 0); }
    50% { transform: scale(1.07) translate(-0.8%, -0.5%); }
    100% { transform: scale(1.03) translate(0.8%, 0.5%); }
}
.animate-kenburns {
    animation: kenburns-portada 24s ease-in-out infinite alternate;
}

/* Design System: Modern Gradients & Borders */
.bg-gradient-accent {
    background: linear-gradient(135deg, #f2a03c 0%, #bb893f 50%, #bb893f 100%);
}

.text-gradient-accent {
    background: linear-gradient(135deg, #bb893f 0%, #c1b9dd 50%, #a8c5dc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Gradient borders using mask-composite to allow organic radius support */
.gradient-border-accent {
    position: relative;
    z-index: 1;
}

.gradient-border-accent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 4px; /* Border thickness */
    background: linear-gradient(135deg, #f2a03c 0%, #bb893f 50%, #bb893f 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 10;
}

/* Oswald Headings Weight overrides to make them stronger */
.font-heading.font-light {
    font-weight: 600;
}
.font-heading.font-medium {
    font-weight: 600;
}