/* Import a Google Font (Optional, but adds polish) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Base */
body {
    font-family: 'Inter', sans-serif;
    cursor: none; /* Hide default cursor */
}

/* Custom Cursor */
.custom-cursor-halo,
.custom-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    border-radius: 50%;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition-property: width, height, background-color, border-color, opacity, transform;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
}

.custom-cursor-dot {
    width: 8px;
    height: 8px;
    background-color: #673de6; /* brand-purple */
}

.custom-cursor-halo {
    width: 40px;
    height: 40px;
    border: 2px solid #8a63f0; /* brand-purple-light */
    opacity: 0.5;
    transition-duration: 250ms;
}

/* Cursor hover states */
.cursor-grow .custom-cursor-halo {
    width: 60px;
    height: 60px;
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1.2);
}
.cursor-grow .custom-cursor-dot {
    opacity: 0;
}

/* Hide cursor on touch devices */
@media (pointer: coarse) {
    body {
        cursor: auto;
    }
    .custom-cursor-halo,
    .custom-cursor-dot {
        display: none;
    }
}

/* Glassmorphism Panel */
.glass-panel {
    @apply bg-white/50 dark:bg-dark-panel/60 backdrop-blur-lg border border-white/20 dark:border-gray-800/50 rounded-2xl shadow-lg;
}

/* Header */
#main-header.scrolled {
    @apply bg-white/80 dark:bg-dark-surface/80 backdrop-blur-md shadow-lg;
}

.nav-link {
    @apply text-gray-700 dark:text-gray-300 font-medium relative;
    transition: color 0.3s;
}
.nav-link:hover {
    @apply text-brand-purple-light;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #673de6;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease-out;
}
.nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-icon {
    @apply h-10 w-10 rounded-full flex items-center justify-center text-gray-700 dark:text-gray-300;
    transition: all 0.3s;
}
.nav-icon:hover {
    @apply bg-gray-200 dark:bg-dark-panel text-brand-purple-light;
}
/* Theme toggle icons */
#theme-icon-sun { @apply hidden; }
#theme-icon-moon { @apply block; }
html.dark #theme-icon-sun { @apply block; }
html.dark #theme-icon-moon { @apply hidden; }

/* Buttons */
.btn {
    @apply inline-block px-8 py-3 rounded-full font-semibold transition-all duration-300 shadow-lg;
}
.btn-primary {
    @apply bg-brand-purple text-white;
}
.btn-primary:hover {
    @apply bg-brand-purple-dark shadow-2xl -translate-y-0.5;
}
.btn-secondary {
    @apply bg-gray-200 dark:bg-dark-panel text-gray-800 dark:text-white;
}
.btn-secondary:hover {
    @apply bg-gray-300 dark:bg-gray-800 shadow-2xl -translate-y-0.5;
}

