/* BODY */
html {
    background-color: #2839F5;
    height: 100%;
    height: -webkit-fill-available;
    transition: background-color 0.5s ease-in-out;
}

html.unmuted {
    background-color: #300C00;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    -webkit-overflow-scrolling: touch;
    background-image: url('images/fuzz-01.gif');
    background-size: contain;
    background-position: center;
}

/* Fix for main content to respect bottom safe area */
main {
    padding-bottom: env(safe-area-inset-bottom);
    height: 100vh;
    height: 100dvh;
}

/* Fix for bottom-positioned elements */
/* .flex-col.items-center.justify-end:last-child {
    margin-bottom: env(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
} */

/* VIDEO */
.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-container video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

/* Font definitions */
@font-face {
    font-family: 'Miniature';
    src: url('fonts/OTMiniature-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Watch';
    src: url('fonts/PPWatch-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Custom font classes */
.font-miniature {
    font-family: 'Miniature', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    font-style: italic;
    font-weight: 300;
}

.font-watch {
    font-family: 'Watch', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', serif;
    font-variant: small-caps;
    font-weight: 400;
}

/* Custom cursor styles */
.cursor-hidden { cursor: none !important; }

#custom-cursor-play,
#custom-cursor-external,
#custom-cursor-close {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    top: 0;
    left: 0;
}

/* Viewport height fixes */
body {
    min-height: 100vh;
    min-height: 100dvh;
}

:root {
    --full-viewport-height: 100vh;
    --visible-viewport-height: 100vh;
}

@supports (height: 100dvh) {
    :root {
        --full-viewport-height: 100dvh;
        --visible-viewport-height: 100dvh;
    }
}

#main-content {
    min-height: var(--full-viewport-height);
    height: var(--visible-viewport-height);
}

@media screen and (max-width: 767px) {
    /* On mobile devices, especially iOS Safari, use visible-viewport-height */
    #main-content {
        height: var(--visible-viewport-height); 
    }
}

/* Safe area insets */
/* .pb-safe { padding-bottom: env(safe-area-inset-bottom, 1rem); } */
/* .mb-safe { margin-bottom: env(safe-area-inset-bottom, 0.5rem); } */