/* ========================================================================== ecoven — motion layer The rule of the house: nothing animates until JavaScript has confirmed the element is in view. Elements only get their "before" state once the `.ec-motion` class is on — added by inline JS in header.php — so a visitor with JS disabled, or one who asked for reduced motion, sees the finished layout immediately instead of a blank page. ========================================================================== */ /* ------------------------------------------------------------- Reveals -- */ .ec-motion [data-reveal] { opacity: 0; will-change: transform, opacity; transition: opacity var(--ec-dur-lg) var(--ec-ease), transform var(--ec-dur-lg) var(--ec-ease), filter var(--ec-dur-lg) var(--ec-ease), clip-path var(--ec-dur-xl) var(--ec-ease); transition-delay: var(--rd, 0ms); } .ec-motion [data-reveal="fade-up"] { transform: translate3d(0, var(--ec-reveal-y), 0); } .ec-motion [data-reveal="fade-down"] { transform: translate3d(0, calc(var(--ec-reveal-y) * -1), 0); } .ec-motion [data-reveal="fade-right"] { transform: translate3d(calc(var(--ec-reveal-y) * -1.4), 0, 0); } .ec-motion [data-reveal="fade-left"] { transform: translate3d(calc(var(--ec-reveal-y) * 1.4), 0, 0); } .ec-motion [data-reveal="fade-in"] { transform: none; } .ec-motion [data-reveal="zoom-in"] { transform: scale(0.92); } .ec-motion [data-reveal="zoom-out"] { transform: scale(1.06); } .ec-motion [data-reveal="blur-in"] { filter: blur(var(--ec-reveal-blur)); transform: translate3d(0, 16px, 0); } .ec-motion [data-reveal="clip-up"] { clip-path: inset(100% 0 0 0); transform: translate3d(0, 12px, 0); } .ec-motion [data-reveal="mask-right"] { clip-path: inset(0 100% 0 0); } .ec-motion [data-reveal="rise-rotate"]{ transform: translate3d(0, 40px, 0) rotate(1.6deg); } .ec-motion [data-reveal].is-revealed { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); } /* Elements that finished animating release the compositor hint. */ .ec-motion [data-reveal].is-settled { will-change: auto; } /* ------------------------------------------------------- Word staggering */ .ec-word { display: inline-block; overflow: hidden; vertical-align: bottom; } .ec-word__i { display: inline-block; } .ec-motion [data-reveal="words"] { opacity: 1; } .ec-motion [data-reveal="words"] .ec-word__i { transform: translate3d(0, 105%, 0) rotate(2deg); opacity: 0; transition: transform 780ms var(--ec-ease), opacity 520ms var(--ec-ease); transition-delay: calc(var(--rd, 0ms) + var(--w, 0) * 55ms); } .ec-motion [data-reveal="words"].is-revealed .ec-word__i { transform: none; opacity: 1; } .ec-head__title em { font-style: normal; color: var(--ec-amber); } /* ------------------------------------------------------------ Staggering */ /* Children of a [data-stagger] container inherit an incremental delay, so a grid of six cards needs one attribute rather than six inline styles. */ .ec-motion [data-stagger] > * { --rd: calc(var(--i, 0) * var(--ec-stagger)); } /* ------------------------------------------------------------- Parallax - */ [data-parallax] { will-change: transform; } /* ------------------------------------------------------------- Counters - */ .ec-stat__value { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------- Magnetic btn - */ [data-magnetic] { --mx: 0px; --my: 0px; } /* ------------------------------------------------------- Hover lift kit - */ .ec-lift { transition: transform var(--ec-dur) var(--ec-ease), box-shadow var(--ec-dur) var(--ec-ease); } .ec-lift:hover { transform: translateY(-6px); box-shadow: var(--ec-shadow); } /* ---------------------------------------------------- Section entrance -- */ /* A hairline that draws itself across the top of a section. */ .ec-rule-draw { height: 1px; background: currentColor; opacity: 0.28; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1400ms var(--ec-ease); } .ec-rule-draw.is-revealed { transform: scaleX(1); } /* --------------------------------------------------------- Sticky header */ .ec-header__bar { transition: transform var(--ec-dur) var(--ec-ease); } body.is-scrolling-down .ec-header--sticky.ec-header--hide .ec-header__bar { transform: translateY(-102%); } /* -------------------------------------------------------- Loading states */ @keyframes ec-spin { to { transform: rotate(360deg); } } .ec-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ec-spin 700ms linear infinite; } /* Skeleton shimmer while AJAX content lands. */ .ec-skel { position: relative; overflow: hidden; background: var(--ec-ice); } .ec-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.65), transparent); transform: translateX(-100%); animation: ec-shimmer 1.4s var(--ec-ease-in-out) infinite; } @keyframes ec-shimmer { to { transform: translateX(100%); } } /* --------------------------------------------------- Reduced motion ----- */ /* * Two switches, both honoured: * 1. the OS-level preference, * 2. the site-wide toggle on the ecoven options page (.ec--no-motion). * In either case every reveal is already in its finished state, transitions * collapse to a hair over zero (so :focus and :hover states still read as * intentional rather than snapping), and the looping decorations stop. */ @media (prefers-reduced-motion: reduce) { html:not(.ec-force-motion) *, html:not(.ec-force-motion) *::before, html:not(.ec-force-motion) *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html:not(.ec-force-motion) [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; } html:not(.ec-force-motion) [data-reveal="words"] .ec-word__i { opacity: 1 !important; transform: none !important; } } .ec--no-motion [data-reveal], .ec--no-motion [data-reveal="words"] .ec-word__i { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; } .ec--no-motion .ec-collage__track, .ec--no-motion .ec-hero__media, .ec--no-motion .ec-videocard__play::before, .ec--no-motion .ec-langs__dot { animation: none !important; } .ec--no-motion [data-parallax] { transform: none !important; }