/* ============================================
   Main Stylesheet
   Imports all CSS modules and adds page-specific styles
   ============================================ */

/* Import CSS Modules */
@import url('variables.css');
@import url('base.css');
@import url('components.css');
@import url('layout.css');

/* ============================================
   Page-Specific Styles
   ============================================ */

/* Home Page Specific Styles */
.home-layout .hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.home-layout .hero-container {
    width: 100%;
}

/* Background Page Specific Styles */
.background-layout {
    counter-reset: experience-counter;
}

.background-layout .experience-item {
    counter-increment: experience-counter;
}

.background-layout .experience-item::before {
    content: counter(experience-counter);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: var(--shadow);
}

/* Bioinfo Page Specific Styles */
.tools-layout .tools-grid {
    margin-top: var(--space-4);
}

/* ============================================
   Utility Classes for Specific Use Cases
   ============================================ */

/* Gradient Text */
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-secondary {
    background: var(--gradient-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gradient Border */
.gradient-border {
    position: relative;
}

.gradient-border::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--gradient-primary);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity var(--transition);
}

.gradient-border:hover::before {
    opacity: 1;
}

/* Glass Effect */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="dark"] .glass-effect {
    background: rgba(0, 0, 0, 0.2);
}

/* Neon Effect */
.neon-effect {
    box-shadow: 
        0 0 5px var(--color-primary),
        0 0 10px var(--color-primary),
        0 0 20px var(--color-primary),
        0 0 40px var(--color-primary);
}

/* Glow Effect */
.glow-effect {
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.3);
}

.glow-effect-secondary {
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
}

/* Floating Animation */
.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Pulse Animation */
.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Bounce Animation */
.bounce {
    animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Shake Animation */
.shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    20%, 60% {
        transform: translateX(-5px);
    }
    40%, 80% {
        transform: translateX(5px);
    }
}

