/* ==========================================================================
   BeeGee's Coastal — Featured Stays
   Same design as the embed block, with three performance changes:
   1. every looping animation pauses while the section is off screen
   2. the heaviest effects (grain, waves, motes, parallax) are optional and
      switch off on small screens
   3. no extra web fonts — it uses the two the plugin already loads
   ========================================================================== */

.bg-stays {
	--bg-ivory: #F5F3EE;
	--bg-ivory-2: #EFEBE2;
	--bg-ink: #14201E;
	--bg-teal: #0E4A45;
	--bg-teal-deep: #0A3733;
	--bg-teal-mist: #5C8A83;
	--bg-gold: #B9925B;
	--bg-line: rgba(14, 74, 69, .14);
	--bg-card: #FFFFFF;
	--bg-shadow: 0 26px 60px -30px rgba(10, 55, 51, .34);
	--bg-max: 1200px;
	--bg-ui: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bg-serif: "Fraunces", Georgia, "Times New Roman", serif;

	position: relative;
	width: 100%;
	padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 48px);
	background: var(--bg-ivory);
	color: var(--bg-ink);
	font-family: var(--bg-ui);
	-webkit-font-smoothing: antialiased;
	line-height: 1.6;
	overflow: hidden;
	isolation: isolate;
}

.bg-stays * { box-sizing: border-box; }

.bg-stays .bg-inner {
	position: relative;
	z-index: 1;
	max-width: var(--bg-max);
	margin: 0 auto;
	overflow: hidden;
}

.bg-stays .bg-display { font-family: var(--bg-serif); }

/* --------------------------------------------------------------------------
   PERFORMANCE GATE
   Nothing loops until the section is actually in view, and everything stops
   again when it leaves. Without this the waves, grain, seal and glints repaint
   the whole block for as long as the page is open.
   -------------------------------------------------------------------------- */

.bg-stays:not(.bg-live) *,
.bg-stays:not(.bg-live) *::before,
.bg-stays:not(.bg-live) *::after {
	animation-play-state: paused !important;
}

/* effect levels */
.bg-stays.fx-none .bg-fx { display: none; }

.bg-stays.fx-light .bg-fx-w,
.bg-stays.fx-light .bg-fx-grain,
.bg-stays.fx-light .bg-fx-p { display: none; }

/* the expensive layers never run on phones */
@media (max-width: 900px) {
	.bg-stays .bg-fx-grain,
	.bg-stays .bg-fx-p { display: none; }
}

/* ------------------------------------------------------------------ head */

.bg-stays .bg-railword {
	position: absolute;
	top: clamp(230px, 26vw, 320px);
	right: clamp(-6px, -.4vw, 6px);
	writing-mode: vertical-rl;
	text-orientation: mixed;
	letter-spacing: .42em;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--bg-teal-mist);
	opacity: .55;
	user-select: none;
	pointer-events: none;
	animation: bgRailBreathe 7.5s ease-in-out infinite;
}

@keyframes bgRailBreathe { 0%, 100% { opacity: .55; } 50% { opacity: .26; } }

@media (max-width: 900px) { .bg-stays .bg-railword { display: none; } }

.bg-stays .bg-head {
	position: relative;
	isolation: isolate;
	max-width: 640px;
	margin-bottom: clamp(36px, 4.5vw, 56px);
	opacity: 0;
	transform: translateY(22px);
	animation: bgRise .9s cubic-bezier(.2, .7, .2, 1) forwards;
}

.bg-stays .bg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--bg-teal);
	border: 1px solid var(--bg-line);
	padding: 8px 16px;
	border-radius: 100px;
	margin-bottom: 24px;
}

.bg-stays .bg-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bg-gold);
	animation: bgDotBeat 2.6s ease-in-out infinite;
}

@keyframes bgDotBeat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.6); opacity: .45; } }

.bg-stays .bg-head h2 {
	margin: 0;
	font-weight: 500;
	font-size: clamp(36px, 5.6vw, 62px);
	line-height: 1.02;
	letter-spacing: -.01em;
	color: var(--bg-teal-deep);
}

.bg-stays .bg-head h2 em {
	font-style: italic;
	color: var(--bg-gold);
	animation: bgEmGlow 6s ease-in-out infinite;
}

