
/* --- CORE PAGE STYLES --- */
.welcome-section {
    background-image: radial-gradient(#243A6A 0.5px, transparent 0.5px);
    background-size: 30px 30px;
}

/* Glassy Tile Logic - The Frame */
.glass-tile {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images stay inside the frame */
    transition: transform 1s ease;
}

.glass-tile:hover {
    transform: translateY(-10px) scale(1.02) !important;
    z-index: 40;
    border-color: #E4002B;
    box-shadow: 0 30px 60px rgba(228, 0, 43, 0.1);
}

.glass-tile:hover img {
    transform: scale(1.1);
}

.active-tile {
    transform: scale(1.1);
    box-shadow: 0 40px 80px rgba(36, 58, 106, 0.2);
    border: 1px solid rgba(36, 58, 106, 0.3);
}

.glass-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

/* --- ANIMATIONS --- */
@keyframes float-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes float-fast { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
.animate-float-fast { animation: float-fast 5s ease-in-out infinite; }
.animate-blob { animation: blob 12s infinite; }
.animation-delay-700 { animation-delay: 0.7s; }
.animation-delay-1000 { animation-delay: 1s; }
.animation-delay-2000 { animation-delay: 2s; }

/* Typing Text Gradient */
#typing-text {
    background: linear-gradient(to right, #243A6A, #E4002B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    display: inline-block;
    min-height: 2.5em; /* Forces the span to take up space even when empty */
    vertical-align: bottom; /* Prevents slight shifts during font rendering */
}

/* Reveal Effect on Scroll */
.welcome-text-content {
    opacity: 0;
    transform: translateX(40px);
    transition: all 1s ease-out;
}
.welcome-text-content.reveal { opacity: 1; transform: translateX(0); }

