/* Forage Seattle - pictures and motion layer.
   Everything here is an enhancement: with reduced motion or without JS the page is complete and still. */

/* ---------- photo strip: two rows drifting past each other with the scroll ---------- */
.strip { padding-block: clamp(3rem, 7vw, 6rem); overflow: hidden; }
.strip.on-tide + .section.on-tide, .strip.on-mist + .section.on-mist { padding-top: 0; }
.strip-rows { display: grid; gap: clamp(.6rem, 1.2vw, 1rem); }
.strip-row { display: flex; gap: clamp(.6rem, 1.2vw, 1rem); width: max-content; will-change: transform; transform: translate3d(var(--sx, 0), 0, 0); }
.strip-row-0 { margin-left: -6vw; }
.strip-row-1 { margin-left: -22vw; }
.strip figure { margin: 0; flex: none; width: clamp(14rem, 26vw, 24rem); aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.strip figure:nth-child(3n+1) { aspect-ratio: 1; width: clamp(11rem, 19.5vw, 18rem); border-radius: 0 clamp(3rem, 6vw, 6rem) 0 0; }
.strip figure:nth-child(4n+3) { border-radius: 0 0 0 clamp(3rem, 6vw, 6rem); }
.strip-row-1 figure:nth-child(3n+2) { aspect-ratio: 3 / 2; width: clamp(16rem, 29vw, 27rem); border-radius: 0 0 clamp(3rem, 6vw, 6rem) 0; }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.strip figure:hover img { transform: scale(1.06); }

/* ---------- difference ledger with a sticky photo stage ---------- */
.ledger-pic { display: block; grid-column: 1 / -1; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 0 3.5rem 0 0; margin-top: .75rem; background: var(--mist); }
.ledger-pic img { width: 100%; height: 100%; object-fit: cover; }
.ledger-stage { display: none; }
@media (min-width: 64em) {
	.ledger-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
	.ledger-wrap .ledger-pic { display: none; }
	.ledger-wrap .ledger-row { grid-template-columns: 5rem 1fr; gap: .6rem 2rem; cursor: default; outline-offset: 4px; padding-inline: 1rem; margin-inline: -1rem; }
	.ledger-wrap .ledger-row p { grid-column: 2; max-width: 34rem; }
	.ledger-wrap .ledger-row h3, .ledger-wrap .ledger-row p, .ledger-wrap .ledger-ico { transition: opacity .4s var(--ease); }
	.js .ledger-wrap .ledger-row:not(.is-on) h3, .js .ledger-wrap .ledger-row:not(.is-on) p { opacity: .42; }
	.js .ledger-wrap .ledger-row:not(.is-on) .ledger-ico { opacity: .55; }
	.ledger-stage { display: block; position: sticky; top: calc(var(--hdr-h) + 2rem); }
	.ledger-stage-in { position: relative; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--hdr-h) - 4rem); margin-left: auto; overflow: hidden; border-radius: 0 clamp(5rem, 9vw, 9rem) 0 0; background: var(--tide); }
	.ledger-shot { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease); z-index: 0; }
	.ledger-shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); transition: transform 1.4s var(--ease); }
	.ledger-shot.is-on { clip-path: inset(0); z-index: 2; }
	.ledger-shot.is-on img { transform: scale(1); }
	.ledger-shot.was-on { clip-path: inset(0); z-index: 1; transition-delay: .9s; }
	.ledger-stage-no { position: absolute; z-index: 3; left: 0; bottom: 0; min-width: 5rem; padding: .8rem 1rem; background: var(--peach); color: var(--tide); font-family: var(--note); font-weight: 700; font-size: var(--step-1); text-align: center; border-radius: 0 2rem 0 0; }
}

