/* Shared designer animations and sticky headings for two-column lists. */
body { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
body.has-motion .section-inner.reveal { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: no-preference) {
	body.has-motion .motion-hero { overflow-x: clip; }
	body.has-motion :is(.motion-reveal, .motion-title) { opacity: 0; transform: translate(var(--motion-x, 0px), var(--motion-y, 28px)); transition: opacity .8s var(--motion-ease), transform .9s var(--motion-ease); transition-delay: var(--motion-delay, 0ms); }
	body.has-motion .motion-title { transform: translate(var(--motion-x, 0px), var(--motion-y, 40px)); }
	body.has-motion :is(.motion-reveal, .motion-title).is-motion-visible { opacity: 1; transform: none; }
	body.has-motion .eyebrow.motion-reveal.is-motion-visible { opacity: .8; }
	/* A first-paint transition can collapse before its hidden state is painted. */
	body.has-motion .motion-hero :is(.motion-title, .motion-reveal).is-motion-visible { animation: drive4usa-hero-entry .95s var(--motion-ease) var(--motion-delay, 0ms) both; transition: none; }
	body.has-motion .motion-hero .eyebrow { --motion-opacity: .8; }
	body.has-motion .motion-image { overflow: hidden; opacity: 0; transition: opacity .4s ease var(--motion-delay, 0ms); }
	body.has-motion .motion-image > img { clip-path: inset(0 0 100%); scale: 1.12; transition: clip-path 1.2s var(--motion-ease) var(--motion-delay, 0ms), scale 1.5s var(--motion-ease) var(--motion-delay, 0ms); }
	body.has-motion .motion-image.is-motion-visible { opacity: 1; }
	body.has-motion .motion-image.is-motion-visible > img { clip-path: inset(0); scale: 1; }
	body.has-motion .motion-stagger > * { opacity: 0; translate: var(--motion-x, 0px) var(--motion-y, 48px); transition: opacity .8s var(--motion-ease), translate 1s var(--motion-ease); transition-delay: var(--motion-delay, 0ms); }
	body.has-motion .motion-stagger.is-motion-visible > * { opacity: 1; translate: 0 0; }
	body.has-motion .hero-benefits.motion-stagger.is-motion-visible > * { animation: drive4usa-hero-benefit-entry 1s var(--motion-ease) var(--motion-delay, 0ms) both; transition: none; }
	body.has-motion .section-background { overflow: hidden; }
	body.has-motion .section-inner > .section-background > img { transform: translateY(var(--motion-drift, 0px)) scale(1.1); }

	/* #267: rolling labels and an arrow that travels through its own tile. */
	body .motion-button-label { display: block; position: relative; overflow: hidden; }
	body .motion-button-label > span { display: block; transition: transform .45s var(--motion-ease); }
	body .motion-button-label > span + span { position: absolute; inset: 0; transform: translateY(110%); }
	body :is(.button:not(:disabled), .card-link):is(:hover, :focus-visible) .motion-button-label > span:first-child { transform: translateY(-110%); }
	body :is(.button:not(:disabled), .card-link):is(:hover, :focus-visible) .motion-button-label > span + span { transform: translateY(0); }
	body .button .button-arrow { overflow: hidden; }
	body .button:not(:disabled):is(:hover, :focus-visible) .button-arrow::after { animation: drive4usa-arrow .5s var(--motion-ease); }
	body .card-link:is(:hover, :focus-visible) > span:last-child { animation: drive4usa-arrow .5s var(--motion-ease); }
	body .ff-btn-submit:not(:disabled):is(:hover, :focus-visible)::after { animation: drive4usa-submit-arrow .5s var(--motion-ease); }
	body .slider-controls button:not(:disabled):is(:hover, :focus-visible) { filter: brightness(1.4); }
	body .card--plain .card-body { transition: background-color .4s ease; }
	body .card--plain .card-icon { transition: transform .5s var(--motion-ease); }
	body .card--plain:hover .card-body { background-color: #eef3fa; }
	body .card--plain:hover .card-icon { transform: translateY(-5px) rotate(-6deg); }
	body .button--outline { transition: background-color .3s ease, filter .3s ease; }
	body .button--outline:not(:disabled):is(:hover, :focus-visible) { background-color: #ffffff15; }

	/* #266: staggered letter reveal using the existing vector wordmark. */
	body.has-motion .motion-wordmark { position: relative; overflow: hidden; }
	body.has-motion .motion-wordmark > img { visibility: hidden; }
	body .motion-logo-letter { display: none; }
	body.has-motion .motion-logo-letter { display: block; position: absolute; inset: 0; transform: translateY(110%); transition: transform 1.1s var(--motion-ease) var(--motion-delay, 0ms); }
	body.has-motion .motion-wordmark.is-motion-visible .motion-logo-letter { transform: none; }
}

@keyframes drive4usa-hero-entry {
	from { opacity: 0; transform: translate(var(--motion-x, 0px), var(--motion-y, 28px)); }
	to { opacity: var(--motion-opacity, 1); transform: translate(0, 0); }
}
@keyframes drive4usa-hero-benefit-entry {
	from { opacity: 0; translate: var(--motion-x, 0px) var(--motion-y, 48px); }
	to { opacity: 1; translate: 0 0; }
}

/* Pin only a short left column beside a list, never forms or photo layouts. */
@media (min-width: 901px) and (min-height: 700px) {
	body :is(.section--requirements.section-variant--standard:not(.has-image), .section--trailers) > .section-inner > .section-heading { position: sticky; top: calc(94px + 16 * var(--fluid-space, 1px)); align-self: start; }
	body.admin-bar :is(.section--requirements.section-variant--standard:not(.has-image), .section--trailers) > .section-inner > .section-heading { top: calc(126px + 16 * var(--fluid-space, 1px)); }
	body .section--trailers > .section-inner { overflow: clip; }
}

/* #269/#276: names stay visible; the role rises into view on hover or focus.
   Touch devices retain every caption without needing a hover gesture. */
@media (min-width: 601px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	body.has-motion :is(.section-home--positions, .section-jobs--positions) .card-body { overflow: hidden; }
	body.has-motion :is(.section-home--positions, .section-jobs--positions) .card-copy { transform: translateY(100%); transition: opacity .4s ease, transform .6s var(--motion-ease); }
	body.has-motion :is(.section-home--positions, .section-jobs--positions) .card:is(:hover, :focus-within) .card-copy { opacity: 1; transform: none; }
	body.has-motion .section--team .card { outline-offset: -3px; }
	body.has-motion .section--team .card-body { overflow: hidden; }
	body.has-motion .section--team .card-tag { opacity: 0; transform: translateY(22px); transition: opacity .4s ease, transform .5s var(--motion-ease); }
	body.has-motion .section--team .card h3 { transform: translateY(25px); transition: transform .5s var(--motion-ease); }
	body.has-motion .section--team .card-media img { transition: transform .8s var(--motion-ease); }
	body.has-motion .section--team .card:is(:hover, :focus-within) .card-tag { opacity: 1; transform: none; }
	body.has-motion .section--team .card:is(:hover, :focus-within) h3 { transform: none; }
	body.has-motion .section--team .card:is(:hover, :focus-within) .card-media img { transform: scale(1.045); }
}

/* Touch and reduced-motion users can read job details without hovering. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
	body :is(.section-home--positions, .section-jobs--positions) .card.card--overlay .card-copy { opacity: 1; transform: none; }
}

/* The unenhanced artwork and all content remain visible with motion disabled. */
body:not(.has-motion) .motion-logo-letter { display: none; }
@media (prefers-reduced-motion: reduce) {
	body .motion-logo-letter { display: none; }
	body .motion-wordmark > img { visibility: visible; }
	body .motion-button-label > span + span { display: none; }
}

@keyframes drive4usa-arrow {
	0%, 100% { transform: translate(0); opacity: 1; }
	45% { transform: translate(24px, -24px); opacity: 0; }
	46% { transform: translate(-24px, 24px); opacity: 0; }
}
@keyframes drive4usa-submit-arrow {
	0%, 100% { background-position: center; }
	45% { background-position: calc(50% + 30px) calc(50% - 30px); }
	46% { background-position: calc(50% - 30px) calc(50% + 30px); }
}