.sticky-container-classes-showcase {
    background-color: var(--clr-background);
}

.sticky-container-after-classes-showcase {
    
}

#classes-showcase {
    /* background-color: black !important; */
    position: sticky;
    /* position: relative; */
    /* top: -8svh; */
    top: 9svh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4rem;
    row-gap: 6rem;
    margin: 5rem auto ;
    padding: 5rem 2rem;
    /* max-width: 1400px; */
    /* overflow: hidden; */
    /* border: 5px dotted yellow; */
    --_clr-primary: var(--clr-primary);
    --_clr-secondary: var(--clr-secondary);
    background:
    radial-gradient(ellipse 950% 100% at top, var(--clr-background) 3%, transparent 30%),
    /* radial-gradient(ellipse 950% 100% at bottom, var(--clr-background) 3%, transparent 18%), */
    radial-gradient(ellipse at left, color-mix(in srgb, var(--_clr-primary) 30%, var(--clr-background)), transparent),
    radial-gradient(ellipse at right, color-mix(in srgb, var(--_clr-secondary) 30%, var(--clr-background)), transparent);;
    /* margin-bottom: 230svh; */
    will-change: auto; /* Nie force GPU */
    transform: translateZ(0); /* Ale layer dla sticky */
}

#classes-showcase .container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* flex-wrap: wrap; */
    justify-content: center;
    justify-items: center;
    gap: 4rem;
    row-gap: 6rem;
    padding-block: 1rem 8rem;
    padding-inline: 10rem;
    width: 100%;
    /* max-width: 1600px; */
    /* max-width: 1000px; */
    /* overflow: hidden; */
    /* border: 5px dotted yellow; */
    will-change: auto;
}

#classes-showcase .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-m);
    border-radius: 80px;
    /* border: 3px dotted red; */
    /* perspective-origin: center; */
    perspective: 1000px;
    perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    width: 19rem;
    height: 19rem;
    aspect-ratio: 1/1 !important;
    /* margin-inline: 1rem; */
}

/* #classes-showcase .wrapper:first-of-type {
    margin-left: 4rem;
} */

#classes-showcase h1 {
    /* text-align: left; */
    font-size: var(--header-xxxl);
    margin-top: -20px;
    /* margin-bottom: var(--margin-s); */
    /* margin-inline: 5rem; */
    /* color: transparent; */
}

/* #classes-showcase h1.shadow {
    display: none;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(4);
    font-size: 6rem;
    color: color-mix(in srgb, var(--clr-text) 15%, transparent 85%);
    pointer-events: none;
} */


.class-card {
    --_after-opacity: 1;
    position: relative;
    border: none;
    background: white;
    /* background-image: var(--bg-card); */
    border-radius: var(--radius-xxxl);
    /* border: solid 5px black; */
    /* box-shadow: 10px 10px 0px black; */
    padding-block: var(--padding-s);
    text-align: center;
    text-decoration: none;
    width: 80%;
    height: 80%;
    /* max-width: 220px; */
    opacity: 1;
    /* height: fit-content; */
    -webkit-tap-highlight-color: transparent; /* Disable tap highlight on iOS */
    -webkit-touch-callout: none; /* Disable callout on iOS */
    -webkit-user-select: none; /* Disable text selection on iOS */
    user-select: none; /* Disable text selection */
    outline: none; /* Remove outline */
    cursor: pointer;
    z-index: 100;
    /* will-change: scroll-position, transform, scale, position; */
    /* backface-visibility: hidden; */
    transform-style: preserve-3d;
    scale: 1.1;
    transform: translateZ(1px);
    /* overflow: visible; */
    /* opacity: 0 !important; */
}

#classes-showcase .wrapper:hover .class-card::before {
    opacity: .25;
}

.class-card:active::before {
    opacity: 0.7 !important;
    transition: opacity .2s ease;
}

.class-card:focus::before {
    opacity: 0;
}
  
