/* =========================================
   HOME.CSS (FULL REPLACEMENT)
   Hero video fills viewport UNDER the nav
   No x-scroll, no y-scroll on homepage
   ========================================= */

/* Safety: remove stray default spacing and prevent x-scroll */
html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Only lock scrolling on the homepage */
body.home-page {
    height: 100dvh;
    overflow: hidden;
}

/* =========================================
   HERO CONTAINER
   - Sits under nav
   - Exactly fills visible screen space
   ========================================= */
body.home-page .container {
    position: relative;
    width: 100vw;

    /* Fill the viewport BELOW the sticky nav */
    height: calc(100dvh - var(--nav-height));

    /* Push content below nav so it doesn't sit behind it */
    /* margin-top: var(--nav-height); */

    overflow: hidden; /* crop video edges, no scrollbars */
    display: block;
}

/* =========================================
   VIDEO
   - Always covers container
   - Crops sides as needed
   ========================================= */
body.home-page .container video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;        /* fill without distortion */
    object-position: center;  /* crop from centre */
    display: block;
}

/* Optional: if you ever want a slight dark overlay for readability
body.home-page .container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.35));
    pointer-events: none;
    z-index: 1;
}
*/

/* =========================================
   OVERLAYS
   ========================================= */

/* H1 overlay wrapper */
body.home-page .hero-title {
    position: absolute;
    top: clamp(1rem, 5vh, 4rem);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;

    z-index: 5; /* above video */
    pointer-events: none; /* title shouldn't block clicks */
}

body.home-page .hero-title h1 {
    font-size: 10rem;
    margin: 0;
}

/* Join button overlay */
body.home-page .join-button {
    position: absolute;
    left: 50%;
    bottom: clamp(1.5rem, 8vh, 20%);
    transform: translateX(-50%);

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 1rem 2rem;
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
    background: var(--gradient-main);

    text-decoration: none;
    cursor: pointer;

    z-index: 10; /* above everything */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.home-page .join-button p {
    margin: 0;
    font-family: 'Obsidian', Arial, sans-serif;
    font-size: 3rem;
    color: white;
}

/* Hover */
body.home-page .join-button:hover {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 0 10px var(--glow-colour);
}

.scroll-cue {
  font-size: 3rem;
  opacity: 0.75;
  animation: scrollHint 2s ease-in-out infinite;
}

@keyframes scrollHint {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(8px); }
  100% { transform: translateX(0); }
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1080px) {
    body.home-page .hero-title h1 {
        font-size: 7.5rem;
    }

    body.home-page .join-button p {
        font-size: 1.5rem;
    }

    .scroll-cue {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    body.home-page .hero-title h1 {
        font-size: 5rem;
    }

    body.home-page .join-button p {
        font-size: 1.2rem;
    }

    .scroll-cue {
        font-size: 1.2rem;
    }
}