style.css

/* --- Font Definition --- */
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SFPRODISPLAYREGULAR.OTF') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SFPRODISPLAYBOLD.OTF') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

/* --- CSS Variables --- */
:root {
    --font-primary: 'SF Pro Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-weight-regular: 400;
    --font-weight-bold: 700;

    /* Colors */
    --color-background: #000000;
    --color-background-offset: #0d0d0d;
    --color-text-primary: #f5f5f7;
    --color-text-secondary: #a1a1a6;
    --color-text-tertiary: #6e6e73;
    --color-card-background: #1c1c1e;
    --color-border-subtle: rgba(255, 255, 255, 0.1);
    --color-border-medium: rgba(255, 255, 255, 0.18);
    --color-purple: #bf5af2;
    --color-purple-rgb: 191, 90, 242;
    --color-purple-dark: #9a3eda;
    --color-accent-glow: rgba(var(--color-purple-rgb), 0.15);

    /* Gradients */
    --gradient-logo: linear-gradient(90deg, #6e6e73 0%, var(--color-purple) 100%);
    --gradient-button: linear-gradient(135deg, #2c2c2e 0%, var(--color-purple-dark) 100%);
    --gradient-button-hover: linear-gradient(135deg, var(--color-purple) 0%, #a34bd9 100%);

    /* Borders & Shadows */
    --border-radius-small: 8px;
    --border-radius-medium: 14px;
    --border-radius-large: 22px;
    --border-radius-button: 999px;
    --border-radius-full: 50%;
    --shadow-soft: 0px 20px 50px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0px 10px 30px rgba(0, 0, 0, 0.25);
    --shadow-card-hover-glow: 0px 8px 35px rgba(var(--color-purple-rgb), 0.18);
    --shadow-glow-button-inner: 0 0 8px rgba(255, 255, 255, 0.7);
    --shadow-glow-button-outer: 0 0 18px rgba(var(--color-purple-rgb), 0.5);

    /* Transitions */
    --transition-reveal: 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Reveal (opacity mainly) */
    --transition-hover-fast: 0.25s ease-out; /* Fast hover transform */
    --transition-hover-medium: 0.35s ease-out; /* Medium hover effects (shadow, border, text-glow) */
    --transition-hover-bg: 0.4s ease-out; /* Slowest for background/gradient shifts */

    /* Layout */
    --container-width: 1100px;
    --spacing-unit: 8px;
    --section-padding-vertical: clamp(80px, 12vh, 140px);
    --header-height: 65px;
}

/* --- Base & Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-primary); background-color: var(--color-background); color: var(--color-text-primary);
    font-weight: var(--font-weight-regular); line-height: 1.6;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; animation: none;
}
body::before, body::after { display: none; content: none; }

/* --- Layout Helpers --- */
.container { width: 90%; max-width: var(--container-width); margin: 0 auto; padding: 0 calc(var(--spacing-unit) * 2); }
.section-padding { padding-top: var(--section-padding-vertical); padding-bottom: var(--section-padding-vertical); }
.section-bordered { border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); }
.text-section .container > * { margin-left: auto; margin-right: auto; text-align: center; }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6, strong, b, .cta-button, .nav-button { font-weight: var(--font-weight-bold); }
p, span, a, li, blockquote, time, figcaption, .subtext, .version-info, .copyright-info { font-weight: var(--font-weight-regular); }
h1, h2, h3 { line-height: 1.25; letter-spacing: -0.02em; color: var(--color-text-primary); }
h1 { font-size: clamp(3.2rem, 7vw, 5.5rem); margin-bottom: calc(var(--spacing-unit) * 2.5); text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
h2.section-title { font-size: clamp(2.4rem, 5vw, 3.8rem); text-align: center; margin-bottom: calc(var(--spacing-unit) * 7); }
h2.section-title.alt-style { color: var(--color-text-secondary); }
h3 { font-size: 1.5rem; margin-bottom: calc(var(--spacing-unit) * 1.5); }
p { font-size: 1.05rem; color: var(--color-text-secondary); margin-bottom: calc(var(--spacing-unit) * 2.5); max-width: 65ch; }
p.subtext { font-size: 1.1rem; line-height: 1.6; color: var(--color-text-secondary); max-width: 60ch; }
p.large-subtext { font-size: clamp(1.2rem, 2.5vw, 1.4rem); max-width: 550px; margin: 0 auto calc(var(--spacing-unit) * 5) auto; color: var(--color-text-secondary); line-height: 1.55; }
a { color: var(--color-purple); text-decoration: none; font-weight: inherit; transition: filter 0.2s ease; }
a:hover { filter: brightness(1.15); }

/* --- Header & Logo --- */
.site-header { padding: 0; height: var(--header-height); display: flex; align-items: center; position: sticky; top: 0; z-index: 1000; background-color: rgba(0, 0, 0, 0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--color-border-subtle); transition: background-color 0.3s ease; }
.header-container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.logo { font-size: 1.7rem; font-weight: var(--font-weight-bold); display: flex; align-items: center; line-height: 1; gap: 4px; }
.logo:hover { filter: none; }
.logo-better { color: var(--color-text-primary); }
.logo-bootstrap { background: var(--gradient-logo); background-size: 200% auto; background-position: 0% center; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.logo:hover .logo-bootstrap { background-position: -100% center; }

/* Navigation & Link Glow */
.main-nav { display: flex; align-items: center; gap: calc(var(--spacing-unit) * 3); }
.main-nav a { color: var(--color-text-secondary); font-weight: 500; font-size: 0.9rem; padding: var(--spacing-unit) 0; position: relative; text-shadow: none; transition: color var(--transition-hover-medium), text-shadow var(--transition-hover-medium); }
.main-nav a:not(.nav-button):hover { color: var(--color-text-primary); filter: none; text-shadow: 0 0 12px rgba(var(--color-purple-rgb), 0.6); }

/* Nav Button Sizing */
.nav-button.gradient-button { padding: calc(var(--spacing-unit) * 0.8) calc(var(--spacing-unit) * 1.8); font-size: 0.85rem; gap: calc(var(--spacing-unit) * 0.7); }

/* --- Hero Section --- */
.full-width-hero { width: 100%; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden; background: var(--color-background); padding-top: var(--header-height); padding-bottom: calc(var(--spacing-unit) * 8); }
.hero-content-wrapper { width: 100%; display: flex; justify-content: center; align-items: center; flex-grow: 1; position: relative; z-index: 1; }
.hero-content { display: flex; flex-direction: column; align-items: center; }
.hero-background-glow { position: absolute; top: -10%; left: 50%; width: 140%; height: 100%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 40%, var(--color-accent-glow) 0%, transparent 70%); pointer-events: none; z-index: 0; opacity: 0.7; }

/* --- CTA / Nav Button Shared Style --- */
.gradient-button {
    display: inline-flex; align-items: center; justify-content: center;
    gap: calc(var(--spacing-unit) * 1.2);
    font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius-button);
    cursor: pointer; text-decoration: none; border: none;
    position: relative; overflow: hidden; z-index: 1;
    background: var(--gradient-button); color: var(--color-text-primary);
    background-size: 150% 150%;
    box-shadow: var(--shadow-medium), 0 0 0 1px rgba(255, 255, 255, 0.05);
    text-shadow: none;
    transition:
        transform var(--transition-hover-fast),
        box-shadow var(--transition-hover-medium),      /* Smooth shadow */
        background-position var(--transition-hover-bg), /* Slowest background */
        text-shadow var(--transition-hover-medium);     /* Smooth text glow */
    will-change: transform, box-shadow, background-position, text-shadow;
}
.gradient-button:hover {
    background-position: right center;
    transform: scale(1.03) translateY(-2px);
    box-shadow: var(--shadow-soft), var(--shadow-glow-button-outer);
    text-shadow: var(--shadow-glow-button-inner);
    filter: none;
}
.gradient-button .arrow { display: inline-block; margin-left: 0; transition: transform var(--transition-hover-fast); }
.gradient-button:hover .arrow { transform: translateX(4px); }

/* Sizing for the main CTA button */
.cta-button.large-button { font-size: 1.1rem; padding: calc(var(--spacing-unit) * 1.8) calc(var(--spacing-unit) * 3.8); gap: calc(var(--spacing-unit) * 1.2); }

/* --- Features Section (Focus: Smooth hover shadow/border) --- */
.features { background-color: var(--color-background-offset); }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: calc(var(--spacing-unit) * 4.5); }
.feature-card {
    background-color: var(--color-card-background); padding: calc(var(--spacing-unit) * 4);
    border-radius: var(--border-radius-large); border: 1px solid transparent;
    text-align: left;
    /* *** VERIFY / APPLY CORRECT TRANSITIONS *** */
    transition:
        transform var(--transition-hover-fast),         /* Fast transform */
        box-shadow var(--transition-hover-medium),      /* *** Smooth shadow *** */
        border-color var(--transition-hover-medium),    /* *** Smooth border *** */
        opacity var(--transition-reveal),               /* Reveal opacity */
        transform var(--transition-reveal);             /* Initial reveal transform (will be overridden by fast hover transform later) */
    will-change: transform, box-shadow, border-color, opacity;
}
.feature-card.reveal { opacity: 0; transform: translateY(25px); }
.feature-card.reveal.visible { opacity: 1; transform: translateY(0); }
.feature-card:hover {
    transform: translateY(-8px); /* This uses --transition-hover-fast */
    box-shadow: var(--shadow-medium);
    border-color: var(--color-border-medium); /* Fades in smoothly using medium duration */
}
.feature-icon { margin-bottom: calc(var(--spacing-unit) * 2); color: var(--color-purple); }
.feature-icon svg { width: 40px; height: 40px; display: block; stroke-width: 1.5; }
.feature-card h3 { margin-bottom: var(--spacing-unit); }
.feature-card p { font-size: 0.95rem; color: var(--color-text-secondary); max-width: none; margin-bottom: 0; line-height: 1.55; }

/* --- How it Works --- */
/* Styles from layout helpers */

/* --- Credits Section (Focus: Smooth hover shadow) --- */
.credits .section-title { color: var(--color-text-primary); margin-bottom: calc(var(--spacing-unit) * 6); }
.credits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: calc(var(--spacing-unit) * 4); max-width: 750px; margin: 0 auto; }
.credit-card {
    background-color: var(--color-card-background); padding: calc(var(--spacing-unit) * 3);
    border-radius: var(--border-radius-large); border: 1px solid var(--color-border-subtle);
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: calc(var(--spacing-unit) * 2);
    /* *** VERIFY / APPLY CORRECT TRANSITIONS *** */
    transition:
        transform var(--transition-hover-fast),        /* Fast transform */
        box-shadow var(--transition-hover-medium),     /* *** Smooth shadow glow *** */
        opacity var(--transition-reveal),              /* Reveal opacity */
        transform var(--transition-reveal);            /* Initial reveal transform */
    will-change: transform, box-shadow, opacity;
}
.credit-card.reveal { opacity: 0; transform: translateY(25px); }
.credit-card.reveal.visible { opacity: 1; transform: translateY(0); }
.credit-card:hover {
    transform: translateY(-6px); /* Uses --transition-hover-fast */
    box-shadow: var(--shadow-medium), var(--shadow-card-hover-glow); /* Shadow and Glow fade in smoothly */
}
.profile-picture-frame { flex-shrink: 0; width: 80px; height: 80px; border-radius: var(--border-radius-full); overflow: hidden; background-color: var(--color-purple-dark); border: 2px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); }
.profile-pic { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: var(--font-weight-bold); color: var(--color-background); background-color: var(--color-purple); }
.credit-info { width: 100%; }
.credit-info h3 { font-size: 1.25rem; margin-bottom: calc(var(--spacing-unit) * 0.5); }
.credit-info p.subtext { font-size: 0.9rem; max-width: 95%; margin: 0 auto; color: var(--color-text-tertiary); line-height: 1.5; }