.class-card::before {
    content: "";
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    opacity: 0;
    transition: opacity .5s;
    background: radial-gradient(
      400px circle at var(--mouse-x) var(--mouse-y), 
      currentColor,
      transparent 50%
    );
    z-index: 30;
}

.class-card::after {
    content: "";
    scale: 1;
    border-radius: var(--radius-xxxl);
    height: 100%;
    width: 100%;
    inset: 0;
    opacity: 0;
    position: absolute;
    background: radial-gradient(circle at bottom right, currentColor 0%, color-mix(in srgb, white 30%, transparent) 110%);

    transform: translateZ(-50px);
    /* z-index: -10000001; */
    transition: scale .8s ease;
}

.class-card.active::after {
    scale: 1.12;
    opacity: 1;
}

#classes-showcase .wrapper:hover .class-card::after {
    transition: scale .8s ease;
    scale: 1.1;
}

/*
.class-card:hover .class-subject,
.class-card:hover .class-info {
    color: black;
    font-weight: bolder;
}

.class-card:hover .class-subject {
    animation: hover-card .3s ease-in-out forwards;
}

.class-card:hover .class-info {
    animation: hover-card-info .3s ease-in-out forwards;
} */

/* .class-card:hover .rozsz {
    margin-top: -0.5rem
} */

/* .class-card:hover > span,
.class-card:hover > svg {
    animation: hover-card-svg .3s ease-in-out forwards;
} */

/* @keyframes hover-card { from { scale: 1 } to { scale: 1.1 } }
@keyframes unhover-card { from { scale: 1.1 } to { scale: 1} }

@keyframes hover-card-info { from { font-size: 1rem; } to { font-size: 1.2rem; } }
@keyframes unhover-card-info { from { font-size: 1.2rem; } to { font-size: 1rem; } } */

/* @keyframes hover-card-svg { from { rotate: 0deg } to { opacity: 0.4; rotate: 10deg; } }
@keyframes unhover-card-svg { from { opacity: 0.4; rotate: 10deg; } to { rotate: 0deg } } */

.class-name {
    text-align: right;
    font-size: var(--header-m);
    font-weight: 600;
    color: currentColor;
    margin: 0 0 0.5rem;
    margin-inline: 2rem;
    z-index: 1;
    backface-visibility: hidden;
    /* transform: translateZ(18px); */
}

.class-subject {
    font-size: var(--header-s);
    color: var(--clr-text);
    /* margin: 0 0 0.5rem; */
    margin-inline: auto;
    /* transition: all 0.3s ease; */
    /* width: 100%; */
    z-index: 1;
    scale: 1.1;
    backface-visibility: hidden;
    text-transform: lowercase;
    /* transform: translateZ(50px); */
}

.class-subject.small {
    font-size: var(--font-xl);
}

.class-card:has(.class-subject.small) .class-name { 
    margin-bottom: 0;
}

.rozsz {
    padding-top: var(--padding-s);
    font-size: var(--font-m);
    color: var(--clr-text-unfocused);
    margin: 0;
    /* margin-bottom: .2rem; */
    /* transition: all 0.3s ease; */
    z-index: 1;
    backface-visibility: hidden;
    /* transform: translateZ(5px); */
}

.class-info {
    font-size: var(--font-m);
    font-weight: 650;
    color: currentColor;
    filter: brightness(.4);
    margin: 0;
    /* transition: all .1s ease-out; */
    white-space: nowrap;
    z-index: 1;
    scale: 1 !important;
    backface-visibility: hidden;
    /* transform: translateZ(10px); */
}

/* do ikon z svg z font awesome */
.class-card svg {
    pointer-events: none;
    position: absolute;
    width: 5.5rem;
    height: 5.5rem;
    opacity: 1;
    left: 5%;
    /* right: 0; */
    top: -22%;
    bottom: 0;
    z-index: -1;
    transform-origin: center;
    /* transition: .3s ease; */
    margin-inline: auto;    
    filter: drop-shadow( 0 -.2rem 0.75rem color-mix(in srgb, currentColor 35%, transparent));
    /* fill: color-mix(in srgb, currentColor 50%, white 50%)  */
    /* animation: unhover-card-svg .3s ease-in-out; */
    /* transform: translateZ(15px); */
}