/* ---------- type panels: a photo in every panel, tinted until opened ---------- */
@media (min-width: 60em) {
	.panel-photo { opacity: 1; }
	.panel-photo img { filter: grayscale(1) brightness(1.5) contrast(.7); transform: scale(1.08); transition: filter .8s var(--ease), transform 1.6s var(--ease); }
	.panel-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--key); mix-blend-mode: multiply; opacity: .92; transition: opacity .8s var(--ease); }
	.panel-photo::after { z-index: 2; opacity: 0; transition: opacity .8s var(--ease); }
	.panel.is-open .panel-photo img { filter: none; transform: scale(1); }
	.panel.is-open .panel-photo::before { opacity: 0; }
	.panel.is-open .panel-photo::after { opacity: 1; }
	.panel:not(.is-open) .panel-art { opacity: .95; }
	.panel-body { position: relative; z-index: 3; }
	.panel:not(.is-open) .panel-body { background: linear-gradient(180deg, transparent, var(--key) 55%); padding-top: 5rem; }
	.panel:not(.is-open):hover .panel-art { transform: translate(-50%, -54%) rotate(-4deg); }
}
@media (max-width: 59.99em) {
	.panel-photo { opacity: 1; }
	.panel-photo img { filter: grayscale(1) brightness(1.5) contrast(.7); }
	.panel-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--key); mix-blend-mode: multiply; opacity: .9; }
	.panel-photo::after { display: none; }
}