/* --- Download Section --- */
.download-section { background-color: var(--color-background-offset); text-align: center; }
.download-section .large-subtext { margin-bottom: calc(var(--spacing-unit) * 6); }
/* Uses .cta-button.large-button.gradient-button styling, already confirmed correct transitions */

/* --- Footer --- */
.minimal-footer { padding: calc(var(--spacing-unit) * 4) 0 calc(var(--spacing-unit) * 5) 0; text-align: center; border-top: 1px solid var(--color-border-subtle); margin-top: 0; }
.footer-content { display: flex; flex-direction: column; align-items: center; gap: calc(var(--spacing-unit) * 0.25); }
.version-info, .copyright-info { font-size: 0.8rem; color: var(--color-text-tertiary); margin: 0; line-height: 1.4; }

/* --- Scroll Reveal Animations --- */
.reveal { opacity: 0; transition: opacity var(--transition-reveal); will-change: opacity, transform; }
.reveal.visible { opacity: 1; }
.reveal-fade-up { transform: translateY(25px); /* Only needed if reveal handles transform too */ }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }


/* --- Responsiveness --- */
@media (max-width: 992px) { :root { --section-padding-vertical: clamp(70px, 10vh, 120px); } h1 { font-size: clamp(3rem, 6.5vw, 4.8rem); } h2.section-title { font-size: clamp(2.2rem, 4.5vw, 3.2rem); } .feature-grid { gap: calc(var(--spacing-unit) * 3.5); } }
@media (max-width: 768px) { :root { --section-padding-vertical: clamp(60px, 8vh, 100px); --header-height: 60px; } html { font-size: 15px; } body { line-height: 1.55; } .main-nav { gap: 0; } .main-nav a:not(.nav-button) { display: none; } .full-width-hero { min-height: 100svh; } h1 { font-size: clamp(2.4rem, 8vw, 3.5rem); letter-spacing: -0.015em; margin-bottom: calc(var(--spacing-unit)*2); } p.large-subtext { font-size: 1.1rem; margin-bottom: calc(var(--spacing-unit)*4); } h2.section-title { margin-bottom: calc(var(--spacing-unit) * 5); } .feature-grid { grid-template-columns: 1fr; gap: calc(var(--spacing-unit) * 3); } .feature-card { text-align: center; padding: calc(var(--spacing-unit)*3); } .feature-icon svg { margin: 0 auto; } .credits-grid { grid-template-columns: 1fr; gap: calc(var(--spacing-unit) * 3); max-width: 350px; } .credit-card { padding: calc(var(--spacing-unit) * 2.5); } .gradient-button { gap: calc(var(--spacing-unit) * 1); } .cta-button.large-button { font-size: 1rem; padding: calc(var(--spacing-unit) * 1.6) calc(var(--spacing-unit) * 3); gap: calc(var(--spacing-unit)*1); } .nav-button.gradient-button { font-size: 0.85rem; padding: calc(var(--spacing-unit) * 0.8) calc(var(--spacing-unit) * 1.8); gap: calc(var(--spacing-unit)*0.7); } .footer-content { gap: calc(var(--spacing-unit) * 0.25); } .version-info, .copyright-info { font-size: 0.75rem; } }
@media (max-width: 480px) { :root { --section-padding-vertical: calc(var(--spacing-unit) * 8); } h1 { font-size: clamp(2.2rem, 9vw, 2.8rem); } h2.section-title { font-size: clamp(1.8rem, 6vw, 2.2rem); } .logo { font-size: 1.4rem; } p.large-subtext { font-size: 1rem; } .credits-grid { max-width: 300px; } }