/**
 * RBF Foundations Fit — Premium Motion System
 * Layered on top of the existing design. Does not replace layout or branding.
 */

:root {
	--rbf-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--rbf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--rbf-duration-micro: 300ms;
	--rbf-duration-standard: 700ms;
	--rbf-duration-editorial: 1100ms;
	--rbf-duration-cinematic: 1600ms;
	--rbf-stagger: 100ms;
}

/* ─── Base reveal utilities (strong scroll entrance) ─ */

.rbf-reveal,
.rbf-reveal-up,
.rbf-reveal-left,
.rbf-reveal-right,
.reveal {
	opacity: 1;
	transform: none;
}

html.rbf-js .rbf-reveal:not(.is-visible),
html.rbf-js .rbf-reveal-up:not(.is-visible),
html.rbf-js .reveal:not(.is-visible) {
	opacity: 0;
	transform: translate3d(0, 56px, 0);
	transition:
		opacity var(--rbf-duration-editorial) var(--rbf-ease),
		transform var(--rbf-duration-editorial) var(--rbf-ease);
	will-change: opacity, transform;
}

html.rbf-js .rbf-reveal-left:not(.is-visible) {
	opacity: 0;
	transform: translate3d(-48px, 24px, 0);
	transition:
		opacity var(--rbf-duration-editorial) var(--rbf-ease),
		transform var(--rbf-duration-editorial) var(--rbf-ease);
	will-change: opacity, transform;
}

html.rbf-js .rbf-reveal-right:not(.is-visible) {
	opacity: 0;
	transform: translate3d(48px, 24px, 0);
	transition:
		opacity var(--rbf-duration-editorial) var(--rbf-ease),
		transform var(--rbf-duration-editorial) var(--rbf-ease);
	will-change: opacity, transform;
}

.rbf-reveal.is-visible,
.rbf-reveal-up.is-visible,
.rbf-reveal-left.is-visible,
.rbf-reveal-right.is-visible,
.reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Image clip reveal */
.rbf-image-reveal {
	overflow: hidden;
}

.rbf-image-reveal > img,
.rbf-image-reveal > .rbf-image-reveal__inner {
	opacity: 1;
	transform: scale(1);
	clip-path: inset(0 0 0 0);
}

html.rbf-js .rbf-image-reveal:not(.is-visible) > img,
html.rbf-js .rbf-image-reveal:not(.is-visible) > .rbf-image-reveal__inner {
	opacity: 0.35;
	transform: scale(1.14);
	clip-path: inset(12% 12% 12% 12%);
	transition:
		opacity var(--rbf-duration-cinematic) var(--rbf-ease),
		transform var(--rbf-duration-cinematic) var(--rbf-ease),
		clip-path var(--rbf-duration-cinematic) var(--rbf-ease);
	will-change: opacity, transform, clip-path;
}

.rbf-image-reveal.is-visible > img,
.rbf-image-reveal.is-visible > .rbf-image-reveal__inner {
	opacity: 1;
	transform: scale(1);
	clip-path: inset(0 0 0 0);
}

/* Stagger children */
.rbf-stagger > [data-rbf-stagger-item],
.rbf-stagger > .rbf-stagger-item {
	opacity: 1;
	transform: none;
}

html.rbf-js .rbf-stagger:not(.is-visible) > [data-rbf-stagger-item],
html.rbf-js .rbf-stagger:not(.is-visible) > .rbf-stagger-item {
	opacity: 0;
	transform: translate3d(0, 40px, 0);
	transition:
		opacity var(--rbf-duration-standard) var(--rbf-ease),
		transform var(--rbf-duration-standard) var(--rbf-ease);
}

.rbf-stagger.is-visible > [data-rbf-stagger-item],
.rbf-stagger.is-visible > .rbf-stagger-item,
.rbf-reveal.rbf-stagger.is-visible > [data-rbf-stagger-item],
.rbf-reveal.rbf-stagger.is-visible > .rbf-stagger-item {
	opacity: 1;
	transform: none;
}

/* ─── Hover utilities ───────────────────────────────────────────────── */

.rbf-hover-lift {
	transition:
		transform var(--rbf-duration-standard) var(--rbf-ease),
		box-shadow var(--rbf-duration-standard) var(--rbf-ease);
}

@media (hover: hover) {
	.rbf-hover-lift:hover {
		transform: translateY(-4px);
	}
}

.rbf-image-zoom {
	overflow: hidden;
}

.rbf-image-zoom img {
	transition: transform var(--rbf-duration-cinematic) var(--rbf-ease-out);
	will-change: transform;
}

