/* ==========================================================================
   Main Styles for Meg Patakota Portfolio

   COLOR REFERENCE (update in site-style-config.js):
   - Primary/Buttons: #6366F1 (Indigo) -> var(--color-buttons)
   - Accent: #22D3EE (Cyan) -> var(--color-accent)
   - Text Primary: #0F172A -> var(--color-text-primary)
   - Text Secondary: #475569 -> var(--color-text-secondary)
   - Text Tertiary: #64748B -> var(--color-text-tertiary)
   - Background Light: #F8FAFC -> var(--color-bg-light)
   - Background Dark: #0F172A -> var(--color-bg-dark)
   ========================================================================== */

/* ==========================================================================
   FONTS - Centralized for entire site
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

body {
    font-family: 'Outfit', sans-serif;
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

* {
    scroll-behavior: smooth;
}

/* ==========================================================================
   GRADIENT UTILITIES
   ========================================================================== */

/* Gradient Text - Dark Teal with Bluish Shade */
.gradient-text {
    color: #0e7490;
}

/* Primary Gradient Background (buttons, badges) */
.gradient-bg {
    background: #0e7490;
}

/* Tech gradient - teal */
.tech-gradient {
    background: #0e7490;
}

/* Soft Gradient Background - Light sections */
.soft-gradient-bg {
    background: linear-gradient(135deg, var(--color-bg-light, #F8FAFC) 0%, #E0E7FF 50%, #CFFAFE 100%);
}

/* Dark Hero Background */
.hero-dark-bg {
    background: linear-gradient(135deg, var(--color-bg-dark, #0F172A) 0%, #1E293B 50%, var(--color-bg-dark, #0F172A) 100%);
}

/* Animated gradient background */
.animated-gradient-bg {
    background: linear-gradient(-45deg, var(--color-bg-dark, #0F172A), #1E293B, #312E81, #1E293B);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ==========================================================================
   PATTERN OVERLAYS
   ========================================================================== */

.grid-pattern {
    background-image: 
        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

.tech-dots {
    background-image: radial-gradient(rgba(99, 102, 241, 0.15) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* ==========================================================================
   GLOW & SHADOW EFFECTS
   ========================================================================== */

.glow-indigo {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.3);
}

.glow-cyan {
    box-shadow: 0 0 40px rgba(34, 211, 238, 0.3);
}

/* Gradient Border Component */
.gradient-border {
    position: relative;
    background: white;
    border-radius: 1rem;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    padding: 2px;
    background: linear-gradient(135deg, var(--color-buttons, #6366F1), var(--color-accent, #22D3EE));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

/* Glassmorphism card */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   CARD STYLES
   ========================================================================== */

.service-card {
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-8px);
}

.timeline-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(99, 102, 241, 0.15);
}

/* Experience card glow effect */
.exp-card-glow {
    position: relative;
    overflow: hidden;
}

.exp-card-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.05), transparent);
    transition: left 0.5s ease;
}

.exp-card-glow:hover::before {
    left: 100%;
}

/* Skill tag hover */
.skill-tag {
    transition: all 0.2s ease;
}

.skill-tag:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

/* Data particle animation */
@keyframes particleFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translate(20px, -30px) scale(1.1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-10px, -60px) scale(0.9);
        opacity: 0.4;
    }
    75% {
        transform: translate(30px, -40px) scale(1.05);
        opacity: 0.7;
    }
}

@keyframes particleFloat2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    33% {
        transform: translate(-25px, -35px) scale(1.15);
        opacity: 0.7;
    }
    66% {
        transform: translate(15px, -55px) scale(0.95);
        opacity: 0.4;
    }
}

@keyframes linePulse {
    0%, 100% {
        opacity: 0.05;
    }
    50% {
        opacity: 0.2;
    }
}

.data-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(14, 116, 144, 0.4), rgba(14, 116, 144, 0.15));
    box-shadow:
        0 0 15px rgba(14, 116, 144, 0.2),
        inset -3px -3px 8px rgba(14, 116, 144, 0.15),
        inset 3px 3px 8px rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(1px);
}

.data-particle-1 { top: 15%; left: 10%; width: 18px; height: 18px; animation: particleFloat 8s ease-in-out infinite; }
.data-particle-2 { top: 35%; left: 20%; width: 14px; height: 14px; animation: particleFloat2 10s ease-in-out infinite 1s; }
.data-particle-3 { top: 55%; left: 8%; width: 20px; height: 20px; animation: particleFloat 12s ease-in-out infinite 2s; }
.data-particle-4 { top: 25%; left: 75%; width: 16px; height: 16px; animation: particleFloat2 9s ease-in-out infinite 1.5s; }
.data-particle-5 { top: 45%; left: 85%; width: 18px; height: 18px; animation: particleFloat 11s ease-in-out infinite 3s; }
.data-particle-6 { top: 68%; left: 78%; width: 16px; height: 16px; animation: particleFloat2 10s ease-in-out infinite 2.5s; }
.data-particle-7 { top: 12%; right: 18%; width: 18px; height: 18px; animation: particleFloat 13s ease-in-out infinite 1s; }
.data-particle-8 { top: 52%; right: 12%; width: 16px; height: 16px; animation: particleFloat2 9.5s ease-in-out infinite 2s; }
.data-particle-9 { top: 75%; left: 15%; width: 14px; height: 14px; animation: particleFloat 11s ease-in-out infinite 1.8s; }
.data-particle-10 { top: 85%; left: 45%; width: 16px; height: 16px; animation: particleFloat2 9s ease-in-out infinite 2.2s; }
.data-particle-11 { top: 78%; right: 25%; width: 14px; height: 14px; animation: particleFloat 10s ease-in-out infinite 2.8s; }
.data-particle-12 { top: 30%; left: 50%; width: 16px; height: 16px; animation: particleFloat2 12s ease-in-out infinite 1.2s; }

.connection-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(14, 116, 144, 0.15), transparent);
    transform-origin: left center;
    animation: linePulse 4s ease-in-out infinite;
}

