/* ==========================================================================
   Hero Section Animations - Optimized for DRY, KISS, YAGNI Principles
   ========================================================================== */

/* Core animation keyframes */
@keyframes fadeIn {
    from { opacity: 0; transform: var(--fade-transform-from); }
    to { opacity: 1; transform: var(--fade-transform-to); }
}

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

/* Base animation class - DRY principle */
.animate-base {
    opacity: 0;
    animation: fadeIn var(--animation-duration) var(--animation-easing) forwards;
}

/* Animation variants - Single responsibility */
.animate-logo { --fade-transform-from: translateY(var(--animation-distance)); --fade-transform-to: translateY(0); animation: fadeIn 0.7s var(--animation-easing) 0.3s forwards; opacity: 0; }
.animate-unraveling { --fade-transform-from: translateY(var(--animation-distance)); --fade-transform-to: translateY(0); animation: fadeIn 0.6s var(--animation-easing) 0.5s forwards; opacity: 0; }
.animate-subtitle { --fade-transform-from: translateY(var(--animation-distance)); --fade-transform-to: translateY(0); animation: fadeIn var(--animation-duration) var(--animation-easing) 0.1s forwards; opacity: 0; }

/* ==========================================================================
   Hero Section Layout - Fluid Design
   ========================================================================== */

.hero-section {
    padding: 2rem 1rem;
    margin: 1rem auto;
    max-width: min(800px, 90vw);
    position: relative;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ==========================================================================
   Typography - Fluid and Responsive
   ========================================================================== */

.hero-section .brand-prism {
    font-size: clamp(3rem, 8vw, 5.5rem);
    background: linear-gradient(90deg, #4a90e2, #7b61ff, #ff7eb3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
    font-weight: 800;
    margin-bottom: 1rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

.unraveling-text .lead,
.typing-container .lead {
    font-family: var(--font-family-serif);
    max-width: min(600px, 90vw);
    margin: 0 auto;
    overflow-wrap: break-word;
    word-break: break-word;
}

.unraveling-text .lead {
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    font-weight: 400;
    color: #1a365d;
    letter-spacing: 0.15em;
    line-height: 1.3;
    text-shadow: var(--shadow-md);
}

.typing-container .lead {
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    font-weight: 500;
    color: #2c5282;
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.4;
    text-shadow: var(--shadow-sm);
    text-align: center;
}

/* ==========================================================================
   Logo and Container
   ========================================================================== */

.logo-container {
    margin: 1.5rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.prism-logo {
    width: min(500px, 80vw);
    height: auto;
    max-width: 100%;
    filter: drop-shadow(0 12px 30px rgba(74, 176, 225, 0.5));
    animation: float 6s ease-in-out infinite;
    transition: all 0.4s ease;
    box-sizing: border-box;
}

.prism-logo:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 16px 40px rgba(74, 176, 225, 0.7));
    animation-play-state: paused;
}

/* ==========================================================================
   Responsive Design - Consolidated Media Queries
   ========================================================================== */

/* Mobile and tablet */
@media (max-width: 768px) {
    .hero-section { padding: 1.5rem 1rem; margin: 0.5rem auto; max-width: 90%; }
    .hero-section .brand-prism { font-size: 4rem; }
    .prism-logo { width: 400px; }
    .unraveling-text .lead { font-size: 1.2rem; font-weight: var(--font-weight-bold); }
    .typing-container .lead { font-size: 1.1rem; max-width: 90%; }
    .logo-container { margin: 1.2rem 0; }
}

@media (max-width: 576px) {
    .hero-section { padding: 1rem 0.5rem; }
    .hero-section .brand-prism { font-size: 3.2rem; letter-spacing: -0.01em; }
    .prism-logo { width: 260px; }
    .unraveling-text .lead { font-size: 1.1rem; }
    .typing-container .lead { font-size: 1rem; max-width: 95%; }
    .logo-container { margin: 1rem 0; }
}

/* High-DPI and zoom compatibility */
@media (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25) {
    .hero-section { max-width: min(700px, 85vw); padding: 1.5rem 0.75rem; }
    .prism-logo { width: min(450px, 75vw); }
    .hero-section .brand-prism { font-size: clamp(2.8rem, 7vw, 5rem); }
    .unraveling-text .lead { font-size: clamp(1.1rem, 2.8vw, 1.5rem); max-width: min(550px, 85vw); }
    .typing-container .lead { font-size: clamp(0.9rem, 2.3vw, 1.3rem); max-width: min(550px, 85vw); }
}

@media (min-resolution: 120dpi) and (max-width: 1440px) {
    .hero-section { max-width: min(750px, 88vw); }
    .prism-logo { width: min(480px, 78vw); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .animate-logo, .animate-unraveling, .animate-subtitle { animation: none !important; opacity: 1; transform: none; }
    .prism-logo { animation: none; }
}