/* CONFIGURACIÓN ESTÉTICA */
:root {
    --cursor-size: 300px;
    --spotlight-color: rgba(255, 255, 255, 0.08);
    --accent-color: #ffffff;
    --hover-accent: #D4FF00;
}

/* --- CONFIGURACIÓN LENIS & SCROLL SNAP --- */
html {
    height: auto;
    overflow-x: hidden;
}

@media (min-width: 768px) {
    html {
        scroll-snap-type: y mandatory;
    }
}

html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

body {
    background-color: #050505;
    color: #e5e5e5;
    font-family: 'Montserrat', sans-serif;
    cursor: none;
    min-height: 100vh;
    overflow-x: hidden;
}

body.loading {
    overflow: hidden !important;
}

/* --- ESTILOS GENERALES --- */
.snap-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    /* Mobile: Auto height, no snap */
    height: auto;
    min-height: 100vh;
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (min-width: 768px) {
    .snap-section {
        height: 100vh;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0;
    }
}

.free-section {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.dynamic-content {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
    filter: blur(10px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}

section.active-section .dynamic-content,
div.active-section .dynamic-content {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition-delay: 0.2s;
}

/* --- VIMEO BACKGROUND --- */
.vimeo-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease-in-out;
}

.vimeo-wrapper.active {
    transform: translate(-50%, -50%) scale(1) !important;
    pointer-events: auto;
    z-index: 50;
}

.vimeo-wrapper iframe {
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.77vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: filter 0.8s ease-in-out;
}

/* When active (Showreel mode), fit to screen (contain) instead of cover */
.vimeo-wrapper.active iframe {
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    object-fit: contain;
    /* For iframe, object-fit might not work directly, but max-width/height usually does if wrapper is set */
    max-width: 100vw;
    max-height: 100vh;
}

#blur-flashlight {
    --x: 50%;
    --y: 50%;
    backdrop-filter: blur(12px) brightness(0.4) grayscale(0.5) contrast(1.1);
    -webkit-backdrop-filter: blur(12px) brightness(0.4) grayscale(0.5) contrast(1.1);
    background-color: rgba(0, 0, 0, 0.1);
    mask-image: radial-gradient(circle 300px at var(--x) var(--y), transparent 0%, black 100%);
    -webkit-mask-image: radial-gradient(circle 300px at var(--x) var(--y), transparent 0%, black 100%);
    transition: opacity 1s ease;
    position: absolute;
    inset: 0;
    z-index: 10;
}

/* --- INTRO OVERLAY --- */
#hero-content.dynamic-content {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

#intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#intro-overlay.hidden-overlay {
    visibility: hidden;
    transition: visibility 0s 2s;
}

.ameba-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1vmin;
    height: 1vmin;
    background-color: transparent;
    box-shadow: 0 0 0 200vmax #000;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    z-index: 2;
    animation: ameba-float 4s ease-in-out infinite;
    transition: width 1.5s cubic-bezier(0.85, 0, 0.15, 1), height 1.5s cubic-bezier(0.85, 0, 0.15, 1);
    pointer-events: auto;
}

.ameba-hole.expand {
    width: 300vmax;
    height: 300vmax;
}

.font-header {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.section-title {
    font-size: clamp(4rem, 18vw, 20rem);
    line-height: 0.8;
    margin-bottom: 2rem;
    display: block;
    width: 100%;
}

.font-body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

.hover-accent:hover {
    color: var(--hover-accent) !important;
    opacity: 1 !important;
}

#cursor-light {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--cursor-size);
    height: var(--cursor-size);
    background: radial-gradient(circle, var(--spotlight-color) 0%, rgba(0, 0, 0, 0) 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: screen;
    transition: width 0.3s, height 0.3s, opacity 0.3s;
}

#cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10000;
    mix-blend-mode: difference;
    transition: opacity 0.3s;
}

@media (hover: none) and (pointer: coarse) {

    #cursor-light,
    #cursor-dot {
        display: none !important;
    }

    body {
        cursor: auto !important;
    }
}

.noise-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.project-card:hover .project-img {
    transform: scale(1.05);
    filter: grayscale(0%);
}

.project-img {
    transition: transform 0.7s ease, filter 0.5s ease;
    filter: grayscale(100%);
}

#project-modal,
#legal-modal {
    transition: opacity 0.5s ease-in-out, visibility 0.5s;
}

