/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Important to prevent scrollbars with full-page elements */
    font-family: 'SF Pro Display', 'Helvetica Neue', 'Arial', sans-serif; /* Clean sans-serif font stack */
}

body {
    background-color: #1A1A2E; /* Deep desaturated indigo */
    color: #E0E0E0; /* Soft off-white for text */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Subtle Animated Background */
#pageBackground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind all other content */
    background: linear-gradient(45deg, #1A1A2E, #21264F, #004D40, #1A1A2E);
    background-size: 400% 400%;
    animation: gradientDrift 25s ease infinite;
}

@keyframes gradientDrift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.container {
    position: relative; /* For z-indexing if needed */
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 90%;
}

/* Clickable Text Button Styling */
.clickable-text-button {
    font-size: clamp(2rem, 8vw, 5rem); /* Responsive font size */
    font-weight: 300; /* Lighter font weight for a nonchalant feel */
    color: #E0E0E0;
    cursor: pointer;
    padding: 20px 30px;
    position: relative; /* For the underline pseudo-element */
    transition: opacity 0.7s ease-out, transform 0.7s ease-out; /* For fade/drift out */
    letter-spacing: 0.05em; /* Slight letter spacing */
}

.clickable-text-button::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 1px; /* Thin underline */
    background-color: rgba(224, 224, 224, 0.5); /* Muted underline color */
    bottom: 10px; /* Position underline */
    left: 50%;
    transform: translateX(-50%);
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth transition for underline */
}

.clickable-text-button:hover::after {
    width: 70%; /* Underline expands on hover */
}

.clickable-text-button:hover {
    color: #FFFFFF; /* Slightly brighter on hover */
    /* Optional: subtle text shadow for a soft glow */
    text-shadow: 0 0 15px rgba(224, 224, 224, 0.3);
}

.clickable-text-button:active {
    transform: scale(0.98); /* Subtle shrink on click */
    color: #c0c0c0; /* Slightly dimmer on active */
}

/* Class for button fade out animation */
.clickable-text-button.fade-out {
    opacity: 0;
    transform: translateY(30px); /* Drifts down slightly */
}

/* Video Container Styling */
.video-container {
    position: absolute; /* Position it in the center, overlapping where button was */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto; /* Will be determined by video-wrapper */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Initially hidden for fade-in */
    transition: opacity 1s ease-in 0.3s; /* Fade-in effect, delayed slightly */
}

.video-container.visible {
    opacity: 1;
}

.video-wrapper {
    position: relative;
    width: 90vw;   /* Responsive width for video */
    max-width: 960px; /* Max width on desktop */
    /* Maintain 16:9 aspect ratio (0.5625 = 9 / 16) */
    padding-top: calc(90vw * 0.5625); /* If max-width is hit, this might need adjustment or use min/max for padding-top */
    height: 0;     /* Required for the padding hack */
    background-color: #000; /* Black background for the video area */
    box-shadow: 0 0 30px rgba(0,0,0,0.5); /* Soft shadow for depth */
}

/* Adjust padding-top if max-width is reached */
@media (min-width: 1067px) { /* 960px / 0.9 = 1066.67px, so when 90vw > 960px */
    .video-wrapper {
        padding-top: calc(960px * 0.5625); /* Use max-width for aspect ratio calculation */
    }
}


.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* No border for a cleaner look, matching the "no controls" vibe */
}

/* Utility class for hiding elements */
.hidden {
    display: none !important;
}