/**
 * HERO ALTERNATIVE - Tailwind-freie Version
 * "Wir lernen gemeinsam" Hero mit SCHULE-Textmaske
 */

/* ===== SECTION ===== */
.hero-alternative {
    background: #ffffff;
    width: 100%;
    position: relative;
    /* No overflow - SCHULE text should be fully visible on screens >1920px */
}

.hero-alternative-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 64px 16px 64px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1vw; /* Proportional zum Viewport */
}

/* ===== TEXT CONTAINER ===== */
.hero-alt-text-container {
    width: 100%;
    max-width: clamp(286px, 50vw, 514px); /* Skaliert proportional zur Schrift (7vw) */
    margin: 0 auto;
    padding: 0 16px;
    z-index: 10;
    position: relative;
}

/* "Wir lernen" - links */
.hero-alt-wir-lernen {
    text-align: left;
    color: #000000;
    font-size: clamp(2.5rem, 7vw, 72px);
    font-weight: 400;
    font-family: 'Playfair Display', serif;
    line-height: 1.2;
    white-space: nowrap;
}

/* "gemeinsam." - rechts */
.hero-alt-gemeinsam-wrapper {
    display: flex;
    justify-content: flex-end;
}

.hero-alt-gemeinsam {
    text-align: right;
    color: #000000;
    font-size: clamp(3rem, 10vw, 96px);
    font-weight: 400;
    font-family: 'Caveat', cursive;
    line-height: 1;
    white-space: nowrap;
}

/* Untertitel */
.hero-alt-subtitle-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 2vw; /* Proportional zum Viewport */
}

.hero-alt-subtitle {
    text-align: left;
    max-width: 528px;
}

.hero-alt-subtitle-light {
    color: #737373;
    font-size: clamp(1rem, 1.5vw, 18px);
    font-weight: 400;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
}

.hero-alt-subtitle-bold {
    color: #000000;
    font-size: clamp(1rem, 1.5vw, 18px);
    font-weight: 700;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
}

/* ===== NAME CONTAINER ("SCHULE") ===== */
.hero-alt-name-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    margin-top: 1vh;
    position: relative;
    width: 100%;
}

.hero-alt-rotate-container {
    transform: rotate(-4deg);
    transform-origin: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 100vw;
}

@media (min-width: 1920px) {
    .hero-alt-rotate-container {
        width: 2112px;
    }
}

.hero-alt-text-mask-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
}

/* Textmaske Container */
#schuleTextContainer {
    position: relative;
}

/* Background Layers mit Textmaske */
.hero-alt-bg-layer {
    position: absolute;
    inset: 0;
    transition: opacity 2000ms ease-in-out;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-alt-bg-layer-1 {
    opacity: 1;
}

.hero-alt-bg-layer-2 {
    opacity: 0;
}

/* "SCHULE" Text */
.hero-alt-schule-text {
    text-align: center;
    color: transparent;
    font-size: 29vw;
    font-weight: 900;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-transform: uppercase;
    line-height: 1.15;
    white-space: nowrap;
}

@media (min-width: 1920px) {
    .hero-alt-schule-text {
        font-size: 614px;
    }
}

/* Invisible layout text */
.hero-alt-schule-invisible {
    visibility: hidden;
}

/* ===== PLAY REEL BUTTON ===== */
.hero-alt-button-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: -1vh;
}

.hero-alt-button-inner {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.hero-alt-play-reel {
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--penn-blue, #141B4D);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.5rem 1rem; /* Kompakter */
    border-radius: 50px; /* Pill-Shape */
    font-size: clamp(0.75rem, 1.2vw, 0.875rem); /* Kleiner */
    font-weight: 600;
    font-family: var(--font-header, system-ui);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.hero-alt-play-reel:hover {
    background: white;
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

.hero-alt-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px; /* Kleiner */
    height: 22px;
    background: var(--penn-blue, #141B4D);
    color: white;
    border-radius: 50%;
    font-size: 0.5rem; /* Kleiner */
    padding-left: 2px; /* Optische Zentrierung des Play-Symbols */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .hero-alternative-inner {
        padding-top: 72px; /* Mehr Abstand zum Header */
        padding-bottom: 48px;
    }

    .hero-alt-name-container {
        margin-top: 4vh; /* Mehr Abstand zwischen Text und SCHULE */
    }

    .hero-alt-button-container {
        margin-top: 3vh; /* PLAY REEL Button auf eigene Zeile unter SCHULE */
    }

    .hero-alt-play-reel {
        font-size: clamp(0.75rem, 2.5vw, 1rem); /* Lesbare Größe auf Mobile */
    }
}

/* ===== HERO ENTRANCE ANIMATIONS ===== */
@keyframes hero-fade-from-top {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes hero-fade-from-right {
    from {
        opacity: 0;
        transform: translateX(15px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes hero-fade-only {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Initial hidden state */
.hero-alt-wir-lernen,
.hero-alt-subtitle-wrapper,
.hero-alt-gemeinsam-wrapper,
.hero-alt-name-container {
    opacity: 0;
}

/* Animation classes - triggered by JavaScript */
/* Erste 3 Elemente starten gleichzeitig */
.hero-alt-wir-lernen.animate {
    animation: hero-fade-from-top 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero-alt-subtitle-wrapper.animate {
    animation: hero-fade-from-bottom 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero-alt-gemeinsam-wrapper.animate {
    animation: hero-fade-from-right 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* "Schule" startet danach - nur Fade, keine Bewegung */
.hero-alt-name-container.animate {
    animation: hero-fade-only 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 400ms;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .hero-alt-wir-lernen,
    .hero-alt-subtitle-wrapper,
    .hero-alt-gemeinsam-wrapper,
    .hero-alt-name-container {
        opacity: 1;
        animation: none;
    }
}