/* Spin Animation */
.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Slide In Animation */
.slide-in-left {
    animation: slideInLeft 0.5s ease-out forwards;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-right {
    animation: slideInRight 0.5s ease-out forwards;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-up {
    animation: slideInUp 0.5s ease-out forwards;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in-down {
    animation: slideInDown 0.5s ease-out forwards;
}

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

/* Zoom In Animation */
.zoom-in {
    animation: zoomIn 0.5s ease-out forwards;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Fade In Animation */
.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Stagger Animation */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* Scroll Reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Parallax Effect */
.parallax {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* Sticky Element */
.sticky-element {
    position: sticky;
    top: var(--header-height);
}

/* Fixed Element */
.fixed-element {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
}

/* Absolute Position Helpers */
.absolute-top-left {
    position: absolute;
    top: 0;
    left: 0;
}

.absolute-top-right {
    position: absolute;
    top: 0;
    right: 0;
}

.absolute-bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
}

.absolute-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
}

.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Transform Helpers */
.translate-x-0 { transform: translateX(0); }
.translate-x-1 { transform: translateX(var(--space-1)); }
.translate-x-2 { transform: translateX(var(--space-2)); }
.translate-x-4 { transform: translateX(var(--space-4)); }
.translate-x-8 { transform: translateX(var(--space-8)); }

.translate-y-0 { transform: translateY(0); }
.translate-y-1 { transform: translateY(var(--space-1)); }
.translate-y-2 { transform: translateY(var(--space-2)); }
.translate-y-4 { transform: translateY(var(--space-4)); }
.translate-y-8 { transform: translateY(var(--space-8)); }

.scale-90 { transform: scale(0.9); }
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }

.rotate-1 { transform: rotate(1deg); }
.rotate-2 { transform: rotate(2deg); }
.rotate-3 { transform: rotate(3deg); }
.rotate-neg-1 { transform: rotate(-1deg); }
.rotate-neg-2 { transform: rotate(-2deg); }
.rotate-neg-3 { transform: rotate(-3deg); }

/* Perspective */
.perspective-100 { perspective: 100px; }
.perspective-500 { perspective: 500px; }
.perspective-1000 { perspective: 1000px; }

/* Transform Style */
.preserve-3d { transform-style: preserve-3d; }
.flat { transform-style: flat; }

/* Backface Visibility */
.backface-hidden { backface-visibility: hidden; }
.backface-visible { backface-visibility: visible; }

/* Will Change */
.will-change-transform { will-change: transform; }
.will-change-opacity { will-change: opacity; }
.will-change-scroll { will-change: scroll-position; }

/* Contain */
.contain-strict { contain: strict; }
.contain-content { contain: content; }
.contain-size { contain: size; }
.contain-layout { contain: layout; }
.contain-style { contain: style; }
.contain-paint { contain: paint; }

/* Image Rendering */
.image-rendering-auto { image-rendering: auto; }
.image-rendering-crisp { image-rendering: crisp-edges; }
.image-rendering-pixel { image-rendering: pixelated; }

/* Object Position */
.object-top-left { object-position: top left; }
.object-top-center { object-position: top center; }
.object-top-right { object-position: top right; }
.object-center-left { object-position: center left; }
.object-center { object-position: center; }
.object-center-right { object-position: center right; }
.object-bottom-left { object-position: bottom left; }
.object-bottom-center { object-position: bottom center; }
.object-bottom-right { object-position: bottom right; }

/* Background Size */
.bg-auto { background-size: auto; }
.bg-cover { background-size: cover; }
.bg-contain { background-size: contain; }

/* Background Position */
.bg-top-left { background-position: top left; }
.bg-top-center { background-position: top center; }
.bg-top-right { background-position: top right; }
.bg-center-left { background-position: center left; }
.bg-center { background-position: center; }
.bg-center-right { background-position: center right; }
.bg-bottom-left { background-position: bottom left; }
.bg-bottom-center { background-position: bottom center; }
.bg-bottom-right { background-position: bottom right; }

/* Background Repeat */
.bg-no-repeat { background-repeat: no-repeat; }
.bg-repeat { background-repeat: repeat; }
.bg-repeat-x { background-repeat: repeat-x; }
.bg-repeat-y { background-repeat: repeat-y; }

/* Background Attachment */
.bg-fixed { background-attachment: fixed; }
.bg-local { background-attachment: local; }
.bg-scroll { background-attachment: scroll; }

/* Clip Path */
.clip-circle { clip-path: circle(50% at 50% 50%); }
.clip-ellipse { clip-path: ellipse(50% 50% at 50% 50%); }
.clip-polygon { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }

/* Shape Outside */
.shape-outside-circle { shape-outside: circle(50%); }
.shape-outside-ellipse { shape-outside: ellipse(50% 50% at 50% 50%); }

/* Filter for Images */
.filter-blur-sm { filter: blur(1px); }
.filter-blur-md { filter: blur(2px); }
.filter-blur-lg { filter: blur(4px); }

/* Mix Blend Mode for Overlays */
.mix-blend-multiply { mix-blend-mode: multiply; }
.mix-blend-screen { mix-blend-mode: screen; }
.mix-blend-overlay { mix-blend-mode: overlay; }
.mix-blend-darken { mix-blend-mode: darken; }
.mix-blend-lighten { mix-blend-mode: lighten; }
.mix-blend-color-dodge { mix-blend-mode: color-dodge; }
.mix-blend-color-burn { mix-blend-mode: color-burn; }
.mix-blend-hard-light { mix-blend-mode: hard-light; }
.mix-blend-soft-light { mix-blend-mode: soft-light; }
.mix-blend-difference { mix-blend-mode: difference; }
.mix-blend-exclusion { mix-blend-mode: exclusion; }
.mix-blend-hue { mix-blend-mode: hue; }
.mix-blend-saturation { mix-blend-mode: saturation; }
.mix-blend-color { mix-blend-mode: color; }
.mix-blend-luminosity { mix-blend-mode: luminosity; }

/* Background Blend Mode */
.bg-blend-multiply { background-blend-mode: multiply; }
.bg-blend-screen { background-blend-mode: screen; }
.bg-blend-overlay { background-blend-mode: overlay; }
.bg-blend-darken { background-blend-mode: darken; }
.bg-blend-lighten { background-blend-mode: lighten; }
.bg-blend-color-dodge { background-blend-mode: color-dodge; }
.bg-blend-color-burn { background-blend-mode: color-burn; }
.bg-blend-hard-light { background-blend-mode: hard-light; }
.bg-blend-soft-light { background-blend-mode: soft-light; }
.bg-blend-difference { background-blend-mode: difference; }
.bg-blend-exclusion { background-blend-mode: exclusion; }
.bg-blend-hue { background-blend-mode: hue; }
.bg-blend-saturation { background-blend-mode: saturation; }
.bg-blend-color { background-blend-mode: color; }
.bg-blend-luminosity { background-blend-mode: luminosity; }

/* Isolation */
.isolate { isolation: isolate; }
.isolation-auto { isolation: auto; }

/* CSS Grid Auto Flow */
.grid-flow-row { grid-auto-flow: row; }
.grid-flow-col { grid-auto-flow: column; }
.grid-flow-dense { grid-auto-flow: dense; }
.grid-flow-row-dense { grid-auto-flow: row dense; }
.grid-flow-col-dense { grid-auto-flow: column dense; }

/* Grid Auto Columns/Rows */
.auto-cols-auto { grid-auto-columns: auto; }
.auto-cols-minmax { grid-auto-columns: minmax(0, 1fr); }
.auto-cols-fr { grid-auto-columns: 1fr; }
.auto-rows-auto { grid-auto-rows: auto; }
.auto-rows-minmax { grid-auto-rows: minmax(0, 1fr); }
.auto-rows-fr { grid-auto-rows: 1fr; }

/* Gap Utilities */
.gap-x-0 { column-gap: 0; }
.gap-x-1 { column-gap: var(--space-1); }
.gap-x-2 { column-gap: var(--space-2); }
.gap-x-3 { column-gap: var(--space-3); }
.gap-x-4 { column-gap: var(--space-4); }
.gap-x-6 { column-gap: var(--space-6); }
.gap-x-8 { column-gap: var(--space-8); }

.gap-y-0 { row-gap: 0; }
.gap-y-1 { row-gap: var(--space-1); }
.gap-y-2 { row-gap: var(--space-2); }
.gap-y-3 { row-gap: var(--space-3); }
.gap-y-4 { row-gap: var(--space-4); }
.gap-y-6 { row-gap: var(--space-6); }
.gap-y-8 { row-gap: var(--space-8); }

/* Justify Items */
.justify-items-start { justify-items: start; }
.justify-items-end { justify-items: end; }
.justify-items-center { justify-items: center; }
.justify-items-stretch { justify-items: stretch; }

/* Align Items */
.items-start { align-items: start; }
.items-end { align-items: end; }
.items-center { align-items: center; }
.items-stretch { align-items: stretch; }

/* Justify Self */
.justify-self-start { justify-self: start; }
.justify-self-end { justify-self: end; }
.justify-self-center { justify-self: center; }
.justify-self-stretch { justify-self: stretch; }

/* Align Self */
.align-self-start { align-self: start; }
.align-self-end { align-self: end; }
.align-self-center { align-self: center; }
.align-self-stretch { align-self: stretch; }

/* Place Items */
.place-items-start { place-items: start; }
.place-items-end { place-items: end; }
.place-items-center { place-items: center; }
.place-items-stretch { place-items: stretch; }

/* Place Self */
.place-self-start { place-self: start; }
.place-self-end { place-self: end; }
.place-self-center { place-self: center; }
.place-self-stretch { place-self: stretch; }

/* Place Content */
.place-content-start { place-content: start; }
.place-content-end { place-content: end; }
.place-content-center { place-content: center; }
.place-content-between { place-content: space-between; }
.place-content-around { place-content: space-around; }
.place-content-evenly { place-content: space-evenly; }
.place-content-stretch { place-content: stretch; }

/* Order */
.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-last { order: 9999; }
.order-first { order: -9999; }

/* Grid Column */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-full { grid-column: 1 / -1; }

.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; }

.col-end-1 { grid-column-end: 1; }
.col-end-2 { grid-column-end: 2; }
.col-end-3 { grid-column-end: 3; }
.col-end-4 { grid-column-end: 4; }
.col-end-5 { grid-column-end: 5; }
.col-end-6 { grid-column-end: 6; }
.col-end-7 { grid-column-end: 7; }

/* Grid Row */
.row-span-1 { grid-row: span 1; }
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }
.row-span-4 { grid-row: span 4; }
.row-span-5 { grid-row: span 5; }
.row-span-6 { grid-row: span 6; }
.row-span-full { grid-row: 1 / -1; }