@media (hover: hover) {
	.rbf-image-zoom:hover img,
	.group:hover .rbf-image-zoom img {
		transform: scale(1.04);
	}
}

.rbf-arrow-motion .rbf-arrow,
.rbf-arrow-motion svg.rbf-arrow {
	transition: transform var(--rbf-duration-micro) var(--rbf-ease);
}

@media (hover: hover) {
	.rbf-arrow-motion:hover .rbf-arrow,
	.rbf-arrow-motion:hover svg.rbf-arrow,
	.group:hover .rbf-arrow-motion .rbf-arrow {
		transform: translateX(5px);
	}
}

/* Button micro-interaction */
.rbf-btn-motion {
	transition:
		background-color var(--rbf-duration-micro) var(--rbf-ease),
		color var(--rbf-duration-micro) var(--rbf-ease),
		border-color var(--rbf-duration-micro) var(--rbf-ease),
		transform var(--rbf-duration-micro) var(--rbf-ease),
		box-shadow var(--rbf-duration-micro) var(--rbf-ease);
}

@media (hover: hover) {
	.rbf-btn-motion:hover {
		transform: translateY(-1px);
	}
}

.rbf-btn-motion:active {
	transform: translateY(0);
}

/* Footer link underline reveal */
.rbf-footer-link {
	position: relative;
	display: inline-block;
	transition:
		color var(--rbf-duration-micro) var(--rbf-ease),
		transform var(--rbf-duration-micro) var(--rbf-ease);
}

.rbf-footer-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--rbf-duration-standard) var(--rbf-ease);
}

@media (hover: hover) {
	.rbf-footer-link:hover {
		transform: translateX(3px);
	}

	.rbf-footer-link:hover::after {
		transform: scaleX(1);
	}
}

/* ─── Header entrance ───────────────────────────────────────────────── */

#site-header {
	transition:
		opacity var(--rbf-duration-standard) var(--rbf-ease),
		transform var(--rbf-duration-standard) var(--rbf-ease);
}

html.rbf-js body:not(.rbf-motion-ready) #site-header {
	opacity: 1;
	transform: none;
}

html.rbf-js body.rbf-motion-ready #site-header {
	opacity: 1;
	transform: none;
}

.rbf-hero-line {
	display: block;
	overflow: hidden;
}

.rbf-hero-line > span {
	display: block;
}

.rbf-hero--cover .rbf-hero__media {
	transform-origin: 65% center;
	will-change: opacity;
	transition: opacity 1.1s var(--rbf-ease);
}

.rbf-hero--cover .rbf-hero__shade {
	transition: opacity var(--rbf-duration-cinematic) var(--rbf-ease);
}

.rbf-hero--cover [data-rbf-hero-item] {
	will-change: opacity, transform;
	transition:
		opacity var(--rbf-duration-editorial) var(--rbf-ease),
		transform var(--rbf-duration-editorial) var(--rbf-ease);
}

.rbf-hero--cover .rbf-hero__rule {
	transition:
		opacity var(--rbf-duration-editorial) var(--rbf-ease),
		transform var(--rbf-duration-editorial) var(--rbf-ease);
}

/* Staggered entrance — soft fade/rise, no upscale blur */
html.rbf-js .rbf-hero--cover:not(.is-entered) .rbf-hero__media {
	opacity: 0;
}

html.rbf-js .rbf-hero--cover:not(.is-entered) .rbf-hero__shade {
	opacity: 0;
}

html.rbf-js .rbf-hero--cover:not(.is-entered) [data-rbf-hero-item] {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
}

html.rbf-js .rbf-hero--cover:not(.is-entered) [data-rbf-hero-item="rule"] {
	transform: scaleX(0.2) translate3d(0, 12px, 0);
}

.rbf-hero--cover.is-entered .rbf-hero__media,
.rbf-hero--cover.is-entered .rbf-hero__shade,
.rbf-hero--cover.is-entered [data-rbf-hero-item] {
	opacity: 1;
	transform: none;
}

/* Subtle ambient pan only — no scale-up (keeps image sharp) */
@media (prefers-reduced-motion: no-preference) {
	.rbf-hero--cover.is-entered .rbf-hero-image {
		animation: rbf-hero-drift 32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
		transform-origin: 70% 45%;
		will-change: transform;
	}
}

@keyframes rbf-hero-drift {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-1.5%, -0.8%, 0);
	}
}

