/**
 * App Hero — shared editorial hero pattern for KinTrades.
 * Used on public marketing pages and onboarding welcome bands.
 *
 * Markup:
 *   <section class="hero hero--atmosphere hero--grid hero--motion">
 *     <div class="hero-content">
 *       <div class="hero-badge">Tagline</div>
 *       <h1>Heading</h1>
 *       <p>Subhead.</p>
 *       <div class="hero-buttons">...</div>
 *     </div>
 *   </section>
 *
 * Modifier classes (all opt-in; combine freely):
 *   .hero--atmosphere   drifting radial overlay (::before)
 *   .hero--grid         drifting blueprint grid (::after)
 *   .hero--motion       entrance animations on badge/h1/p/buttons
 *
 * Honors prefers-reduced-motion automatically.
 */

/* ============================================================
   BASE — gradient + structure, no motion.
   Matches the deeper students/veterans gradient (darkest → light).
============================================================ */
.hero {
    background: linear-gradient(135deg, #1a2410 0%, var(--gwk-green-700, #2E4020) 50%, var(--gwk-green-600, #3F5F2A) 100%);
    color: var(--gwk-text-on-primary, #fff);
    padding: 5rem 2rem 4.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.hero p {
    font-size: 1.25rem;
    max-width: 700px;
    margin: 0 auto 2rem;
    opacity: 0.92;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-badge {
    display: inline-block;
    background: rgba(212, 144, 39, 0.2);
    border: 1px solid rgba(212, 144, 39, 0.5);
    color: var(--gwk-gold-400, #E8A82E);
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

/* ============================================================
   MODIFIER: --atmosphere — drifting radial overlay
============================================================ */
.hero--atmosphere::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(212, 144, 39, 0.10) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(63, 95, 42, 0.18) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
    pointer-events: none;
    animation: hero-drift 15s ease-in-out infinite alternate;
    z-index: 0;
}

@keyframes hero-drift {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-3%, -3%); }
}

/* ============================================================
   MODIFIER: --grid — drifting blueprint grid
============================================================ */
.hero--grid::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(212, 144, 39, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 144, 39, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    animation: hero-grid-drift 25s linear infinite;
    z-index: 0;
}

@keyframes hero-grid-drift {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(40px, 40px); }
}

/* ============================================================
   MODIFIER: --motion — entrance animations
============================================================ */
.hero--motion .hero-badge {
    animation: hero-fade-down 0.8s ease-out;
}

.hero--motion h1 {
    animation: hero-fade-down 0.9s ease-out 0.15s backwards;
}

.hero--motion p {
    animation: hero-fade-up 1s ease-out 0.55s backwards;
}

.hero--motion .hero-buttons {
    animation: hero-fade-in 0.9s ease-out 0.85s backwards;
}

@keyframes hero-fade-down {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 0.92; transform: translateY(0); }
}

@keyframes hero-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MODIFIER: --full — fill most of the viewport, vertically center content
============================================================ */
.hero--full {
    min-height: 72vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ============================================================
   MODIFIER: --display — large display typography (matches students/trade pages)
============================================================ */
.hero--display h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -1.5px;
    max-width: 900px;
}

.hero--display .hero-badge {
    padding: 0.5rem 1.5rem;
    border-radius: 25px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
}

.hero--display p {
    font-size: 1.25rem;
    max-width: 680px;
    margin: 0 auto 2.5rem;
}

/* ============================================================
   MODIFIER: --word-rise — per-word entrance on H1
   Markup: wrap each H1 word in <span class="word">Word</span>
============================================================ */
.hero--word-rise h1 {
    animation: none;
}

.hero--word-rise h1 .word {
    display: inline-block;
    animation: hero-word-rise 0.8s ease-out backwards;
}

.hero--word-rise h1 .word:nth-child(1) { animation-delay: 0.1s; }
.hero--word-rise h1 .word:nth-child(2) { animation-delay: 0.2s; }
.hero--word-rise h1 .word:nth-child(3) { animation-delay: 0.3s; }
.hero--word-rise h1 .word:nth-child(4) { animation-delay: 0.4s; }
.hero--word-rise h1 .word:nth-child(5) { animation-delay: 0.5s; }
.hero--word-rise h1 .word:nth-child(6) { animation-delay: 0.6s; }
.hero--word-rise h1 .word:nth-child(7) { animation-delay: 0.7s; }

@keyframes hero-word-rise {
    from { opacity: 0; transform: translateY(30px) rotateX(-90deg); }
    to   { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* ============================================================
   SCROLL CUE — markup element, opt in via .hero--scroll-cue
   Markup: <div class="hero-scroll-cue">Scroll</div>
============================================================ */
.hero-scroll-cue {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 1;
}

.hero-scroll-cue::after {
    content: '↓';
    display: block;
    font-size: 1.5rem;
    margin-top: 0.5rem;
}

.hero--scroll-cue .hero-scroll-cue {
    animation: hero-bounce-slow 2.5s ease-in-out infinite;
}

@keyframes hero-bounce-slow {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

/* ============================================================
   prefers-reduced-motion — disables overlay drift + entrance animations
============================================================ */
@media (prefers-reduced-motion: reduce) {
    .hero--atmosphere::before,
    .hero--grid::after,
    .hero--motion .hero-badge,
    .hero--motion h1,
    .hero--motion p,
    .hero--motion .hero-buttons,
    .hero--word-rise h1 .word,
    .hero--scroll-cue .hero-scroll-cue {
        animation: none;
    }
}

/* ============================================================
   Mobile
============================================================ */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .hero-buttons {
        flex-direction: column;
    }
}