.connection-line-1 { top: 20%; left: 12%; width: 140px; transform: rotate(25deg); animation-delay: 0s; }
.connection-line-2 { top: 40%; left: 22%; width: 160px; transform: rotate(-15deg); animation-delay: 1s; }
.connection-line-3 { top: 28%; right: 20%; width: 130px; transform: rotate(35deg); animation-delay: 0.5s; }
.connection-line-4 { top: 52%; right: 14%; width: 150px; transform: rotate(-20deg); animation-delay: 1.5s; }
.connection-line-5 { top: 65%; left: 12%; width: 120px; transform: rotate(15deg); animation-delay: 0.8s; }
.connection-line-6 { top: 80%; left: 35%; width: 180px; transform: rotate(-10deg); animation-delay: 1.2s; }
.connection-line-7 { top: 72%; right: 20%; width: 140px; transform: rotate(25deg); animation-delay: 0.3s; }
.connection-line-8 { top: 32%; left: 48%; width: 100px; transform: rotate(-5deg); animation-delay: 1.8s; }

/* Fade in up animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.fade-in-up-delay-1 {
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

.fade-in-up-delay-2 {
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
    opacity: 0;
}

.fade-in-up-delay-3 {
    animation: fadeInUp 0.8s ease-out 0.6s forwards;
    opacity: 0;
}

.fade-in-up-delay-4 {
    animation: fadeInUp 0.8s ease-out 0.8s forwards;
    opacity: 0;
}

/* ==========================================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.from-left {
    transform: translateX(-40px);
}

.reveal.from-right {
    transform: translateX(40px);
}

.reveal.scale-in {
    transform: scale(0.92);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

.reveal-child {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-child.active {
    opacity: 1;
    transform: translateY(0);
}

/* Floating Animation */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.floating {
    animation: float 6s ease-in-out infinite;
}

/* Logo Shimmer Animation */
@keyframes shimmer {
    0%, 100% { 
        filter: grayscale(1) brightness(1);
        opacity: 0.7;
    }
    50% { 
        filter: grayscale(0.3) brightness(1.1);
        opacity: 0.85;
    }
}

.logo-shimmer {
    animation: shimmer 4s ease-in-out infinite;
}

.logo-shimmer:nth-child(1) { animation-delay: 0s; }
.logo-shimmer:nth-child(2) { animation-delay: 1s; }
.logo-shimmer:nth-child(3) { animation-delay: 2s; }
.logo-shimmer:nth-child(4) { animation-delay: 3s; }

/* Sequential logo fade wave */
@keyframes logoFadeWave {
    0% { opacity: 0.3; filter: grayscale(1); }
    15% { opacity: 1; filter: grayscale(0); }
    35% { opacity: 1; filter: grayscale(0); }
    50% { opacity: 0.4; filter: grayscale(1); }
    100% { opacity: 0.3; filter: grayscale(1); }
}

.logo-wave {
    animation: logoFadeWave 10s ease-in-out infinite;
}