@keyframes bgEmGlow { 0%, 100% { text-shadow: 0 0 0 rgba(185, 146, 91, 0); } 50% { text-shadow: 0 6px 26px rgba(185, 146, 91, .42); } }

.bg-stays .bg-lede {
	margin: 16px 0 0;
	font-size: clamp(17px, 1.9vw, 23px);
	font-weight: 400;
	color: var(--bg-teal);
	letter-spacing: .005em;
}

.bg-stays .bg-lede strong {
	position: relative;
	font-weight: 700;
	color: var(--bg-teal-deep);
	letter-spacing: .04em;
	white-space: nowrap;
}

.bg-stays .bg-lede strong::after {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	bottom: .02em;
	height: .42em;
	z-index: -1;
	background: linear-gradient(90deg, rgba(185, 146, 91, .55), rgba(185, 146, 91, .22));
	border-radius: 3px;
	transform-origin: left center;
	transform: scaleX(0);
	animation: bgLedeSwipe 1s .75s cubic-bezier(.2, .7, .2, 1) forwards;
}

@keyframes bgLedeSwipe { to { transform: scaleX(1); } }

/* ------------------------------------------------------------ direct bar */

.bg-stays .bg-directline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 28px;
	background: var(--bg-teal-deep);
	color: var(--bg-ivory);
	border-radius: 22px;
	padding: 22px clamp(22px, 3vw, 34px);
	margin-bottom: clamp(34px, 4vw, 52px);
	position: relative;
	overflow: hidden;
	opacity: 0;
	transform: translateY(22px);
	animation: bgRise .9s .1s cubic-bezier(.2, .7, .2, 1) forwards;
}

.bg-stays .bg-directline::before {
	content: "";
	position: absolute;
	inset: -140%;
	z-index: 0;
	pointer-events: none;
	opacity: .5;
	background: conic-gradient(from 0deg, transparent 0deg, rgba(185, 146, 91, .55) 40deg, transparent 110deg, transparent 360deg);
	animation: bgRimSpin 14s linear infinite;
}

@keyframes bgRimSpin { to { transform: rotate(360deg); } }

.bg-stays .bg-directline::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 140% at 100% 0%, rgba(185, 146, 91, .22), transparent 55%);
	pointer-events: none;
	animation: bgWashDrift 16s ease-in-out infinite;
}

@keyframes bgWashDrift { 0%, 100% { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(-6%, 4%); opacity: .6; } }

.bg-stays .bg-dl-copy { flex: 1 1 340px; position: relative; z-index: 1; }
.bg-stays .bg-dl-actions { display: flex; flex-wrap: wrap; gap: 12px; position: relative; z-index: 1; }

.bg-stays .bg-dl-tag {
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--bg-gold);
	font-weight: 600;
	margin-bottom: 6px;
}

.bg-stays .bg-dl-copy p {
	margin: 0;
	font-size: clamp(14.5px, 1.4vw, 16px);
	color: rgba(245, 243, 238, .86);
	line-height: 1.55;
}

.bg-stays .bg-dl-copy strong { color: #fff; font-weight: 600; }

.bg-stays .bg-dl-call {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--bg-ivory);
	color: var(--bg-teal-deep);
	font-weight: 600;
	font-size: 15px;
	padding: 14px 24px;
	border-radius: 100px;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease;
	box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5);
}

.bg-stays .bg-dl-call::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 100px;
	pointer-events: none;
	border: 1.5px solid rgba(245, 243, 238, .5);
	animation: bgCallRing 2.9s cubic-bezier(.2, .7, .2, 1) infinite;
}

@keyframes bgCallRing { 0% { transform: scale(1); opacity: .8; } 72% { transform: scale(1.2); opacity: 0; } 100% { opacity: 0; } }

.bg-stays .bg-dl-call:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .55); }
.bg-stays .bg-dl-call svg { width: 16px; height: 16px; }

.bg-stays .bg-dl-mail {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: rgba(245, 243, 238, .9);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid rgba(245, 243, 238, .28);
	padding: 14px 22px;
	border-radius: 100px;
	transition: border-color .25s ease, color .25s ease;
}

.bg-stays .bg-dl-mail:hover { border-color: var(--bg-gold); color: #fff; }

/* ----------------------------------------------------------------- grid */

.bg-stays .bg-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.2vw, 30px);
}

