/* Google Fonts підключаються окремо через wp_enqueue_style — тепер лише Titan One */

.ttt-hero-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    z-index: 5;
    pointer-events: none;
    padding: 0 20px;
    text-align: center;
}

.hero-text-panel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 22px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 24px;
    padding: 22px 42px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.45s ease;
}
.ttt-hero-text.active .hero-text-panel {
    opacity: 1;
}

/* Зображення слогану — одразу під анімованою фразою, статичне (без анімації появи/зникнення).
   Ширина виставляється через JS (щоб точно збігатися з реальною шириною плашки тексту),
   висота підлаштовується сама через object-fit, зберігаючи пропорції. */
.hero-slogan-image {
    height: auto;
    display: block;
}
.hero-slogan-mobile { display: none; }

@media (max-width: 600px) {
    /* Весь блок (плашка + зображення слогану під нею) притискаємо ближче до низу фото */
    .ttt-hero-text { bottom: 3%; }
    .hero-slogan-desktop { display: none; }
    .hero-slogan-mobile { display: block; }
}

.hero-word {
    display: inline-block;
    line-height: 1;
}

/* Всі слова — єдиний шрифт і однаковий базовий розмір */
.hero-w1,
.hero-w2,
.hero-w3 .letter {
    font-family: 'Titan One', cursive;
    font-size: clamp(42px, 8.5vw, 82px);
}

/* ===== Слово 1: TEENS — темно-синій колір, світла обводка ===== */
.hero-w1 {
    color: #2d407a;
    -webkit-text-stroke: 1.4px #f5f5f7;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.35),
        0 -1px 0 rgba(255, 255, 255, 0.4);
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.ttt-hero-text.active .hero-w1 {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Слово 2: TEACH! — червоний колір, світла обводка ===== */
.hero-w2 {
    color: #b20328;
    -webkit-text-stroke: 1.4px #f5f5f7;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.35),
        0 -1px 0 rgba(255, 255, 255, 0.4);
    opacity: 0;
    transform: translateX(120px);
    transition: opacity 0.55s ease 0.4s, transform 0.55s ease 0.4s;
}
.ttt-hero-text.active .hero-w2 {
    opacity: 1;
    transform: translateX(0);
}
/* Знак оклику одразу за словом TEACH, без відступу — той самий стиль, що й раніше */
.hero-w2 .excl {
    color: #b20328;
    -webkit-text-stroke: 1.4px #f5f5f7;
}

/* ===== Слово 3: TEENS / ENGLISH — світлий колір, синя обводка, друкується по буквах ===== */
.hero-w3 { white-space: nowrap; }
.hero-w3 .letter {
    display: inline-block;
    color: #cac7cf;
    -webkit-text-stroke: 1.4px #2d407a;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.ttt-hero-text.active .hero-w3 .letter {
    opacity: 1;
}

@media (max-width: 600px) {
    .hero-text-panel { gap: 6px 12px; padding: 16px 22px; }
}