/* Genereeritud failist assets/src/motion.css — ära muuda siin, muuda src-faili ja käivita tools/build-css.py */
/* =====================================================================
   HELIX — sujuvus: lehe rahulik täitumine, lehevahetus, ilmumine
   Järjekord lehe avamisel (kui kõik on valmis, .hx-ready):
     taust -> päis ülevalt -> bänner -> külgriba vasakult -> kategooriad -> tooted
   Kõik on ainult html.hx-motion all (pole, kui külastaja valis "vähem liikumist").
   ===================================================================== */

:root:not(#hx_) {
	--hx-ease: cubic-bezier( .22, .61, .36, 1 );
	--hx-soft: cubic-bezier( .16, 1, .3, 1 );
}

/* ---------------------------------------------------------------------
   1. LEHEVAHETUS — vana leht hajub, uus täitub ise rahulikult
   --------------------------------------------------------------------- */

@view-transition { navigation: auto; }

::view-transition-old( root ) { animation: hx-vt-out .28s ease both; }
::view-transition-new( root ) { animation: hx-vt-in .2s ease both; }

@keyframes hx-vt-out { to { opacity: 0; } }
@keyframes hx-vt-in { from { opacity: 0; } }

/* ---------------------------------------------------------------------
   2. LIIKUMISED
   --------------------------------------------------------------------- */

@keyframes hx-rise {
	from { opacity: 0; transform: translate3d( 0, var( --hx-rise, 26px ), 0 ); filter: blur( 5px ); }
}

@keyframes hx-drop {
	from { opacity: 0; transform: translate3d( 0, -28px, 0 ); }
}

@keyframes hx-slide-l {
	from { opacity: 0; transform: translate3d( -48px, 0, 0 ); filter: blur( 4px ); }
}

@keyframes hx-settle {
	from { opacity: 0; transform: scale( .965 ); filter: blur( 6px ); }
}

@keyframes hx-fade { from { opacity: 0; } }
@keyframes hx-failsafe { to { opacity: 1; } }

/* ---------------------------------------------------------------------
   3. ENNE VALMISOLEKUT: ainult taustavärv (katkist lehte ei näe)
   --------------------------------------------------------------------- */

