/* ============================================
   SHINY TEXT COMPONENT
   Animated gradient text effect with moving shine
   ============================================ */

.shiny-text-container {
    width: 100%;
    overflow: hidden; /* Prevent horizontal scrollbar */
    background: transparent; /* Grid shows through */
    padding: 8vh 2rem 2vh 2rem; /* 4x spacing above (8vh), consistent with strategic-insights */
    position: relative;
    z-index: 1;
}

.shiny-text-wrapper {
    max-width: 1200px; /* Match strategic-insights-container */
    margin: 0 auto;
    text-align: left; /* Left aligned */
}

.shiny-text {
    display: inline-block;
    font-family: 'Six Caps', sans-serif;
    font-weight: 400;
    font-size: clamp(5rem, 7.5vw, 7.5rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 0.9;
    user-select: none;
    margin: 0 0 1rem 0;

    /* Gradient animation setup */
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    will-change: background-position;
}

.shiny-text-subtitle {
    font-family: 'Telegraf', 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: rgba(244, 235, 208, 0.6);
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin: 0;
    max-width: 600px;
}


/* ============================================
   RESPONSIVE — Mobile (≤768px)
   ============================================ */

@media (max-width: 768px) {
    .shiny-text-container {
        padding: 1.25rem 1rem 1.5rem 1rem;
    }

    .shiny-text {
        font-size: 4.375rem;
    }

    .shiny-text-subtitle {
        font-size: 0.75rem;
    }
}


/* ============================================
   RESPONSIVE — Mobile landscape
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
    .shiny-text-container {
        padding: 1rem 1rem 1.25rem 1rem;
    }
}