/* ====================================
====== ANIMATION ======================
==================================== */
/* ====================================================================
   2026-09-17 - THE HIDDEN START STATES ARE REMOVED. READ THIS BEFORE RESTORING THEM.

   Each effect used to have a bare rule:   .animate_afl { opacity: 0; }
   with visibility returning only when JS added .animate_start.

   Nothing on the storefront adds .animate_start. The waypoint binding in
   ../js/plugins.js is commented out and its selector renamed to
   .xxanimate_afl / .xxanimate_afr, so the reveal never happens.

   Measured 2026-09-17: 388 saved sections in keyDesignLayout carry an animate_
   class with no animate_start. Confirmed live on atlanticelevatorsystems.com -
   two product images present in the HTML and rendering at opacity:0. Saves date
   from 2022-2023, so they have been invisible for years. The symptom is a single
   missing photo on a page that otherwise reads fine, which is why it was never
   reported.

   The hidden states are therefore GONE. Content is visible; the animation is
   inert. The .animate_start rules below are kept and still work.

   <!> TO RESTORE THE ANIMATION, IN THIS ORDER:
       1. Re-enable the waypoint binding in ../js/plugins.js (the original block
          is intact, commented, directly above the .xx selector).
       2. Have THAT code set the hidden state - e.g. add a class to <html> where
          the binding is armed, and scope the opacity:0 rules to it. The flag must
          be owned by the code that does the revealing, never by "JS is alive":
          that was tried on 2026-09-17 and does not help, because JS being alive
          says nothing about whether the trigger is armed.
       3. Verify on one store before it reaches all of them.
==================================================================== */
/* --------------------------------------------------------------------
   2026-09-17 HIDDEN START STATES - ARMED ONLY, AND FAIL-SAFE.

   These apply ONLY under html.anim-on. That class is set in the page head
   and REMOVED AGAIN after 3s if the scroll trigger never confirms it armed
   (window.__animArmed, set by ../js/plugins.js). So:

     trigger armed    -> .anim-on stays -> hidden -> animates in on scroll
     trigger missing  -> .anim-on dropped after 3s -> content VISIBLE
     JS dead entirely -> head script never runs -> content VISIBLE

   Why this shape: on 2026-09-17 we found 388 saved sections hidden by a bare
   opacity:0 whose revealer had been commented out - invisible on live customer
   sites since 2022. A hidden state must never outlive the thing that reveals it.
   <!> Never move these rules out from behind .anim-on.
-------------------------------------------------------------------- */
.anim-on .animate_afc,
.anim-on .animate_afl,
.anim-on .animate_afr,
.anim-on .animate_aft,
.anim-on .animate_afb,
.anim-on .animate_wfc,
.anim-on .animate_hfc,
.anim-on .animate_rfc,
.anim-on .animate_rfl,
.anim-on .animate_rfr {
	opacity: 0;
	}
/* Appear From Center */
@keyframes afc {
	from { opacity: 0; transform: scale(0.2); }
	to { opacity: 1; transform: scale(1); }
	}
@-webkit-keyframes afc {
	from { opacity: 0; -webkit-transform: scale(0.2); }
	to { opacity: 1; -webkit-transform: scale(1); }
	}
.animate_afc.animate_start {
	-webkit-animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 afc;
			animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 afc;
	opacity: 1;
	}
	
/* Appear From Left */
@keyframes afl {
	from { opacity: 0; transform: translateX(-100px); }
	to { opacity: 1; transform: translateX(0); }
	}
@-webkit-keyframes afl {
	from { opacity: 0; -webkit-transform: translateX(-100px); }
	to { opacity: 1; -webkit-transform: translateX(0); }
	}
.animate_afl.animate_start {
	-webkit-animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 afl;
			animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 afl;
	opacity: 1;
	}

/* Appear From Right */
@keyframes afr {
	from { opacity: 0; transform: translateX(100px); }
	to { opacity: 1; transform: translateX(0); }
	}
@-webkit-keyframes afr {
	from { opacity: 0; -webkit-transform: translateX(100px); }
	to { opacity: 1; -webkit-transform: translateX(0); }
	}
.animate_afr.animate_start {
	-webkit-animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 afr;
			animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 afr;
	opacity: 1;
	}

/* Appear From Top */
@keyframes aft {
	from { opacity: 0; transform: translateY(-100px); }
	to { opacity: 1; transform: translateY(0); }
	}
@-webkit-keyframes aft {
	from { opacity: 0; -webkit-transform: translateY(-100px); }
	to { opacity: 1; -webkit-transform: translateY(0); }
	}
