/* ══════════════════════════════════
   hero-steep — shared "Inside α" wordmark treatment
   Renders the brand wordmark on /dashboard/overview: "Inside" in the brand
   gradient (drift), α via the "The Steep" reveal (Georgia italic mint + glow).
   Pair with hero-steep.js. Font-size/family are inherited from the page's
   heading — only colour and the wordmark motion are standardised here.
   ══════════════════════════════════ */

/* "Inside" — brand gradient with slow drift */
.engine-hero-word {
    background: linear-gradient(135deg, #fff 0%, var(--indigo, #6366f1) 35%, var(--mint, #34d399) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-size: 200% 200%;
    background-position: 0% 50%;
    animation: heroGradientDrift 7s ease-in-out infinite alternate;
}
@keyframes heroGradientDrift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* α — "The Steep" character swap (a → α) */
.hero-steep {
    position: relative;
    display: inline-block;
    width: 0.55em;
    text-align: left;
    vertical-align: baseline;
}
.hero-steep-a {
    display: inline-block;
    background: linear-gradient(135deg, #fff 0%, var(--indigo, #6366f1) 35%, var(--mint, #34d399) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: opacity 0.3s ease;
}
.hero-steep-a.fading { opacity: 0; }
.hero-steep-alpha {
    position: absolute;
    left: 0;
    top: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    color: #34d399;
    -webkit-text-fill-color: #34d399;
    background: none;
    opacity: 0;
    transition: opacity 0.6s ease, text-shadow 0.8s ease;
}
.hero-steep-alpha.visible { opacity: 1; }
.hero-steep-alpha.glow {
    text-shadow: 0 0 24px rgba(52, 211, 153, 0.55),
                 0 0 60px rgba(52, 211, 153, 0.22);
}
.hero-steep-drop {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--indigo, #6366f1);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transform: translate(-50%, -50%);
}
.hero-steep-drop.falling {
    animation: heroSteepDropFall 0.7s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes heroSteepDropFall {
    0%   { opacity: 1; transform: translate(-50%, calc(-50% - 80px)); }
    100% { opacity: 1; transform: translate(-50%, -50%); }
}
.hero-steep-ink {
    position: absolute;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(99, 102, 241, 0.32) 0%,
        rgba(52, 211, 153, 0.12) 40%,
        transparent 70%);
    pointer-events: none;
    z-index: 5;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}
.hero-steep-ink.spreading {
    animation: heroSteepInkSpread 1.1s ease-out forwards;
}
@keyframes heroSteepInkSpread {
    0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.9; }
    60%  {                                              opacity: 0.4; }
    100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
    .engine-hero-word { animation: none; }
    .hero-steep-a { display: none; }
    .hero-steep-alpha { opacity: 1; text-shadow: 0 0 24px rgba(52, 211, 153, 0.5); }
    .hero-steep-drop, .hero-steep-ink { display: none; }
}