/*
 * Motion. Every hidden state lives under html.esf-anim, which a head script sets only when motion is allowed.
 * First screen runs on CSS keyframes from the first paint, the rest is revealed by assets/js/anim.js.
 * Selector lists here and in anim.js must stay in sync.
 */

:root {
	--esf-ease: cubic-bezier(.22, 1, .36, 1);
	--esf-ease-io: cubic-bezier(.65, 0, .35, 1);
}

@keyframes esf-rise {
	from {opacity: 0; transform: translate3d(0, 70px, 0); clip-path: polygon(-10% -30%, 110% -30%, 110% -30%, -10% -30%);}
	to {opacity: 1; transform: none; clip-path: polygon(-10% -30%, 110% -30%, 110% 130%, -10% 130%);}
}
@keyframes esf-fade-up {
	from {opacity: 0; transform: translate3d(0, 40px, 0);}
}
@keyframes esf-fade-down {
	from {opacity: 0; transform: translate3d(0, -16px, 0);}
}
@keyframes esf-wipe {
	from {clip-path: inset(0 100% 0 0);}
	to {clip-path: inset(0 0 0 0);}
}
@keyframes esf-curtain {
	from {clip-path: inset(100% 0 0 0);}
	to {clip-path: inset(0 0 0 0);}
}
@keyframes esf-zoom-out {
	from {transform: scale(1.18);}
}
@keyframes esf-bar {
	from {transform: scaleX(0);}
}
@keyframes esf-card-in {
	from {opacity: 0; transform: translate3d(0, 50px, 0) rotate(-3deg) scale(.96);}
}

/* ---------- First screen ---------- */

html.esf-anim .header .header-container {animation: esf-fade-down .9s var(--esf-ease) backwards;}

html.esf-anim .main-hero h1 {animation: esf-rise 1.3s var(--esf-ease) .15s backwards;}
html.esf-anim .main-hero h1 span:after {transform-origin: left center; animation: esf-bar 1s var(--esf-ease) 1.1s backwards;}
html.esf-anim .main-hero .h1-anons {animation: esf-fade-up 1.1s var(--esf-ease) .55s backwards;}
html.esf-anim .main-hero .graf {animation: esf-fade-up 1s var(--esf-ease) .7s backwards;}
html.esf-anim .main-hero .lines {animation: esf-wipe 1.1s var(--esf-ease-io) .85s backwards;}
html.esf-anim .main-hero .hero-video {animation: esf-curtain 1.3s var(--esf-ease) .25s backwards;}
html.esf-anim .main-hero .hero-video video {animation: esf-zoom-out 2.4s var(--esf-ease) .25s backwards;}
html.esf-anim .main-hero .text-center .btn-default {animation: esf-fade-up 1s var(--esf-ease) .9s backwards;}

html.esf-anim .inner-hero .esf-breadcrumbs,
html.esf-anim .card-hero .esf-breadcrumbs {animation: esf-fade-up .9s var(--esf-ease) backwards;}
html.esf-anim .inner-title {animation: esf-rise 1.3s var(--esf-ease) .1s backwards;}
html.esf-anim .inner-hero-lead {animation: esf-fade-up 1.1s var(--esf-ease) .4s backwards;}
html.esf-anim .inner-hero-side .btn-default {animation: esf-fade-up 1s var(--esf-ease) .55s backwards;}
html.esf-anim .inner-hero-lines {animation: esf-wipe 1.1s var(--esf-ease-io) .65s backwards;}
html.esf-anim .inner-hero-image {animation: esf-curtain 1.3s var(--esf-ease) .25s backwards;}
html.esf-anim .inner-hero-image img:not(.parallax) {animation: esf-zoom-out 2.4s var(--esf-ease) .25s backwards;}
html.esf-anim .card-hero-visual {animation: esf-card-in 1.4s var(--esf-ease) .35s backwards;}

/* ---------- Revealed on scroll ---------- */

/* Blocks rising into place */
html.esf-anim .content :is(
	.inno-anons, .title-container .anons, .prostor-info .anons, .dop-section .item-info .anons,
	.tizers-section .item, .club-section .tab-nav, .club-section .card-items > .item, .serv-right > *,
	.comfort-section .slider-cont, .training-bottom .text, .training-bottom > .btn-default,
	.contacts-section .map-info, .contacts-section .map, .cont-bottom .btn-default,
	.esf-intro-body, .svc-head .svc-num, .svc-body .esf-text, .svc-body > .btn-default,
	.zone-text, .fact, .related-name, .card-tile, .family-box, .inst-head, .inst-body, .faq-item,
	.esf-textblock-inner, .card-buy-label, .term-nav, .term-table, .facts-table, .cards-compare
):not(.is-in) {opacity: 0; transform: translate3d(0, 48px, 0);}
html.esf-anim .content :is(
	.inno-anons, .title-container .anons, .prostor-info .anons, .dop-section .item-info .anons,
	.tizers-section .item, .club-section .tab-nav, .club-section .card-items > .item, .serv-right > *,
	.comfort-section .slider-cont, .training-bottom .text, .training-bottom > .btn-default,
	.contacts-section .map-info, .contacts-section .map, .cont-bottom .btn-default,
	.esf-intro-body, .svc-head .svc-num, .svc-body .esf-text, .svc-body > .btn-default,
	.zone-text, .fact, .related-name, .card-tile, .family-box, .inst-head, .inst-body, .faq-item,
	.esf-textblock-inner, .card-buy-label, .term-nav, .term-table, .facts-table, .cards-compare
):not(.is-done) {transition: opacity 1.1s var(--esf-ease), transform 1.3s var(--esf-ease); transition-delay: var(--esf-stagger, 0ms);}

