/* ============================================
   LESSON ZERO - HOME PAGE STYLES
   Styles specific to the homepage (index.html)
   ============================================ */

/* ============================================
   BLUEPRINT GRID OVERLAY
   Creates the blue grid pattern that fades out on scroll
   ============================================ */
.grid-bg {
    position: fixed;        /* Stays in place while page scrolls */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;          /* vh = viewport height (100vh = full screen) */
    pointer-events: none;   /* Grid doesn't block clicks on content below */
    z-index: 2;             /* Layer 2: Above video (0) and overlay (1), below text (3) */

    /* Create grid pattern with two overlapping gradients */
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),        /* Horizontal lines */
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); /* Vertical lines */
    background-size: 40px 40px; /* Grid squares are 40px × 40px */

    transition: opacity 0.3s ease; /* Smooth fade when opacity changes */
}

/* ============================================
   HERO SECTION - Full screen landing area
   Z-INDEX LAYERS (bottom to top):
   0 = Video background
   1 = Dark overlay on video
   2 = Grid pattern
   3 = Text content (logo, tagline, scroll indicator)
   ============================================ */
.hero {
    position: relative;
    height: 100vh;          /* Full viewport height */
    min-height: 600px;      /* Minimum height for small screens */
    display: flex;          /* Flexbox for centering content */
    align-items: center;    /* Center vertically */
    justify-content: center; /* Center horizontally */
    overflow: hidden;       /* Hide anything that goes outside */
}

/* Container for the background video - stays fixed during scroll */
.hero-video-container {
    position: fixed;        /* Video stays in place while content scrolls over it */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;             /* Layer 0: Bottom-most layer */
}

/* The actual video element */
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* Video fills container without stretching */
    filter: brightness(0.4) saturate(0.8); /* Darkened and slightly desaturated */
    transition: filter 0.6s ease; /* Smooth transition when brightness changes */
}

/* Brighter video state (applied when grid fades out) */
.hero-video.bright {
    filter: brightness(0.85) saturate(1); /* Lighter and full color saturation */
}

/* Dark gradient overlay on top of video */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient gets darker toward bottom (top to bottom = 180deg) */
    background: linear-gradient(
        180deg,
        rgba(13, 27, 42, 0.4) 0%,    /* 40% dark at top */
        rgba(13, 27, 42, 0.6) 50%,   /* 60% dark at middle */
        rgba(13, 27, 42, 0.85) 100%  /* 85% dark at bottom */
    );
    z-index: 1;             /* Layer 1: Above video, below grid */
    transition: opacity 0.6s ease; /* Smooth fade in/out */
}

/* Hero text content container */
.hero-content {
    position: relative;
    z-index: 3;             /* Layer 3: On top of everything else */
    text-align: center;
    max-width: 1000px;
    padding: 2rem;
}

/* Main "Lesson Zero" heading */
.logo {
    font-family: rockwell, serif;
    /* clamp(min, preferred, max) = responsive font size
       - Min 3rem (48px) on small screens
       - Preferred 8vw (8% of viewport width)
       - Max 6rem (96px) on large screens */
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    letter-spacing: -0.02em; /* Slightly tighter letter spacing */
    margin-bottom: 0.5rem;
    opacity: 0;              /* Start invisible */
    transform: translateY(30px); /* Start 30px below final position */
    /* Animation: fadeUp over 1s, starting after 0.3s delay, keeps final state */
    animation: fadeUp 1s ease-out 0.3s forwards;
}

/* The word "Zero" in the logo (highlighted in yellow) */
.logo span {
    color: var(--yellow-highlight);
}

/* Tagline below the logo */
.tagline {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem); /* Responsive sizing */
    font-weight: 600;
    color: var(--white);
    line-height: 1.4;
    margin-bottom: 1.5rem;
    opacity: 0;              /* Start invisible */
    transform: translateY(20px); /* Start 20px below final position */
    /* Fades up 0.3s after logo (0.6s total delay) */
    animation: fadeUp 1s ease-out 0.6s forwards;
}

/* Hero description paragraphs */
.hero-description {
    margin-top: 1.5rem;
    opacity: 0;              /* Start invisible */
    transform: translateY(20px); /* Start 20px below final position */
    /* Fades up 0.6s after tagline (0.9s total delay) */
    animation: fadeUp 1s ease-out 0.9s forwards;
}

.hero-description p {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    line-height: 1.6;
    color: var(--blue-light);
    margin-bottom: 1rem;
}

.hero-description p:last-child {
    margin-bottom: 0;
}

/* "Scroll" indicator at bottom of hero section */
.scroll-indicator {
    position: absolute;
    bottom: 3rem;            /* 3rem from bottom of screen */
    left: 50%;               /* Start at horizontal center */
    z-index: 3;              /* Layer 3: Above everything */
    display: flex;
    flex-direction: column;  /* Stack text and line vertically */
    align-items: center;     /* Center horizontally */
    gap: 0.5rem;             /* Space between text and line */
    /* Transform: center horizontally, start 30px below */
    transform: translateX(-50%) translateY(30px);
    /* Fades up 0.6s after tagline (1.2s total delay) */
    animation: fadeUpScroll 1s ease-out 1.2s forwards;
    /* Opacity controlled by CSS variable (changes on scroll) */
    opacity: var(--scroll-indicator-opacity, 1);
}