#project-modal.active,
#legal-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@keyframes ameba-float {
    0% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }

    25% {
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
    }

    50% {
        border-radius: 90% 60% 60% 100% / 100% 100% 60% 60%;
    }

    75% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }

    100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }
}

.ameba-card {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: border-radius;
    border-radius: 0% 0% 0% 0% / 0% 0% 0% 0%;
    box-shadow: 0px 0px 0px 0px transparent;
    transition: border-radius 1s ease-out, transform 0.5s ease-out, box-shadow 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
    z-index: 1;
}

.ameba-card:hover {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: ameba-float 6s ease-in-out infinite;
    animation-delay: 0.6s;
    transform: scale(0.96) translateZ(0);
    z-index: 10;
    box-shadow: 0 0 40px rgba(212, 255, 0, 0.15);
    /* Updated to green glow */
    transition: border-radius 0.6s ease-in-out, transform 0.4s ease-out, box-shadow 0.4s ease-out;
}

.ameba-card.no-ameba-hover:hover {
    animation: none;
    border-radius: 0;
    transform: none;
    box-shadow: none;
}

.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Estilos para textos legales */
.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 0.85rem;
}

.legal-table th,
.legal-table td {
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px;
    text-align: left;
}

.legal-table th {
    background: rgba(255, 255, 255, 0.05);
}

#legal-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #D4FF00;
    text-transform: uppercase;
}

#legal-content p,
#legal-content li {
    margin-bottom: 1rem;
    line-height: 1.8;
    color: rgba(229, 229, 229, 0.8);
}

#legal-content ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

#mobile-menu.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.fade-text {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease;
    opacity: 1;
    transform: translateY(0);
    display: inline-block;
    /* Removed fixed min-width here as it is handled in utility classes for responsiveness */
}

/* MARQUEE ANIMATION */
@keyframes marqueeScroll {

    /* Mueve el contenido desde 0% hasta -50% (mitad del ancho total, que es el contenido duplicado) */
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee-continuous {
    display: flex;
    white-space: nowrap;
    width: max-content;
    /* El ancho se adapta al contenido */
    animation: marqueeScroll 80s linear infinite;
}

/* On mobile/touch, remove flashlight mask and force full blur */
@media (hover: none) and (pointer: coarse) {
    #blur-flashlight {
        mask-image: none !important;
        -webkit-mask-image: none !important;
        background-color: rgba(0, 0, 0, 0.3) !important;
        /* Slightly darker to ensure text readability */
        backdrop-filter: blur(12px) brightness(0.6);
        -webkit-backdrop-filter: blur(12px) brightness(0.6);
    }
}

/* AMEBA BUTTON */
.ameba-btn {
    background-color: transparent !important;
    color: #D4FF00 !important;
    border: 1px solid #D4FF00;
    border-radius: 0;
    /* Empieza cuadrado */
    transition: all 0.3s ease;
}

.ameba-btn:hover {
    background-color: #D4FF00 !important;
    color: black !important;
    transform: scale(1.1);
    /* Standard hover scale */
}

/* Specific override for the Hero/Showreel button to keep the large zoom if desired, 
   or we can stick to a standard scale. The user said "maintain animation of zoom". 
   The previous value was scale(2). Let's keep it for the hero button specifically if possible, 
   or globally if that was the intent. 
   Given "En concreto, el boton de ver showreel se mantiene con la animación de zoom tambien",
   it implies others might not need such a huge zoom. 
   However, let's look at the class list in index.html: it has "ameba-btn". 
   I'll map .ameba-btn:hover to scale(1.05) or similar for general buttons, 
   and perhaps add a specific rule for the hero button if it has a unique ID or class, 
   but it just uses .ameba-btn. 
   Wait, the previous CSS had .ameba-btn:hover { transform: scale(2) !important; }. 
   This is very aggressive. I will reduce the global scale to something reasonable (1.1) 
   and specificly target the hero button for larger scale if needed, but likely scale(2) was too much 
   or specific to that button's previous design. 
   Actually, looking at the user request: "En concreto, el boton de ver showreel se mantiene con la animación de zoom tambien".
   This suggests the zoom IS desired. I will assume the user wants the zoom on the showreel button.
   I'll check if there's a specific ID for the showreel button context.
   It's inside #hero-content. 
*/

#hero-content .ameba-btn:hover {
    transform: scale(1.5) !important;
    /* Adjusted from 2 to be distinct but maybe not checking-my-vision-chart huge */
}