html.hx-motion:not( .hx-ready ):not(#hx_) body > :not( script ):not( style ):not( link ) { opacity: 0; }

/* JS ei käivitunud: kõik ise nähtavale */
html.hx-motion:not( .hx-motion-js ):not( .hx-ready ):not(#hx_) body > :not( script ):not( style ):not( link ) { animation: hx-failsafe .01s 2.5s forwards; }

/* ---------------------------------------------------------------------
   4. TÄITUMINE
   --------------------------------------------------------------------- */

html.hx-ready:not(#hx_) body > :not( script ):not( style ):not( link ) { animation: hx-fade .5s ease backwards; }

/* Päis ülevalt */
html.hx-ready:not(#hx_) .hx-hd { animation: hx-drop .9s var( --hx-soft ) .05s backwards; }

/* --- Kataloog --- */
html.hx-ready:not(#hx_) .hx-cat__hero { animation: hx-rise 1.1s var( --hx-soft ) .3s backwards; }
/* NB! .hx-catnav on kerimisel ilmuv fikseeritud riba — seda ei animeeri */
html.hx-ready:not(#hx_) :is( .hx-cat__bar, .hx-cat__tools ) { animation: hx-fade .9s ease .75s backwards; }

@media ( min-width: 1025px ) {
	html.hx-ready:not(#hx_) .hx-cat__side { animation: hx-slide-l 1.1s var( --hx-soft ) .6s backwards; }
}

/* --- Avalehe bänner --- */
html.hx-ready:not(#hx_) .hx-ah-banner__text > * { animation: hx-rise 1.1s var( --hx-soft ) backwards; }
html.hx-ready:not(#hx_) .hx-ah-banner__text > :nth-child( 1 ) { animation-delay: .3s; }
html.hx-ready:not(#hx_) .hx-ah-banner__text > :nth-child( 2 ) { animation-delay: .42s; }
html.hx-ready:not(#hx_) .hx-ah-banner__text > :nth-child( 3 ) { animation-delay: .54s; }
html.hx-ready:not(#hx_) .hx-ah-banner__text > :nth-child( 4 ) { animation-delay: .66s; }
html.hx-ready:not(#hx_) .hx-ah-banner__text > :nth-child( n+5 ) { animation-delay: .78s; }
html.hx-ready:not(#hx_) .hx-ah-stage { animation: hx-settle 1.4s var( --hx-soft ) .5s backwards; }

/* ---------------------------------------------------------------------
   4b. KODU <-> ÄRI VAHETUS
   Filtrid lahkuvad vasakule, uued tulevad vasakult. Bänneri tekst
   hajub ja uus tõuseb rida-realt.
   --------------------------------------------------------------------- */

@keyframes hx-out-l { to { opacity: 0; transform: translate3d( -48px, 0, 0 ); } }
@keyframes hx-in-l { from { opacity: 0; transform: translate3d( -48px, 0, 0 ); } }

/* Lehe tasemel klassid — kehtivad ka uuesti ehitatud filtritele */
@media ( min-width: 1025px ) {

	/* 1. Vana lahkub vasakule ja jääb peitu */
	html.hx-motion.hx-vswap-out:not(#hx_) .hx-cat__side > :not( .hx-cat__side-sp ) { animation: hx-out-l .3s cubic-bezier( .5, 0, .75, 0 ) forwards; pointer-events: none; }

	/* 2. Ootel: uued filtrid ehitatakse peidus (ka uued elemendid) */
	html.hx-motion.hx-vswap-hold:not(#hx_) .hx-cat__side > :not( .hx-cat__side-sp ) { opacity: 0; transform: translate3d( -48px, 0, 0 ); animation: none; pointer-events: none; }

	/* 3. Uus tuleb vasakult oma kohale */
	html.hx-motion.hx-vswap-in:not(#hx_) .hx-cat__side > :not( .hx-cat__side-sp ) { animation: hx-in-l .95s var( --hx-soft ) .22s backwards; }
}

/* --- Bänneri tekst: lahkub üles, ootab peidus, tõuseb esimesena --- */
html.hx-motion:not(#hx_) .hx-cat__hero-text { transition: opacity .28s ease, transform .28s ease, filter .28s ease; }
html.hx-motion:is( .hx-vswap-out, .hx-vswap-hold ):not(#hx_) .hx-cat__hero-text { opacity: 0; transform: translate3d( 0, -10px, 0 ); filter: blur( 3px ); }

html.hx-motion.hx-vswap:not(#hx_) .hx-cat__hero-text { transition: none; }
html.hx-motion.hx-vswap:not(#hx_) .hx-cat__hero-text [data-hd-view] > * {
	--hx-rise: 22px;
	animation: hx-rise 1s var( --hx-soft ) .02s backwards;
}
html.hx-motion.hx-vswap:not(#hx_) .hx-cat__hero-text [data-hd-view] > :nth-child( 2 ) { animation-delay: .14s; }

/* --- Kategooriad ja tooted: lahkuvad alla, uued tulevad järjest (JS) --- */
@keyframes hx-sink { to { opacity: 0; transform: translate3d( 0, 16px, 0 ); filter: blur( 3px ); } }

html.hx-motion.hx-vswap-out:not(#hx_) :is( .hx-pc, .hx-ctab ).is-in { animation: hx-sink .28s cubic-bezier( .5, 0, .75, 0 ) forwards; pointer-events: none; }
html.hx-motion.hx-vswap-hold:not(#hx_) :is( .hx-pc, .hx-ctab ) { opacity: 0; animation: none; }

/* ---------------------------------------------------------------------
   5. KERIMISEL / JÄRJEST ILMUVAD (JS lisab .is-in ja viivituse --hx-d)
   NB! Sama nimekiri on assets/motion.js failis.
   --------------------------------------------------------------------- */

html.hx-motion:not(#hx_) :is( .hx-ah-head, .hx-ah-why__media, .hx-ah-why__body, .hx-ah-samples__body, .hx-ah-samples__fan, .hx-ah-faq, .hx-ah-contact, .hx-ah-stat, .hx-ah-usp, .hx-ah-steps > *, .hx-ah-marquee, .hx-pc, .hx-ctab, .hx-kt-hero, .hx-kt-q, .hx-kt-form, .hx-kt-card, .hx-kt-samples, .hx-kt-facts, .hx-kt-faq, .hx-tt-hero, .hx-tt__nav, .hx-tt-card, .hx-tt-block, .hx-tt-step, .hx-tt-faq, .hx-tt-contact, .hx-insp-hero, .hx-insp-head, .hx-insp-card, .hx-insp-guide, .hx-insp-cta, .hx-lm-shots, .hx-lm-info > *, .hx-lm-sec, .hx-lm-mas__item, .hx-wi-gal, .hx-wi-info > *, .hx-wi-sec, .hx-cl__head, .hx-cl-item, .hx-cl__area, .hx-cl__samples, .hx-cl-sum, .hx-ft-cta__in, .hx-ft-main > * ):not( .is-in ) { opacity: 0; animation: none; }

html.hx-motion:not( .hx-motion-js ):not(#hx_) :is( .hx-ah-head, .hx-ah-why__media, .hx-ah-why__body, .hx-ah-samples__body, .hx-ah-samples__fan, .hx-ah-faq, .hx-ah-contact, .hx-ah-stat, .hx-ah-usp, .hx-ah-steps > *, .hx-ah-marquee, .hx-pc, .hx-ctab, .hx-kt-hero, .hx-kt-q, .hx-kt-form, .hx-kt-card, .hx-kt-samples, .hx-kt-facts, .hx-kt-faq, .hx-tt-hero, .hx-tt__nav, .hx-tt-card, .hx-tt-block, .hx-tt-step, .hx-tt-faq, .hx-tt-contact, .hx-insp-hero, .hx-insp-head, .hx-insp-card, .hx-insp-guide, .hx-insp-cta, .hx-lm-shots, .hx-lm-info > *, .hx-lm-sec, .hx-lm-mas__item, .hx-wi-gal, .hx-wi-info > *, .hx-wi-sec, .hx-cl__head, .hx-cl-item, .hx-cl__area, .hx-cl__samples, .hx-cl-sum, .hx-ft-cta__in, .hx-ft-main > * ):not( .is-in ) { animation: hx-failsafe .01s 3s forwards; }

/* Uuesti ehitatud osad (ostukorvi uuendus jms) pärast lehe avamist: ilma animatsioonita */
html.hx-motion:not(#hx_) .hx-noanim.is-in { animation: none !important; }

html.hx-motion:not(#hx_) :is( .hx-ah-head, .hx-ah-why__body, .hx-ah-samples__body, .hx-ah-faq, .hx-ah-stat, .hx-ah-usp, .hx-ah-steps > *,
	.hx-kt-q, .hx-kt-form, .hx-kt-card, .hx-kt-facts, .hx-kt-faq,
	.hx-tt__nav, .hx-tt-card, .hx-tt-block, .hx-tt-step, .hx-tt-faq, .hx-tt-contact,
	.hx-insp-head, .hx-insp-guide, .hx-insp-cta,
	.hx-lm-info > *, .hx-lm-sec, .hx-wi-info > *, .hx-wi-sec,
	.hx-cl__head, .hx-cl-item, .hx-cl__area, .hx-cl__samples, .hx-cl-sum,
	.hx-ft-cta__in, .hx-ft-main > * ).is-in {
	animation: hx-rise 1.1s var( --hx-soft ) var( --hx-d, 0ms ) backwards;
}

html.hx-motion:not(#hx_) :is( .hx-ah-why__media, .hx-ah-samples__fan, .hx-ah-contact, .hx-ah-marquee,
	.hx-kt-hero, .hx-kt-samples, .hx-tt-hero, .hx-insp-hero, .hx-lm-shots, .hx-wi-gal ).is-in {
	animation: hx-settle 1.3s var( --hx-soft ) var( --hx-d, 0ms ) backwards;
}

/* Kategooriad: tõusevad järjest */
html.hx-motion:not(#hx_) .hx-ctab.is-in {
	--hx-rise: 22px;
	animation: hx-rise 1s var( --hx-soft ) var( --hx-d, 0ms ) backwards;
}

/* Inspiratsiooni kaardid ja galeriipildid: ükshaaval */
html.hx-motion:not(#hx_) :is( .hx-insp-card, .hx-lm-mas__item ).is-in {
	--hx-rise: 34px;
	animation: hx-rise 1.1s var( --hx-soft ) var( --hx-d, 0ms ) backwards;
}

/* Tootekaardid: ükshaaval, selgelt nähtav tõus */
html.hx-motion:not(#hx_) .hx-pc.is-in {
	--hx-rise: 40px;
	animation: hx-rise 1.15s var( --hx-soft ) var( --hx-d, 0ms ) backwards;
}

/* ---------------------------------------------------------------------
   6. Vähem liikumist: kõik paigal
   --------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	::view-transition-group( * ),
	::view-transition-old( * ),
	::view-transition-new( * ) { animation: none !important; }
}


/* ---------------------------------------------------------------------
   v2.27 — lõppenud ilmumine: animatsioon maha (Safari ei käivita uuesti)
   + telefonis kergem ilmumine: ilma blur'ita, lühem (iPhone 7 jõnksutas)
   --------------------------------------------------------------------- */

html.hx-motion:not(#hx_) .is-in.is-done { animation: none; }
html.hx-motion.hx-vswap-out:not(#hx_) :is( .hx-pc, .hx-ctab ).is-in.is-done { animation: hx-sink .28s cubic-bezier( .5, 0, .75, 0 ) forwards; }

@keyframes hx-rise-m {
	from { opacity: 0; transform: translate3d( 0, 16px, 0 ); }
}

@media ( max-width: 767px ) {
	html.hx-motion:not(#hx_) :is( .hx-pc, .hx-ctab, .hx-insp-card, .hx-lm-mas__item ).is-in:not( .is-done ) {
		animation-name: hx-rise-m;
		animation-duration: .55s;
		animation-timing-function: cubic-bezier( .2, .7, .2, 1 );
	}
}


/* v2.28 — telefonis tootekaardid ja kategooriad ilma sisenemis-animatsioonita (iPhone'is värisesid) */
@media ( max-width: 767px ) {
	html.hx-motion:not( .hx-vswap-hold ):not(#hx_) :is( .hx-pc, .hx-ctab ):not( .is-in ) { opacity: 1; animation: none; }
	html.hx-motion:not(#hx_) :is( .hx-pc, .hx-ctab ).is-in,
	html.hx-motion:not(#hx_) :is( .hx-pc, .hx-ctab ).is-in:not( .is-done ) { animation: none; }
}