.row-start-1 { grid-row-start: 1; }
.row-start-2 { grid-row-start: 2; }
.row-start-3 { grid-row-start: 3; }
.row-start-4 { grid-row-start: 4; }
.row-start-5 { grid-row-start: 5; }
.row-start-6 { grid-row-start: 6; }
.row-start-7 { grid-row-start: 7; }

.row-end-1 { grid-row-end: 1; }
.row-end-2 { grid-row-end: 2; }
.row-end-3 { grid-row-end: 3; }
.row-end-4 { grid-row-end: 4; }
.row-end-5 { grid-row-end: 5; }
.row-end-6 { grid-row-end: 6; }
.row-end-7 { grid-row-end: 7; }

/* Auto Columns/Rows */
.auto-cols-auto { grid-auto-columns: auto; }
.auto-cols-minmax-0 { grid-auto-columns: minmax(0, 1fr); }
.auto-cols-fr { grid-auto-columns: 1fr; }
.auto-rows-auto { grid-auto-rows: auto; }
.auto-rows-minmax-0 { grid-auto-rows: minmax(0, 1fr); }
.auto-rows-fr { grid-auto-rows: 1fr; }

/* Grid Template Areas */
.grid-areas-none { grid-template-areas: none; }
.grid-areas-header { grid-template-areas: "header"; }
.grid-areas-main { grid-template-areas: "main"; }
.grid-areas-footer { grid-template-areas: "footer"; }
.grid-areas-header-main { grid-template-areas: "header" "main"; }
.grid-areas-header-footer { grid-template-areas: "header" "footer"; }
.grid-areas-main-footer { grid-template-areas: "main" "footer"; }
.grid-areas-header-main-footer { grid-template-areas: "header" "main" "footer"; }

/* Grid Area */
.grid-area-header { grid-area: header; }
.grid-area-main { grid-area: main; }
.grid-area-footer { grid-area: footer; }
.grid-area-sidebar { grid-area: sidebar; }
.grid-area-content { grid-area: content; }

/* ============================================
   Final Touches
   ============================================ */

/* Ensure smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Selection color */
::selection {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Focus visible for accessibility */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* End of Main Stylesheet */