/**
 * Luxe Assets Partners — SEBS™  ·  Motion
 *
 * Engineering by Sproutbean Engineering Studio using SEBS™
 *
 * Two behaviours, deliberately restrained:
 *
 *   1. Preloader     two slow counter-rotating gold arcs on the paper ground,
 *                    held until the page has loaded, then faded away
 *   2. Icon draw     `.luxe-icon` SVGs are inlined by motion.js and draw their
 *                    strokes when scrolled into view
 *
 * Every behaviour is disabled under `prefers-reduced-motion` — see the block at
 * the end of this file. Paired with assets/js/motion.js.
 */

/* ==========================================================================
   1. PRELOADER
   Two slow counter-rotating gold arcs on the brand paper ground. The body is
   held at zero opacity beneath, so the page never appears half-built; both
   resolve together once the document has loaded.

   The arcs turn deliberately slowly — a little over three seconds for the
   outer, nearly five for the inner. They are never in step, so the mark keeps
   changing shape without ever looking busy.
   ========================================================================== */

html.sebs-motion-boot {
	background: #FAF6EF;
}

html.sebs-motion-boot body {
	opacity: 0;
}

html.sebs-motion-mounted body {
	opacity: 1;
	transition: opacity 560ms ease-out;
}

#sebs-preloader {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FAF6EF;
	opacity: 1;
	transition: opacity 780ms cubic-bezier(.22, .61, .36, 1);
	pointer-events: none;
}

/* Added by motion.js once the page is ready. The mark eases out as it fades. */
#sebs-preloader.is-leaving {
	opacity: 0;
}

#sebs-preloader.is-leaving .sebs-preloader__mark {
	transform: scale(.94);
	transition: transform 780ms cubic-bezier(.22, .61, .36, 1);
}

.sebs-preloader__mark {
	width: 64px;
	height: 64px;
	overflow: visible;
	animation: sebsMarkIn 900ms cubic-bezier(.22, .61, .36, 1) both;
}

/* The faint geometry the arcs travel along. */
.sebs-track {
	fill: none;
	stroke: #CA9C52;
	stroke-width: .75;
	opacity: .13;
}

.sebs-track--2 {
	opacity: .10;
}

/* The moving arcs. Round caps keep the ends soft rather than cut. */
.sebs-arc {
	fill: none;
	stroke: #CA9C52;
	stroke-linecap: round;
	transform-origin: 32px 32px;
}

.sebs-arc--outer {
	stroke-width: 1.25;
	opacity: .9;
	animation: sebsSpin 3.2s cubic-bezier(.62, .05, .38, .95) infinite;
}

.sebs-arc--inner {
	stroke-width: 1;
	opacity: .5;
	animation: sebsSpinReverse 4.8s cubic-bezier(.55, .08, .45, .92) infinite;
}

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

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

/* A quiet arrival, so the mark does not simply appear. */
@keyframes sebsMarkIn {
	from { opacity: 0; transform: scale(.9); }
	to   { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   2. SELF-DRAWING ICONS
   motion.js replaces each `.luxe-icon` <img> with the sanitised inline SVG and
   marks the drawable shapes. They stay hidden until the stroke animation runs,
   then `.is-complete` locks them on so nothing can be left half-drawn.
   ========================================================================== */

.luxe-icon .sebs-draw-svg {
	display: block;
	width: 34px;
	height: 34px;
	overflow: visible;
	color: #CA9C52;
}

.luxe-icon .sebs-draw-svg [data-sebs-draw] {
	opacity: 0;
}

.luxe-icon .sebs-draw-svg.is-complete [data-sebs-draw] {
	opacity: 1;
	stroke-dasharray: none !important;
	stroke-dashoffset: 0 !important;
}

/* ==========================================================================
   3. ICON PRESENTATION
   The icon wrapper only needs to size correctly — the drawing above is the
   whole effect. No idle animation and no hover transform, so the mark reads
   as line work rather than as something in motion.
   ========================================================================== */

.luxe-icon {
	display: inline-block;
}

/* ==========================================================================
   REDUCED MOTION
   Nothing animates, nothing is hidden waiting for an animation that will not
   run, and the reveal overlay is removed from the document entirely.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	html.sebs-motion-boot body,
	html.sebs-motion-mounted body {
		opacity: 1;
		transition: none;
	}

	#sebs-preloader {
		display: none;
	}

	.luxe-icon .sebs-draw-svg [data-sebs-draw] {
		opacity: 1;
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
	}
}