/* ============================================================
   HERO SECTION
   ============================================================ */

.hero-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5rem 1rem 1rem;
    position: relative;
    overflow: hidden;
    background: var(--hero-bg, var(--clr-bg));
    transition: background 0.7s ease;
}

.hero-bg-image {
    position: absolute;
    inset: 0;
    background-image: url('../fundo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: 0;
    mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
    transition: opacity 0.7s ease;
}

body.modo-loira .hero-bg-image {
    opacity: 0.35;
}

/* Gothic atmosphere glow */
.hero-glow {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 700px;
    background: var(--hero-glow-color,
            radial-gradient(ellipse,
                rgba(124, 58, 237, 0.22) 0%,
                rgba(76, 29, 149, 0.08) 50%,
                transparent 75%));
    border-radius: 50%;
    filter: blur(60px);
    opacity: 1;
    pointer-events: none;
    transition: background 0.7s ease;
}

.hero-glow::after {
    content: '';
    position: absolute;
    bottom: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 300px;
    background: radial-gradient(ellipse,
            var(--hero-glow-accent, rgba(100, 0, 120, 0.14)) 0%,
            transparent 70%);
    filter: blur(40px);
    border-radius: 50%;
    transition: background 0.7s ease;
}

/* ── Modo Loira overrides for hero ── */
body.modo-loira .hero-section {
    --hero-bg: radial-gradient(ellipse at 50% 40%,
            #e8d4a0 0%,
            #f0e6c8 65%);
}

body.modo-loira .banner-center-text {
    --banner-glow: rgba(184, 134, 11, 0.4);
}

body.modo-loira .hero-glow {
    --hero-glow-color: radial-gradient(ellipse,
            rgba(212, 160, 23, 0.20) 0%,
            rgba(184, 134, 11, 0.07) 50%,
            transparent 75%);
    --hero-glow-accent: rgba(160, 100, 0, 0.12);
}

/* ── Banner wrapper (contains image + peek text) ── */
.banner-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(85vw, 900px);
    z-index: 90;
    pointer-events: none;
    overflow: visible;
}

/* Cinematic splash banner — text version */
.banner-center-text {
    display: block;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    position: relative;
    z-index: 2;
    /* Typography for the SLIYX text */
    font-family: 'Inter', sans-serif;
    font-size: clamp(4rem, 16vw, 16rem);
    font-weight: 900;
    text-align: center;
    color: var(--clr-text);
    text-shadow: 0 10px 50px var(--banner-glow, rgba(109, 40, 217, 0.6));
    letter-spacing: 0.15em;
    margin: 0;
    transition: color 0.7s ease, text-shadow 0.7s ease;
}

/* ── Portfolio text that peeks from BEHIND the banner ── */
.portfolio-peek {
    font-family: 'Kavoon', cursive;
    font-size: clamp(2rem, 6vw, 4.5rem);
    color: #f5e6c8;
    text-shadow:
        -3px -3px 0 #5a3e1b,
        3px -3px 0 #5a3e1b,
        -3px 3px 0 #5a3e1b,
        3px 3px 0 #5a3e1b,
        0 5px 0 #3a2608,
        0 8px 16px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.04em;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(0%);
    opacity: 0;
    white-space: nowrap;
    z-index: 1;
    /* BEHIND the .banner-center (z-index:2) */
}

/* ── Full-screen portfolio title (post-banner) ── */
.portfolio-title {
    font-family: 'Kavoon', cursive;
    font-size: clamp(3rem, 10vw, 9rem);
    color: #f5e6c8;
    text-shadow:
        -4px -4px 0 #5a3e1b,
        4px -4px 0 #5a3e1b,
        -4px 4px 0 #5a3e1b,
        4px 4px 0 #5a3e1b,
        0 7px 0 #3a2608,
        0 12px 28px rgba(0, 0, 0, 0.7);
    letter-spacing: 0.04em;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
    z-index: 80;
    pointer-events: none;
    white-space: nowrap;
}