@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    @font-face {
        font-family: 'Poppins';
        font-weight: 700;
        src: url(/assets/Poppins-Bold-542ca15de37ab3bcf41f3ee5fdb9a8a4ba3346a27998196101a9a01a0f4ce0d8.ttf)
    }
    @font-face {
        font-family: 'Poppins';
        font-weight: 600;
        src: url(/assets/Poppins-SemiBold-a27799af8da2e1b65bc12769eb5f8da47b0689e24f5cf655a4fb58db80bd90b7.ttf)
    }
    @font-face {
        font-family: 'Poppins';
        font-weight: 500;
        src: url(/assets/Poppins-Medium-a0b175e6a264afe1ce1dd92dfed7dce5dc11456840b0485ba483b2af54814baf.ttf)
    }
    @font-face {
        font-family: 'Poppins';
        font-weight: 400;
        src: url(/assets/Poppins-Regular-4132d2d2b9443d42422ebb2769b3113c157e0cf08c91cfe555a6da5ac0a9c762.ttf)
    }
    @font-face {
        font-family: 'Poppins';
        font-weight: 300;
        src: url(/assets/Poppins-Light-4ce037c9246e2b381ddef69f59e4b33a75dc325d70fde111f085798e282df4c6.ttf)
    }
    @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        src: url(/assets/Montserrat-VariableFont_wght-c4ba59a15c07c450d8751855c26273c700a588b404a0e31217ba2bfe7b0d0ea7.ttf)
    }
    @font-face {
        font-family: 'Montserrat';
        font-style: italic;
        src: url(/assets/Montserrat-Italic-VariableFont_wght-b35c347cc867ea9d9f27e51d593a82bd3fc9579f3679cf42448552ea9780aa0f.ttf)
    }
    @font-face {
        font-family: 'Raleway';
        font-style: normal;
        src: url(/assets/Raleway-VariableFont_wght-0e1e84643940ff0766a82fbeda6e48f00f94a745077de320a834b281b2d20f1e.ttf)
    }
    @font-face {
        font-family: 'Raleway';
        font-style: italic;
        src: url(/assets/Raleway-Italic-VariableFont_wght-4c5941d22c455a92787bb92c9aef41d250d1e0c259d46cc9ce7667994d9811ad.ttf)
    }

    :root {
        --color-text-based: 0, 0, 0;       /* black */
        --color-text-primary: 147, 51, 234;              /* purple-600 */
        --color-text-muted: 75, 85, 99;         /* gray-600 */
        --color-text-based-hover: 150, 150, 150;
        --color-text-inverted: 225, 225, 225;
        --color-bg: 245, 245, 245;                 /* off-white */
        --color-primary: 168, 85, 247;              /* purple-500 */
        --color-primary-hover: 192, 132, 252;       /* purple-400 */
        --color-primary-press: 147, 51, 234;        /* purple-600 */
        --color-secondary: 21, 21, 21;
        --color-secondary-hover: 33, 33, 33;
        --color-secondary-press: 10, 10, 10;
        --color-bg-surface: 235, 235, 235;
        --color-bg-surface-accent: 200, 200, 200;
        --color-page-transition: 200, 200, 200;
        /* End theme vars */
        --page-transition-duration: 0ms;
        --nav-load-delay: var(--page-transition-duration);
        --nav-load-time: 500ms;
        --nav-link-load-time: 400ms;
        --nav-total-load-time: calc(var(--nav-link-load-time) + var(--nav-load-delay));
        --delay-between-content: 250ms;
        --content-load-delay: calc(var(--nav-total-load-time));
        --content-long-load-delay: calc(var(--content-load-delay) + var(--delay-between-content));
        --content-secondary-load-delay: calc(var(--content-long-load-delay) + var(--delay-between-content));
        --content-secondary-long-load-delay: calc(var(--content-secondary-load-delay) + var(--delay-between-content));
        --content-tertiary-load-delay: calc(var(--content-secondary-long-load-delay) + var(--delay-between-content));
        /* height screen minus footer */
        --screen-minus-footer: calc(100vh - 160px);
        --screen-minus-footer-large: calc(100vh - 212px);
    }

    .theme-dark {
        --color-text-based: 247, 257, 255; /* off-white */
        --color-text-primary: 192, 132, 252; /* purple-400 */
        --color-text-muted: 170, 170, 180;
        --color-text-based-hover: 255, 255, 255;
        --color-text-inverted: 18, 18, 18;
        --color-bg: 17, 24, 39; /* dark color */
        --color-primary: 168, 85, 247; /* purple-500 */
        --color-primary-hover: 192, 132, 252; /* purple-400 */
        --color-primary-press: 147, 51, 234; /* purple-600 */
        --color-secondary: 21, 21, 21;
        --color-secondary-hover: 33, 33, 33;
        --color-secondary-press: 10, 10, 10;
        --color-bg-surface: 31, 41, 55; /* dark color */
        --color-bg-surface-accent: 55, 65, 81;
        --color-page-transition: 31, 41, 55;
    }
}

