/*
* mod-satin.css — «сатинові» кнопки з переливом (модуль satin)
* Emirates home v2 (.ev2)
*
* Контракт: клас-МОДИФІКАТОР .em-satin. Інтегратор додає його ПОРЯД
* з існуючими класами кнопки (наприклад
* або ), нічого не видаляючи.
* Кнопки без .em-satin лишаються повністю незмінними — цей файл не чіпає
* .ev2 .btn / .btn-solid / .btn-ghost / .btn--primary саме по собі.
*
* Пастка .ev2 *{margin:0;padding:0} (home-v2.css) має специфічність
* одного класу — тому усюди нижче в селекторах щонайменше 2 класи
* (.em-satin.em-satin, .ev2 .btn.em-satin і т.п.), як вимагають shared_rules.
*
* Підключати в ПІСЛЯ home-v2.css.
*/
.ev2 .btn.em-satin.em-satin,
.ev2 .btn-solid.em-satin.em-satin,
.ev2 .btn--primary.em-satin.em-satin {
position: relative;
overflow: hidden;
isolation: isolate;
color: var(--bg);
background-color: var(--ink);
background-image: linear-gradient(
120deg,
color-mix(in srgb, var(--ink) 92%, var(--accent) 8%) 0%,
color-mix(in srgb, var(--accent) 55%, var(--ink) 45%) 22%,
color-mix(in srgb, var(--accent-2) 68%, var(--ink) 32%) 40%,
color-mix(in srgb, var(--ink) 92%, var(--accent) 8%) 58%,
color-mix(in srgb, var(--accent) 55%, var(--ink) 45%) 80%,
color-mix(in srgb, var(--ink) 92%, var(--accent) 8%) 100%
);
background-size: 220% 100%;
background-position: 0% 50%;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 8px 22px rgba(61, 58, 44, 0.16);
animation: emSatinShift 5.2s ease-in-out infinite;
transition: transform 0.18s ease, box-shadow 0.18s ease, animation-duration 0.2s linear;
}
/* тонка світлова смуга-«блиск», що йде поверх переливу */
.ev2 .btn.em-satin.em-satin::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
115deg,
transparent 0%,
transparent 42%,
rgba(255, 255, 255, 0.32) 50%,
transparent 58%,
transparent 100%
);
background-size: 220% 100%;
background-position: 0% 50%;
animation: emSatinShift 5.2s ease-in-out infinite;
pointer-events: none;
mix-blend-mode: soft-light;
}
/* текст/іконки лишаються читабельними поверх переливу та блиску */
.ev2 .btn.em-satin.em-satin > * {
position: relative;
z-index: 2;
}
@keyframes emSatinShift {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* на ховері перелив і блиск прискорюються — «живіший» відгук */
.ev2 .btn.em-satin.em-satin:hover,
.ev2 .btn.em-satin.em-satin:focus-visible {
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
0 12px 28px rgba(61, 58, 44, 0.24);
}
.ev2 .btn.em-satin.em-satin:hover,
.ev2 .btn.em-satin.em-satin:hover::before,
.ev2 .btn.em-satin.em-satin:focus-visible,
.ev2 .btn.em-satin.em-satin:focus-visible::before {
animation-duration: 1.6s;
}
.ev2 .btn.em-satin.em-satin:active {
transform: translateY(1px) scale(0.985);
}
/* видимий фокус для клавіатурної навігації — латунь/золото палітри */
.ev2 .btn.em-satin.em-satin:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.ev2 .btn.em-satin.em-satin,
.ev2 .btn.em-satin.em-satin::before,
.ev2 .btn.em-satin.em-satin:hover,
.ev2 .btn.em-satin.em-satin:hover::before,
.ev2 .btn.em-satin.em-satin:focus-visible,
.ev2 .btn.em-satin.em-satin:focus-visible::before {
animation: none;
background-position: 38% 50%;
transition: none;
transform: none;
}
}