.home-container {
    font-size:2.7em;
    line-height:1.1em;
}

.home-content p {
    hyphens: manual;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
}

.home-content .extra-info {
    font-size: .5em;
    line-height:1.2;
    font-weight: normal;
    margin: 0;
}

.bg {
    width:100%;
    height:100%;
    background:black;
}

/* OPENING VIDEO */
.opening-video {
    position: fixed;
    z-index:10;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    width: 100vw;  /* fallback for Safari 14 and older browsers */
    width: 100dvw;
    height: 100vh; /* fallback for Safari 14 and older browsers */
    height: 100dvh;
    cursor:pointer; 

    /* Dynamic mask sizing based on viewport and mask aspect ratio */
    --viewport-aspect: calc(100vw / 100vh);
    --mask-aspect-ratio: 1; /* fallback, will be overridden by PHP */

    /* Calculate required size to cover viewport completely */
    --mask-size-width: calc(max(100vw, 100vh * var(--mask-aspect-ratio)) * 1.2);
    --mask-size-height: calc(max(100vh, 100vw / var(--mask-aspect-ratio)) * 1.2);
    --mask-size-start: max(var(--mask-size-width), var(--mask-size-height));

    -webkit-mask-size: var(--mask-size-start);
    mask-size: var(--mask-size-start);

    -webkit-mask-image: var(--mask-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;

    mask-image: var(--mask-url);
    mask-repeat: no-repeat;
    mask-position: center;
}

.opening-video iframe, .opening-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* need this or else the iframe will intercept all other click events I have in js */
    pointer-events:none;
}

/* Silo-specific overrides removed - now using dynamic sizing */
.opening-video {
    animation-duration: 2s;
}

.silo-BH_bulb, .silo-BH_iron {
    animation-duration: 2.5s;
}

.silo-BH_glow-roach01,  .silo-BH_Parrot01, .silo-BH_Violin01 {
    animation-duration: 3s;
}

.opening-video.iris-out {
    animation-name: shrink;
    transition-timing-function: cubic-bezier(0.75, 0.0, 1.0, 0.75);
    animation-fill-mode: forwards;
}

@keyframes shrink {
    0% {
        mask-size: var(--mask-size-start);
        -webkit-mask-size: var(--mask-size-start);
    }
    100% {
        mask-size: 0vw; /* fallback for Safari 14 and older browsers */
        mask-size: 0dvw;
        -webkit-mask-size: 0vw; /* fallback for Safari 14 and older browsers */
        -webkit-mask-size: 0dvw;
    }
}

/* CUSTOM CURSOR */
.custom-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    color: white;
    mix-blend-mode: difference;

    transition: opacity 0.5s ease-in-out;
}

/* MEDIA QUERIES */
@media (max-width: 800px) {
    .home-container {
        font-size: 1.5em;
    }

    .nav-home {
        padding-bottom: var(--margin);
    }

    .home-content.unit {
        gap: var(--margin); /*Keep gap between .about and .extra-info same as between header and .about*/
    }

    .home-content p {
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
    }

    .home-content .extra-info {
        font-size: .75em;
    }

    /* Silo sizing now handled dynamically - no mobile overrides needed */
}