/* View Transitions — cross-fade for page navigations.
   Progressive enhancement: browsers without support ignore these entirely. */

/* Opt in to cross-document view transitions on same-origin navigations */
@view-transition {
	navigation: auto;
}

/* Named elements that morph across page navigations */
.dtec-plan-builder__steps {
	view-transition-name: step-content;
}

.dtec-sticky-bar {
	view-transition-name: sticky-bar;
}

.dtec-plan-builder__nav {
	view-transition-name: step-nav;
}

/* Root: instant swap — named elements handle their own animations */
::view-transition-old(root) {
	animation: none;
}

::view-transition-new(root) {
	animation: none;
}

/* Step content: fade + slide forward */
::view-transition-old(step-content) {
	animation: dtec-slide-out-left 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(step-content) {
	animation: dtec-slide-in-right 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Backward navigation — reverse direction */
html.dtec-nav-back::view-transition-old(step-content) {
	animation: dtec-slide-out-right 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

html.dtec-nav-back::view-transition-new(step-content) {
	animation: dtec-slide-in-left 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Progress bar: gentle cross-fade */
::view-transition-old(progress-bar),
::view-transition-new(progress-bar) {
	animation-duration: 150ms;
	animation-timing-function: ease;
}

/* Sticky bar: gentle cross-fade */
::view-transition-old(sticky-bar),
::view-transition-new(sticky-bar) {
	animation-duration: 150ms;
	animation-timing-function: ease;
}

/* Nav (back button): gentle cross-fade */
::view-transition-old(step-nav),
::view-transition-new(step-nav) {
	animation-duration: 120ms;
	animation-timing-function: ease;
}

/* Shared keyframes */
@keyframes dtec-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes dtec-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Content slide — horizontal with fade */
@keyframes dtec-slide-out-left {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(-30px); }
}

@keyframes dtec-slide-in-right {
	from { opacity: 0; transform: translateX(30px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes dtec-slide-out-right {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(30px); }
}

@keyframes dtec-slide-in-left {
	from { opacity: 0; transform: translateX(-30px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes dtec-auth-card-out {
	from { opacity: 1; transform: translateY(0) scale(1); }
	to   { opacity: 0; transform: translateY(-18px) scale(0.98); }
}

@keyframes dtec-auth-account-in {
	from { opacity: 0; transform: translateY(28px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Account nav: cross-fade */
::view-transition-old(account-nav),
::view-transition-new(account-nav) {
	animation-duration: 200ms;
	animation-timing-function: ease;
}

/* Account page content: same directional slide language as the step flow */
::view-transition-old(account-content) {
	animation: dtec-slide-out-left 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(account-content) {
	animation: dtec-slide-in-right 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

html.dtec-nav-back::view-transition-old(account-content) {
	animation: dtec-slide-out-right 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

html.dtec-nav-back::view-transition-new(account-content) {
	animation: dtec-slide-in-left 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

html.dtec-auth-success::view-transition-old(account-content) {
	animation: dtec-auth-card-out 240ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

html.dtec-auth-success::view-transition-new(account-content) {
	animation: dtec-auth-account-in 320ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

/* Account tab underline: let the browser interpolate geometry across pages */
::view-transition-old(account-nav-indicator),
::view-transition-new(account-nav-indicator) {
	animation-duration: 220ms;
	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Page header: cross-fade with slight slide */
::view-transition-old(page-header) {
	animation: dtec-slide-out-left 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(page-header) {
	animation: dtec-slide-in-right 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

html.dtec-nav-back::view-transition-old(page-header) {
	animation: dtec-slide-out-right 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

html.dtec-nav-back::view-transition-new(page-header) {
	animation: dtec-slide-in-left 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(*),
	::view-transition-new(*) {
		animation-duration: 0ms !important;
	}
}