/* Custom styles for Henrique Oswald school website */

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

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

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

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

.hero-gradient {
    background: linear-gradient(-45deg, #020b1c, #0d2850, #071530, #173e73, #020b1c);
    background-size: 400% 400%;
    animation: gradientShift 18s ease infinite;
}

.dot-grid {
    background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 32px 32px;
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

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

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
    opacity: 0;
}

/* Buttons */
.btn-primary {
    @apply inline-flex items-center justify-center gap-2 bg-gold-400 hover:bg-gold-300 text-navy-950 font-bold px-8 py-4 rounded-full text-base transition-all duration-300 hover:scale-105;
}

.btn-secondary {
    @apply inline-flex items-center justify-center gap-2 bg-white hover:bg-slate-100 text-navy-900 font-semibold px-8 py-4 rounded-full text-base transition-all duration-300 hover:scale-105 shadow-lg;
}

.btn-outline {
    @apply inline-flex items-center justify-center gap-2 border-2 border-navy-800 hover:bg-navy-800 text-navy-800 hover:text-white font-bold px-8 py-4 rounded-full text-base transition-all duration-300;
}

/* Cards */
.card {
    @apply bg-white rounded-2xl shadow-card hover:shadow-card-hover transition-all duration-500 hover:-translate-y-1;
}

.hover-glow:hover {
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.3), 0 20px 60px -10px rgba(251, 191, 36, 0.15);
}

/* Section titles */
.section-title {
    @apply font-display font-black text-4xl md:text-5xl lg:text-6xl text-navy-900 leading-tight;
}

.section-subtitle {
    @apply text-lg md:text-xl text-slate-500 font-normal leading-relaxed;
}

/* Header scrolled state */
header.scrolled {
    background: rgba(2, 11, 28, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

header:not(.scrolled) {
    background: transparent;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Nav link active */
.nav-link.active {
    color: #fbbf24;
    background: rgba(255, 255, 255, 0.05);
}

/* Dropdown menu */
.dropdown-menu:hover .dropdown-content {
    @apply opacity-100 visible;
}

.dropdown-menu:hover .dropdown-arrow {
    @apply rotate-180;
}

/* Mobile menu transitions */
#mobile-overlay.visible {
    @apply opacity-100 visible;
}

#mobile-menu.open {
    @apply translate-x-0;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-slate-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-navy-700 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-navy-600;
}

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