/**
 * Fire & Frost motion system.
 *
 * Shared scroll-reveal, count-up, hover-lift and marquee primitives applied
 * via className across all pages (not just one pattern), so every page can
 * pull from the same small vocabulary instead of inventing bespoke motion
 * per section. Paired with assets/js/motion.js, which does the actual
 * IntersectionObserver/count-up work — this file only owns the CSS states.
 */

@media (prefers-reduced-motion: no-preference) {
	.ff-reveal {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	}
	.ff-reveal.is-visible {
		opacity: 1;
		transform: translateY(0);
	}

	/* Staggered children inside a .ff-reveal-group: each direct child fades
	   in slightly after the previous one, driven by nth-child delay rather
	   than JS per-item observers. */
	.ff-reveal-group > * {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	}
	.ff-reveal-group.is-visible > * {
		opacity: 1;
		transform: translateY(0);
	}
	.ff-reveal-group.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
	.ff-reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.13s; }
	.ff-reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.21s; }
	.ff-reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.29s; }
	.ff-reveal-group.is-visible > *:nth-child(5) { transition-delay: 0.37s; }
	.ff-reveal-group.is-visible > *:nth-child(6) { transition-delay: 0.45s; }
	.ff-reveal-group.is-visible > *:nth-child(n+7) { transition-delay: 0.5s; }

	.ff-reveal--scale {
		transform: scale(0.94);
	}
	.ff-reveal--scale.is-visible {
		transform: scale(1);
	}
}

/* Hover-lift: generic card/image affordance, distinct from .ff-btn's own
   hover (buttons already lift+fade via fire-frost.css). */
.ff-hover-lift {
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.ff-hover-lift:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(27, 67, 50, 0.14);
}

/* Image zoom-on-hover: wrap a figure/image in .ff-media-zoom (overflow
   hidden required on the wrapper for the scale to crop rather than spill). */