@media (max-width: 920px) {
	.bg-stays .bg-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
}

.bg-stays .bg-card {
	position: relative;
	background: var(--bg-card);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: var(--bg-shadow);
	border: 1px solid rgba(14, 74, 69, .06);
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translateY(30px);
	cursor: pointer;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease, border-color .5s ease;
}

.bg-stays .bg-card.bg-in { animation: bgCardIn 1.1s cubic-bezier(.2, .7, .2, 1) forwards; }
.bg-stays .bg-card:nth-child(1) { animation-delay: .15s; }
.bg-stays .bg-card:nth-child(2) { animation-delay: .28s; }
.bg-stays .bg-card:nth-child(3) { animation-delay: .41s; }
.bg-stays .bg-card:nth-child(4) { animation-delay: .54s; }
.bg-stays .bg-card:nth-child(5) { animation-delay: .67s; }
.bg-stays .bg-card:nth-child(6) { animation-delay: .80s; }

@keyframes bgCardIn {
	0% { opacity: 0; transform: perspective(1100px) rotateX(10deg) translateY(52px) scale(.955); filter: blur(8px); }
	100% { opacity: 1; transform: none; filter: blur(0); }
}

.bg-stays .bg-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 40px 80px -30px rgba(10, 55, 51, .42);
	border-color: rgba(185, 146, 91, .42);
}

/* whole-card link layer */
.bg-stays .bg-stretch {
	position: absolute;
	inset: 0;
	z-index: 3;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	border-radius: 22px;
}

.bg-stays .bg-stretch:focus-visible { outline: 3px solid var(--bg-gold); outline-offset: 3px; }

/* diagonal sweep on hover */
.bg-stays .bg-card::before {
	content: "";
	position: absolute;
	top: -45%;
	left: -60%;
	width: 36%;
	height: 200%;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
	transform: rotate(16deg) translateX(-170%);
	transition: transform 1.05s cubic-bezier(.2, .7, .2, 1);
}

.bg-stays .bg-card:hover::before { transform: rotate(16deg) translateX(440%); }

/* cursor spotlight */
.bg-stays .bg-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(240px circle at var(--bg-mx, 50%) var(--bg-my, 50%), rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 62%);
	transition: opacity .45s ease;
}

.bg-stays .bg-card:hover::after { opacity: 1; }

/* ---------------------------------------------------------------- media */

.bg-stays .bg-media {
	position: relative;
	aspect-ratio: 16/11;
	overflow: hidden;
	background: var(--bg-ivory-2);
}

.bg-stays .bg-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

.bg-stays .bg-card:hover .bg-media img { transform: scale(1.07); }

.bg-stays .bg-media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(10, 55, 51, .55), transparent 44%);
}

/* travelling light — only at full effects */
.bg-stays.fx-full .bg-media::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: -40%;
	left: -70%;
	width: 45%;
	height: 190%;
	pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
	transform: rotate(16deg);
	animation: bgPhotoLight 9s cubic-bezier(.55, 0, .35, 1) infinite;
}

@keyframes bgPhotoLight { 0% { left: -70%; } 60%, 100% { left: 190%; } }

.bg-stays .bg-typechip {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	pointer-events: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(6px);
	color: var(--bg-teal-deep);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 7px 13px;
	border-radius: 100px;
	transition: transform .3s ease;
}

.bg-stays .bg-card:hover .bg-typechip { transform: translateY(-2px); }
.bg-stays .bg-typechip svg { width: 12px; height: 12px; animation: bgBob 3.6s ease-in-out infinite; }

@keyframes bgBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

.bg-stays .bg-price {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	pointer-events: none;
	display: flex;
	align-items: baseline;
	gap: 8px;
	background: rgba(10, 55, 51, .62);
	color: var(--bg-ivory);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	backdrop-filter: blur(10px) saturate(1.2);
	border: 1px solid rgba(185, 146, 91, .55);
	border-radius: 100px;
	padding: 9px 18px 10px;
	line-height: 1;
	overflow: hidden;
	box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
	transition: transform .4s cubic-bezier(.2, .7, .2, 1), border-color .4s ease, background .4s ease;
}