.logo-wave-1 { animation-delay: 0s; }
.logo-wave-2 { animation-delay: 2s; }
.logo-wave-3 { animation-delay: 4s; }
.logo-wave-4 { animation-delay: 6s; }
.logo-wave-5 { animation-delay: 8s; }

/* Logo Highlight Animation */
@keyframes logoHighlight {
    0%, 100% { opacity: 0.5; filter: grayscale(0.2); }
    20% { opacity: 1; filter: grayscale(0); }
    40% { opacity: 0.5; filter: grayscale(0.2); }
}

@keyframes logoHighlightMiddle {
    0%, 100% { opacity: 0.5; filter: grayscale(0.2); transform: scale(1); }
    20% { opacity: 1; filter: grayscale(0); transform: scale(1.08); }
    40% { opacity: 0.5; filter: grayscale(0.2); transform: scale(1); }
}

.logo-highlight {
    animation: logoHighlight 12s ease-in-out infinite;
}

.logo-highlight-1 { animation-delay: 0s; }
.logo-highlight-2 { animation-delay: 2.4s; }
.logo-highlight-3 { animation-delay: 4.8s; animation-name: logoHighlightMiddle; }
.logo-highlight-4 { animation-delay: 7.2s; }
.logo-highlight-5 { animation-delay: 9.6s; }

/* Pulse ring animation */
@keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

.pulse-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid currentColor;
    animation: pulse-ring 2s ease-out infinite;
}

/* Toast Notification Animation */
@keyframes slideDown {
    from { transform: translate(-50%, -100%); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

.animate-slide-down {
    animation: slideDown 0.3s ease-out;
}

/* Horizontal bounce animation for scroll indicator */
@keyframes bounce-x {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

.animate-bounce-x {
    animation: bounce-x 1s ease-in-out infinite;
}

/* ==========================================================================
   TIMELINE STYLES
   ========================================================================== */

.timeline-container {
    position: relative;
}

.timeline-container::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--color-buttons, #6366F1) 0%, var(--color-accent, #22D3EE) 50%, var(--color-buttons, #6366F1) 100%);
}

@media (min-width: 768px) {
    .timeline-container::before {
        left: 50%;
        transform: translateX(-50%);
    }
}

.timeline-dot {
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, var(--color-buttons, #6366F1), var(--color-accent, #22D3EE));
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 0 3px #E0E7FF;
    z-index: 10;
}

@media (min-width: 768px) {
    .timeline-dot {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   PROCESS STEP STYLES
   ========================================================================== */

.process-step {
    position: relative;
}

.process-step::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -50%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-buttons, #6366F1), transparent);
}

.process-step:last-child::after {
    display: none;
}

@media (max-width: 768px) {
    .process-step::after {
        display: none;
    }
}

/* ==========================================================================
   MARQUEE & SCROLL STYLES
   ========================================================================== */

/* Logo Marquee */
.logo-marquee-container {
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logo-marquee {
    animation: marquee 20s linear infinite;
    width: max-content;
}

.logo-marquee:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Education Marquee - manual scroll */
.edu-marquee-container {
    overflow-x: auto;
}

.edu-marquee {
    width: max-content;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin: 0 auto;
}

/* Hide scrollbar */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}
.scrollbar-thin::-webkit-scrollbar {
    width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
}

/* Responsive horizontal scroll for cards on small screens */
.horizontal-scroll {
    display: flex;
    overflow-x: auto;
    gap: 1.25rem;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.25rem;
}

.horizontal-scroll > * {
    flex: 0 0 85%;
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .horizontal-scroll {
        display: grid;
        overflow: visible;
        scroll-snap-type: none;
        gap: 2rem;
    }
    .horizontal-scroll > * {
        flex: unset;
        scroll-snap-align: unset;
    }
}

/* Scroll hint styling */
.scroll-hint {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.scroll-hint:hover {
    opacity: 1;
}

/* ==========================================================================
   DETAILS/SUMMARY STYLES
   ========================================================================== */

details summary {
    list-style: none;
}

details summary::-webkit-details-marker {
    display: none;
}

details[open] summary ~ * {
    animation: expandDown 0.3s ease-out;
}

@keyframes expandDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

details summary i.fa-chevron-right {
    transition: transform 0.2s ease;
}

details[open] summary i.fa-chevron-right {
    transform: rotate(90deg);
}

@keyframes pulse-subtle {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50% { box-shadow: 0 0 12px 4px rgba(34, 197, 94, 0.25); }
}
.animate-pulse-subtle {
    animation: pulse-subtle 2.5s ease-in-out infinite;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.stat-number {
    font-size: 3rem;
    font-weight: 800;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}