/* "SCROLL" text */
.scroll-indicator span {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--blue-light);
}

/* Animated vertical line below "SCROLL" text */
.scroll-line {
    width: 1px;
    height: 60px;
    /* Gradient fades from blue to transparent (top to bottom) */
    background: linear-gradient(180deg, var(--blue-light), transparent);
    animation: pulse 2s ease-in-out infinite; /* Pulses forever */
}

/* ============================================
   ANIMATIONS
   These @keyframes define reusable animations
   ============================================ */

/* Fade up animation - element moves up while fading in */
@keyframes fadeUp {
    to {
        opacity: 1;              /* Fully visible */
        transform: translateY(0); /* At original position (no offset) */
    }
}

/* Fade up animation for scroll indicator (maintains horizontal centering) */
@keyframes fadeUpScroll {
    to {
        /* Move to original position while keeping centered */
        transform: translateY(0) translateX(-50%);
    }
}

/* Pulse animation - fades in and out continuously */
@keyframes pulse {
    0%, 100% { opacity: 0.3; }   /* Start and end at 30% opacity */
    50% { opacity: 1; }           /* Peak at 100% opacity */
}

/* ============================================
   SCROLLING CONTENT SECTIONS
   Content blocks that scroll over the fixed video
   ============================================ */
.scroll-section {
    position: relative;
    z-index: 1;              /* Above video layer */
    padding-top: 20vh;       /* 20% of viewport height before first content */
                             /* This creates overlap with hero section */
}

.scroll-content {
    position: relative;
    z-index: 1;
}

/* Individual content block (Problem, Approach, Result sections) */
.content-block {
    min-height: 100vh;       /* Each block is at least full screen height */
    display: flex;
    align-items: flex-end;   /* Align content to bottom of block */
    justify-content: flex-start; /* Align content to left */
    padding: 4rem;
    padding-bottom: 6rem;    /* Extra padding at bottom */
}

/* Inner container for text content (with dark background) */
.content-inner {
    max-width: 600px;
    background: var(--blue-deep); /* Dark background for readability */
    padding: 2.5rem;
    opacity: 0;              /* Start invisible */
    transform: translateY(40px); /* Start 40px below */
    /* Custom easing curve for smooth, natural animation */
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Visible state (triggered by Intersection Observer when scrolled into view) */
.content-inner.visible {
    opacity: 1;              /* Fully visible */
    transform: translateY(0); /* At original position */
}

/* ============================================
   BIO SECTION
   Short about section
   ============================================ */
.bio-section {
    background: var(--blue-dark);
    position: relative;
    z-index: 3;
    padding: 8rem 2rem;
}

.bio-container {
    max-width: 800px;
    margin: 0 auto;
}

.bio-content {
    text-align: center;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.bio-content.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   SERVICES TEASER SECTION
   Brief intro to services with link to full page
   ============================================ */
.services-teaser {
    background: var(--blue-deep);
    position: relative;
    z-index: 3;
    padding: 8rem 2rem;
}

.services-teaser-container {
    max-width: 800px;
    margin: 0 auto;
}

.services-teaser-content {
    text-align: center;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.services-teaser-content.visible {
    opacity: 1;
    transform: translateY(0);
}

.services-teaser-content .cta-button {
    margin-top: 2rem;
}

/* ============================================
   WORK SECTION
   Portfolio video grid on cream background
   ============================================ */
.work-section {
    background: var(--cream);
    color: var(--blue-deep);
    position: relative;
    z-index: 3;
    padding: 6rem 2rem;
}

.work-header {
    max-width: 1200px;
    margin: 0 auto 4rem;
    text-align: center;
}

.work-header .section-label {
    color: var(--blue-mid);
}

.work-header .section-heading {
    font-family: rockwell, serif;
    font-weight: 700;
    color: var(--blue-deep);
    font-size: clamp(2rem, 5vw, 3rem);
}

.work-header .section-text {
    color: var(--blue-dark);
}

/* ============================================
   CTA SECTION
   Call-to-action section before footer
   ============================================ */
.cta-section {
    background: var(--blue-deep);
    padding: 8rem 2rem;
    text-align: center;
    position: relative;
    z-index: 3;
}

.cta-content {
    max-width: 600px;
    margin: 0 auto;
}

.cta-heading {
    font-family: rockwell, serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 1.5rem;
}

.cta-text {
    font-size: 1.125rem;
    color: var(--blue-light);
    margin-bottom: 2.5rem;
    line-height: 1.7;
}

/* ============================================
   RESPONSIVE DESIGN
   Adjustments for smaller screens
   ============================================ */
@media (max-width: 768px) {
    .content-block {
        padding: 2rem;
        padding-bottom: 4rem;
        align-items: center;
        justify-content: center;
    }

    .content-inner {
        padding: 2rem;
    }
}