/* ------------------------------------------------------------------ */
/* Motion: "Into the canopy" (assets/js/motion.js)                    */
/* Photos open through clearings in the leaves, headings grow from    */
/* their roots, light falls through the trees and mist rolls between  */
/* pages. Everything except the page mist waits for html.cn-motion,   */
/* which inc/setup.php sets only when motion is allowed.              */
/* ------------------------------------------------------------------ */

:root {
	--cn-m-amber: #e2a24a;
	--cn-m-moss: #6f8f4e;
	--cn-m-light: rgba(255, 236, 190, 0.55);
	--cn-m-mist: rgba(240, 242, 233, 0.92);
	--cn-m-grow: cubic-bezier(0.2, 0.9, 0.35, 1.08);
	--cn-m-soft: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Mist between pages (every page; CSS only, so it works without motion.js) ---------- */

html.cn-mist-in::before,
html.cn-mist-out::before,
html.cn-mist-in::after,
html.cn-mist-out::after {
	content: "";
	position: fixed;
	left: -10vw;
	z-index: 100000;
	width: 120vw;
	height: 160vh;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}

/* Two banks of fog: a dense one and a lighter one that trails it. */
html.cn-mist-in::before,
html.cn-mist-out::before {
	top: -30vh;
	background:
		radial-gradient(60% 40% at 20% 40%, rgba(255, 255, 255, 0.9), transparent 70%),
		radial-gradient(50% 35% at 75% 55%, rgba(223, 230, 208, 0.95), transparent 70%),
		radial-gradient(70% 45% at 50% 70%, rgba(255, 255, 255, 0.85), transparent 75%),
		var(--cn-m-mist);
}

html.cn-mist-in::after,
html.cn-mist-out::after {
	top: -10vh;
	background:
		radial-gradient(40% 30% at 30% 30%, rgba(223, 230, 208, 0.8), transparent 70%),
		radial-gradient(45% 30% at 80% 65%, rgba(255, 255, 255, 0.75), transparent 70%);
}

html.cn-mist-out::before {
	animation: cn-mist-rise 0.5s var(--cn-m-soft) both;
}

html.cn-mist-out::after {
	animation: cn-mist-rise 0.6s var(--cn-m-soft) both;
}

html.cn-mist-in::before {
	animation: cn-mist-lift 1.1s var(--cn-m-soft) 0.05s both;
}

html.cn-mist-in::after {
	animation: cn-mist-lift 1.3s var(--cn-m-soft) both;
}

html.cn-mist-in .cn-main {
	animation: cn-mist-settle 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cn-mist-rise {
	from { transform: translateY(100vh); }
	to { transform: translateY(0); }
}

@keyframes cn-mist-lift {
	from { transform: translateY(0); opacity: 1; }
	to { transform: translateY(-110vh); opacity: 0.4; }
}

@keyframes cn-mist-settle {
	from { transform: scale(1.03); transform-origin: 50% 0; }
	to { transform: none; transform-origin: 50% 0; }
}

/* ---------- Hidden until motion.js reveals them (no flash before the first frame) ---------- */

html.cn-motion .cn-hero__img,
html.cn-motion .cn-phero__img,
html.cn-motion .cn-hero__title,
html.cn-motion .cn-hero__text,
html.cn-motion .cn-hero__more,
html.cn-motion .cn-hero__credit,
html.cn-motion .cn-hero__bar,
html.cn-motion .cn-phero__card,
html.cn-motion .cn-phero__aside {
	visibility: hidden;
}

/* ---------- Header: follows the page, steps aside while reading down ---------- */

html.cn-motion .cn-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	transition: transform 0.45s var(--cn-m-soft), background-color 0.35s ease, box-shadow 0.35s ease;
}

html.cn-motion .cn-header.is-scrolled {
	background: rgba(240, 242, 233, 0.82);
	-webkit-backdrop-filter: blur(12px) saturate(1.2);
	backdrop-filter: blur(12px) saturate(1.2);
	box-shadow: 0 1px 0 var(--cn-c-line);
}

html.cn-motion .cn-header.is-away {
	transform: translateY(-100%);
}

html.cn-menu-open .cn-header.is-away,
html.cn-motion .cn-header.is-away:focus-within {
	transform: none;
}

@media screen and (max-width: 600px) {
	/* The admin bar scrolls away on small screens. */
	html.cn-motion .cn-header {
		top: 0;
	}
}

/* Menu links: a vine grows under the link instead of a straight underline. */
html.cn-motion .cn-nav__link {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cpath d='M0 3c3 0 3-2 6-2s3 4 6 4 3-4 6-4 3 2 6 2' fill='none' stroke='%23173b2a' stroke-width='1.25'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: 0 calc(100% - 6px);
	background-size: 0 6px;
	transition: background-size 0.5s var(--cn-m-grow);
}

html.cn-motion .cn-nav__link:hover,
html.cn-motion .cn-nav__link[aria-current="page"] {
	text-decoration-line: none;
	background-size: 100% 6px;
}

/* ---------- Light through the leaves (hero) ---------- */

.cn-dapple {
	position: absolute;
	inset: -10%;
	z-index: 1;
	pointer-events: none;
	mix-blend-mode: soft-light;
}

.cn-dapple__spot {
	position: absolute;
	width: 34vmax;
	height: 34vmax;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 240, 200, 0.75), rgba(255, 240, 200, 0.25) 55%, transparent);
	will-change: transform;
}

