/**
 * Code.Hub site-wide subtle animations.
 * Spec: docs/superpowers/specs/2026-08-04-site-animations-design.md
 *
 * Class contract (set by assets/js/animations.js):
 *   .ch-reveal  — element participates in scroll-reveal (hidden until .ch-inview)
 *   .ch-inview  — element has entered the viewport
 *   .ch-done    — reveal transition finished; hover transitions take over
 *   .ch-card    — detected query-loop card (hover lift + image zoom)
 *   .ch-bar     — h2 section heading that gets the orange bar accent
 *   --ch-i      — stagger index (0–5), 90ms per step
 *
 * No-JS / crawlers: none of the ch-* classes exist in server HTML, so nothing
 * is ever hidden without JS. All motion is gated on prefers-reduced-motion.
 */

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

	/* ---- A2: scroll-reveal (rise & settle) ---------------------------- */

	.ch-reveal {
		opacity: 0;
		transform: translateY(28px) scale(0.96);
		transition:
			opacity 0.7s ease-out,
			transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
		transition-delay: calc(var(--ch-i, 0) * 110ms);
	}

	/* Headings and text blocks travel less and don't scale */
	.brxe-heading.ch-reveal,
	.brxe-text-basic.ch-reveal,
	.brxe-text.ch-reveal {
		transform: translateY(24px);
	}

	/* Large display/statement headings (font-size >= 60px, tagged by JS)
	   slide in from the left instead of rising. */
	.ch-hero-heading.ch-reveal {
		transform: translateX(-40px);
	}

	.ch-reveal.ch-inview {
		opacity: 1;
		transform: none;
	}

	/* ---- D1: orange bar draws in under section headings --------------- */

	h2.ch-bar {
		position: relative;
	}

	h2.ch-bar::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -10px;
		width: 56px;
		height: 4px;
		background: var(--ds-color-electric-orange-500, #f15b40);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s;
	}

	h2.ch-bar.ch-inview::after,
	h2.ch-bar.ch-done::after {
		transform: scaleX(1);
	}

	/* ---- CTA panels — unit rise, then content cascade ----------------- */
	/* Large background blocks with heading + link (tagged .ch-panel by JS,
	   e.g. the homepage "Events & Community" billboard): the panel rises in,
	   then its direct children float up one after another. */

	.ch-panel.ch-reveal > * {
		opacity: 0;
		translate: 0 18px;
	}

	.ch-panel > * {
		transition: opacity 0.6s ease-out, translate 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.ch-panel.ch-inview > * {
		opacity: 1;
		translate: 0 0;
	}

	.ch-panel.ch-inview > :nth-child(1) { transition-delay: 0.15s; }
	.ch-panel.ch-inview > :nth-child(2) { transition-delay: 0.3s; }
	.ch-panel.ch-inview > :nth-child(3) { transition-delay: 0.45s; }
	.ch-panel.ch-inview > :nth-child(n+4) { transition-delay: 0.6s; }

	/* ---- B2: card hover — lift + image zoom --------------------------- */
	/* Only after the reveal has settled (.ch-done), so the hover
	   transition (0.25s, no delay) never fights the reveal transition. */

	.ch-card.ch-done {
		transition: transform 0.25s ease;
	}

	.ch-card.ch-done:hover {
		transform: translateY(-4px);
	}

	/* The detected element is the query-loop wrapper, which has no border or
	   radius of its own; the visible card is its first child (that child
	   carries the border-radius and the inner margin). Put the shadow there so
	   it follows the card's rounding instead of drawing a square halo. */
	.ch-card.ch-done > :first-child {
		transition: box-shadow 0.25s ease;
	}

	.ch-card.ch-done:hover > :first-child {
		box-shadow: 0 14px 30px rgba(29, 16, 54, 0.16);
	}

	.ch-card .brxe-image {
		overflow: hidden;
	}

	.ch-card .brxe-image img {
		transition: transform 0.35s ease;
	}

	.ch-card.ch-done:hover .brxe-image img {
		transform: scale(1.04);
	}

	/* ---- C3: menu — color shift + underline float-up ------------------ */
	/* Two top-level nav lists exist in production:
	     desktop — ul[aria-label="Main navigation"] (#brxe-urmeos)
	     mobile  — ul.brx-nav-nested-items (#brxe-vrgjac, inside .brxe-nav-nested)
	   Both are matched below. The `> li >` child combinator keeps every rule
	   off the links inside .brx-dropdown-content (mega-menu content), whose
	   parent lists carry aria-labelledby, never aria-label. */

	#brx-header ul[aria-label] > li > a,
	#brx-header ul[aria-label] > li > .brx-submenu-toggle > a,
	#brx-header ul[aria-label] > li > .brx-submenu-toggle > span,
	#brx-header .brx-nav-nested-items > li > a,
	#brx-header .brx-nav-nested-items > li > .brx-submenu-toggle > a,
	#brx-header .brx-nav-nested-items > li > .brx-submenu-toggle > span {
		position: relative;
		transition: color 0.25s ease;
	}

	#brx-header ul[aria-label] > li > a:hover,
	#brx-header ul[aria-label] > li > a:focus-visible,
	#brx-header ul[aria-label] > li > .brx-submenu-toggle > a:hover,
	#brx-header ul[aria-label] > li > .brx-submenu-toggle > a:focus-visible,
	#brx-header ul[aria-label] > li > .brx-submenu-toggle:hover > span,
	#brx-header .brx-nav-nested-items > li > a:hover,
	#brx-header .brx-nav-nested-items > li > a:focus-visible,
	#brx-header .brx-nav-nested-items > li > .brx-submenu-toggle > a:hover,
	#brx-header .brx-nav-nested-items > li > .brx-submenu-toggle > a:focus-visible,
	#brx-header .brx-nav-nested-items > li > .brx-submenu-toggle:hover > span {
		color: var(--ds-color-electric-orange-300, #f79d8c);
	}

	#brx-header ul[aria-label] > li > a::after,
	#brx-header ul[aria-label] > li > .brx-submenu-toggle > a::after,
	#brx-header ul[aria-label] > li > .brx-submenu-toggle > span::after,
	#brx-header .brx-nav-nested-items > li > a::after,
	#brx-header .brx-nav-nested-items > li > .brx-submenu-toggle > a::after,
	#brx-header .brx-nav-nested-items > li > .brx-submenu-toggle > span::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -2px;
		height: 2px;
		background: var(--ds-color-electric-orange-500, #f15b40);
		opacity: 0;
		translate: 0 3px;
		transition: opacity 0.25s ease, translate 0.25s ease;
	}

	#brx-header ul[aria-label] > li > a:hover::after,
	#brx-header ul[aria-label] > li > a:focus-visible::after,
	#brx-header ul[aria-label] > li > .brx-submenu-toggle > a:hover::after,
	#brx-header ul[aria-label] > li > .brx-submenu-toggle > a:focus-visible::after,
	#brx-header ul[aria-label] > li > .brx-submenu-toggle:hover > span::after,
	#brx-header .brx-nav-nested-items > li > a:hover::after,
	#brx-header .brx-nav-nested-items > li > a:focus-visible::after,
	#brx-header .brx-nav-nested-items > li > .brx-submenu-toggle > a:hover::after,
	#brx-header .brx-nav-nested-items > li > .brx-submenu-toggle > a:focus-visible::after,
	#brx-header .brx-nav-nested-items > li > .brx-submenu-toggle:hover > span::after {
		opacity: 1;
		translate: 0 0;
	}

	/* ---- C3: dropdown / mega-menu fade + slide open ------------------- */
	/* Bricks toggles .open on li.brxe-dropdown; closed content already has
	   opacity:0 + visibility:hidden, so transitions animate both ways.
	   visibility is delayed on close so the fade-out is visible.

	   The site positions the open mega menus with
	   `#brxe-paybvp.open > .brx-dropdown-content { transform: translateY(34px) }`.
	   We therefore animate the standalone `translate` property, which composes
	   with that transform instead of replacing it — the 34px offset is never
	   overridden. Still compositor-only, no layout, no CLS. */

	#brx-header .brxe-dropdown > .brx-dropdown-content {
		translate: 0 10px;
		transition:
			opacity 0.3s ease,
			translate 0.3s ease,
			transform 0.3s ease,
			visibility 0s linear 0.3s;
	}

	#brx-header .brxe-dropdown.open > .brx-dropdown-content {
		translate: 0 0;
		transition:
			opacity 0.3s ease,
			translate 0.3s ease,
			transform 0.3s ease,
			visibility 0s;
	}

	/* Mega-menu content: columns/blocks float up with a slight cascade once
	   the panel opens (desktop only — the mobile nav opens as an accordion). */
	@media (min-width: 992px) {
		#brx-header .brxe-dropdown > .brx-dropdown-content > * {
			opacity: 0;
			translate: 0 10px;
			transition: opacity 0.3s ease, translate 0.3s ease;
		}

		#brx-header .brxe-dropdown.open > .brx-dropdown-content > * {
			opacity: 1;
			translate: 0 0;
		}

		#brx-header .brxe-dropdown.open > .brx-dropdown-content > :nth-child(1) { transition-delay: 0.05s; }
		#brx-header .brxe-dropdown.open > .brx-dropdown-content > :nth-child(2) { transition-delay: 0.11s; }
		#brx-header .brxe-dropdown.open > .brx-dropdown-content > :nth-child(3) { transition-delay: 0.17s; }
		#brx-header .brxe-dropdown.open > .brx-dropdown-content > :nth-child(4) { transition-delay: 0.23s; }
		#brx-header .brxe-dropdown.open > .brx-dropdown-content > :nth-child(n+5) { transition-delay: 0.28s; }
	}
}