/* =============================================================================
 * D&E Proelectric — Motion layer
 * -----------------------------------------------------------------------------
 * Scroll-entry reveals for section content. Deliberately restrained: the design
 * brief calls for "slight image reveals, controlled fade/slide reveals, subtle
 * button state changes" and explicitly rules out parallax, bouncing, spinning
 * icons, and animating every object.
 *
 * Two implementations, same result:
 *   1. Browsers with CSS scroll-driven animations (`animation-timeline: view()`)
 *      run everything natively — no JavaScript, no scroll listeners.
 *   2. Everywhere else, a ~20-line IntersectionObserver adds `.de-in` and the
 *      same keyframes play once.
 *
 * Anything that has not been revealed yet still occupies its final layout box,
 * so nothing reflows and no CLS is introduced.
 * ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	/* ---------------------------------------------------------------------
	 * Shared keyframes
	 * ------------------------------------------------------------------ */
	@keyframes deRise {
		from { opacity: 0; transform: translateY(24px); }
		to   { opacity: 1; transform: none; }
	}
	@keyframes deRiseSm {
		from { opacity: 0; transform: translateY(14px); }
		to   { opacity: 1; transform: none; }
	}
	/* Image reveal: a slow settle out of a slight overscale, wiped in from
	 * the bottom edge — reads as a photograph being placed, not a slide. */
	@keyframes deReveal {
		from { opacity: 0; transform: scale(1.06); clip-path: inset(12% 0 0 0); }
		to   { opacity: 1; transform: none;        clip-path: inset(0 0 0 0); }
	}

	/* =====================================================================
	 * 1 · Native scroll-driven path (Chrome / Edge 115+)
	 * ================================================================== */
	@supports (animation-timeline: view()) {

		/* Headings, lead paragraphs, buttons, lists, spec labels */
		.de-display,
		.de-headline,
		.de-lede,
		.de-eyebrow,
		.elementor-widget-text-editor,
		.elementor-widget-button,
		.elementor-widget-icon-list,
		.de-c-spec,
		.de-c-chip,
		.de-c-meta {
			animation: deRiseSm both linear;
			animation-timeline: view();
			animation-range: entry 0% entry 70%;
		}

		/* Cards and tiles — a slightly longer travel so they read as a group */
		.elementor-widget-de-value-item,
		.elementor-widget-de-process-step,
		.elementor-widget-de-stat-card,
		.elementor-widget-de-timeline-item,
		.elementor-widget-de-project-tile {
			animation: deRise both linear;
			animation-timeline: view();
			animation-range: entry 0% entry 65%;
		}

		/* Photography */
		.elementor-widget-de-image-frame,
		.elementor-widget-image {
			animation: deReveal both linear;
			animation-timeline: view();
			animation-range: entry 0% entry 80%;
		}

		/* The hero sits above the fold, so it plays on load rather than on
		 * scroll — otherwise it would already be "revealed" and look static. */
		.de-hero-band .de-display,
		.de-hero-band .de-lede,
		.de-hero-band .de-c-chip,
		.de-hero-band .de-c-meta,
		.de-hero-band .elementor-widget-button {
			animation: deRiseSm .6s cubic-bezier(.22,.61,.36,1) both;
			animation-timeline: auto;
		}
		.de-hero-band .de-c-chip           { animation-delay: .05s; }
		.de-hero-band .de-display          { animation-delay: .12s; }
		.de-hero-band .de-lede             { animation-delay: .20s; }
		.de-hero-band .elementor-widget-button { animation-delay: .28s; }
		.de-hero-band .de-c-meta           { animation-delay: .36s; }

		.de-hero-band .elementor-widget-de-image-frame {
			animation: deReveal .8s cubic-bezier(.22,.61,.36,1) both;
			animation-timeline: auto;
			animation-delay: .18s;
		}
	}

	/* =====================================================================
	 * 2 · IntersectionObserver fallback (Safari / Firefox)
	 * ================================================================== */
	@supports not (animation-timeline: view()) {

		/* Only hide things once we know the observer is running, so a JS
		 * failure can never leave the page blank. */
		.de-motion .de-reveal { opacity: 0; }

		.de-motion .de-reveal.de-in {
			animation: deRiseSm .6s cubic-bezier(.22,.61,.36,1) both;
		}
		.de-motion .de-reveal--card.de-in {
			animation: deRise .7s cubic-bezier(.22,.61,.36,1) both;
		}
		.de-motion .de-reveal--media.de-in {
			animation: deReveal .8s cubic-bezier(.22,.61,.36,1) both;
		}

		/* Stagger siblings inside a grid or row so a card matrix cascades
		 * rather than popping in as one block. */
		.de-motion .de-reveal--card:nth-child(2).de-in  { animation-delay: .07s; }
		.de-motion .de-reveal--card:nth-child(3).de-in  { animation-delay: .14s; }
		.de-motion .de-reveal--card:nth-child(4).de-in  { animation-delay: .21s; }
		.de-motion .de-reveal--card:nth-child(5).de-in  { animation-delay: .28s; }
		.de-motion .de-reveal--card:nth-child(6).de-in  { animation-delay: .35s; }
		.de-motion .de-reveal--card:nth-child(n+7).de-in{ animation-delay: .40s; }
	}
}

