/* ==========================================================================
   Reforma Motion System  —  reforma-motion.css
   Additive, high-end motion. Version-busted by REFORMA_VERSION.
   Phase A (this file, initial deploy): branded loading icon (homepage).
   Reveal/parallax/ambient layers are appended in later phases.
   Principles: animate transform/opacity only; content visible by default;
   every hidden-initial state gated behind html.js + prefers-reduced-motion;
   never trap content if JS fails.
   ========================================================================== */

/* ====================== BRAND LOADING ICON (preloader) ==================== */
/* Hidden by default so NO-JS visitors and crawlers see content immediately
   (the overlay is shown ONLY when JS is present → html.js). */
.reforma-preloader{
	position:fixed; inset:0; z-index:2147483000;
	display:none; align-items:center; justify-content:center;
	background:#fff0e6;            /* brand peach — the transparent mark sits on it */
}
html.js .reforma-preloader{ display:flex; }
/* Once-per-session: head guard adds .reforma-loader-skip on repeat visits. */
html.js.reforma-loader-skip .reforma-preloader{ display:none !important; }

.reforma-preloader__media{
	width:clamp(160px, 21vw, 248px); height:auto; display:block;
	/* the mark is transparent gold; no box, no bg */
}
.reforma-preloader__fallback{ display:none; width:clamp(120px,16vw,180px); height:auto; }

/* Dismiss (added by JS on window.load) */
.reforma-preloader.is-done{
	opacity:0; visibility:hidden; pointer-events:none;
	transition:opacity .55s ease, visibility .55s ease;
}

/* FAILSAFE: if the JS load-handler never fires, the overlay still clears
   itself after 8s so content can never be permanently trapped. */
html.js .reforma-preloader{ animation:rfm-loader-failsafe 0s linear 8s forwards; }
@keyframes rfm-loader-failsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

/* Reduced motion: no looping video — show the static gold monogram, dismiss fast. */
@media (prefers-reduced-motion: reduce){
	.reforma-preloader__media{ display:none !important; }
	html.js .reforma-preloader .reforma-preloader__fallback{ display:block; }
}

/* ===================== SCROLL REVEALS (below-the-fold only) ===============
   The JS adds .rfm-r ONLY to elements that start below the fold, so
   above-the-fold / LCP content is never hidden (no FOUC, no LCP hit). It then
   adds .is-inview as each scrolls into view. transform+opacity only → 0 CLS.
   Entirely inert under reduced motion (rules live inside no-preference). */
@media (prefers-reduced-motion: no-preference){
	html.js .rfm-r{
		opacity:0;
		transform:translateY(22px);
		transition:opacity .7s cubic-bezier(.22,1,.36,1) var(--rfm-d,0s),
		           transform .7s cubic-bezier(.22,1,.36,1) var(--rfm-d,0s);
		will-change:opacity,transform;
	}
	html.js .rfm-r.is-inview{ opacity:1; transform:none; }

	/* media (images / right-hand panels): add a whisper of scale-down on settle */
	html.js .rfm-r.rfm-r--media{ transform:translateY(22px) scale(1.025); }
	html.js .rfm-r.rfm-r--media.is-inview{ transform:none; }

	/* drop will-change once revealed so it doesn't pin layers forever */
	html.js .rfm-r.is-inview{ will-change:auto; }
}

/* ===================== AMBIENT: WATERMARK ROLL + FAUNA/FLORA ==============
   Scroll-DRIVEN (native animation-timeline) so motion is user-controlled and
   stops when scrolling stops — high-end AND WCAG 2.2.2-safe (no infinite
   auto-loop). Uses the INDEPENDENT `translate`/`rotate` properties so it
   composes over any existing `transform` (centering etc.) without conflict.
   Gated behind @supports + no-reduced-motion; unsupported browsers (e.g.
   Firefox) and reduced-motion users see the decorations static — perfectly
   fine. No JS, no library. */
