/* ==========================================
   CSS CUSTOM PROPERTIES & RESET
   ========================================== */

:root {
    /* Minimalist Color System - Neutral + Green Accent */
    --color-bg-base: #0C0E10;
    --color-bg-gradient: #14161A;
    --color-bg-button-glow: rgba(92, 107, 245, 0.06);

    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.85);
    --color-text-tertiary: rgba(255, 255, 255, 0.55);
    --color-text-muted: rgba(255, 255, 255, 0.45);

    /* Brand Green Accent */
    --color-brand-green: #10B981;

    /* CTA Colors - Desaturated Blue */
    --color-cta-base: #4453FF;
    --color-cta-hover: #5A66FF;
    --color-cta-active: #3342DD;

    /* Minimalist Spacing */
    --space-xs: clamp(0.5rem, 1vw, 0.75rem);
    --space-sm: clamp(0.75rem, 1.5vw, 1rem);
    --space-md: clamp(1rem, 2vw, 1.25rem);
    --space-lg: clamp(1.25rem, 2.5vw, 1.75rem);

    /* Three-Tier Typography Scale */
    --font-size-h1: clamp(2.5rem, 6vw, 4.5rem);
    --font-size-h2: 1.125rem;
    --font-size-body: 1rem;
    --font-size-cta: clamp(1rem, 2vw, 1.125rem);
    --font-size-footer: clamp(0.75rem, 1vw, 0.875rem);

    /* Crisp Shadows */
    --shadow-cta: 0 2px 8px rgba(68, 83, 255, 0.2),
                  inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --shadow-cta-hover: 0 4px 12px rgba(68, 83, 255, 0.3),
                        inset 0 1px 0 rgba(255, 255, 255, 0.15);

    /* Animations */
    --timing-fast: 150ms;
    --timing-medium: 250ms;
    --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    height: 100%;
    overflow-y: hidden; /* Prevent vertical scroll */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

body {
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    background: var(--color-bg-base);
    color: var(--color-text-primary);

    /* Text rendering optimization */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ==========================================
   BACKGROUND & PARTICLES
   ========================================== */

/* Minimalist background with subtle vignette */
.landing {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;

    /* Subtle depth - no visible gradients */
    background: radial-gradient(circle at center, var(--color-bg-base) 0%, #08090B 100%);

    /* Safe area padding for notched devices */
    padding:
        max(var(--space-md), env(safe-area-inset-top))
        max(var(--space-md), env(safe-area-inset-right))
        max(var(--space-md), env(safe-area-inset-bottom))
        max(var(--space-md), env(safe-area-inset-left));
}

/* Faint button glow behind CTA */
.landing::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--color-bg-button-glow) 0%, transparent 70%);
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

/* CSS-only noise/grain texture overlay */
.landing::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.03;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

/* Particle container */
.particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Individual particle (letter/symbol) */
.particle {
    position: absolute;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    color: rgba(107, 159, 255, 0.08);
    filter: blur(1px);
    user-select: none;
    will-change: transform, opacity;

    /* Slow drift + opacity breathing animation */
    animation: particleDrift 25s ease-in-out infinite, particleFade 8s ease-in-out infinite;
}

@keyframes particleDrift {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(15px, -20px) rotate(5deg);
    }
    50% {
        transform: translate(-10px, 15px) rotate(-3deg);
    }
    75% {
        transform: translate(20px, 10px) rotate(4deg);
    }
}

@keyframes particleFade {
    0%, 100% {
        opacity: 0.05;
    }
    50% {
        opacity: 0.12;
    }
}

/* ==========================================
   HERO CONTENT
   ========================================== */

.content {
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 100%;
    width: 100%;
    padding: 0 5vw;
    overflow: visible;
}

/* ==========================================
   TYPOGRAPHY
   ========================================== */

/* Remove bloom - keeping minimal */
.title-bloom {
    display: none;
}

/* Tier 1 - Headline (large, clean, high contrast) */
.title {
    font-size: var(--font-size-h1);
    margin-bottom: 1rem;
    line-height: 1.1;
    letter-spacing: -0.015em;
    overflow: visible;
    width: 100%;
    position: relative;
    z-index: 1;
    font-weight: 700;
}

.gradient-text {
    color: var(--color-text-primary);
    display: inline;
    font-weight: 700;
}

/* Pump color split - Green then White */
.pump-mp {
    color: var(--color-brand-green);
}

.pump-pu {
    color: var(--color-text-primary);
}

/* Tier 2 - Tagline (medium weight, subtle contrast) */
.tagline {
    font-size: var(--font-size-h2);
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.5;
    letter-spacing: 0;
}

/* Tier 3 - Subline (smaller, lighter, secondary) */
.description {
    font-size: var(--font-size-body);
    font-weight: 400;
    color: var(--color-text-tertiary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
    letter-spacing: 0.015em;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* Remove divider - too decorative for minimalism */
.divider {
    display: none;
}

/* ==========================================
   CTA BUTTON
   ========================================== */

.play-btn {
    display: inline-block;
    padding: clamp(0.75rem, 1.5vw, 0.875rem) clamp(2rem, 4vw, 2.5rem);
    margin-bottom: var(--space-lg);
    margin-top: 1.5rem;

    font-size: var(--font-size-cta);
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;

    /* Graphite gray button with soft shadow */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.15);

    transition:
        transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
        background 300ms ease-out,
        border-color 300ms ease-out,
        box-shadow 350ms ease-out;

    cursor: pointer;
    user-select: none;
    position: relative;
    overflow: hidden;
}

/* Professional scale + glow on hover */
.play-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Smooth press state */
.play-btn:active {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(0) scale(0.98);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.1),
        inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition-duration: 100ms;
}

/* Accessible focus ring for keyboard navigation */
.play-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.4);
    outline-offset: 3px;
}

/* ==========================================
   SOCIAL LINKS
   Subtle icon buttons for social media
   ========================================== */

.social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    transition: all 200ms ease-out;
    text-decoration: none;
}

.social-link:hover {
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.social-link:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.06);
}

.social-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.4);
    outline-offset: 2px;
}

/* ==========================================
   MICROCOPY & FOOTER
   ========================================== */

.footer-text {
    display: none;
}

/* Brand footer - right aligned, subtle */
.brand-footer {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: clamp(1rem, 2vw, 1.5rem);
    z-index: 10;
}

.brand-footer p {
    font-size: var(--font-size-footer);
    color: var(--color-text-muted);
    font-weight: 400;
    letter-spacing: 0;
}

/* ==========================================
   REDUCED MOTION OVERRIDE
   ========================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .particle {
        display: none;
    }
}

/* ==========================================
   LIGHT MODE ADJUSTMENT (system preference)
   ========================================== */

@media (prefers-color-scheme: light) {
    :root {
        /* Keep page dark but adjust slightly for better light mode compatibility */
        --color-bg-base: #1a1a2e;
    }
}

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

/* Small mobile devices */
@media (max-width: 380px) {
    .landing {
        padding: var(--space-sm);
    }

    .title {
        margin-bottom: var(--space-sm);
    }

    .tagline {
        margin-bottom: var(--space-md);
    }

    .description {
        margin-bottom: var(--space-md);
    }

    .play-btn {
        margin-bottom: var(--space-md);
    }
}

/* Tablets and up */
@media (min-width: 768px) {
    .content {
        max-width: 720px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .landing::before {
        /* Slightly more visible grain on larger screens */
        opacity: 0.04;
    }
}

/* Ultra-wide screens */
@media (min-width: 1440px) {
    .content {
        max-width: 760px;
    }
}

/* Ensure no horizontal scroll on any screen size */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
}