@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    /* BioVida brand */
    --font-display: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --color-primary: #35bbab;
    --color-background-light: #f9fafa;
    --color-background-dark: #22262a;
}

.select2-container--default .select2-selection--single {
    min-height: 46px;
    border: 1px solid #dde4e3;
    border-radius: 0.75rem;
    background: #fff;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 1rem;
    padding-right: 2.5rem;
    color: #121716;
    font-size: 0.875rem;
    line-height: 46px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
    right: 0.75rem;
}

.select2-dropdown {
    border-color: #dde4e3;
    border-radius: 0.75rem;
    overflow: hidden;
    z-index: 9999;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: #35bbab;
}

/* ── Landing page ── */
@layer components {
    [data-landing-header] {
        @apply fixed inset-x-0 top-0 z-50 transition-all duration-500;
    }

    [data-landing-header].is-scrolled {
        @apply border-b border-[#dde4e3]/60 bg-white/80 shadow-sm backdrop-blur-xl;
    }

    [data-landing-header='light'],
    [data-landing-header='light'].is-scrolled {
        @apply border-b border-[#bccac0]/50 bg-white/95 shadow-sm backdrop-blur-xl;
    }

    [data-landing-header='light'] .landing-nav-link,
    [data-landing-header='light'] .landing-brand-text {
        @apply text-[#171d19];
    }

    [data-landing-header]:not(.is-scrolled) .landing-nav-link {
        @apply text-white/80 hover:text-white;
    }

    [data-landing-header]:not(.is-scrolled) .landing-nav-cta {
        @apply border-white/30 bg-white/10 text-white backdrop-blur hover:border-white hover:bg-white/20;
    }

    [data-landing-header]:not(.is-scrolled) .landing-brand-text {
        @apply text-white;
    }

    [data-landing-header]:not(.is-scrolled) .landing-brand-sub {
        @apply text-white/50;
    }

    [data-landing-header].is-scrolled .landing-nav-link {
        @apply text-[#68827f] hover:text-primary;
    }

    [data-landing-header].is-scrolled .landing-nav-cta {
        @apply border-primary/20 bg-white text-primary hover:border-primary;
    }

    [data-landing-header].is-scrolled .landing-brand-text {
        @apply text-[#121716];
    }

    [data-landing-header].is-scrolled .landing-brand-sub {
        @apply text-[#68827f];
    }

    [data-reveal] {
        @apply translate-y-8 opacity-0 transition-all duration-700 ease-out;
    }

    [data-reveal].is-visible {
        @apply translate-y-0 opacity-100;
    }

    [data-reveal-delay='1'] {
        transition-delay: 100ms;
    }

    [data-reveal-delay='2'] {
        transition-delay: 200ms;
    }

    [data-reveal-delay='3'] {
        transition-delay: 300ms;
    }

    [data-reveal-delay='4'] {
        transition-delay: 400ms;
    }

    .landing-hero-gradient {
        background:
            radial-gradient(ellipse 80% 60% at 20% 10%, rgba(53, 187, 171, 0.35), transparent 60%),
            radial-gradient(ellipse 60% 50% at 80% 20%, rgba(16, 185, 129, 0.2), transparent 55%),
            radial-gradient(ellipse 50% 40% at 50% 80%, rgba(53, 187, 171, 0.15), transparent 50%),
            linear-gradient(165deg, #0d1a18 0%, #111b1a 40%, #0a1412 100%);
    }

    .landing-mesh {
        background-image:
            radial-gradient(at 27% 37%, rgba(53, 187, 171, 0.18) 0, transparent 50%),
            radial-gradient(at 97% 21%, rgba(16, 185, 129, 0.12) 0, transparent 50%),
            radial-gradient(at 52% 99%, rgba(53, 187, 171, 0.1) 0, transparent 50%);
    }

    .landing-glass {
        @apply border border-white/10 bg-white/5 backdrop-blur-xl;
    }

    .landing-cycle-nav-item {
        @apply relative flex items-center gap-4 rounded-2xl px-5 py-4 text-left transition-all duration-300;
    }

    .landing-cycle-nav-item.is-active {
        @apply bg-primary/10 text-primary;
    }

    .landing-cycle-nav-item.is-active::before {
        content: '';
        @apply absolute inset-y-3 left-0 w-1 rounded-full bg-primary;
    }

    .landing-marquee {
        animation: landing-marquee 28s linear infinite;
    }

    @keyframes landing-marquee {
        0% {
            transform: translateX(0);
        }

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

    .landing-float {
        animation: landing-float 6s ease-in-out infinite;
    }

    .landing-float-delayed {
        animation: landing-float 6s ease-in-out 2s infinite;
    }

    @keyframes landing-float {
        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-12px);
        }
    }

    .landing-gradient-text {
        @apply bg-gradient-to-r from-primary via-emerald-300 to-primary bg-clip-text text-transparent;
    }

    .landing-mission-block {
        @apply grid overflow-hidden rounded-2xl shadow-2xl shadow-primary/10 md:min-h-[30rem] md:grid-cols-2 lg:min-h-[34rem];
    }

    .landing-mission-mosaic {
        @apply grid h-[20rem] grid-cols-2 grid-rows-2 gap-1 bg-[#dde4e3] sm:h-[24rem] md:h-full md:min-h-[30rem] lg:min-h-[34rem];
    }

    .landing-mission-photo {
        @apply relative min-h-0 overflow-hidden;
    }

    .landing-mission-photo img {
        @apply absolute inset-0 size-full object-cover;
    }

    .landing-mission-panel {
        @apply flex flex-col justify-center bg-[#1a5c55] px-8 py-10 text-white sm:px-10 md:px-12 md:py-12 lg:px-14;
    }

    .landing-mission-panel h2,
    .landing-mission-panel p {
        @apply text-white;
    }

    .lp-pattern {
        background-image: radial-gradient(circle at 2px 2px, rgba(0, 105, 72, 0.04) 1px, transparent 0);
        background-size: 24px 24px;
    }

    .lp-glass {
        @apply border border-white/30 bg-white/85 backdrop-blur-xl;
    }

    .lp-hero-b2b {
        background:
            radial-gradient(circle at top right, rgba(0, 105, 72, 0.08), transparent 55%),
            radial-gradient(circle at bottom left, rgba(0, 81, 213, 0.05), transparent 50%);
    }

    .lp-bento-card {
        @apply transition duration-300;
    }

    .lp-bento-card:hover {
        @apply -translate-y-1 shadow-xl shadow-[#006948]/10;
    }

    .landing-audience-card {
        @apply relative overflow-hidden rounded-[2rem] border border-[#dde4e3] bg-white p-8 shadow-sm transition duration-500 hover:-translate-y-1 hover:border-primary/40 hover:shadow-2xl hover:shadow-primary/10;
    }

    .lp-oportunidade-hero {
        background:
            radial-gradient(ellipse 70% 55% at 85% 15%, rgba(53, 187, 171, 0.35), transparent 60%),
            radial-gradient(ellipse 50% 45% at 10% 80%, rgba(0, 105, 72, 0.25), transparent 55%),
            linear-gradient(160deg, #0a1f1c 0%, #0f2a26 45%, #081614 100%);
    }

    .lp-oportunidade-pillar-nav-item {
        @apply relative flex w-full items-center gap-4 rounded-2xl px-5 py-4 text-left transition-all duration-300;
    }

    .lp-oportunidade-pillar-nav-item.is-active {
        @apply bg-primary/10 text-primary;
    }

    .lp-oportunidade-pillar-nav-item.is-active::before {
        content: '';
        @apply absolute inset-y-3 left-0 w-1 rounded-full bg-primary;
    }

    .lp-oportunidade-stat {
        @apply rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur-md;
    }

    @media (prefers-reduced-motion: reduce) {
        [data-reveal] {
            @apply translate-y-0 opacity-100;
            transition: none;
        }

        .landing-marquee,
        .landing-float,
        .landing-float-delayed {
            animation: none;
        }
    }
}