@media (prefers-reduced-motion: no-preference){
	@supports (animation-timeline: view()){

		/* --- Watermark family: the gold monogram "rolls" as you scroll --- */
		/* Hero ring — gentle roll across the first screens of page scroll. */
		html.js .reforma-hero-ring{
			animation: rfm-ring linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 90vh;
		}
		@keyframes rfm-ring{ from{ rotate:-10deg } to{ rotate:60deg } }

		/* Tiled monogram watermark (treatments / products / doctors) — the JS
		   rebuilds it into vertical logo COLUMNS; here alternating columns scroll
		   in OPPOSITE directions on page scroll (one up, the next down), with the
		   spacing baked into each column's tiling. Driven by scroll(root) because
		   the columns live inside an inset:0 overflow:hidden box (view() would
		   freeze — see gotchas 2026-06-08). */
		html.js .rfm-wm-col{ will-change: transform; }
		html.js .rfm-wm-col--up{
			animation: rfm-col-up linear both;
			animation-timeline: scroll(root block);
		}
		html.js .rfm-wm-col--down{
			animation: rfm-col-down linear both;
			animation-timeline: scroll(root block);
		}
		@keyframes rfm-col-up{   from{ translate:0 0;     } to{ translate:0 -320px; } }
		@keyframes rfm-col-down{ from{ translate:0 -320px; } to{ translate:0 0;     } }

		/* Contact floral band watermark (hero, top of page) — soft drift. */
		html.js .reforma-contact-banner__floral{
			animation: rfm-drift linear both;
			animation-timeline: scroll(root block);
			animation-range: 0% 55%;
		}

		/* --- Fauna: butterfly + birds drift (parallax) as they transit view --- */
		html.js .reforma-oob-deco-butterfly{
			animation: rfm-bfly linear both;
			animation-timeline: view();
			animation-range: cover;
		}
		@keyframes rfm-bfly{ from{ translate:0 36px; rotate:-5deg } to{ translate:0 -36px; rotate:5deg } }

		html.js .reforma-news-deco-bird,
		html.js .reforma-footer-cta-bird{
			animation: rfm-bird linear both;
			animation-timeline: view();
			animation-range: cover;
		}
		@keyframes rfm-bird{ from{ translate:0 30px } to{ translate:0 -26px } }

		/* --- Flora: stem-anchored gentle sway as the section passes --- */
		html.js .reforma-footer-cta-flower,
		html.js .reforma-phys-deco,
		html.js .reforma-oob-deco-floral{
			transform-origin: bottom center;
			animation: rfm-sway linear both;
			animation-timeline: view();
			animation-range: cover;
		}
		@keyframes rfm-sway{ 0%{ rotate:-1.8deg } 50%{ rotate:1.8deg } 100%{ rotate:-1deg } }

		/* Testimonials hand — soft drift. */
		html.js .reforma-testimonials__deco{
			animation: rfm-drift linear both;
			animation-timeline: view();
			animation-range: cover;
		}

		@keyframes rfm-drift{ from{ translate:0 -16px; rotate:-1.5deg } to{ translate:0 16px; rotate:1.5deg } }
	}
}

/* ===================== PAGE TRANSITIONS (cross-document) ==================
   A soft cross-fade between same-origin page loads. Pure progressive
   enhancement: browsers without cross-document View Transitions just do a
   normal navigation (~83% support). No JS, no lifecycle script → nothing for
   FlyingPress to break. POST flows (add-to-cart, form submits) never trigger
   it. Disabled under reduced motion. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce){
	@view-transition { navigation: none; }
}
::view-transition-old(root),
::view-transition-new(root){
	animation-duration: .42s;
	animation-timing-function: cubic-bezier(.22,1,.36,1);
}

/* ============ AMBIENT — remaining watermarks + sparkle twinkle ============
   Covers the inline-styled / differently-classed decorations missed in the
   first ambient pass (doctors CTA ring, contact/FAQ/about sparkles, FAQ +
   about-hero + news watermarks). Targets class-less inline-styled elements via
   [style*=...] so no markup edits are needed. Uses independent translate/rotate
   so it composes over existing transforms (e.g. about-hero floral centering).
   All gated by no-reduced-motion. */