.bg-stays.fx-full .bg-price::after {
	content: "";
	position: absolute;
	top: -60%;
	width: 42%;
	height: 240%;
	pointer-events: none;
	left: -120%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent);
	transform: rotate(18deg);
	animation: bgGlint 6.5s cubic-bezier(.5, 0, .3, 1) infinite;
}

@keyframes bgGlint { 0% { left: -120%; } 55%, 100% { left: 200%; } }

.bg-stays .bg-card:hover .bg-price { transform: translateY(-3px); border-color: var(--bg-gold); background: rgba(10, 55, 51, .78); }
.bg-stays .bg-price .bg-from { font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(245, 243, 238, .6); font-weight: 500; align-self: center; }
.bg-stays .bg-price .bg-amt { font-family: var(--bg-serif); font-size: 27px; font-weight: 600; letter-spacing: .005em; }
.bg-stays .bg-price .bg-amt sup { font-size: 14px; top: -.55em; margin-right: 1px; color: var(--bg-gold); font-weight: 500; }
.bg-stays .bg-price .bg-per { font-size: 10px; letter-spacing: .06em; color: rgba(245, 243, 238, .62); font-weight: 400; }

/* ----------------------------------------------------------------- body */

.bg-stays .bg-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }

.bg-stays .bg-body h3 {
	position: relative;
	display: inline-block;
	margin: 0;
	font-family: var(--bg-serif);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.05;
	color: var(--bg-teal-deep);
}

.bg-stays .bg-body h3::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--bg-gold), rgba(185, 146, 91, 0));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}

.bg-stays .bg-card:hover .bg-body h3::after { transform: scaleX(1); }

.bg-stays .bg-loc { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--bg-teal-mist); margin-top: 6px; font-weight: 500; }
.bg-stays .bg-loc svg { width: 13px; height: 13px; flex: none; animation: bgBob 4.4s ease-in-out infinite; }

.bg-stays .bg-specs {
	position: relative;
	overflow: hidden;
	display: flex;
	margin-top: 16px;
	border-top: 1px solid var(--bg-line);
	border-bottom: 1px solid var(--bg-line);
}

.bg-stays .bg-specs::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	height: 2px;
	width: 45%;
	background: linear-gradient(90deg, transparent, var(--bg-gold), transparent);
	transform: translateX(-120%);
	opacity: 0;
}

.bg-stays .bg-card:hover .bg-specs::before { opacity: 1; animation: bgRunline 1.5s cubic-bezier(.4, 0, .3, 1) infinite; }

@keyframes bgRunline { to { transform: translateX(320%); } }

.bg-stays .bg-spec { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 13px 4px; position: relative; transition: background .3s ease; }
.bg-stays .bg-spec:hover { background: var(--bg-ivory); }
.bg-stays .bg-spec + .bg-spec::before { content: ""; position: absolute; left: 0; top: 22%; height: 56%; width: 1px; background: var(--bg-line); }
.bg-stays .bg-spec svg { width: 17px; height: 17px; color: var(--bg-gold); transition: transform .3s ease; }
.bg-stays .bg-spec:hover svg { transform: translateY(-2px) scale(1.1); }
.bg-stays .bg-spec:nth-child(1) svg { animation: bgIconFloat 4.8s ease-in-out infinite; }
.bg-stays .bg-spec:nth-child(2) svg { animation: bgIconFloat 4.8s .4s ease-in-out infinite; }
.bg-stays .bg-spec:nth-child(3) svg { animation: bgIconFloat 4.8s .8s ease-in-out infinite; }
.bg-stays .bg-spec:hover svg { animation-play-state: paused; }

@keyframes bgIconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.bg-stays .bg-spec .bg-row { display: flex; align-items: baseline; gap: 5px; }
.bg-stays .bg-spec .bg-n { font-family: var(--bg-serif); font-size: 20px; font-weight: 600; color: var(--bg-teal-deep); }
.bg-stays .bg-spec .bg-l { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--bg-teal-mist); }

.bg-stays .bg-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; position: relative; z-index: 4; }

