/* ==========================================================================
   Home interactions
   1) "Straight From The Fire" menu: text roll + photo cross-fade (menu.js)
   2) Fire button: flames rise to fill the pill on hover (.is-style-fire)
   ========================================================================== */

/* ---- Photo sets: one pair per menu item, cross-faded ---- */
.cdc-fire__photos > .cdc-fire__set {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.cdc-fire__photos > .cdc-fire__set.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease, visibility 0s;
}

@media (max-width: 1199.98px) {
	.cdc-fire__photos > .cdc-fire__set { position: absolute; }
}

/* ---- Menu items: roll the label up, highlight the active one ---- */
.cdc-fire__list li {
	cursor: pointer;
	outline: none;
}

.cdc-fire.has-menu-js .cdc-fire__list li:first-child:not(.is-active) {
	color: rgba(255, 255, 255, 0.35);
}

.cdc-fire.has-menu-js .cdc-fire__list li.is-active {
	color: var(--wp--preset--color--white);
}

.cdc-fire__list li:focus-visible .cdc-roll {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 4px;
}

/* The roll box is taller than the row so ascenders/descenders aren't cut;
   negative margins keep the baseline exactly where it was. */
.cdc-roll {
	display: block;
	overflow: clip;
	line-height: 1.3em;
	margin-block: -0.213em;
}

.cdc-roll__inner {
	display: block;
	position: relative;
	transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

.cdc-roll__inner::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 100%;
}

.cdc-fire__list li.is-active .cdc-roll__inner {
	transform: translateY(-100%);
}

@media (max-width: 1199.98px) {
	.cdc-roll { margin-block: -0.0em; line-height: 1.35em; }
}

@media (prefers-reduced-motion: reduce) {
	.cdc-roll__inner,
	.cdc-fire__photos > .cdc-fire__set { transition: none; }
}