@import "tailwindcss";
@import "./fonts.css";
@plugin "./typography.js";
@plugin "./button.js";
@plugin "./curve-gradient.js";
@plugin "./form-field.js";

@theme {
    --font-poppins: "Inter Tight", sans-serif;
    /*--font-poppins: "Inter", sans-serif;*/

    --color-brand-green-1: #58823a;
    --color-brand-green-2: #3c8a71;
    --color-brand-green-3: #d8fb5a;
    --color-brand-green-4: #7bc6ae;
    --color-brand-green-5: #245243;

    --color-light-1: #fbfdfc;
    --color-light-2: #F7F9F8;

    --color-brand-dark-1: #1a211e;
    --color-brand-dark-2: #5f6563;

    --color-brand-gray-1: #d7dad9;
    --color-brand-gray-2: #f7f7f7;

    --curve-1: circle at 0% 0%, var(--color-1, #1a211e), var(--color-1, #1a211e) 70%, var(--color-2, #fff) 70%, var(--color-2, #fff);
    --curve-2: circle at 100% 0%, var(--color-1, #1a211e), var(--color-1, #1a211e) 70%, var(--color-2, #fff) 70%, var(--color-2, #fff);
    --curve-3: circle at 0% 100%, var(--color-1, #1a211e), var(--color-1, #1a211e) 70%, var(--color-2, #fff) 70%, var(--color-2, #fff);
    --curve-4: circle at 100% 100%, var(--color-1, #1a211e), var(--color-1, #1a211e) 70%, var(--color-2, #fff) 70%, var(--color-2, #fff);

    --gradient-curve1: radial-gradient(circle at 0% 100%, var(--color-1, #1a211e), var(--color-1, #1a211e) 70%, var(--color-2, #fff) 70%, var(--color-2, #fff));
    --gradient-curve2: radial-gradient(circle at 100% 100%, #1a211e, #1a211e 70%, #fff 70%, #fff);
    --gradient-curve3: radial-gradient(circle at 0% 100%, #1a211e, #1a211e 70%, #fff 70%, #fff);
    --gradient-curve4: radial-gradient(circle at 0% 100%, #1a211e, #1a211e 70%, #fff 70%, #fff);



    /*--card-height: 40vw;*/
    /*--card-margin: 4vw;*/
    /*--card-top-offset: 1em;*/
    /*--numcards: 4;*/
    /*--outline-width: 0px;*/




}

@layer base {
    html {
        scroll-behavior: smooth;
    }
    body{
        line-height: 160%;
        /*padding: 0.5em 1em 0 1em;*/
    }
    button,
    label[for],
    label:has(input),
    [type="checkbox"],
    [type="radio"],
    summary {
        @apply cursor-pointer list-none;
    }
    dialog {
        @apply max-h-[unset] max-w-[unset];
    }
    [type="number"] {
        -moz-appearance: textfield;
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
    }
    [type="search"]::-webkit-search-decoration,
    [type="search"]::-webkit-search-cancel-button,
    [type="search"]::-webkit-search-results-button,
    [type="search"]::-webkit-search-results-decoration {
        -webkit-appearance: none;
    }
    address {
        font-style: normal;
    }
}

@utility container {
    @apply mx-auto px-3.5 2xl:max-w-[1400px];
}

@layer components {
    .form-field {
        @apply block w-full bg-[#ECF2FD] p-3 rounded-md border border-[#E2E8F0];
        &:is(textarea) {
            @apply min-h-[120px] resize-none;
        }
        + .form-error {
            @apply mt-2;
        }
        &:user-invalid {
            @apply border-red-800;
            + .form-error {
                @apply block;
            }
        }
    }
    .form-error {
        @apply text-red-800 text-sm hidden;
    }
    .form-field-wrapper {
        label {
            & + .form-field {
                @apply mt-1;
            }
            &:has(+ .form-field:user-invalid) {
                @apply !text-red-800;
            }
        }
    }
}

.curves{
    position: relative;
    &:before, &:after{
        content: "";
        position: absolute;
        left: -30px;
        top: 0;
        height: 20px;
        aspect-ratio: 1;
        background-image: var(--gradient-curve1);
    }
    &:after{
        background-image: var(--gradient-curve2);
        left: 230px;
    }

}


.sticky-container {
    position: relative;
    height: 200vh; /* This controls how long the section stays fixed */
}

.sticky-inner {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}



/* Animation */
@supports (animation-timeline: works) {

    @scroll-timeline cards-element-scrolls-in-body {
        source: selector(body);
        scroll-offsets:
            selector(#cards) start 1,
            selector(#cards) start 0
    ;
        start: selector(#cards) start 1;
        end: selector(#cards) start 0;
        time-range: 4s;
    }

    .card {
        --index0: calc(var(--index) - 1);
        --reverse-index: calc(var(--numcards) - var(--index0));
        --reverse-index0: calc(var(--reverse-index) - 1);
    }

    .card__content {
        transform-origin: 50% 0%;
        will-change: transform;

        --duration: calc(var(--reverse-index0) * 1s);
        --delay: calc(var(--index0) * 1s);

        animation: var(--duration) linear scale var(--delay) forwards;
        animation-timeline: cards-element-scrolls-in-body;
    }

    @keyframes scale {
        to {
            transform:
                scale(calc(
                    1.1
                    -
                    calc(0.1 * var(--reverse-index))
                ));
        }
    }
}
.prose{
    ul{
        @apply list-disc list-inside;
    }
}