.ff-media-zoom {
	overflow: hidden;
	display: block;
}
.ff-media-zoom img {
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ff-media-zoom:hover img {
	transform: scale(1.06);
}

/* Count-up number: JS swaps the text content as it counts; this just holds
   layout steady (tabular-nums avoids the width jitter digits would cause). */
.ff-count-up {
	font-variant-numeric: tabular-nums;
}

/* Marquee: continuous horizontal scroll of duplicated content (JS duplicates
   the .ff-marquee-track children once so the loop has no visible seam). */
.ff-marquee {
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.ff-marquee-track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: 56px;
	will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
	.ff-marquee-track {
		animation: ff-marquee-scroll 28s linear infinite;
	}
	.ff-marquee:hover .ff-marquee-track {
		animation-play-state: paused;
	}
}
@keyframes ff-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.ff-marquee-item {
	flex-shrink: 0;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 20px;
}
.ff-marquee-item::after {
	content: '\2726';
	font-size: 11px;
	opacity: 0.5;
}

/* Sticky scroll-tracked timeline (Our Story milestones). The rail is a
   pseudo-element so the fill can animate its height via a custom property
   set by JS as the user scrolls, without extra markup. */
.ff-timeline {
	position: relative;
	padding-left: 40px;
}
.ff-timeline::before {
	content: '';
	position: absolute;
	left: 7px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: rgba(27, 67, 50, 0.12);
}
.ff-timeline::after {
	content: '';
	position: absolute;
	left: 7px;
	top: 6px;
	width: 2px;
	height: var(--ff-timeline-progress, 0%);
	background: var(--ff-gold, #C9A227);
	transition: height 0.15s linear;
}
.ff-timeline-item {
	position: relative;
	padding-bottom: 56px;
}
.ff-timeline-item:last-child {
	padding-bottom: 0;
}
.ff-timeline-dot {
	position: absolute;
	left: -40px;
	top: 4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--ff-off-white, #FFFEFB);
	border: 2px solid rgba(27, 67, 50, 0.25);
	transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.ff-timeline-item.is-active .ff-timeline-dot {
	border-color: var(--ff-gold, #C9A227);
	background: var(--ff-gold, #C9A227);
	transform: scale(1.15);
}
.ff-timeline-item.is-active .ff-timeline-year {
	color: var(--ff-gold, #C9A227);
}
.ff-timeline-year {
	font-family: var(--global-heading-font-family, 'Cormorant Garamond', serif);
	font-size: 15px;
	letter-spacing: 0.08em;
	color: var(--ff-subtle-text, #8A897E);
	margin-bottom: 6px !important;
	transition: color 0.3s ease;
}

/* Photo grid hover zoom (Home's ff-photo-grid) — CSS-only, no markup change
   needed since .ff-photo-grid-item already clips overflow. */
.ff-photo-grid-item img {
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ff-photo-grid-item:hover img {
	transform: scale(1.08);
}

/* Tab switcher (What We Offer trailer comparison, Menu category filter). */
.ff-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.ff-tab {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 2px solid rgba(27, 67, 50, 0.14);
	border-radius: 999px;
	padding: 10px 22px;
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--ff-mid, #55574F);
	cursor: pointer;
	transition: all 0.2s ease;
}
.ff-tab:hover {
	border-color: var(--ff-gold, #C9A227);
	color: var(--ff-dark, #1A1A18);
}
.ff-tab.is-active {
	background: var(--ff-deep-green, #1B4332);
	border-color: var(--ff-deep-green, #1B4332);
	color: var(--ff-off-white, #FFFEFB);
}
.ff-tab-panel {
	display: none;
}
.ff-tab-panel.is-active {
	display: block;
	animation: ff-tab-fade-in 0.4s ease;
}
/* External panels linked by id (see motion.js initTabs) hold a single large
   product image, so they need their own centering/spacing rather than
   inheriting the compact in-flow layout of inline tab panels. */
.ff-tab-panel[id^="ff-ext-panel-"] {
	text-align: center;
	margin-top: 32px;
}
.ff-tab-panel[id^="ff-ext-panel-"] figure {
	display: inline-block;
}
.ff-tab-panel[id^="ff-ext-panel-"] img {
	max-width: 100%;
	height: auto;
	/* Gutenberg adds a default (currentColor, browser-width) border the
	   moment any border-family style — even just a corner radius — is set
	   on an image block, with no explicit width/color of its own to override. */
	border: none !important;
}

/* What We Offer trailer comparison: image (left) + tabs/text/checklist
   (right). The image blocks are DOM siblings of the Custom HTML tabs block
   rather than nested inside it (kept as real core/image blocks so they stay
   dashboard-editable — see initTabs' id-linked "external panels"), so this
   wrapper uses flex + order to place the image first visually without
   reordering the source. */
.ff-offer-compare-wrap {
	max-width: 1120px;
	margin: 0 auto;
}
/* Gutenberg's "constrained" layout wraps a group's children in an extra
   .wp-block-group__inner-container div — that's the actual grid parent,
   not .ff-offer-compare-wrap itself, so the grid rules target it via the
   ">div" child selector rather than depending on its generated class name.
   Tabs span both columns on their own row; the image and the tabs/text/
   checklist content share the row below, vertically centered on each other. */
.ff-offer-compare-wrap > div {
	display: grid;
	grid-template-columns: 460px 1fr;
	grid-template-areas: "tabs tabs" "image content";
	align-items: center;
	gap: 40px 48px;
}
.ff-offer-compare-wrap .ff-oc-tabs-wrap {
	grid-area: tabs;
	justify-self: center;
}
.ff-offer-compare-wrap .ff-oc-panel {
	grid-area: content;
	min-width: 0;
}
.ff-offer-compare-wrap .ff-tab-panel[id^="ff-ext-panel-"] {
	grid-area: image;
	min-width: 0;
	margin-top: 0;
}
@media (max-width: 860px) {
	.ff-offer-compare-wrap > div {
		grid-template-columns: 1fr;
		grid-template-areas: "tabs" "image" "content";
	}
}
@keyframes ff-tab-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Accordion (FAQ). Each item is a button (full question row) that toggles
   its own answer panel via max-height, so the collapse animates instead of
   snapping — a hard-coded max-height is fine here since answers are all
   short FAQ paragraphs, not arbitrary-length content. */
.ff-accordion {
	max-width: 780px;
	margin: 0 auto;
}
.ff-accordion-item {
	border-bottom: 1px solid rgba(27, 67, 50, 0.12);
}
.ff-accordion-item:first-child {
	border-top: 1px solid rgba(27, 67, 50, 0.12);
}
.ff-accordion-trigger {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: none;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 4px;
	text-align: left;
	cursor: pointer;
	font-family: var(--global-heading-font-family, 'Cormorant Garamond', serif);
	font-size: 20px;
	font-weight: 500;
	color: var(--ff-dark, #1A1A18);
}
.ff-accordion-icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	position: relative;
}
.ff-accordion-icon::before,
.ff-accordion-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--ff-gold, #C9A227);
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.ff-accordion-icon::before {
	width: 14px;
	height: 2px;
}
.ff-accordion-icon::after {
	width: 2px;
	height: 14px;
}
.ff-accordion-item.is-open .ff-accordion-icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}
.ff-accordion-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}
.ff-accordion-panel-inner {
	padding: 0 4px 22px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ff-mid, #55574F);
}