/* Custom Styles */
body { font-family: 'Inter', sans-serif; background-color: #111827; color: #F3F4F6; }
html { scroll-behavior: smooth; }
.nav-link { transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out; }
.nav-link.active { border-bottom: 2px solid #3B82F6; color: #ffffff; }
#mobileMenu .nav-link.active { color: #60A5FA; border-bottom: none; font-weight: 600; background-color: #374151; }
#mobileMenu .nav-link { transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; }
/* --- Scroll Animation --- */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* --- End Scroll Animation --- */
section { padding-top: 5rem; padding-bottom: 4rem; }
.legal-section { padding-top: 7rem; min-height: calc(100vh - 4rem); }
.legal-section h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: #ffffff; }
.legal-section h4 { font-size: 1.125rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; color: #E5E7EB; }
.legal-section p, .legal-section li { margin-bottom: 0.75rem; line-height: 1.6; color: #D1D5DB; }
.legal-section ul { list-style: disc; padding-left: 1.5rem; }
.legal-section a { color: #60A5FA; text-decoration: underline; }
.legal-section a:hover { color: #3B82F6; }
.btn-hover-scale { transition: transform 0.2s ease-in-out, background-color 0.3s ease-in-out, opacity 0.3s ease; }
.btn-hover-scale:hover { transform: scale(1.05); }
.card-hover-scale { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-hover-scale:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); }
.social-icon { font-size: 1.5rem; transition: color 0.3s ease, transform 0.2s ease-in-out; }
.social-icon:hover { color: #ffffff; transform: scale(1.1); }
#backToTopBtn { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; background-color: #3B82F6; color: white; cursor: pointer; padding: 10px 15px; border-radius: 50%; font-size: 18px; transition: background-color 0.3s ease, opacity 0.5s ease, transform 0.2s ease-in-out; opacity: 0.8; }
#backToTopBtn:hover { background-color: #2563EB; opacity: 1; transform: scale(1.1); }
#playVideoButton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(30, 41, 59, 0.6); /* Slightly darker semi-transparent background */
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.6); /* Slightly more opaque border */
    border-radius: 50%;
    width: 80px; /* Keep size or adjust if needed */
    height: 80px;
    font-size: 32px; /* Slightly larger icon */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 25;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease-in-out, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Add subtle shadow */
}
#playVideoButton:hover {
    background-color: rgba(17, 24, 39, 0.8); /* Darker on hover */
    border-color: rgba(255, 255, 255, 0.8);
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); /* Enhance shadow on hover */
}
.video-playing #playVideoButton { opacity: 0; pointer-events: none; }
#bio { background-image: url('https://placehold.co/1920x1080/1F2937/4B5563?text=Parallax+Background'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; }
#bio::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(17, 24, 39, 0.7); z-index: 1; }
#bio > div { position: relative; z-index: 2; }
.instagram-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; max-width: 100%; margin: 0 auto; align-items: start; }
@media (min-width: 640px) { .instagram-grid { grid-template-columns: repeat(2, 1fr); max-width: 768px; } }
@media (min-width: 1024px) { .instagram-grid { grid-template-columns: repeat(3, 1fr); max-width: 1280px; } }
.instagram-media { margin: 0 auto !important; min-width: unset !important; width: 100% !important; max-width: 100% !important; background-color: #1F2937; border-radius: 3px; }
.instagram-button { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
#mobileMenu {
    position: absolute;
    top: 100%; /* Changed top-full to 100% for clarity */
    left: 0;
    width: 100%;
    background-color: #1f2937;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
    z-index: 40;
}
#mobileMenu.menu-open { max-height: 500px; opacity: 1; }
/* Honeypot Field Style */
.honeypot-field { opacity: 0; position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: -1; }