/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */



/* SplitType автоматично додасть клас .line до кожного рядка */
h2 .line {
    overflow: hidden; /* Секрет слайд-ефекту: ховаємо все, що нижче лінії */
    padding-bottom: 0.1em; /* Запобігає обрізанню нижніх хвостиків у буквах типу 'y', 'g', 'p' */
}

/* Опціонально: щоб уникнути блимання тексту до завантаження JS */
h2 {
    visibility: hidden;
}
h2.is-ready {
    visibility: visible;
}


/* Віконце-маска (приховує все, що виходить за його межі) */
.stagger-menu .char {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom; 
}

/* Внутрішній контейнер, який буде рухатися */
.stagger-menu .char-inner {
    display: inline-block;
    position: relative;
    will-change: transform;
    /* Захист від підкреслень та злипання */
    text-decoration: none !important;
}

/* Створюємо клона букви і ставимо його рівно на 100% нижче оригінальної */
.stagger-menu .char-inner::after {
    content: attr(data-letter); /* Беремо букву з атрибута, який додасть JS */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    color: inherit;
}


/* Перетворюємо кожну букву всередині кнопки на маску */
.stagger-btn p .char {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

/* Контейнер для оригінальної букви та її клона */
.stagger-btn p .char-inner {
    display: inline-block;
    position: relative;
    will-change: transform;
    text-decoration: none !important;
}

/* Створюємо дублікат літери знизу */
.stagger-btn p .char-inner::after {
    content: attr(data-letter);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    color: inherit;
}

/* Переконуємося, що параграф кнопки поводиться як інлайновий елемент і не ламає флекси */
.stagger-btn p.e-paragraph-base {
    display: inline-block;
    margin: 0;
}


/* Віконце-маска на стандартному класі тексту кнопки Elementor */
.roll-btn .elementor-button-text {
    display: inline-flex !important;
    overflow: hidden;
    vertical-align: middle;
}

/* Внутрішній контейнер, який будемо рухати */
.roll-btn .roll-inner {
    display: inline-flex;
    position: relative;
    will-change: transform;
}

/* Автоматичний дублікат слова знизу */
.roll-btn .roll-inner::after {
    content: attr(data-text);
    position: absolute;
    top: 100%; /* Ставимо рівно під оригіналом */
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}