/* ==========================================================================
   Skinvestment — Scrollytelling: "The Ritual"

   The 90-minute Custom Facial told as a sequence: a sticky visual on one side,
   six steps advancing on the other as you scroll.

   DESIGN RULES THIS FOLLOWS
   -------------------------
   1. No scroll-jacking. The page scrolls at exactly the speed the visitor's
      device says it should. We only *observe* scroll position and change what
      is displayed — we never intercept, delay, snap or animate the scroll
      itself. Hijacked scrolling is the single most complained-about pattern in
      this genre and it breaks find-in-page, keyboard paging and screen readers.
   2. `position: sticky` does the pinning. No fixed positioning, no JS-driven
      `top` values, no measuring in a scroll handler — so nothing can drift out
      of sync or jump when you scroll up.
   3. It degrades to a readable list. Without JS, without IntersectionObserver,
      or under reduced-motion, every step is fully visible and legible. The
      narrative is the content; the animation is a bonus.
   4. Only opacity/transform animate. Both are compositor properties, so the
      sequence costs no layout or paint work while scrolling.
   ========================================================================== */

.skin-ritual {
	position: relative;
	background: var(--ink);
	color: var(--cream);
	padding-block: var(--gap-xl);
}
.skin-ritual h2, .skin-ritual h3 { color: var(--cream); }
.skin-ritual .skin-eyebrow { color: var(--clay); }

.skin-ritual__layout {
	display: grid;
	gap: var(--gap-l);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.skin-ritual__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
		gap: clamp(3rem, 6vw, 6rem);
		align-items: start;
	}
}

/* --------------------------------------------------------------------------
   Sticky visual column
   -------------------------------------------------------------------------- */
.skin-ritual__stage {
	position: sticky;
	/* Clear the sticky header, plus a little breathing room. */
	top: calc(var(--header-h) + var(--gap-m));
	align-self: start;
	border-radius: var(--radius-lg);
	overflow: clip;
	aspect-ratio: 4 / 5;
	background: rgb(248 242 233 / 0.05);
	isolation: isolate;
	/* Nothing inside the stage affects layout outside it, so let the browser
	   skip its subtree when it is off screen. */
	contain: layout paint;
}

@media (max-width: 899px) {
	.skin-ritual__stage {
		/* On narrow screens the stage pins to the top of the viewport and the
		   steps scroll under it — the standard mobile scrollytelling form. */
		top: var(--header-h);
		aspect-ratio: 4 / 3;
		margin-bottom: var(--gap-m);
		z-index: 1;
	}
}

/* Six frames are stacked here. An element at `opacity: 0` is still painted and
   still occupies a compositor layer — six large decoded bitmaps held live at
   once is enough to make a low-end GPU (measured: Intel HD 620) drop frames.
   `visibility` fixes it: it is not animatable continuously, so the transition
   below holds it at `visible` for the length of the fade and then flips it to
   `hidden` in one step, at which point the browser stops painting the frame
   entirely. `content-visibility` then lets it skip the subtree's rendering work
   altogether. */
.skin-ritual__frame {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transform: scale(1.06);
	transition:
		opacity 0.8s var(--ease-out),
		transform 1.4s var(--ease-out),
		visibility 0s linear 0.8s;
}
.skin-ritual__frame.is-active {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	transition:
		opacity 0.8s var(--ease-out),
		transform 1.4s var(--ease-out),
		visibility 0s linear 0s;
}
.skin-ritual__frame img { width: 100%; height: 100%; object-fit: cover; }

/* The step counter, floating on glass over the visual. */
.skin-ritual__counter {
	position: absolute;
	left: var(--gap-s);
	bottom: var(--gap-s);
	z-index: 2;
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	padding: 0.6rem 1rem;
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.1em;
	color: var(--cream);
}
.skin-ritual__counter b {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

/* Progress rail down the side of the stage. */
.skin-ritual__rail {
	position: absolute;
	right: var(--gap-s);
	top: var(--gap-s);
	bottom: var(--gap-s);
	z-index: 2;
	width: 2px;
	border-radius: 2px;
	background: rgb(248 242 233 / 0.22);
	overflow: clip;
}
.skin-ritual__rail span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--clay);
	transform: scaleY(var(--progress, 0));
	transform-origin: top;
	transition: transform 0.55s var(--ease-out);
}

/* --------------------------------------------------------------------------
   Steps column
   -------------------------------------------------------------------------- */
.skin-ritual__steps { display: grid; }

.skin-ritual__step {
	/* Each step occupies a comfortable slab of scroll so the sequence has room
	   to breathe, but never so much that it feels like nothing is happening. */
	min-height: 62vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--gap-m);
	border-top: 1px solid rgb(248 242 233 / 0.14);
}
.skin-ritual__step:first-child { border-top: 0; }

@media (max-width: 899px) {
	.skin-ritual__step { min-height: 48vh; }
}

.skin-ritual__step-num {
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	color: var(--clay);
	margin-bottom: 0.75rem;
}
.skin-ritual__step h3 {
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.25rem);
	margin-bottom: 0.5rem;
}
.skin-ritual__step p {
	max-width: 42ch;
	color: rgb(248 242 233 / 0.72);
}

/* Default state is FULLY VISIBLE. The dimming below is layered on only when JS
   has taken over and motion is welcome — so the no-JS and reduced-motion
   experience is a clean, readable list of the six steps. */
@media (prefers-reduced-motion: no-preference) {
	.js .skin-ritual__step {
		opacity: 0.32;
		transition: opacity 0.6s var(--ease-out);
	}
	.js .skin-ritual__step.is-active { opacity: 1; }

	.js .skin-ritual__step h3 {
		transform: translateY(10px);
		transition: transform 0.7s var(--ease-out);
	}
	.js .skin-ritual__step.is-active h3 { transform: none; }
}

/* Without JS every frame would be stacked at opacity 0; show the first one so
   the stage is never blank. */
.no-js .skin-ritual__frame:first-child,
.skin-ritual__frame.is-fallback { opacity: 1; visibility: visible; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.skin-ritual__frame { transition: none; }
	.skin-ritual__rail span { transition: none; }
}