/* ---------- hover peek: a photo that follows the pointer along the experience list ---------- */
.xpeek { position: fixed; left: 0; top: 0; z-index: 60; width: clamp(15rem, 21vw, 21rem); aspect-ratio: 4 / 5; pointer-events: none; overflow: hidden; border-radius: 0 5rem 0 0; background: var(--tide); opacity: 0; clip-path: inset(50% 50% 50% 50%); transition: opacity .25s var(--ease), clip-path .55s var(--ease); will-change: transform; }
.xpeek.is-on { opacity: 1; clip-path: inset(0); }
.xpeek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity .35s var(--ease), transform .9s var(--ease); }
.xpeek img.is-on { opacity: 1; transform: scale(1); }
.xrow { transition: padding .35s var(--ease), background .35s var(--ease); }
@media (hover: hover) and (min-width: 56em) {
	.xrow:hover { padding-inline: 1.25rem; background: var(--mist); }
	.on-mist .xrow:hover { background: #fff; }
	.xrow-thumb img { transition: transform .8s var(--ease); }
	.xrow:hover .xrow-thumb img { transform: scale(1.1); }
}

/* the hero photo layer moves on scroll, keep it inside the hero */
.hero { overflow: clip; }

/* ---------- gallery + cards: slow zoom under the pointer ---------- */
.gallery img { transition: transform 1.2s var(--ease); }
.gallery > :hover img { transform: scale(1.05); }
.plate .ill { transition: transform .6s var(--ease); }
a:hover > .xcard-media .plate .ill, .wheel-x:hover .plate .ill, .season-card a:hover .plate .ill { transform: rotate(-8deg) scale(1.1); }

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

	/* ---------- headings rise word by word from behind a mask ---------- */
	.js [data-words] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
	.js [data-words] .w > span { display: inline-block; transform: translateY(108%) rotate(4deg); transform-origin: 0 100%; transition: transform .95s var(--ease); transition-delay: calc(var(--wi) * 55ms + var(--wd, 0ms)); }
	.js [data-words].is-seen .w > span { transform: none; }
	.js .hero h1[data-words] { opacity: 1; transform: none; }
	.js .hero.is-in h1[data-words] .w > span { transform: none; }
	.js .hero h1[data-words] .w > span { --wd: 150ms; transition-duration: 1.15s; }

	/* ---------- photos unveil from the bottom edge ---------- */
	.js [data-unveil] { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--ease); transition-delay: calc(var(--ri, 0) * 90ms); }
	.js [data-unveil].is-seen { clip-path: inset(0); }
	.js [data-unveil] > img { transform: scale(1.18); transition: transform 1.7s var(--ease); transition-delay: calc(var(--ri, 0) * 90ms); }
	.js [data-unveil].is-seen > img { transform: scale(1); }
	.js a:hover > [data-unveil].is-seen > img { transform: scale(1.04); transition-duration: .9s; transition-delay: 0s; }

	/* ---------- rows and small pieces step in ---------- */
	.js [data-step-in] { opacity: 0; transform: translateY(1.4rem); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--ri, 0) * 70ms); }
	.js [data-step-in].is-seen { opacity: 1; transform: none; }
	.js .ledger, .js .section-head + div[style*="border-top"] { position: relative; }

	/* ---------- hero: slow push-in on load, drift apart on scroll ---------- */
	.hero-page .hero-media img { animation: fo-push 2.6s var(--ease) both; }
	@keyframes fo-push { from { transform: scale(1.14); } to { transform: scale(1); } }

	/* ---------- season wheel: the list re-deals on every month ---------- */
	.wheel-x:not([hidden]) { animation: fo-deal .55s var(--ease) both; }
	.wheel-x:not([hidden]) ~ .wheel-x:not([hidden]) { animation-delay: .06s; }
	.wheel-x:not([hidden]) ~ .wheel-x:not([hidden]) ~ .wheel-x:not([hidden]) { animation-delay: .12s; }
	.wheel-x:not([hidden]) ~ .wheel-x:not([hidden]) ~ .wheel-x:not([hidden]) ~ .wheel-x:not([hidden]) { animation-delay: .18s; }
	@keyframes fo-deal { from { opacity: 0; transform: translateX(1.5rem); } to { opacity: 1; transform: none; } }
	.wheel-hub strong { display: inline-block; }
	.wheel-hub.is-tick strong { animation: fo-tick .45s var(--ease); }
	@keyframes fo-tick { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } }

	/* ---------- header steps aside on the way down, returns on the way up ---------- */
	.hdr { transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .45s var(--ease); }
	.hdr.is-away { transform: translateY(-105%); }

	/* ---------- scroll-linked pieces (browsers with scroll timelines) ---------- */
	@supports (animation-timeline: view()) {
		.hero-home .hero-media, .hero-page .hero-media { animation: fo-sink linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
		@keyframes fo-sink { to { transform: translateY(16%) scale(1.06); } }
		.hero-home .hero-in > :first-child { animation: fo-lift linear both; animation-timeline: scroll(root); animation-range: 0 70svh; }
		@keyframes fo-lift { to { transform: translateY(-4.5rem); opacity: 0; } }

		.split-media .photo { overflow: hidden; }
		.split-media .photo > img { height: 116%; animation: fo-par linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
		@keyframes fo-par { from { transform: translateY(-13%); } to { transform: translateY(0); } }
		.js .split-media [data-unveil] > img, .js .split-media [data-unveil].is-seen > img { transition: none; }

		.band-pattern { animation: fo-pattern linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
		@keyframes fo-pattern { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: -9rem -14rem; mask-position: -9rem -14rem; } }
		.ribbon::before { animation: fo-ribbon linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
		@keyframes fo-ribbon { from { -webkit-mask-position: 0 50%; mask-position: 0 50%; } to { -webkit-mask-position: 26rem 50%; mask-position: 26rem 50%; } }

		.strip-row-0 { animation: fo-strip-a linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
		.strip-row-1 { animation: fo-strip-b linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
		@keyframes fo-strip-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-22vw, 0, 0); } }
		@keyframes fo-strip-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(20vw, 0, 0); } }

		.panel-art { animation: fo-art linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
		@keyframes fo-art { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }
	}

	/* ---------- page-to-page: the photo you clicked becomes the next page's hero ---------- */
	@view-transition { navigation: auto; }
	::view-transition-old(root) { animation: fo-vt-out .32s var(--ease) both; }
	::view-transition-new(root) { animation: fo-vt-in .5s var(--ease) both; }
	@keyframes fo-vt-out { to { opacity: 0; } }
	@keyframes fo-vt-in { from { opacity: 0; transform: translateY(1rem); } }
	::view-transition-group(fo-hero) { animation-duration: .7s; animation-timing-function: var(--ease); }
	::view-transition-old(fo-hero), ::view-transition-new(fo-hero) { height: 100%; width: 100%; object-fit: cover; }
	.hdr { view-transition-name: fo-hdr; }
	.hero-page .hero-media { view-transition-name: fo-hero; }
}