.bg-stays .bg-tag {
	font-size: 11px;
	color: var(--bg-teal);
	background: var(--bg-ivory);
	border: 1px solid var(--bg-line);
	padding: 5px 11px;
	border-radius: 100px;
	font-weight: 500;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.bg-stays .bg-tag:hover { background: var(--bg-teal-deep); color: var(--bg-ivory); border-color: var(--bg-teal-deep); }

@media (prefers-reduced-motion: no-preference) {
	.bg-stays .bg-card.bg-in .bg-tag { opacity: 0; animation: bgTagIn .55s ease forwards; }
	.bg-stays .bg-card.bg-in .bg-tag:nth-child(1) { animation-delay: .55s; }
	.bg-stays .bg-card.bg-in .bg-tag:nth-child(2) { animation-delay: .66s; }
	.bg-stays .bg-card.bg-in .bg-tag:nth-child(3) { animation-delay: .77s; }
	.bg-stays .bg-card.bg-in .bg-tag:nth-child(4) { animation-delay: .88s; }
}

@keyframes bgTagIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.bg-stays .bg-cta { margin-top: auto; padding-top: 18px; display: flex; }

.bg-stays .bg-cta a {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--bg-teal-deep);
	color: var(--bg-ivory);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 14px 20px;
	border-radius: 100px;
	text-decoration: none;
	text-transform: uppercase;
	position: relative;
	z-index: 4;
	overflow: hidden;
	transition: color .3s ease;
}

.bg-stays .bg-cta a::before { content: ""; position: absolute; inset: 0; background: var(--bg-teal); transform: translateX(-101%); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.bg-stays .bg-cta a:hover::before { transform: translateX(0); }
.bg-stays .bg-cta a span, .bg-stays .bg-cta a svg { position: relative; z-index: 1; }
.bg-stays .bg-cta a svg { width: 15px; height: 15px; transition: transform .3s ease; animation: bgNudge 4s ease-in-out infinite; }
.bg-stays .bg-cta a:hover svg { transform: translateX(4px); animation-play-state: paused; }

@keyframes bgNudge { 0%, 74%, 100% { transform: translateX(0); } 82% { transform: translateX(5px); } 90% { transform: translateX(0); } }

/* ----------------------------------------------------------------- foot */

.bg-stays .bg-foot {
	margin-top: clamp(32px, 4vw, 48px);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 12.5px;
	color: var(--bg-teal-mist);
	opacity: 0;
	animation: bgRise .9s .55s cubic-bezier(.2, .7, .2, 1) forwards;
}

.bg-stays .bg-foot .bg-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--bg-gold); animation: bgTwinkle 3.2s ease-in-out infinite; }
.bg-stays .bg-foot .bg-dot:nth-of-type(2) { animation-delay: 1.4s; }

@keyframes bgTwinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.65); } }

/* ============================ SAVE 10% SEAL ============================ */

.bg-stays .bg-seal {
	position: absolute;
	top: clamp(-4px, 0vw, 6px);
	right: 0;
	z-index: 5;
	width: clamp(152px, 17vw, 206px);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	animation: bgSealFloat 6s ease-in-out infinite;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
}

.bg-stays .bg-seal.bg-seal-on { opacity: 1; transform: none; }
.bg-stays .bg-seal * { grid-area: 1/1; }
.bg-stays .bg-seal:hover { filter: drop-shadow(0 18px 34px rgba(185, 146, 91, .42)); }

.bg-stays .bg-seal-halo { width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(185, 146, 91, .55); animation: bgSealPulse 3.2s cubic-bezier(.2, .7, .2, 1) infinite; }
.bg-stays .bg-seal-halo2 { animation-delay: 1.6s; border-color: rgba(14, 74, 69, .35); }

.bg-stays .bg-seal-sweep {
	width: 86%;
	height: 86%;
	border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(185, 146, 91, 0) 0deg, rgba(185, 146, 91, .55) 70deg, rgba(185, 146, 91, 0) 140deg, rgba(92, 138, 131, .35) 250deg, rgba(185, 146, 91, 0) 330deg);
	filter: blur(7px);
	opacity: .85;
	animation: bgSealSpin 9s linear infinite;
}

