/*
 * ShineSky 006 — opening Loader (CC-authored runtime).
 * Stage shinesky-loader-runtime-8088-001. Additive, homepage-only, scoped.
 *
 * Warm-white (#FBFAF8) overlay showing the enlarged official orange ShineSky
 * logo: CC-authored contour STROKE revealed left-to-right, then the official
 * PNG FILL following left-to-right. No progress, percentage, spinner, side
 * lines, glow, photo or extra copy.
 *
 * Reveal reference: stroke duration 1.75s, fill starts 0.28s later, shared
 * easing cubic-bezier(.65,0,.35,1), both clipped left-to-right (inset from the
 * right edge to 0). Handoff tilt/straighten timings are driven from JS so the
 * animation can be skipped for reduced-motion, no-JS, repeat visits and errors.
 *
 * Safety: never transforms html/body; no permanent clipping of the document;
 * the overlay and all transient transforms are fully removed on completion so
 * the exact existing first viewport remains. If JS never runs, the overlay is
 * hidden (see .no-js / <html> default below) so the full site stays usable.
 */

/* ---------------------------------------------------------------------------
 * Default state: overlay hidden. It becomes visible ONLY when opening-loader.js
 * decides to animate and sets html.ss6-loader-active. This guarantees no-JS and
 * any script failure leave the site fully visible and interactive with no FOUC
 * of a stuck overlay.
 * ------------------------------------------------------------------------- */
.ss6-loader {
	display: none;
}

html.ss6-loader-active .ss6-loader {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 2147483000; /* above fixed Header/menu, below nothing of ours */
	background: #FBFAF8;
	/* Center the wordmark both axes. */
	display: flex;
	align-items: center;
	justify-content: center;
	/* Overlay never intercepts text selection; it is decorative. */
	-webkit-user-select: none;
	user-select: none;
	/* Own stacking/paint context; contain layout so it cannot shift the doc. */
	contain: layout paint style;
	opacity: 1;
	transition: opacity 320ms linear;
}

/* Fade the overlay out during handoff; display:none applied by JS afterwards. */
html.ss6-loader-active.ss6-loader-fade .ss6-loader {
	opacity: 0;
	pointer-events: none;
}