html:not(.rbf-js) .rbf-hero--cover [data-rbf-hero-item],
html:not(.rbf-js) .rbf-hero--cover .rbf-hero__media,
html:not(.rbf-js) .rbf-hero--cover .rbf-hero__shade {
	opacity: 1;
	transform: none;
}

.rbf-hero--cover .rbf-hero__title-line,
.rbf-hero--cover .rbf-hero-line,
.rbf-hero--cover .rbf-hero-line > span {
	overflow: visible;
}

.rbf-hero--concept [data-rbf-hero-item] {
	transition:
		opacity var(--rbf-duration-editorial) var(--rbf-ease),
		transform var(--rbf-duration-editorial) var(--rbf-ease);
}

html.rbf-js .rbf-hero--concept:not(.is-entered) [data-rbf-hero-item] {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
}

.rbf-hero--concept.is-entered [data-rbf-hero-item] {
	opacity: 1;
	transform: none;
}

/* ─── Benefits ──────────────────────────────────────────────────────── */

.rbf-benefit-item {
	position: relative;
	padding-bottom: 0.25rem;
	transition: transform var(--rbf-duration-standard) var(--rbf-ease);
}

.rbf-benefit-item::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--blush);
	transition: width var(--rbf-duration-standard) var(--rbf-ease);
}

@media (hover: hover) {
	.rbf-benefit-item:hover::after {
		width: 2.5rem;
	}

	.rbf-benefit-item:hover h3 {
		transform: translateX(2px);
	}

	.rbf-benefit-item:hover .rbf-benefit-icon {
		transform: translateY(-2px);
	}
}

.rbf-benefit-item h3 {
	transition: transform var(--rbf-duration-micro) var(--rbf-ease);
}

.rbf-benefit-icon {
	transition: transform var(--rbf-duration-micro) var(--rbf-ease);
}

/* ─── Category cards ────────────────────────────────────────────────── */

.rbf-category-card {
	transition: transform var(--rbf-duration-standard) var(--rbf-ease);
}

@media (hover: hover) {
	.rbf-category-card:hover {
		transform: none;
	}

	.rbf-home-categories-section .rbf-category-card:hover {
		transform: translateY(-2px);
	}

	.rbf-category-card:hover .rbf-category-card__text {
		transform: translateY(-2px);
	}

	.rbf-category-card:hover .rbf-category-cta {
		opacity: 1;
		transform: translateX(0);
	}
}

.rbf-category-card__text {
	transition: transform var(--rbf-duration-standard) var(--rbf-ease);
}

.rbf-category-cta {
	opacity: 0;
	transform: translateX(-4px);
	transition:
		opacity var(--rbf-duration-micro) var(--rbf-ease),
		transform var(--rbf-duration-micro) var(--rbf-ease);
}

.rbf-category-overlay {
	transition: background-color var(--rbf-duration-standard) var(--rbf-ease);
}

/* ─── Product cards ─────────────────────────────────────────────────── */

.rbf-product-card {
	transition: transform var(--rbf-duration-standard) var(--rbf-ease);
}

@media (hover: hover) {
	.rbf-product-card:hover {
		transform: translateY(-5px);
	}

	.rbf-product-card:hover .rbf-product-card__image img:first-child {
		transform: scale(1.04);
	}
}

.rbf-product-card__image {
	overflow: hidden;
}

.rbf-product-card__image img {
	transition:
		opacity var(--rbf-duration-editorial) var(--rbf-ease),
		transform var(--rbf-duration-cinematic) var(--rbf-ease-out);
}

@media (hover: hover) {
	.rbf-product-card:has(.rbf-product-card__hover-image):hover .rbf-product-card__image img:first-of-type:not(.rbf-product-card__hover-image) {
		opacity: 0;
	}

	.rbf-product-card:hover .rbf-product-card__hover-image {
		opacity: 1;
		transform: scale(1.04);
	}

	.rbf-product-card:hover .rbf-product-card__image img:first-of-type {
		transform: scale(1.04);
	}
}

/* ─── Shop by need ──────────────────────────────────────────────────── */

.rbf-need-card .rbf-need-image {
	transition: transform var(--rbf-duration-cinematic) var(--rbf-ease-out);
	will-change: transform;
}

.rbf-need-card h3 {
	transition:
		color var(--rbf-duration-micro) var(--rbf-ease),
		transform var(--rbf-duration-micro) var(--rbf-ease);
}

@media (hover: hover) {
	.rbf-need-card:hover h3 {
		transform: translateY(-2px);
	}
}

/* ─── Belief / editorial storytelling ───────────────────────────────── */