/* Hero Parallax Backgrounds */
.parallax-bg-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    will-change: transform;
}
.layer-1 {
    /* Gradient or large shape */
    background: radial-gradient(circle, rgba(103,61,230,0.15) 0%, rgba(10,9,16,0) 60%);
}
.layer-2 {
    /* Subtle texture or smaller shapes */
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm-6 0v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM12 6v4h2V6h4V4h-4V0h-2v4H8v2h4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Section Headers */
.section-header {
    @apply text-center max-w-2xl mx-auto;
}
.section-subtitle {
    @apply text-brand-purple-light font-semibold tracking-widest uppercase;
}
.section-title {
    @apply text-4xl md:text-5xl font-extrabold text-gray-900 dark:text-white mt-2;
}

/* Timeline */
.timeline-item {
    @apply relative md:pl-0;
}
/* This positions items left/right on desktop */
@media (min-width: 768px) {
    .timeline-item {
        padding-left: 50%;
        margin-left: 4px;
    }
    .timeline-item:nth-child(odd) {
        padding-left: 0;
        padding-right: 50%;
        margin-left: 0;
        margin-right: 4px;
    }
    .timeline-item:nth-child(odd) .timeline-content {
        @apply md:mr-4;
    }
    .timeline-item:nth-child(even) .timeline-content {
        @apply md:ml-4;
    }
}
.timeline-content {
    @apply p-6 relative;
}
/* Timeline dot */
.timeline-content::before {
    content: '';
    @apply absolute bg-white dark:bg-dark-bg border-4 border-brand-purple-light rounded-full h-5 w-5;
    top: 50%;
    transform: translateY(-50%);
    left: -14px;
}
@media (min-width: 768px) {
    .timeline-content::before {
        left: -14px;
    }
    .timeline-item:nth-child(odd) .timeline-content::before {
        left: auto;
        right: -14px;
    }
}
.timeline-year {
    @apply absolute -top-4 -left-4 bg-brand-purple-light text-white text-xs font-bold px-3 py-1 rounded-full;
}
.timeline-title {
    @apply text-xl font-semibold mb-2 text-gray-900 dark:text-white;
}
.timeline-desc {
    @apply text-gray-600 dark:text-gray-300;
}

/* Service Cards */
.service-card {
    @apply p-8 text-center transition-all duration-300;
}
.service-card:hover {
    @apply transform -translate-y-2 shadow-2xl;
}
.service-icon {
    @apply text-4xl text-brand-purple-light mb-6;
}
.service-title {
    @apply text-2xl font-semibold mb-3 text-gray-900 dark:text-white;
}
.service-desc {
    @apply text-gray-600 dark:text-gray-300;
}

/* Product Cards */
.product-card {
    @apply p-8 transition-all duration-300;
}
.product-card:hover {
    @apply transform -translate-y-2 shadow-2xl;
}
.product-title {
    @apply text-2xl font-semibold mb-2 text-gray-900 dark:text-white;
}
.product-desc {
    @apply text-gray-600 dark:text-gray-300 mb-4;
}
.product-link {
    @apply font-semibold text-brand-purple-light;
}
.product-link:hover {
    @apply text-brand-purple-dark;
}

/* Portfolio Item */
.portfolio-item {
    @apply relative rounded-lg overflow-hidden shadow-lg;
    transform-style: preserve-3d;
}
.portfolio-image {
    @apply w-full h-full object-cover transition-transform duration-500;
}
.portfolio-item:hover .portfolio-image {
    @apply transform scale-110;
}
.portfolio-overlay {
    @apply absolute inset-0 bg-black/60 p-6 flex flex-col justify-end;
    opacity: 0;
    transition: all 0.4s ease-out;
}
.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}
.portfolio-title {
    @apply text-2xl font-bold text-white mb-1;
    transform: translateY(20px);
    transition: all 0.4s ease-out;
}
.portfolio-category {
    @apply text-brand-purple-light font-medium;
    transform: translateY(20px);
    transition: all 0.4s ease-out;
    transition-delay: 0.05s;
}
.portfolio-item:hover .portfolio-title,
.portfolio-item:hover .portfolio-category {
    transform: translateY(0);
}

/* Contact Form */
.form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
}
.form-input {
    @apply w-full px-4 py-3 bg-gray-100 dark:bg-dark-panel border border-transparent rounded-lg;
    @apply focus:outline-none focus:ring-2 focus:ring-brand-purple-light focus:border-transparent;
    transition: all 0.3s;
}
.form-input.invalid {
    @apply ring-2 ring-red-500 border-transparent;
}
.form-error-msg {
    @apply text-red-500 text-sm mt-1;
}

/* Footer */
.footer-icon {
    @apply h-12 w-12 rounded-full flex items-center justify-center text-gray-600 dark:text-gray-400 text-xl;
    @apply bg-gray-200 dark:bg-dark-panel;
    transition: all 0.3s;
}
.footer-icon:hover {
    @apply bg-brand-purple text-white transform -translate-y-1;
}

/* Modals */
.modal-backdrop {
    @apply fixed inset-0 bg-black/70 z-[9990] flex items-center justify-center p-6;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}
.modal-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}
.modal-content {
    @apply w-full max-w-3xl max-h-[90vh] overflow-y-auto p-8 relative;
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.3s ease-out;
}
.modal-backdrop.active .modal-content {
    transform: scale(1);
    opacity: 1;
}
.modal-close {
    @apply absolute top-4 right-4 h-10 w-10 rounded-full bg-gray-200 dark:bg-dark-panel text-2xl;
    @apply text-gray-700 dark:text-gray-300;
    transition: all 0.3s;
}
.modal-close:hover {
    @apply bg-red-500 text-white transform rotate-90;
}


/* GSAP Animation Base States (elements are hidden until animated) */
.section-header,
.timeline-item,
.service-card,
.product-card,
.portfolio-item,
#contact-form,
#contact-form > div,
.glass-panel {
    opacity: 0;
    transform: translateY(30px);
    will-change: opacity, transform;
}