/* =============================================================================
 * Interaction polish — applies regardless of scroll support
 * ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

	/* Buttons: a small lift plus the existing colour snap. */
	.elementor-widget-button.de-btn .elementor-button,
	.elementor-widget-button.de-btn-volt .elementor-button,
	.elementor-widget-button.de-btn-ghost .elementor-button {
		transition: background 120ms linear, border-color 120ms linear,
		            transform 180ms cubic-bezier(.22,.61,.36,1), color 120ms linear;
	}
	.elementor-widget-button.de-btn .elementor-button:hover,
	.elementor-widget-button.de-btn-volt .elementor-button:hover,
	.elementor-widget-button.de-btn-ghost .elementor-button:hover {
		transform: translateY(-2px);
	}
	.elementor-widget-button .elementor-button:active { transform: translateY(0); }

	/* Cards: the hairline border is the hover state, joined by a 1px lift. */
	.de-c-value, .de-c-step, .de-c-stat, .de-c-tile, .de-panel-card {
		transition: border-color 160ms linear, transform 220ms cubic-bezier(.22,.61,.36,1);
	}
	.de-c-value:hover, .de-c-step:hover, .de-c-tile:hover, .de-panel-card:hover {
		transform: translateY(-3px);
	}

	/* Nav: an electric-blue rule sweeps in under the active/hovered item. */
	.de-hd-nav .elementor-nav-menu > li > a.elementor-item { position: relative; }
	.de-hd-nav .elementor-nav-menu > li > a.elementor-item::after {
		content: '';
		position: absolute;
		left: 0.85rem; right: 0.85rem; bottom: 4px;
		height: 2px;
		background: var(--de-blue);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 200ms cubic-bezier(.22,.61,.36,1);
	}
	.de-hd-nav .elementor-nav-menu > li > a.elementor-item:hover::after,
	.de-hd-nav .elementor-nav-menu > li > a.elementor-item.elementor-item-active::after {
		transform: scaleX(1);
	}

	/* Off-canvas rows slide in one after another when the drawer opens. */
	.ekit_isActive .de-oc-nav .elementor-nav-menu > li {
		animation: deRiseSm .45s cubic-bezier(.22,.61,.36,1) both;
	}
	.ekit_isActive .de-oc-nav .elementor-nav-menu > li:nth-child(1) { animation-delay: .06s; }
	.ekit_isActive .de-oc-nav .elementor-nav-menu > li:nth-child(2) { animation-delay: .11s; }
	.ekit_isActive .de-oc-nav .elementor-nav-menu > li:nth-child(3) { animation-delay: .16s; }
	.ekit_isActive .de-oc-nav .elementor-nav-menu > li:nth-child(4) { animation-delay: .21s; }
	.ekit_isActive .de-oc-nav .elementor-nav-menu > li:nth-child(5) { animation-delay: .26s; }
	.ekit_isActive .de-oc-nav .elementor-nav-menu > li:nth-child(6) { animation-delay: .31s; }

	/* The live-circuit dot already pulses; give the volt tag a slow breathe so
	 * the trust row has one point of movement rather than none. */
	.de-c-meta__item--volt .de-c-meta__text { transition: background 200ms linear; }
}

/* Reduced motion: everything is visible and static. */
@media (prefers-reduced-motion: reduce) {
	.de-motion .de-reveal { opacity: 1 !important; animation: none !important; }
}