.rbf-belief-text > *,
.rbf-editorial-panel > * {
	opacity: 1;
	transform: none;
}

html.rbf-js .rbf-belief-text:not(.is-visible) > *,
html.rbf-js .rbf-editorial-panel:not(.is-visible) > * {
	opacity: 0;
	transform: translate3d(0, 32px, 0);
	transition:
		opacity var(--rbf-duration-editorial) var(--rbf-ease),
		transform var(--rbf-duration-editorial) var(--rbf-ease);
}

html.rbf-js .rbf-belief-text:not(.is-visible) > *:nth-child(1) { transition-delay: 0ms; }
html.rbf-js .rbf-belief-text:not(.is-visible) > *:nth-child(2) { transition-delay: 90ms; }
html.rbf-js .rbf-belief-text:not(.is-visible) > *:nth-child(3) { transition-delay: 160ms; }
html.rbf-js .rbf-belief-text:not(.is-visible) > *:nth-child(4) { transition-delay: 230ms; }
html.rbf-js .rbf-editorial-panel:not(.is-visible) > *:nth-child(1) { transition-delay: 0ms; }
html.rbf-js .rbf-editorial-panel:not(.is-visible) > *:nth-child(2) { transition-delay: 100ms; }
html.rbf-js .rbf-editorial-panel:not(.is-visible) > *:nth-child(3) { transition-delay: 180ms; }
html.rbf-js .rbf-editorial-panel:not(.is-visible) > *:nth-child(4) { transition-delay: 260ms; }
html.rbf-js .rbf-editorial-panel:not(.is-visible) > *:nth-child(5) { transition-delay: 340ms; }

.rbf-belief-text.is-visible > *,
.rbf-editorial-panel.is-visible > * {
	opacity: 1;
	transform: none;
}

.rbf-cursor-image img {
	transition: transform 0.4s var(--rbf-ease-out);
	will-change: transform;
}

/* ─── Why RBF interactive story ─────────────────────────────────────── */

.rbf-why-item {
	opacity: 1;
	transition:
		border-color var(--rbf-duration-standard) var(--rbf-ease);
}

.rbf-why-item .rbf-why-number {
	color: color-mix(in oklab, var(--rose) 55%, var(--blush));
	transition:
		color var(--rbf-duration-standard) var(--rbf-ease),
		transform var(--rbf-duration-standard) var(--rbf-ease);
}

.rbf-why-item.is-active .rbf-why-number {
	color: var(--rose);
	transform: scale(1.06);
}

.rbf-why-item h3 {
	color: var(--ink);
	font-weight: 500;
}

.rbf-why-item h3::after {
	content: "";
	display: block;
	width: 0;
	height: 1px;
	margin-top: 0.5rem;
	background: var(--rose);
	transition: width var(--rbf-duration-standard) var(--rbf-ease);
}

.rbf-why-item.is-active h3::after {
	width: 2rem;
}

.rbf-why-item p {
	color: color-mix(in oklab, var(--ink) 78%, var(--neutral-text));
	max-width: 18rem;
	line-height: 1.65;
}

/* ─── Fit guide timeline ────────────────────────────────────────────── */

.rbf-fit-timeline {
	position: relative;
}

.rbf-fit-progress {
	position: absolute;
	background: var(--line);
	overflow: hidden;
}

.rbf-fit-progress__fill {
	height: 100%;
	width: 0;
	background: var(--rose);
	transition: width var(--rbf-duration-editorial) var(--rbf-ease);
}

/* Desktop horizontal */
@media (min-width: 768px) {
	.rbf-fit-progress {
		top: 2.25rem;
		left: 10%;
		right: 10%;
		height: 1px;
	}

	.rbf-fit-step {
		opacity: 0.5;
		transition: opacity var(--rbf-duration-standard) var(--rbf-ease);
	}

	.rbf-fit-step.is-active {
		opacity: 1;
	}

	.rbf-fit-step.is-active .rbf-fit-step__number {
		color: var(--rose);
		transform: scale(1.08);
	}
}

/* Mobile vertical */
@media (max-width: 767px) {
	.rbf-fit-progress {
		left: 1.35rem;
		top: 0;
		bottom: 0;
		width: 1px;
	}

	.rbf-fit-progress__fill {
		width: 100%;
		height: 0;
		transition: height var(--rbf-duration-editorial) var(--rbf-ease);
	}

	.rbf-fit-step {
		opacity: 0.55;
		padding-left: 2.5rem;
		transition: opacity var(--rbf-duration-standard) var(--rbf-ease);
	}

	.rbf-fit-step.is-active {
		opacity: 1;
	}
}