.bg-stays .bg-seal-svg { width: 100%; height: 100%; overflow: visible; }
.bg-stays .bg-seal-dash { fill: none; stroke: rgba(185, 146, 91, .75); stroke-width: 1.4; stroke-dasharray: 3 9; stroke-linecap: round; transform-origin: 100px 100px; animation: bgSealSpinRev 22s linear infinite; }
.bg-stays .bg-seal-hair { fill: none; stroke: rgba(10, 55, 51, .22); stroke-width: 1; }
.bg-stays .bg-seal-rim { transform-origin: 100px 100px; animation: bgSealSpin 26s linear infinite; }
.bg-stays .bg-seal-rim text { font-family: var(--bg-ui); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; fill: var(--bg-teal-deep); }
.bg-stays .bg-seal-orbit { transform-origin: 100px 100px; animation: bgSealSpin 5.5s linear infinite; }
.bg-stays .bg-seal-orbit circle { fill: var(--bg-gold); }
.bg-stays .bg-seal-orbit circle:last-child { fill: var(--bg-teal-mist); opacity: .8; }

.bg-stays .bg-seal-core {
	width: 69%;
	height: 69%;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: radial-gradient(120% 120% at 30% 20%, #E4C591 0%, #C79E62 38%, #A87C41 72%, #8C6533 100%);
	box-shadow: 0 14px 30px -12px rgba(120, 84, 36, .75), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -8px 14px -8px rgba(64, 42, 12, .6);
	position: relative;
	overflow: hidden;
	animation: bgSealBeat 3.2s ease-in-out infinite;
}

.bg-stays .bg-seal-core::after {
	content: "";
	position: absolute;
	top: -60%;
	left: -120%;
	width: 60%;
	height: 220%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .72), transparent);
	transform: rotate(18deg);
	animation: bgSealShine 4.4s cubic-bezier(.5, 0, .3, 1) infinite;
}

.bg-stays .bg-seal-save { font-size: clamp(9.5px, 1vw, 11.5px); font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: #1E1301; line-height: 1; text-indent: .3em; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
.bg-stays .bg-seal-num { font-family: var(--bg-serif); font-size: clamp(40px, 4.7vw, 56px); font-weight: 700; line-height: .86; color: #1B1002; letter-spacing: -.015em; text-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 3px 7px rgba(88, 58, 18, .3); }
.bg-stays .bg-seal-num i { font-style: normal; font-size: .5em; vertical-align: .42em; margin-left: 1px; }
.bg-stays .bg-seal-sub { margin-top: 3px; padding: 4px 10px 4.5px; border-radius: 100px; white-space: nowrap; background: var(--bg-teal-deep); color: #F7F5F0; font-size: clamp(8px, .9vw, 9.8px); font-weight: 800; letter-spacing: .15em; text-transform: uppercase; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 5px 12px -5px rgba(6, 32, 29, .85); }

@keyframes bgSealSpin { to { transform: rotate(360deg); } }
@keyframes bgSealSpinRev { to { transform: rotate(-360deg); } }
@keyframes bgSealFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes bgSealPulse { 0% { transform: scale(.82); opacity: 0; } 35% { opacity: .9; } 100% { transform: scale(1.16); opacity: 0; } }
@keyframes bgSealBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes bgSealShine { 0% { left: -120%; } 55%, 100% { left: 170%; } }

@media (max-width: 920px) {
	.bg-stays .bg-seal { position: static; margin: 0 auto clamp(26px, 5vw, 34px); width: clamp(150px, 44vw, 186px); }
}

/* ========================== BACKDROP EFFECTS ========================== */

.bg-stays .bg-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.bg-stays .bg-fx-aurora {
	position: absolute;
	width: 70vw;
	height: 56vw;
	max-width: 900px;
	max-height: 700px;
	border-radius: 50%;
	left: -16vw;
	top: -22vw;
	filter: blur(12px);
	background: radial-gradient(closest-side, rgba(219, 178, 120, .34), rgba(219, 178, 120, 0) 72%);
	animation: bgAurora 26s ease-in-out infinite;
}

.bg-stays .bg-fx-aurora2 {
	left: auto;
	right: -20vw;
	top: auto;
	bottom: -26vw;
	background: radial-gradient(closest-side, rgba(92, 138, 131, .36), rgba(92, 138, 131, 0) 72%);
	animation-duration: 34s;
	animation-delay: -9s;
}

@keyframes bgAurora {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .95; }
	33% { transform: translate3d(5vw, 3vw, 0) scale(1.14); opacity: .6; }
	66% { transform: translate3d(-3vw, 5vw, 0) scale(1.05); opacity: .8; }
}

.bg-stays .bg-fx-sun {
	position: absolute;
	right: clamp(40px, 12vw, 180px);
	top: clamp(30px, 7vw, 90px);
	width: clamp(110px, 13vw, 190px);
	height: clamp(110px, 13vw, 190px);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(255, 241, 214, .9), rgba(232, 196, 132, .34) 42%, rgba(232, 196, 132, 0) 70%);
	animation: bgSunPulse 11s ease-in-out infinite;
}

@keyframes bgSunPulse { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.16); opacity: .4; } }

