/* About Page Modern Redesign */

/* Hero Section Specifics */
/* Note: Common gradient and spacing are available in .hero-section-common if needed, 
   but we keep specific overrides here or use the common class in HTML. 
   For now, we keep the specific background here as it might be slightly different 
   or we want to ensure it applies to .hero-section without changing HTML yet. */
.hero-section {
    min-height: 50vh;
    padding-top: 4rem;
    padding-bottom: 4rem;
    background: radial-gradient(circle at 50% 50%, rgba(var(--accent-color-rgb), 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    overflow: hidden;
}

[data-bs-theme="dark"] .hero-section {
    background: radial-gradient(circle at 50% 50%, rgba(var(--accent-color-rgb), 0.15) 0%, rgba(18, 18, 18, 0) 70%);
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Elegant Constellation/Network Pattern - Higher Visibility */
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%238E44AD' stroke-width='0.6' stroke-opacity='0.25'%3E%3Cpath d='M10 10 L30 30 M30 30 L50 10 M50 10 L70 30 M70 30 L90 10'/%3E%3Cpath d='M10 90 L30 70 M30 70 L50 90 M50 90 L70 70 M70 70 L90 90'/%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%238E44AD' fill-opacity='0.3' stroke='none'/%3E%3Ccircle cx='70' cy='30' r='1.5' fill='%238E44AD' fill-opacity='0.3' stroke='none'/%3E%3Ccircle cx='50' cy='10' r='2' fill='%238E44AD' fill-opacity='0.4' stroke='none'/%3E%3Ccircle cx='50' cy='90' r='2' fill='%238E44AD' fill-opacity='0.4' stroke='none'/%3E%3Ccircle cx='10' cy='50' r='1.5' fill='%238E44AD' fill-opacity='0.3' stroke='none'/%3E%3Ccircle cx='90' cy='50' r='1.5' fill='%238E44AD' fill-opacity='0.3' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 150px 150px;
    z-index: 0;
    opacity: 0.8;
    animation: drift 80s linear infinite;
}

@keyframes drift {
    from { background-position: 0 0; }
    to { background-position: 100px 100px; }
}

/* Philosophy Section */
.section-title {
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.floating-svg {
    animation: float 6s ease-in-out infinite;
}

/* Tech Section */
.tech-card {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    background-color: var(--bs-body-bg);
}

.tech-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.1) !important;
}

.tech-card .icon-box {
    transition: transform 0.3s ease;
}

.tech-card:hover .icon-box {
    transform: scale(1.1) rotate(5deg);
}

[data-bs-theme="dark"] .tech-card {
    border: 1px solid rgba(255,255,255,0.1) !important;
}

/* Yashi Section */
.bubble-card {
    border-radius: 2rem;
    border-bottom-left-radius: 0;
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.05), rgba(var(--secondary-accent-color-rgb), 0.05));
    border: 1px solid rgba(var(--accent-color-rgb), 0.1) !important;
}

[data-bs-theme="dark"] .bubble-card {
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.1), rgba(var(--secondary-accent-color-rgb), 0.1));
    border-color: rgba(255,255,255,0.1) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-section {
        min-height: 60vh;
    }
    
    .display-3 {
        font-size: 2.5rem;
    }
}