@media (prefers-reduced-motion: no-preference){

	/* Sparkle TWINKLE — finite (3 pulses = 4.8s < 5s → WCAG 2.2.2 safe), works
	   in every browser (no scroll-timeline needed; sparkles sit in the hero). */
	html.js .reforma-contact-banner__sparkle,
	html.js .reforma-faq-banner__sparkle,
	html.js #reforma-about-hero span[style*="drop-shadow"]{
		animation: rfm-twinkle 1.6s ease-in-out both;
		animation-iteration-count: 3;
	}
	html.js .reforma-contact-banner__sparkle--tl,
	html.js .reforma-faq-banner__sparkle--tl{ animation-delay: .28s; }
	html.js .reforma-contact-banner__sparkle--br,
	html.js .reforma-faq-banner__sparkle--br{ animation-delay: .55s; }
	@keyframes rfm-twinkle{ 0%,100%{ scale:1; opacity:.72; } 50%{ scale:1.35; opacity:1; } }

	@supports (animation-timeline: view()){
		/* Doctors CTA ring — ROLLS like the home-hero ring. It's inset:0 inside an
		   overflow:hidden band, so view() freezes (fills its own scroller). Drive it
		   from PAGE scroll instead; range 25%→100% concentrates the roll in the lower
		   half of the page where the CTA actually comes into view. */
		/* Doctors CTA ring — rotate EXACTLY like the home-hero ring: same keyframe
		   (rfm-ring, -10deg->60deg) and same speed (full sweep over ~one viewport
		   of scroll). The ring is inset:0 in an overflow:hidden band so view()
		   freezes; we drive it from scroll(root) and the JS computes --rfm-dr-range
		   = a 90vh window anchored to where the band enters view, so the rotation
		   happens as the band scrolls in (matching the hero, which rotates over its
		   first 90vh at the top). */
		html.js .reforma-doctors-cta > div[style*="cta-ring"]{
			animation: rfm-ring linear both;
			animation-timeline: scroll(root block);
			animation-range: var(--rfm-dr-range, 28% 64%);
		}
		/* Keep the ORIGINAL cta-ring.png graphic (the user's target = the big radial
		   monogram fan filling the band — NOT the hero's scattered svg). The trick to
		   make it ROTATE like the hero ring without ever showing empty space:
		   cta-ring.png is a RADIALLY-SYMMETRIC ring, so rotating it about its OWN centre
		   leaves the annulus (band of monograms) exactly in place — only the monograms
		   revolve — so the visible band stays filled at EVERY angle (rotation-invariant).
		   initDoctorsRing() sizes/positions this div as a square = the full ring image
		   (115% of band width, matching the original look), centred on the ring's true
		   centre, so the 50%/50% pivot below = the ring centre. background-size:100% makes
		   the original cta-ring.png fill that JS-sized square. (!important beats the inline
		   cta-ring background-size/position + leftover pattern-decorations transform-origin.)
		   We deliberately DO NOT override background-image — the inline cta-ring.png shows. */
		html.js .reforma-doctors-cta > div[aria-hidden="true"][style*="cta-ring"]{
			background-repeat: no-repeat !important;
			background-size: 100% 100% !important;
			background-position: center center !important;
			transform-origin: 50% 50% !important;
			opacity: 1 !important;
		}

		/* about-hero floral watermark — drift (independent translate composes
		   with its translate(-50%,-50%) centering). */
		html.js #reforma-about-hero img[aria-hidden="true"]{
			animation: rfm-drift linear both;
			animation-timeline: view(); animation-range: cover;
		}
		/* FAQ floral band + hero-band decoration (full-cover, top) — drift on page scroll. */
		html.js .reforma-faq-banner__floral,
		html.js .reforma-hero-decoration{
			animation: rfm-drift linear both;
			animation-timeline: scroll(root block);
			animation-range: 0% 55%;
		}
		/* News listing banner leaf-watermark (full-cover, top) — gentle bg drift on page scroll. */
		html.js .reforma-news-banner{
			animation: rfm-bg-drift linear both;
			animation-timeline: scroll(root block);
			animation-range: 0% 60%;
		}
		@keyframes rfm-bg-drift{ from{ background-position: center 42%; } to{ background-position: center 58%; } }

		/* Art of Transformation — spa image gentle parallax (section clips overflow).
		   Reveal is on the .reforma-art-right wrapper; this parallaxes the inner img,
		   so no conflict. scale keeps edges covered while it translates. */
		html.js .reforma-home-art .reforma-art-right img{
			animation: rfm-parallax linear both;
			animation-timeline: view(); animation-range: cover;
		}
		@keyframes rfm-parallax{ from{ translate:0 30px; scale:1.07; } to{ translate:0 -30px; scale:1.07; } }
	}
}