/* Prevent horizontal scroll. Set on body alone, overflow-x is handed to the viewport, which phones
   still widen to fit content that starts off-screen (the AOS slide-ins). With html taking the
   viewport's value, body clips its own content instead. Browsers without clip keep hidden. */
html {
    overflow-x: clip;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #ffffff;
    color: #0a0a0a;
    overflow-x: hidden;
    overflow-x: clip;
}

/* Custom Utilities */
.text-highlight {
    position: relative;
    z-index: 1;
    display: inline-block;
}

.text-highlight::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: -2px;
    right: -2px;
    height: 12px;
    background-color: #FE0000;
    z-index: -1;
    transform: skewX(-12deg);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.glass-nav {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Lenis Recommended CSS */
html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* Websites teaser (figma-tutoring/index.html): a black piece and a red piece cut along the
   logo's zigzag. The red piece slides over to close the gap on hover or focus. */
.zz-dark {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 96% calc(100% - 12px), 70% 100%, 66% calc(100% - 12px), 40% 100%, 36% calc(100% - 12px), 10% 100%, 6% calc(100% - 12px), 0 100%);
}

.zz-red {
    margin-top: -4px;
    clip-path: polygon(0 12px, 6% 0, 10% 12px, 36% 0, 40% 12px, 66% 0, 70% 12px, 96% 0, 100% 12px, 100% 100%, 0 100%);
}

.zz-red span {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

.zz-red:hover span,
.zz-red:focus-visible span {
    text-decoration-color: currentColor;
}

/* The zigzag clip would cut off a normal outline, so focus shows as an inset ring plus the underline.
   The transparent inset outline is what Windows high-contrast themes paint instead. */
.zz-red:focus-visible {
    outline: 3px solid transparent;
    outline-offset: -15px;
    box-shadow: inset 0 0 0 3px #0a0a0a;
}

@media (min-width: 768px) {
    .zz-dark {
        clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 26%, 100% 30%, calc(100% - 12px) 56%, 100% 60%, calc(100% - 12px) 86%, 100% 90%, calc(100% - 4px) 100%, 0 100%);
    }

    .zz-red {
        margin-top: 0;
        margin-left: -4px;
        clip-path: polygon(12px 0, 100% 0, 100% 100%, 8px 100%, 12px 90%, 0 86%, 12px 60%, 0 56%, 12px 30%, 0 26%);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .zz-red {
        transition: transform .35s cubic-bezier(.2, 1.3, .3, 1);
    }

    /* Hovering anywhere on the pair moves the red piece, so it can't slide out from under the pointer. */
    .zz-pair:hover .zz-red,
    .zz-red:focus-visible {
        transform: translateY(-8px);
    }

    @media (min-width: 768px) {

        .zz-pair:hover .zz-red,
        .zz-red:focus-visible {
            transform: translateX(-8px);
        }
    }
}