.ss6-loader__stage {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------------------------------------------------------------------------
 * Logo box. Desktop 396 x 40.32; mobile 297 x 30.24 (approved). Aspect of the
 * official 275x28 source is preserved, so the stacked SVG stroke and PNG fill
 * register pixel-for-pixel on the same left edge.
 * ------------------------------------------------------------------------- */
.ss6-loader__logo {
	position: relative;
	width: 396px;
	height: 40.32px;
}

.ss6-loader__contour,
.ss6-loader__fill {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* Contour stroke in official ShineSky orange. The whole wordmark is revealed
 * left-to-right via a clip-path that opens from the right edge toward 0. */
.ss6-loader__contour {
	z-index: 1;
}

.ss6-loader__contour path {
	fill: none;
	stroke: #F6881F; /* official ShineSky orange */
	stroke-width: 0.9;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

/* PNG fill sits above the stroke and reveals slightly later, also L-to-R. */
.ss6-loader__fill {
	z-index: 2;
}

/* ---------------------------------------------------------------------------
 * Reveal mechanics. Both layers start fully clipped from the right (invisible)
 * and open to inset(0) i.e. fully shown. The shared easing is applied per layer
 * with the fill delayed by 0.28s against the stroke. Only active when animating.
 * ------------------------------------------------------------------------- */
html.ss6-loader-active .ss6-loader__contour,
html.ss6-loader-active .ss6-loader__fill {
	-webkit-clip-path: inset(0 100% 0 0);
	clip-path: inset(0 100% 0 0);
	will-change: clip-path;
}

html.ss6-loader-active.ss6-loader-reveal .ss6-loader__contour {
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);
	transition: -webkit-clip-path 1750ms cubic-bezier(0.65, 0, 0.35, 1),
		clip-path 1750ms cubic-bezier(0.65, 0, 0.35, 1);
	transition-delay: 0ms;
}

html.ss6-loader-active.ss6-loader-reveal .ss6-loader__fill {
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);
	transition: -webkit-clip-path 1750ms cubic-bezier(0.65, 0, 0.35, 1),
		clip-path 1750ms cubic-bezier(0.65, 0, 0.35, 1);
	transition-delay: 280ms;
}

/* ---------------------------------------------------------------------------
 * Handoff: tilt the existing first-viewport content plane, then straighten and
 * expand it back to its exact resting geometry. We transform #ss6-main only
 * (never html/body) and the thin overlaid Header shares the same origin so the
 * brief pose reads as one plane. All of this is TRANSIENT: JS removes every
 * class and inline style on completion, and no transform/clip remains.
 *
 * transform-origin is the viewport centre. The overlay covers the page only for
 * the single frame the entry state is committed; JS then fades the overlay out AS
 * the plane transitions into the pose, so the tilted entrance and the 0.4s hold
 * are VISIBLE (not hidden behind an opaque overlay) before the straighten.
 * ------------------------------------------------------------------------- */
/* Transient ENTRY state. When JS adds .ss6-loader-tilt (before .ss6-loader-pose)
 * the plane is parked at a bounded offset BEYOND the final pose: slightly smaller
 * and a touch further down/rotated. The overlay still fully covers the page for
 * the one frame this state is applied, so this parked state is never seen; it is
 * only the FROM keyframe so the subsequent transition to the pose reads as the
 * page entering tilted. The offset is bounded (one extra step past the pose) — it
 * is NOT a bounce and NOT an extra long phase. Desktop: scale .66, -8deg, +40px. */
html.ss6-loader-tilt #ss6-main,
html.ss6-loader-tilt .ss6-header {
	transform-origin: 50vw 50vh;
	transform: translateY(40px) rotate(-8deg) scale(0.66);
}

/* Desktop tilted pose: 72% scale, CSS -6deg (counterclockwise), +24px down.
 * This is the approved settled pose; the plane transitions INTO it from the entry
 * state over the 0.6s enter, then visibly holds here for 0.4s while the overlay
 * has faded out, so the tilted page plane is on screen the whole time. */
html.ss6-loader-tilt.ss6-loader-pose #ss6-main,
html.ss6-loader-tilt.ss6-loader-pose .ss6-header {
	transform: translateY(24px) rotate(-6deg) scale(0.72);
	transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* Straighten + expand back to identity over 1.2s, no bounce. Final identity must
 * match the exact resting geometry: translateY(0) rotate(0) scale(1). */
html.ss6-loader-tilt.ss6-loader-straighten #ss6-main,
html.ss6-loader-tilt.ss6-loader-straighten .ss6-header {
	transform: translateY(0) rotate(0deg) scale(1);
	transition: transform 1200ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* Mobile responsive pose: 78%, CSS -4deg, +12px down. Entry offset one bounded
 * step past it: scale .72, -6deg, +22px. */
@media (max-width: 767.98px) {
	.ss6-loader__logo {
		width: 297px;
		height: 30.24px;
	}
	html.ss6-loader-tilt #ss6-main,
	html.ss6-loader-tilt .ss6-header {
		transform: translateY(22px) rotate(-6deg) scale(0.72);
	}
	html.ss6-loader-tilt.ss6-loader-pose #ss6-main,
	html.ss6-loader-tilt.ss6-loader-pose .ss6-header {
		transform: translateY(12px) rotate(-4deg) scale(0.78);
	}
}

/* ---------------------------------------------------------------------------
 * Reduced motion: skip the large tilt/scale and the long reveal; show the logo
 * briefly with no transform, then release promptly. JS shortens its timings to
 * match; CSS here guarantees no tilt even if JS lags.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html.ss6-loader-active .ss6-loader__contour,
	html.ss6-loader-active .ss6-loader__fill {
		-webkit-clip-path: inset(0 0 0 0);
		clip-path: inset(0 0 0 0);
		transition: none;
	}
	html.ss6-loader-tilt #ss6-main,
	html.ss6-loader-tilt .ss6-header,
	html.ss6-loader-tilt.ss6-loader-pose #ss6-main,
	html.ss6-loader-tilt.ss6-loader-pose .ss6-header,
	html.ss6-loader-tilt.ss6-loader-straighten #ss6-main,
	html.ss6-loader-tilt.ss6-loader-straighten .ss6-header {
		transform: none;
		transition: none;
	}
}