@layer global, demo, button_design, typing_effect;


@layer global {
    @font-face {
        font-family: "cp-semibold";
        src: url("assets/fonts/chakra-petch/chakra-petch-semibold.ttf");
    }

    @font-face {
        font-family: "cp-bold";
        src: url("assets/fonts/chakra-petch/chakra-petch-bold.ttf");
    }

    @font-face {
        font-family: "jb-mono";
        src: url("assets/fonts/jetbrains-mono/jetbrains-mono-variable.ttf");
    }

    /* wellfleet-regular - latin */
    /*https://gwfh.mranftl.com/fonts/wellfleet?subsets=latin*/
    @font-face {
      font-family: 'Wellfleet';
      font-style: normal;
      font-weight: 400;
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      src: url('assets/fonts/wellfleet-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* roboto-regular - latin */
    /*https://gwfh.mranftl.com/fonts/roboto?subsets=latin*/
    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      src: url('assets/fonts/roboto-v51-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* exo-regular - latin */
    /*https://gwfh.mranftl.com/fonts/exo?subsets=latin*/
    @font-face {
      font-family: 'Exo';
      font-style: normal;
      font-weight: 400;
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      src: url('assets/fonts/exo-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    @font-face {
      font-family: 'Libertinus Serif';
      font-style: normal;
      font-weight: 800;
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      src: url('assets/fonts/libertinus-serif-v1-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    * {
        /*padding: 0;  Can conflict with tailwind.js*/
        /*margin: 0;  Can conflict with tailwind.js*/
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
        scrollbar-gutter: stable;
    }

    :root {
        list-style: none;
        font-family: jb-mono,  sans-serif;
    }

    /*.process-flow {*/
    /*    display: flex;*/
    /*    align-items: center;*/
    /*    justify-content: center;*/
    /*    !*gap: 40px;*!*/
    /*    flex-wrap: wrap;*/
    /*}*/

    .step {
        background: white;
        padding: 20px 30px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        position: relative;
        min-width: 120px;
        text-align: center;
        font-weight: bold;
    }


    /* Optional: Hover effect */
    .step:hover {
        background: #007bff;
        color: white;
        transform: scale(1.09);
        transition: 0.3s;
    }

    .inset-effect{
        border: 10px inset hsla(210,30%,50%,0.4);
    }

    @view-transition {
        /*This should help smooth page transitions in a multipage app
        preventing shifting elements*/
        navigation: auto;
    }



    /* From https://css.glass */
    .glossy {
        /*background: rgba(255, 255, 255, 0.21);*/
        background: hsla(190, 20%, 38%, 0.21);
        /*background: hsla(240 40% 20%/0.4);*/
        /*border-radius: 16px;*/
        /*box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/
        backdrop-filter: blur(13.2px);
        -webkit-backdrop-filter: blur(13.2px);
        border: 1px solid rgba(255, 255, 255, 0.32);
    }

    .pageFade {
        animation: pageFadeIn 0.6s ease forwards;
    }

    @keyframes pageFadeIn {
        from {
            opacity: 0;
            filter: blur(5px);
        }
        to {
            opacity: 1;
            filter: blur(0);
        }
    }

    @keyframes fadeInChar {
        from {
            opacity: 0;
            transform: translateY(20px);
            filter: blur(5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    .fade-text span{
        display: inline-block;
        opacity: 0;
        animation: fadeInChar 0.9s ease forwards;
    }

    .fade-text2 span{
        display: inline-block;
        opacity: 0;
        animation: fadeInChar 0.9s ease forwards;
    }
    /* Delay each character progressively */
    .fade-text span:nth-child(1) { animation-delay: 0s; }
    .fade-text span:nth-child(2) { animation-delay: 0.1s; }
    .fade-text span:nth-child(3) { animation-delay: 0.15s; }
    .fade-text span:nth-child(4) { animation-delay: 0.2s; }
    .fade-text span:nth-child(5) { animation-delay: 0.25s; }
    .fade-text span:nth-child(6) { animation-delay: 0.3s; }
    .fade-text span:nth-child(7) { animation-delay: 0.35s; }
    .fade-text span:nth-child(8) { animation-delay: 0.4s; }
    .fade-text span:nth-child(9) { animation-delay: 0.45s; }
    .fade-text2 span:nth-child(1) { animation-delay: 0.55s; }
    .fade-text2 span:nth-child(2) { animation-delay: 0.6s; }
    .fade-text2 span:nth-child(3) { animation-delay: 0.65s; }
    .fade-text2 span:nth-child(4) { animation-delay: 0.7s; }
    .fade-text2 span:nth-child(5) { animation-delay: 0.75s; }
    .fade-text2 span:nth-child(6) { animation-delay: 0.8s; }
    .fade-text2 span:nth-child(7) { animation-delay: 0.85s; }
    .fade-text2 span:nth-child(8) { animation-delay: 0.9s; }
    .fade-text2 span:nth-child(9) { animation-delay: 0.95s; }
    .fade-text2 span:nth-child(10) { animation-delay: 1.0s; }
    .fade-text2 span:nth-child(11) { animation-delay: 1.1s; }
}

@layer button_design {
    @import url(https://fonts.googleapis.com/css?family=Montserrat);

    .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100vh;
        width: 100vw;
        text-align: center;
    }

    button {
        font-family: "Montserrat", sans-serif;
        text-transform: uppercase;
    }

    button {
        position: relative;
        border: none;
        /*font-size: 18px;*/
        transition: color 0.5s, transform 0.2s, background-color 0.2s;
        outline: none;
        border-radius: 3px;
        margin: 0 10px;
        /*padding: 23px 33px;*/
        /*border: 3px solid transparent;*/
    }
    button:active {
        transform: translateY(3px);
    }
    button::after, button::before {
        border-radius: 3px;
    }

    .material-bubble {
        background-color: transparent;
        color: #1b1b20;
        border: none;
        overflow: hidden;
        box-shadow: none;
    }
    .material-bubble:hover {
        /*color: #e6e6e6;*/
        color: hsla(0,0%,95%,1);
        /*color: white;*/
        /*color: red;*/
        z-index:2;
        /*color: hsla(220,30%,90%,1);*/
    }
    .material-bubble::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 3px solid #1b1b20;
        transition: opacity 0.3s, border 0.3s;
    }
    .material-bubble:hover::before {
        opacity: 0;
    }
    .material-bubble::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background-color: hsla(220,10%,35%,1);
        border-color: transparent;
        /*border-radius: 50%;*/
        border-radius: 40%;
        transform: translate(-10px, -70px) scale(0.1);
        opacity: 0;
        z-index: -1;
        /*z-index: 1;*/
        transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
    }
    .material-bubble:hover::after {
        opacity: 1;
        transform-origin: 100px 100px;
        transform: scale(1) translate(-10px, -70px);
    }

}


/*@layer typing_effect {*/
/*.typing::after {*/
/*  content: "";*/
/*  display: inline-block;*/
/*  width: 2px;*/
/*  height: 1em;*/
/*  background: currentColor;*/
/*  margin-left: 2px;*/
/*  animation: blink .8s infinite;*/
/*}*/

/*@keyframes blink {*/
/*  50% {*/
/*    opacity: 0;*/
/*  }*/
/*}*/
/*}*/