.rbf-fit-step__number {
	transition:
		color var(--rbf-duration-standard) var(--rbf-ease),
		transform var(--rbf-duration-standard) var(--rbf-ease);
}

/* ─── Social grid ───────────────────────────────────────────────────── */

.rbf-social-item {
	position: relative;
	overflow: hidden;
}

.rbf-social-item img {
	transition:
		transform var(--rbf-duration-cinematic) var(--rbf-ease-out),
		opacity var(--rbf-duration-standard) var(--rbf-ease);
}

.rbf-social-item__overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(40, 30, 30, 0);
	opacity: 0;
	transition:
		background var(--rbf-duration-standard) var(--rbf-ease),
		opacity var(--rbf-duration-standard) var(--rbf-ease);
}

.rbf-social-item__icon {
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity var(--rbf-duration-micro) var(--rbf-ease),
		transform var(--rbf-duration-micro) var(--rbf-ease);
}

@media (hover: hover) {
	.rbf-social-item:hover img {
		transform: scale(1.04);
	}

	.rbf-social-item:hover .rbf-social-item__overlay {
		background: rgba(40, 30, 30, 0.12);
		opacity: 1;
	}

	.rbf-social-item:hover .rbf-social-item__icon {
		opacity: 1;
		transform: none;
	}
}

/* ─── Newsletter ────────────────────────────────────────────────────── */

.rbf-newsletter-input {
	transition:
		border-color var(--rbf-duration-micro) var(--rbf-ease),
		box-shadow var(--rbf-duration-micro) var(--rbf-ease),
		transform var(--rbf-duration-micro) var(--rbf-ease);
}

.rbf-newsletter-input:focus {
	transform: translateY(-1px);
	box-shadow: 0 4px 20px rgba(139, 70, 86, 0.08);
}

.rbf-newsletter-form,
.rbf-newsletter-success {
	transition:
		opacity var(--rbf-duration-standard) var(--rbf-ease),
		transform var(--rbf-duration-standard) var(--rbf-ease);
}

.rbf-newsletter-form.is-exiting {
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
}

.rbf-newsletter-success {
	opacity: 0;
	transform: translateY(10px);
}

.rbf-newsletter-success.is-visible {
	opacity: 1;
	transform: none;
}

/* ─── Floating fit assistance ───────────────────────────────────────── */

.rbf-fab {
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition:
		opacity var(--rbf-duration-standard) var(--rbf-ease),
		transform var(--rbf-duration-standard) var(--rbf-ease),
		border-color var(--rbf-duration-micro) var(--rbf-ease),
		box-shadow var(--rbf-duration-micro) var(--rbf-ease);
}

.rbf-fab.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.rbf-fab.is-attention {
	animation: rbf-fab-nudge 0.6s var(--rbf-ease) 1;
}

@keyframes rbf-fab-nudge {
	0%, 100% { transform: translateY(0); }
	40% { transform: translateY(-3px); }
}

@media (hover: hover) {
	.rbf-fab:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 24px rgba(40, 30, 30, 0.08);
	}
}

/* Safe area on mobile */
@media (max-width: 767px) {
	.rbf-fab {
		right: 1rem;
		bottom: 1rem;
		max-width: calc(100vw - 2rem);
	}
}

/* ─── Reduced motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	:root {
		--rbf-duration-micro: 1ms;
		--rbf-duration-standard: 1ms;
		--rbf-duration-editorial: 1ms;
		--rbf-duration-cinematic: 1ms;
		--rbf-stagger: 0ms;
	}

	.rbf-reveal,
	.rbf-reveal-up,
	.rbf-reveal-left,
	.rbf-reveal-right,
	.reveal,
	.rbf-stagger > [data-rbf-stagger-item],
	.rbf-stagger > .rbf-stagger-item,
	.rbf-image-reveal > img,
	.rbf-image-reveal > .rbf-image-reveal__inner,
	.rbf-hero [data-rbf-hero-item],
	.rbf-hero-line > span,
	.rbf-hero-image,
	.rbf-belief-text > *,
	.rbf-editorial-panel > *,
	.rbf-fab {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		clip-path: none !important;
		animation: none !important;
	}

	html.rbf-js body:not(.rbf-motion-ready) #site-header {
		opacity: 1;
		transform: none;
	}

	.rbf-hero-media,
	.rbf-hero--cover .rbf-hero__media,
	.rbf-need-card .rbf-need-image,
	.rbf-cursor-image img {
		transform: none !important;
	}
}