/* main.css - Custom styles for sowmyavadhana.com */

html {
    font-family: 'Inter', sans-serif;
}
body {
    min-height: 100vh;
}

/* Sleek shadow for hero image, now for half-portrait (rounded-2xl) */
.hero-img-frame {
    box-shadow: 0 8px 40px 0 rgba(255, 99, 71, 0.09), 0 1.5px 6px 0 rgba(255, 193, 7, 0.12);
    border-radius: 1rem/* 16px */;
    aspect-ratio: 3/4;
    transition: box-shadow 0.3s cubic-bezier(.4,0,.2,1);
    background: linear-gradient(135deg, #f9e5e0 0%, #ffe4b2 60%, #d0f5ef 100%);
}
.hero-img-frame:hover {
    box-shadow: 0 16px 60px 0 rgba(255, 99, 71, 0.17), 0 3px 12px 0 rgba(255, 193, 7, 0.18);
}

/* Responsive cards */
.section {
    max-width: 100vw;
    margin: 0 auto 2rem auto;
    border-radius: 1.5rem;
    box-shadow: 0 4px 32px 0 rgba(255, 193, 7, 0.10), 0 1.5px 6px 0 rgba(255, 99, 71, 0.08);
    background-clip: padding-box;
    transition: background 0.3s, box-shadow 0.3s;
}

/* Card spacing for all screens */
@media (max-width: 640px) {
    .section { padding: 1.25rem !important; }
    .hero-img-frame { width: 9rem !important; height: 12rem !important; }
}
@media (min-width: 641px) and (max-width: 1023px) {
    .section { padding: 2rem !important; }
    .hero-img-frame { width: 12rem !important; height: 18rem !important; }
}
@media (min-width: 1024px) {
    .section { padding: 2.5rem !important; }
    .hero-img-frame { width: 20rem !important; height: 30rem !important; }
}

/* Subtle fade-in animation for hero */
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(32px); }
    100% { opacity: 1; transform: none; }
}
.fade-in-up {
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.1s 1 forwards;
}

/* Staggered fade-in for hero elements */
.fade-in-up[style*="animation-delay:0.15s"] {
    animation-delay: 0.15s !important;
}
.fade-in-up[style*="animation-delay:0.3s"] {
    animation-delay: 0.3s !important;
}
.fade-in-up[style*="animation-delay:0.5s"] {
    animation-delay: 0.5s !important;
}

/* Animated gradient background */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.animate-gradient {
    background-size: 300% 300%;
    animation: gradientMove 12s ease-in-out infinite;
}

/* Floating image effect */
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
    100% { transform: translateY(0); }
}
.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* For smooth section transitions */
.section {
    transition: background 0.3s, box-shadow 0.3s;
}