/* Photos opening like a curtain, photos without parallax also zoom out */
html.esf-anim .content :is(
	.preimum-image, .prostor-image, .dop-section .item-image, .gallery-image, .svc-media,
	.zone-image, .related-image, .inst-box
):not(.is-in) {clip-path: inset(100% 0 0 0);}
html.esf-anim .content :is(
	.preimum-image, .prostor-image, .dop-section .item-image, .gallery-image, .svc-media,
	.zone-image, .related-image, .inst-box
):not(.is-done) {transition: clip-path 1.4s var(--esf-ease); transition-delay: var(--esf-stagger, 0ms);}
/* clip-path does not interpolate to none, so the open state is explicit until the entrance ends */
html.esf-anim .content :is(
	.preimum-image, .prostor-image, .dop-section .item-image, .gallery-image, .svc-media,
	.zone-image, .related-image, .inst-box
).is-in:not(.is-done) {clip-path: inset(0 0 0 0);}
html.esf-anim .content :is(.zone-image, .svc-media, .gallery-image):not(.is-in) img:not(.parallax) {transform: scale(1.18);}
html.esf-anim .content :is(.zone-image, .svc-media, .gallery-image):not(.is-done) img:not(.parallax) {transition: transform 2.2s var(--esf-ease); transition-delay: var(--esf-stagger, 0ms);}

/* Decorative lines */
html.esf-anim .content :is(.preimum-name .lines, .prostor-info .lines, .training-bottom .lines, .dop-bottom .lines):not(.is-in) {clip-path: inset(0 100% 0 0);}
html.esf-anim .content :is(.preimum-name .lines, .prostor-info .lines, .training-bottom .lines, .dop-bottom .lines):not(.is-done) {transition: clip-path 1.2s var(--esf-ease); transition-delay: calc(var(--esf-stagger, 0ms) + 250ms);}
html.esf-anim .content :is(.preimum-name .lines, .prostor-info .lines, .training-bottom .lines, .dop-bottom .lines).is-in:not(.is-done) {clip-path: inset(0 0 0 0);}
html.esf-anim .content .svc-line:not(.is-in) {transform: scaleY(0);}
html.esf-anim .content .svc-line {transform-origin: top center;}
html.esf-anim .content .svc-line:not(.is-done) {transition: transform 1.2s var(--esf-ease); transition-delay: calc(var(--esf-stagger, 0ms) + 200ms);}
html.esf-anim .content .dop-bottom .line:not(.is-in) {transform: scaleX(0);}
html.esf-anim .content .dop-bottom .line:first-child {transform-origin: right center;}
html.esf-anim .content .dop-bottom .line:last-child {transform-origin: left center;}
html.esf-anim .content .dop-bottom .line:not(.is-done) {transition: transform 1.4s var(--esf-ease-io);}

/* Headings assembled word by word; the heading stays hidden until anim.js splits it */
html.esf-anim .content :is(
	.title, .svc-title, .zone-name, .esf-subtitle, .inst-title,
	.preimum-name .name, .dop-section .item-info .name, .training-bottom .name
):not(.esf-split) {opacity: 0;}
.esf-split esf-w {display: inline-block; clip-path: polygon(-40% -35%, 140% -35%, 140% 100%, -40% 100%);}
.esf-split esf-i {display: inline-block;}
html.esf-anim .esf-split:not(.is-in) esf-i {transform: translate3d(0, 105%, 0) rotate(3deg);}
html.esf-anim .esf-split:not(.is-done) esf-i {transform-origin: left bottom; transition: transform 1.1s var(--esf-ease); transition-delay: calc(var(--esf-stagger, 0ms) + var(--w, 0) * 65ms);}
.esf-split.is-done esf-w {clip-path: none;}

/* Figures count up in anim.js */
.fact-value {font-variant-numeric: tabular-nums;}

/* ---------- Interactions ---------- */

/* Club card tilt, driven by anim.js, glare follows the pointer */
.item-card.esf-tilt {will-change: transform;}
.item-card.esf-tilt::after {content: ""; position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%); opacity: var(--glare, 0);}

/* Term switch on a card page */
html.esf-anim .term-panel.is-active {animation: esf-fade-up .8s var(--esf-ease) backwards;}

/* Modals rise softly */
html.esf-anim .modal.fade .modal-dialog {transform: translate3d(0, 40px, 0) scale(.97); transition: transform .5s var(--esf-ease);}
html.esf-anim .modal.show .modal-dialog {transform: none;}

/* FAQ answer fades in while the panel opens */
html.esf-anim .faq-item .collapse:not(.show) .faq-a {opacity: 0; transform: translate3d(0, -10px, 0);}
html.esf-anim .faq-item .faq-a {transition: opacity .6s var(--esf-ease), transform .6s var(--esf-ease);}

@media print {
	html.esf-anim * {opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important;}
}