.cn-hero-mist {
	position: absolute;
	left: -20%;
	right: -20%;
	bottom: -10%;
	z-index: 1;
	height: 70%;
	pointer-events: none;
	background:
		radial-gradient(50% 60% at 30% 80%, rgba(240, 242, 233, 0.9), transparent 70%),
		radial-gradient(45% 55% at 75% 85%, rgba(223, 230, 208, 0.85), transparent 70%);
}

/* ---------- Photos: sunlight passes over them as they come into focus ---------- */

.cn-leak {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 60%;
	pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255, 222, 160, 0.7) 45%, rgba(255, 246, 220, 0.85) 55%, transparent);
	mix-blend-mode: screen;
	transform: translateX(-120%);
}

/* Lodge cards: a band of light follows the pointer across the photo. */
.cn-sheen {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(40% 55% at var(--cn-sheen-x, 50%) var(--cn-sheen-y, 30%), rgba(255, 238, 200, 0.45), transparent 70%);
	mix-blend-mode: soft-light;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.cn-lodge-card__media:hover .cn-sheen {
	opacity: 1;
}

html.cn-motion .cn-photos {
	overflow-x: clip;
}

/* ---------- Mist drifting over the closing photo ---------- */

.cn-mistband {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 200%;
	height: 45%;
	pointer-events: none;
	background:
		radial-gradient(25% 60% at 12% 85%, rgba(240, 242, 233, 0.5), transparent 70%),
		radial-gradient(22% 50% at 38% 90%, rgba(223, 230, 208, 0.45), transparent 70%),
		radial-gradient(25% 60% at 62% 85%, rgba(240, 242, 233, 0.5), transparent 70%),
		radial-gradient(22% 50% at 88% 90%, rgba(223, 230, 208, 0.45), transparent 70%);
}

/* ---------- Steps: the big numbers fill from the bottom like moss ---------- */

html.cn-motion .cn-steps__big-number {
	background-image: linear-gradient(to top, var(--cn-heading) 50%, var(--cn-line) 50%);
	background-size: 100% 200%;
	background-position: 0 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: background-position 1s var(--cn-m-soft);
}

html.cn-motion .cn-steps__big-number.is-grown {
	background-position: 0 100%;
}

/* ---------- Seasons: the season being read is marked, its particles fall ---------- */

html.cn-motion .cn-seasons__name {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.6s var(--cn-m-grow);
}

html.cn-motion .is-season .cn-seasons__name {
	background-size: 100% 1px;
}

html.cn-motion .cn-seasons__column {
	position: relative;
	overflow: hidden;
}

html.cn-motion .cn-seasons__column > .cn-seasons__body {
	position: relative;
	z-index: 1;
}

/* In a column the particles stay behind the text. */
html.cn-motion .cn-seasons__column > .cn-particles {
	z-index: 0;
}

.cn-particles {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.cn-particle {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	will-change: transform, opacity;
}

.cn-particle--spring {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #f6eaa6;
	box-shadow: 0 0 6px 1px rgba(246, 234, 166, 0.7);
}

.cn-particle--summer {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #f1fbb0;
	box-shadow: 0 0 10px 3px rgba(226, 245, 140, 0.75);
}

.cn-particle--autumn {
	width: 11px;
	height: 11px;
	border-radius: 0 75% 0 75%;
	background: var(--cn-leaf, #d2691e);
}

.cn-particle--winter {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
}

/* ---------- Rates: each season's rule fills in proportion to its price ---------- */

html.cn-motion .cn-rates__item {
	position: relative;
}

.cn-rates__grow {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--cn-heading);
	transform-origin: 0 50%;
}

/* Odometer reels while a figure rolls into place (motion.js restores the text afterwards). */
.cn-odo {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

.cn-odo__reel {
	display: block;
}

.cn-odo__reel > span {
	display: block;
}

/* ---------- Fields: a line of moss grows under the field in focus ---------- */

html.cn-motion .cn-book-field,
html.cn-motion .cn-inquiry__control,
html.cn-motion .cn-news__form input[type="email"] {
	background-image: linear-gradient(var(--cn-m-moss), var(--cn-m-moss));
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: 0 2px;
	transition: background-size 0.45s var(--cn-m-grow);
}

html.cn-motion .cn-book-field:focus-within,
html.cn-motion .cn-inquiry__control:focus,
html.cn-motion .cn-inquiry__control:focus-within,
html.cn-motion .cn-news__form input[type="email"]:focus {
	background-size: 100% 2px;
}

/* ---------- FAQ: the plus turns with a little spring ---------- */

html.cn-motion .cn-faq__icon {
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.cn-motion .cn-faq__a {
	overflow: hidden;
}

/* ---------- A sprig that grows into a tick (stay request ready) ---------- */

.cn-sprig {
	display: block;
	width: 56px;
	height: 56px;
	color: var(--cn-m-moss);
}

.cn-sprig path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cn-sprig .cn-sprig__leaf {
	fill: currentColor;
	fill-opacity: 0.25;
}

.cn-sprig .cn-sprig__tick {
	stroke: var(--cn-heading, #173b2a);
	stroke-width: 2.5;
}

.cn-inquiry__card-body {
	position: relative;
}

.cn-inquiry__card-body > .cn-sprig {
	position: absolute;
	top: 16px;
	right: 16px;
}


/* ---------- Levels: the visitor who climbs to the door ---------- */

.cn-levels__climber {
	fill: var(--cn-m-amber);
}

@media (prefers-reduced-motion: reduce) {
	html.cn-mist-in::before,
	html.cn-mist-in::after,
	html.cn-mist-out::before,
	html.cn-mist-out::after {
		display: none;
	}
}