.bg-stays .bg-fx-w { position: absolute; left: 0; right: 0; bottom: 0; }
.bg-stays .bg-fx-w svg { display: block; width: 200%; height: 100%; }
.bg-stays .bg-fx-w1 { height: clamp(120px, 17vw, 210px); opacity: .5; }
.bg-stays .bg-fx-w1 svg { animation: bgDrift 64s linear infinite; }
.bg-stays .bg-fx-w1 path { fill: rgba(14, 74, 69, .12); }
.bg-stays .bg-fx-w2 { height: clamp(96px, 13vw, 164px); opacity: .55; }
.bg-stays .bg-fx-w2 svg { animation: bgDrift 44s linear infinite reverse; }
.bg-stays .bg-fx-w2 path { fill: rgba(92, 138, 131, .2); }
.bg-stays .bg-fx-w3 { height: clamp(64px, 9vw, 112px); opacity: .5; }
.bg-stays .bg-fx-w3 svg { animation: bgDrift 30s linear infinite; }
.bg-stays .bg-fx-w3 path { fill: rgba(185, 146, 91, .22); }

@keyframes bgDrift { to { transform: translateX(-50%); } }

.bg-stays .bg-fx-p {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .9), rgba(219, 178, 120, .55) 55%, rgba(219, 178, 120, 0) 72%);
	animation: bgMote 22s ease-in-out infinite;
}

@keyframes bgMote {
	0% { transform: translate(0, 0) scale(.7); opacity: 0; }
	15% { opacity: .95; }
	50% { transform: translate(34px, -90px) scale(1); opacity: .7; }
	85% { opacity: .15; }
	100% { transform: translate(-20px, -190px) scale(.75); opacity: 0; }
}

.bg-stays .bg-fx-grain {
	position: absolute;
	inset: -50%;
	opacity: .05;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
	background-size: 180px 180px;
	animation: bgGrain 8s steps(6) infinite;
}

@keyframes bgGrain {
	0% { transform: translate(0, 0); }
	20% { transform: translate(-3%, 2%); }
	40% { transform: translate(2%, -3%); }
	60% { transform: translate(-2%, -2%); }
	80% { transform: translate(3%, 1%); }
	100% { transform: translate(0, 0); }
}

/* headline letter animation */
.bg-stays .bg-head h2 .bg-ch { display: inline-block; white-space: pre; }

@media (prefers-reduced-motion: no-preference) {
	.bg-stays .bg-head h2 .bg-ch { opacity: 0; transform: translateY(20px) rotate(4deg); filter: blur(7px); animation: bgChIn .85s cubic-bezier(.2, .7, .2, 1) forwards; }
	.bg-stays .bg-head h2 em .bg-ch { animation: bgChIn .85s cubic-bezier(.2, .7, .2, 1) forwards, bgChShine 4.2s 1.4s ease-in-out infinite; }
}

@keyframes bgChIn { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes bgChShine {
	0%, 72%, 100% { color: var(--bg-gold); text-shadow: none; }
	82% { color: #F0D8AE; text-shadow: 0 0 22px rgba(240, 216, 174, .85); }
}

@keyframes bgRise { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
	.bg-stays * { animation: none !important; transition: none !important; }
	.bg-stays .bg-head,
	.bg-stays .bg-directline,
	.bg-stays .bg-card,
	.bg-stays .bg-foot,
	.bg-stays .bg-seal { opacity: 1; transform: none; }
	.bg-stays .bg-seal-halo { opacity: .5; }
}

/* animation gate needs the paused rule to lose to nothing else */
.bg-stays.bg-live *,
.bg-stays.bg-live *::before,
.bg-stays.bg-live *::after {
	animation-play-state: running;
}