/* Shared hero + intro-animation styles used on every page. */

.hero-section {
    position: relative;
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.75) 0%, rgba(10, 10, 10, 0) 60%);
    pointer-events: none;
}

/* The topo canvas is positioned at z-index 0, so unpositioned hero content would
   paint underneath it. Lift every non-canvas child above the canvas and the fade. */
.hero-section > *:not(canvas) {
    position: relative;
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-anim-init {
    opacity: 0;
}

.hero-anim-in {
    opacity: 1;
}

/* Glow is transient — it belongs to the reveal animation only, not a resting style. */
.hero-title.hero-anim-in,
.page-hero-title.hero-anim-in {
    animation: heroTitleGlow 900ms ease-out;
}

@keyframes heroTitleGlow {
    0% { text-shadow: 0 0 24px rgba(250, 204, 21, 0.75), 0 0 4px rgba(255, 255, 255, 0.6); }
    100% { text-shadow: 0 0 0 rgba(250, 204, 21, 0); }
}

.hero-anim-copy.hero-anim-in {
    animation: heroCopyIn 700ms ease-out both;
}

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