@layer components {
    .btn {
        @apply inline-block px-5 py-3 rounded outline-none tracking-wider font-semibold text-sm sm:text-base text-based font-mono
    }
    .btn:focus {
        @apply outline-none ring ring-offset-2
    }
    .btn-primary {
        @apply bg-primary text-white hover:bg-primary-hover active:bg-primary-press border border-primary
    }
    .btn-primary:focus {
        @apply outline-none ring-primary;
    }
    .btn-secondary {
        @apply bg-secondary text-white hover:bg-gray-700 focus:ring-secondary focus:ring-opacity-50 active:bg-secondary-press border border-secondary
    }
    .btn-tertiary {
        @apply bg-none border border-primary hover:bg-gray-400 hover:dark:bg-gray-800 dark:hover:text-based  hover:bg-opacity-25 text-primary dark:text-primary-hover focus:ring-primary focus:ring-opacity-50
    }
    .section {
        @apply relative container mx-auto px-8 sm:px-12 h-screen flex items-center max-w-5xl
    }
    .page {
        @apply container mx-auto px-5 sm:px-8 md:px-12 flex flex-col items-center justify-center max-w-3xl mt-24 md:mt-32
    }
    .contact-section {
        @apply section h-fit
    }
    .experience-section {
        @apply relative h-fit p-6 sm:px-12 lg:px-12 container mx-auto flex flex-col items-center justify-center tracking-wide max-w-5xl
    }
    .grid-column {
        @apply flex flex-col items-center space-y-4 md:space-y-10 px-2 md:px-8 text-center py-6 md:py-12
    }

    .static-interactive {
        @apply hover:text-primary underline underline-offset-4
    }
    .link-primary {
        @apply hover-underline after:bg-primary
    }
    .based-link {
        @apply link-primary text-based hover:text-based-hover
    }
    .muted-link {
        @apply link-primary text-muted hover:text-based-hover
    }
    .accent-text {
        @apply text-primary hover-underline after:bg-primary hover:text-primary-hover active:text-primary-press active:after:bg-primary-press
    }
    .is-invalid {
        @apply border-red-500
    }
    .invalid-feedback {
        @apply text-red-500 text-sm
    }
    .contact-form-text-area {
        @apply px-1 py-2 bg-base w-full border-b-2 border-based focus:outline-none focus:border-primary text-area-transition
    }
    .min-h-with-footer {
        @apply min-h-screen-footer md:min-h-screen-footer-large
    }
}

@layer utilities {
    .hover-underline {
        display: inline-block;
        position: relative;
    }

    .hover-underline:after {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: 0;
        left: 0;
        transform-origin: bottom right;
        transition: transform 150ms ease-out;
    }

    .hover-underline:hover:after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }

    .hover-fade-in {
        display: inline-block;
        position: relative;
    }
    .hover-fade-in:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        left: 0;
        opacity: 0;
        background-color: rgb(var(--color-primary));
        transition: all 300ms ease-out;
    }
    .hover-fade-in:hover:after {
        opacity: 1;
        transform: translate3d(0, 0.2rem, 0);
    }

    .color-transition {
        transition: color 300ms ease-in-out;
    }

    .text-area-transition {
        transition: border-bottom 500ms ease-in-out, padding 500ms ease-out;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        transition: all 10000s ease-in-out 0s;
    }

}
/* hamburger menu with animation into X */
.menu-btn {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    justify-content: end;
    align-items: center;
    width: 28px;
    height: 40px;
    cursor: pointer;
    transition: all .5s ease-in-out;
    transform: scaleX(-1)
}
.menu-btn__burger {
    width: 28px;
    height: 3px;
    background-color: rgb(var(--color-text-based));
    border-radius: 1px;
    transition-property: transform, box-shadow;
    transition-timing-function: ease-in-out;
    transition-duration: .5s;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 3px;
    background-color: rgb(var(--color-text-based));
    border-radius: 1px;
    transition: transform .5s ease-in-out, width .5s ease-in-out;
}
.menu-btn__burger::before {
    transform: translateY(-9px);
    width: 38px;
}
.menu-btn__burger::after {
    transform: translateY(9px);
    width: 18px
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
    transition-property: transform, background, box-shadow;
    transform: translateX(50px);
    background: transparent;
    box-shadow: none;
}

.menu-btn.open .menu-btn__burger::before,
.menu-btn.open .menu-btn__burger::after {
    width: 35px;
    height: 3px
}

.menu-btn.open .menu-btn__burger::before {
    transform: translate(-50px) rotate(45deg);
}
.menu-btn.open .menu-btn__burger::after {
    transform: translate(-50px) rotate(-45deg);
}
.page-transition-1 {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -100%;
    height: 100%;
    z-index: 101;
    background-color: rgb(var(--color-page-transition));
    transition: bottom var(--page-transition-duration) cubic-bezier(0.76, 0, 0.24, 1);
}

.page-transition-1.is-active {
    bottom: 0;
}

.page-transition-2 {
    position: fixed;
    left: 0;
    right: 0;
    top: -100%;
    height: 100%;
    z-index: 101;
    background-color: rgb(var(--color-page-transition));
    transition: top var(--page-transition-duration) cubic-bezier(0.76, 0, 0.24, 1) ;
}

.page-transition-2.is-active {
    top: 0;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.parallelogram-parent {
    position: relative;
    align-self: center;
}
.parallelogram {
    width: 300px;
    height: 175px;
    transform: skew(20deg);
    transition: all 300ms ease-in-out;
    right: 2rem;
    position: absolute;
}

.parallelogram-parent:hover > .parallelogram-1 {
    transform: skew(20deg) translate(2rem, -10%);
}
.parallelogram-parent:hover > .parallelogram-2 {
    transform: skew(20deg) translate(-1rem, 10%);
}
.parallelogram-parent:hover > .parallelogram-3 {
    transform: skew(20deg) translate(-4rem, 30%);
}


.background-transition {
    transition: background-color 300ms ease-in-out;
}

.fade-in {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 1s;
    transform: translate(0, 24px);
}

.fade-in.appear {
    opacity: 1;
    transform: translate(0, 0);
}

.side-menu-fade-in {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 750ms;
    transition-delay: 500ms;
    transform: translateY(6vh);
}

.side-menu-fade-in.appear {
    opacity: 1;
    transform: translateY(0);
}

.scramble {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 500ms;
    transform: translate(0, 0);
}

.scramble.start-scramble {
    opacity: 1;
    transform: translate(0, 0);
}