.classes-showcase-scroll-indicator-holder {
    position: absolute;
    right: 2rem;
    height: calc(100% + 10rem);
    width: 1.5rem;
}

.classes-showcase-scroll-indicator-wrapper {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    top: 20rem;
    height: 12rem;
    width: 1.5rem;
    /* padding-top: 10rem; */

    /* background-color: blue; */
}


.classes-showcase-scroll-indicator-container {
    position: relative;
    /* top: 49svh; */
    height: 8rem;
    width: 100%;

    padding: .25rem;

    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 1rem;
    box-shadow: 0 .5rem .5rem color-mix(in srgb, black 25%, transparent);
    
    overflow: hidden;

}

.classes-showcase-scroll-indicator {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    background-color: white;
    box-shadow: 0 -.2rem 0.75rem color-mix(in srgb, white 80%, transparent);
    border-radius: .5rem;

}

.classes-showcase-scroll-indicator-wrapper a {
    position: relative;
    /* left: -0.25rem; */
    height: 2rem;
    width: 2rem;
    /* background-color: red; */
    animation: welcome-hint-arrow 3s ease infinite !important;

    z-index: 100000;
}

.classes-showcase-scroll-indicator-wrapper a:hover i {
    filter: drop-shadow(0 0.7rem 0.15rem #444);
    scale: 1.3;
}
.classes-showcase-scroll-indicator-wrapper i {
    position: relative;
    font-size: 2rem;
    color: rgba(0, 0, 0, 0.7);
    filter: drop-shadow(0 0.6rem 0.3rem #333);
    transition: all 0.3s ease;
}

@media (max-width: 1459px) {
    #about {
        mask: none !important;
        border-top: solid 1rem var(--clr-background) !important; 

    }
    #classes-showcase {
        position: relative;
        margin-bottom: -5rem;
    }
    #classes-showcase .container {
        grid-template-columns: 1fr 1fr;
    }
    .class-card::before {
        border-radius: inherit;
        content: "";
        height: 100%;
        left: 0px;
        opacity: 0;
        position: absolute;
        top: 0px;
        transition: opacity 500ms;
        width: 100%;
        background: radial-gradient(
          400px circle at var(--mouse-x) var(--mouse-y), 
          currentColor,
          transparent 40%
        );
        z-index: 30;
      }

      #classes-showcase h1 {
        position: sticky;
        top: 12svh;
        margin-bottom: -50rem;
        /* color: blue; */
        z-index: 0 !important;
      }

    .classes-showcase-scroll-indicator-holder {
        right: 1rem;
    }

    .classes-showcase-scroll-indicator-wrapper {
        position: sticky;
        top: 55svh;
    }
}

@media (max-width: 645px) {
    #classes-showcase .container {
        grid-template-columns: 1fr;
    }
}

/* @media (max-width: 1075px) and (min-width: 645px) {

    #classes-showcase .wrapper:nth-of-type(odd){
        justify-content: right;
        perspective-origin: 130%  50%;
        perspective: 1000px;
    }

    #classes-showcase .wrapper:nth-of-type(even){
        justify-content: left;
        perspective-origin: -30% 50%;
        perspective: 1000px;
    }

    #classes-showcase .wrapper:nth-of-type(7){
        justify-content: center;
        perspective-origin: center;
        perspective: 1000px;
    }
} */
@-moz-document url-prefix() {
    #classes-showcase {
        position: relative !important;
        top: auto !important;
    }
    
    .sticky-container-classes-showcase {
        height: auto !important;
    }
    
    #classes-showcase {
        padding-bottom: 15rem;
    }

    .sticky-container-after-classes-showcase {
        margin-top: -10rem !important;
    }
    
    
}