.animate_aft.animate_start {
	-webkit-animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 aft;
			animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 aft;
	opacity: 1;
	}

/* Appear From Bottom */
@keyframes afb {
	from { opacity: 0; transform: translateY(100px); }
	to { opacity: 1; transform: translateY(0); }
	}
@-webkit-keyframes afb {
	from { opacity: 0; -webkit-transform: translateY(100px); }
	to { opacity: 1; -webkit-transform: translateY(0); }
	}
.animate_afb.animate_start {
	-webkit-animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 afb;
			animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 afb;
	opacity: 1;
	}

/* Width From Center */
@keyframes wfc {
	from { opacity: 0; transform: scaleX(0.01); }
	to { opacity: 1; transform: scaleX(1); }
	}
@-webkit-keyframes wfc {
	from { opacity: 0; -webkit-transform: scaleX(0.01); }
	to { opacity: 1; -webkit-transform: scaleX(1); }
	}
.animate_wfc.animate_start {
	-webkit-animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 wfc;
			animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 wfc;
	opacity: 1;
	}

/* Height From Center */
@keyframes hfc {
	from { opacity: 0; transform: scaleY(0.01); }
	to { opacity: 1; transform: scaleY(1); }
	}
@-webkit-keyframes hfc {
	from { opacity: 0; -webkit-transform: scaleY(0.01); }
	to { opacity: 1; -webkit-transform: scaleY(1); }
	}
.animate_hfc.animate_start {
	-webkit-animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 hfc;
			animation: 0.8s cubic-bezier(1, 0, 0, 1) 0s normal backwards 1 hfc;
	opacity: 1;
	}


/* Rotate From Center */
@keyframes rfc {
	from { opacity: 0; transform: scale(0.01) rotate(360deg); }
	to { opacity: 1; transform: scale(1) rotate(0); }
	}
@-webkit-keyframes rfc {
	from { opacity: 0; -webkit-transform: scale(0.01) rotate(360deg); }
	to { opacity: 1; -webkit-transform: scale(1) rotate(0); }
	}
.animate_rfc.animate_start {
	-webkit-animation: 0.8s ease 0s normal backwards 1 rfc;
			animation: 0.8s ease 0s normal backwards 1 rfc;
	opacity: 1;
	}
	
/* Rotate From Left */
@keyframes rfl {
	from { opacity: 0; transform: translateX(-100px) rotate(-180deg); }
	to { opacity: 1; transform: translateX(0) rotate(0); }
	}
@-webkit-keyframes rfl {
	from { opacity: 0; -webkit-transform: translateX(-100px) rotate(-180deg); }
	to { opacity: 1; -webkit-transform: translateX(0) rotate(0); }
	}
.animate_rfl.animate_start {
	-webkit-animation: 0.8s ease 0s normal backwards 1 rfl;
			animation: 0.8s ease 0s normal backwards 1 rfl;
	opacity: 1;
	}
		
/* Rotate From Right */
@keyframes rfr {
	from { opacity: 0; transform: translateX(100px) rotate(180deg); }
	to { opacity: 1; transform: translateX(0) rotate(0); }
	}
@-webkit-keyframes rfr {
	from { opacity: 0; -webkit-transform: translateX(100px) rotate(180deg); }
	to { opacity: 1; -webkit-transform: translateX(0) rotate(0); }
	}
.animate_rfr.animate_start {
	-webkit-animation: 0.8s ease 0s normal backwards 1 rfr;
			animation: 0.8s ease 0s normal backwards 1 rfr;
	opacity: 1;
	}
	
	
/* Animation Delays */
.d1.animate_start {
	-webkit-animation-delay: 0.2s;
			animation-delay: 0.2s;
	}
.d2.animate_start {
	-webkit-animation-delay: 0.4s;
			animation-delay: 0.4s;
	}
.d3.animate_start {
	-webkit-animation-delay: 0.6s;
			animation-delay: 0.6s;
	}
.d4.animate_start {
	-webkit-animation-delay: 0.8s;
			animation-delay: 0.8s;
	}
.d5.animate_start {
	-webkit-animation-delay: 1s;
			animation-delay: 1s;
	}
	

/* ====================================================================
   2026-09-17 prefers-reduced-motion
   Honours the OS "reduce motion" setting - a vestibular accessibility need, not a
   preference. Also a safety net: it forces opacity:1, so an element that somehow
   never receives .animate_start is still readable for these visitors.
==================================================================== */
@media (prefers-reduced-motion: reduce) {
	[class*="animate_"] {
		-webkit-animation: none !important;
				animation: none !important;
		opacity: 1 !important;
		-webkit-transform: none !important;
				transform: none !important;
		}
	}