/**
 * Chef Blocks – Animations (frontend only)
 * See assets/js/chef-animations.js
 */

/* Headings stay hidden (layout intact) until their lines are split and parked
   below the mask, so they never flash "visible → gone → animate in".
   Not applied with reduced motion (no .has-js-reveal); the <head> script adds
   .chef-anim-fallback after 3s if this module never ran. */
html.has-js-reveal:not(.chef-anim-fallback) .block-title:not(.chef-lines-done),
html.has-js-reveal:not(.chef-anim-fallback) .hero h1:not(.chef-lines-done) {
	visibility: hidden;
}

/* Image parallax: the frame clips, the image moves inside it. */
.chef-parallax {
	overflow: hidden;
}

.chef-parallax img {
	will-change: transform;
}

/* ------------------------------------------------------------------
 * Page transitions (cross-document View Transitions)
 * Supported in Chrome/Edge 126+ and Safari 18.2+, ignored elsewhere.
 * ------------------------------------------------------------------ */
@view-transition {
	navigation: auto;
}

/* Clicked case card image → case page hero (same name on both pages). */
.chef-vt-media {
	view-transition-name: chef-case-media;
}

::view-transition-group(chef-case-media) {
	animation-duration: 0.6s;
	animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

::view-transition-old(chef-case-media),
::view-transition-new(chef-case-media) {
	height: 100%;
	object-fit: cover;
	overflow: clip;
}

/* Rest of the page: short, calm crossfade. */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}

/* ------------------------------------------------------------------
 * Fixed backgrounds (replaces background-attachment: fixed, which
 * does not work inside ScrollSmoother or on mobile). Class set by JS,
 * so without JS the original CSS stays in place.
 * ------------------------------------------------------------------ */
.chef-fixed-bg {
	overflow: hidden;
}

.chef-fixed-bg .background-image-wrapper {
	background-attachment: scroll !important;
	height: 100vh !important;
	height: 100lvh !important;
	bottom: auto !important;
	will-change: transform;
}

/* ------------------------------------------------------------------
 * Reading progress (case pages)
 * ------------------------------------------------------------------ */
.chef-read-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 1000;
	pointer-events: none;
}

.chef-read-progress__bar {
	height: 100%;
	background: linear-gradient(90deg, #68569E, #FFB900);
	transform-origin: 0 50%;
	transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
	.chef-read-progress {
		display: none;
	}
}