/* style.css */

/*
--- TABLE OF CONTENTS ---
1. CSS Variables & Root Styles
2. Base & Typography
3. Header & Navigation
4. Hero Section & Parallax
5. Global Component Styles (Buttons, Forms, Cards)
6. Section-Specific Styles
   - Methodology (Timeline)
   - Gallery (Carousel)
   - Contact Form
7. Page-Specific Styles
   - Legal Pages (Privacy, Terms)
   - Success Page
8. Footer
9. Animation & Transitions
   - Scroll Animations
   - Barba.js Page Transitions
10. Utility Classes
*/

/* 1. CSS Variables & Root Styles */
:root {
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'DM Sans', sans-serif;

    --color-primary: #0D0E18;
    --color-secondary: #1A1B2C;
    --color-accent-start: #6B52D9;
    --color-accent-end: #D45CB3;
    --color-text-light: #E0E0E0;
    --color-text-dark: #222222;
    --color-border: rgba(224, 224, 224, 0.2);

    --gradient-accent: linear-gradient(90deg, var(--color-accent-start), var(--color-accent-end));
}

/* 2. Base & Typography */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    font-family: var(--font-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

p {
    line-height: 1.7;
    color: rgba(224, 224, 224, 0.85);
}

a {
    transition: color 0.3s ease;
}

/* 3. Header & Navigation */
#header {
    background-color: transparent;
    transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

#header.scrolled {
    background-color: rgba(13, 14, 24, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* 4. Hero Section & Parallax */
#hero {
    background-attachment: fixed; /* Fallback for no-JS */
}

.parallax-bg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    will-change: transform; /* Performance hint for browsers */
}

#hero h1 {
    color: #FFFFFF; /* Enforce white text for hero */
}

/* 5. Global Component Styles (Buttons, Forms, Cards) */

/* Buttons */
.micro-interaction {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.micro-interaction::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
    z-index: -1;
}

.micro-interaction:hover::before {
    width: 250%;
    height: 250%;
}

/* Forms */
.form-input {
    width: 100%;
    background-color: rgba(13, 14, 24, 0.7);
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    padding: 12px 16px;
    border-radius: 8px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: var(--font-body);
}

.form-input::placeholder {
    color: rgba(224, 224, 224, 0.5);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-accent-start);
    box-shadow: 0 0 0 3px rgba(107, 82, 217, 0.3);
}

/* Cards */
.card {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text inside */
    background-color: var(--color-secondary);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.card-image {
    width: 100%;
    height: 256px; /* Fixed height for image containers */
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure image covers the container without distortion */
    transition: transform 0.4s ease;
}

.card:hover .card-image img {
    transform: scale(1.05);
}

.card-content {
    padding: 1.5rem;
    width: 100%;
}

.team-member .card-image {
    margin: 0 auto; /* Ensure centering for specific cards */
}


/* 6. Section-Specific Styles */

/* Methodology (Timeline) */
.right-timeline .z-20, .left-timeline .z-20 {
    transform: scale(1);
    transition: transform 0.3s ease;
}
.right-timeline:hover .z-20, .left-timeline:hover .z-20 {
    transform: scale(1.1);
}

/* Gallery (Carousel) */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* 7. Page-Specific Styles */

/* Legal Pages (Privacy, Terms) */
.page-legal {
    padding-top: 120px; /* Space for fixed header */
    padding-bottom: 60px;
}
.page-legal h1, .page-legal h2 {
    color: var(--color-text-light);
    text-shadow: none; /* Dark background doesn't need text shadow */
}
.page-legal p, .page-legal li {
    color: rgba(224, 224, 224, 0.8);
}

/* Success Page */
.page-success {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
    background-image: var(--gradient-accent);
}
.success-box {
    background-color: var(--color-primary);
    padding: 3rem 4rem;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* 8. Footer */
footer a.hover\:text-accent-end:hover {
    color: var(--color-accent-end);
}

/*
   The prompt specifies text links for social media.
   The following styles will apply to them based on the HTML structure.
*/
footer ul li a {
    text-decoration: none;
    font-weight: 500;
}


/* 9. Animation & Transitions */

/* Scroll Animations */
[data-scroll-anim] {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-scroll-anim="fade-up"] {
    transform: translateY(40px);
}
[data-scroll-anim="fade-right"] {
    transform: translateX(-40px);
}
[data-scroll-anim="fade-left"] {
    transform: translateX(40px);
}
[data-scroll-anim="timeline-left"] {
    transform: translateX(-100%);
}
[data-scroll-anim="timeline-right"] {
    transform: translateX(100%);
}

[data-scroll-anim].is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* Barba.js Page Transitions */
.barba-leave-active,
.barba-enter-active {
    transition: opacity 0.5s ease;
}

.barba-leave-to,
.barba-enter-from {
    opacity: 0;
}