/* ============================================
   TABLE OF CONTENTS:
   
   1. Animations & Keyframes
   2. General Element Styles
   3. Navigation & Menu Styles
   4. Project & Video Gallery Styles
   5. Profile & Social Link Styles
   6. Dark Mode Styles
   ============================================ */

/* ============================================
   1. ANIMATIONS & KEYFRAMES
   ============================================ */

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

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

/* General transitions */
.dark-mode-transition * {
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* ============================================
   2. GENERAL ELEMENT STYLES
   ============================================ */
/* Smoother scrolling */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; 
}

/* Logo animation */
h1.font-\[Griffy\] {
    transition: transform 0.3s ease;
}

h1.font-\[Griffy\]:hover {
    transform: scale(1.1);
}

h1.font-\[Griffy\] a {
    display: inline-block;
    transition: all 0.3s ease;
}

/* ============================================
   3. NAVIGATION & MENU STYLES
   ============================================ */
/* Mobile menu animations */
#mobile-menu {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(-10px);
    opacity: 0;
}

#mobile-menu:not(.hidden) {
    transform: translateY(0);
    opacity: 1;
}

/* Mobile menu button */
#mobile-menu-button:hover i {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

#mobile-menu-button:hover {
    transform: scale(1.05);
}

/* Theme toggle buttons */
#theme-toggle-desktop i,
#theme-toggle-mobile i {
    transition: transform 0.5s ease;
}

#theme-toggle-desktop:hover i,
#theme-toggle-mobile:hover i {
    transform: rotate(60deg);
}

/* Back to top button */
#back-to-top:hover i {
    animation: bounce 0.6s infinite;
}

/* ============================================
   4. PROJECT & Video GALLERY STYLES
   ============================================ */
/* Project cards */
.project-card {
    transition: all 0.3s ease;
}

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

.project-image {
    position: relative;
    overflow: hidden;
}

/* Video gallery styles */
.video-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.video-item:hover {
    transform: translateY(-5px);
}

/* Fix for the black bars on video thumbnails */
.video-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Makes the image cover the entire container */
    object-position: center; /* Centers the image */
    transition: transform 0.3s ease, filter 0.3s ease;
}

.video-item:hover img {
    transform: scale(1.05); /* Slightly larger zoom on hover */
}

/* YouTube Thumbnail Overlay */
.video-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.video-item:hover::before {
    opacity: 1;
}

/* Ensure the overlay content is properly positioned */
.video-item .text-center {
    z-index: 2;  /* Make sure text appears above the overlay */
    width: 80%;  /* Prevent text from stretching too wide */
    max-width: 300px;
}

/* ============================================
   5. PROFILE & SOCIAL LINK STYLES
   ============================================ */
/* Profile image */
.profile-container {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
}

.profile-image {
    transition: all 0.5s ease;
}

.profile-container:hover .profile-image {
    transform: scale(1.03);
}

/* Social icons */
.social-icon {
    display: inline-block;
    transition: transform 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.2);
}

.hover-tilt:hover {
    transform: rotate(1deg) scale(1.02);
}

/* ============================================
   6. DARK MODE STYLES
   ============================================ */
/* Base dark mode styles */
body.dark-mode {
    background: linear-gradient(to bottom right, #1e293b, #334155);
    color: #f8fafc;
}

/* Header & navigation */
body.dark-mode header {
    background-color: rgba(30, 41, 59, 0.8);
}

body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode #typing-text {
    color: #f8fafc;
}

body.dark-mode h1 a {
    color: #fbbf24;
}

body.dark-mode p {
    color: #cbd5e1;
}

/* Navigation links */
body.dark-mode nav a,
body.dark-mode #mobile-menu a {
    color: #cbd5e1;
}

body.dark-mode nav a:hover,
body.dark-mode #mobile-menu a:hover {
    color: #fbbf24;
}

body.dark-mode #mobile-menu {
    background-color: #1e293b;
    border-color: #475569;
}

/* Icons and buttons */
body.dark-mode #theme-toggle-desktop i,
body.dark-mode #theme-toggle-mobile i,
body.dark-mode #mobile-menu-button i {
    color: #cbd5e1;
}

body.dark-mode #theme-toggle-desktop:hover,
body.dark-mode #theme-toggle-mobile:hover,
body.dark-mode #mobile-menu-button:hover {
    color: #fbbf24;
}

body.dark-mode .social-icon {
    color: #cbd5e1;
}

body.dark-mode .social-icon:hover {
    color: #fbbf24;
}

/* Project cards */
body.dark-mode .project-card {
    background-color: #334155;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

body.dark-mode .project-card h3 {
    color: #f1f5f9;
}

body.dark-mode .project-card p {
    color: #cbd5e1;
}

body.dark-mode .project-image {
    background-color: #475569;
}

body.dark-mode .project-image img {
    filter: brightness(0.9) contrast(1.1);
}

body.dark-mode .project-image:hover img {
    filter: brightness(0.85);
}

/* Project skill tags in dark mode */
body.dark-mode .bg-gray-100 {
    background-color: rgba(120, 132, 150, 0.7);
    color: #cbd5e1ed;
}

/* Video gallery */
body.dark-mode .video-item {
    background-color: #475569;
}

body.dark-mode .video-item img {
    filter: brightness(0.85);
}

body.dark-mode .video-item:hover img {
    filter: brightness(0.75);
}

/* Back to top button */
body.dark-mode #back-to-top {
    background-color: #334155;
    border-color: rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}

body.dark-mode #back-to-top:hover {
    border-color: rgba(251, 191, 36, 0.6);
}

/* Footer */
body.dark-mode footer {
    background-color: #334155;  
    color: #cbd5e1; 
}