/* ==========================================================================
   Laraib Organic — motion layer
   Progressive enhancement. Everything here degrades to "visible and static"
   when JS is off or the visitor prefers reduced motion.
   Loaded last so it can decorate whatever the section stylesheets built.
   ========================================================================== */

:root {
	--lo-m-dur: 900ms;
	--lo-m-ease: cubic-bezier(.16, 1, .3, 1);
	--lo-m-ease-soft: cubic-bezier(.33, 1, .68, 1);
	--lo-m-stagger: 70ms;
}

/* --------------------------------------------------------------------------
   1. Scroll progress bar
   -------------------------------------------------------------------------- */
.lo-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 1200;
	pointer-events: none;
	background: transparent;
}
.lo-progress__bar {
	height: 100%;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--lo-green-600), var(--lo-gold-500) 60%, var(--lo-gold-300));
	box-shadow: 0 0 14px rgba(208, 160, 60, .55);
	will-change: transform;
}

/* --------------------------------------------------------------------------
   2. Entrance animations — driven by [data-lo-anim], .is-in added by JS
   -------------------------------------------------------------------------- */
/* NOTE: no `will-change` here on purpose.
   `will-change: transform` makes every animated element a permanent stacking
   context, which changes how the section stylesheets paint: a decorative
   `::after` sitting at `z-index:-1` stops going behind its own element's
   background and starts covering it instead. That silently inverted the
   sugar-free promo card from gold to dark green and made its text unreadable.
   The transition is cheap enough without the hint. */
[data-lo-anim] {
	opacity: 0;
	transition:
		opacity var(--lo-m-dur) var(--lo-m-ease),
		transform var(--lo-m-dur) var(--lo-m-ease),
		filter var(--lo-m-dur) var(--lo-m-ease),
		clip-path var(--lo-m-dur) var(--lo-m-ease);
	transition-delay: var(--lo-m-delay, 0ms);
}

[data-lo-anim="fade"]        { transform: none; }
[data-lo-anim="up"]          { transform: translate3d(0, 42px, 0); }
[data-lo-anim="up-sm"]       { transform: translate3d(0, 20px, 0); }
[data-lo-anim="down"]        { transform: translate3d(0, -34px, 0); }
[data-lo-anim="left"]        { transform: translate3d(48px, 0, 0); }
[data-lo-anim="right"]       { transform: translate3d(-48px, 0, 0); }
[data-lo-anim="zoom"]        { transform: scale(.92); }
[data-lo-anim="zoom-out"]    { transform: scale(1.08); }
[data-lo-anim="blur"]        { filter: blur(14px); transform: translate3d(0, 22px, 0); }
[data-lo-anim="rise"]        { transform: translate3d(0, 60px, 0) scale(.97); }
[data-lo-anim="tilt-in"]     { transform: perspective(1200px) rotateX(9deg) translate3d(0, 46px, 0); transform-origin: 50% 100%; }
[data-lo-anim="clip"]        { clip-path: inset(0 0 100% 0); transform: translate3d(0, 24px, 0); }
[data-lo-anim="wipe"]        { clip-path: inset(0 100% 0 0); }

[data-lo-anim].is-in {
	opacity: 1;
	transform: none;
	filter: none;
	clip-path: inset(0 0 0 0);
}

/* --------------------------------------------------------------------------
   3. Split-text headline reveal
   -------------------------------------------------------------------------- */
.lo-split { display: inline; }
.lo-split__line {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-bottom: .06em;
	margin-bottom: -.06em;
}
.lo-split__w {
	display: inline-block;
	transform: translate3d(0, 108%, 0) rotate(2.5deg);
	opacity: 0;
	transition:
		transform 1000ms var(--lo-m-ease),
		opacity 700ms var(--lo-m-ease);
	transition-delay: var(--lo-m-delay, 0ms);
	will-change: transform, opacity;
}
.is-in > .lo-split .lo-split__w,
.lo-split.is-in .lo-split__w {
	transform: none;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   4. Eyebrow rule draw-in
   -------------------------------------------------------------------------- */
.lo-eyebrow::before,
.lo-eyebrow::after {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 850ms var(--lo-m-ease) 180ms;
}
.lo-head--center .lo-eyebrow::after { transform-origin: right center; }
.is-in .lo-eyebrow::before,
.is-in .lo-eyebrow::after,
.lo-eyebrow.is-in::before,
.lo-eyebrow.is-in::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   5. Image reveal — a soft curtain that lifts off the picture
   -------------------------------------------------------------------------- */
.lo-imgreveal { position: relative; overflow: hidden; }
.lo-imgreveal > img,
.lo-imgreveal > picture {
	transform: scale(1.14);
	transition: transform 1500ms var(--lo-m-ease);
	will-change: transform;
}
.lo-imgreveal::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--lo-cream);
	transform-origin: 50% 100%;
	transition: transform 1150ms var(--lo-m-ease);
	z-index: 2;
	pointer-events: none;
}
.lo-imgreveal.is-in > img,
.lo-imgreveal.is-in > picture { transform: scale(1); }
.lo-imgreveal.is-in::after { transform: scaleY(0); }

/* Lazy images fade up as the browser decodes them */
img.lo-imgload {
	opacity: 0;
	transform: scale(1.03);
	transition: opacity .8s var(--lo-m-ease), transform 1.2s var(--lo-m-ease);
}
img.lo-imgload.is-loaded { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   6. Magnetic buttons
   -------------------------------------------------------------------------- */
[data-lo-magnetic] {
	position: relative;
	transition: transform .45s var(--lo-m-ease), box-shadow .45s var(--lo-m-ease);
	will-change: transform;
}
[data-lo-magnetic] > * { position: relative; z-index: 2; }
[data-lo-magnetic]::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(120px circle at var(--lo-mx, 50%) var(--lo-my, 50%),
		rgba(255, 255, 255, .32), transparent 62%);
	opacity: 0;
	transition: opacity .4s var(--lo-m-ease);
	z-index: 1;
	pointer-events: none;
}
[data-lo-magnetic]:hover::before { opacity: 1; }

/* Shine sweep on primary buttons */
.lo-btn { position: relative; overflow: hidden; isolation: isolate; }
.lo-btn::after {
	content: "";
	position: absolute;
	top: 0; left: -140%;
	width: 55%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
	transform: skewX(-22deg);
	z-index: 0;
	pointer-events: none;
}
.lo-btn:hover::after { animation: lo-shine 900ms var(--lo-m-ease-soft) forwards; }
@keyframes lo-shine { to { left: 165%; } }

/* --------------------------------------------------------------------------
   7. Card tilt
   -------------------------------------------------------------------------- */
[data-lo-tilt] {
	transform-style: preserve-3d;
	transition: transform .6s var(--lo-m-ease), box-shadow .6s var(--lo-m-ease);
	will-change: transform;
}
[data-lo-tilt].is-tilting { transition: transform .12s linear, box-shadow .6s var(--lo-m-ease); }

/* Spotlight that follows the cursor across a card */
[data-lo-spot] { position: relative; }
[data-lo-spot]::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(340px circle at var(--lo-mx, 50%) var(--lo-my, 50%),
		rgba(208, 160, 60, .14), transparent 65%);
	opacity: 0;
	transition: opacity .45s var(--lo-m-ease);
	pointer-events: none;
	z-index: 1;
}
[data-lo-spot]:hover::before { opacity: 1; }

/* --------------------------------------------------------------------------
   8. Marquee
   -------------------------------------------------------------------------- */
.lo-marquee {
	--lo-marquee-dur: 42s;
	position: relative;
	overflow: hidden;
	display: flex;
	user-select: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.lo-marquee__track {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--lo-s7);
	padding-right: var(--lo-s7);
	animation: lo-marquee var(--lo-marquee-dur) linear infinite;
	will-change: transform;
}
.lo-marquee:hover .lo-marquee__track { animation-play-state: paused; }
@keyframes lo-marquee { to { transform: translate3d(-100%, 0, 0); } }

.lo-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: var(--lo-s3);
	font-family: var(--lo-font-display);
	font-size: clamp(1.1rem, .8rem + 1vw, 1.7rem);
	font-weight: 600;
	color: var(--lo-green-900);
	white-space: nowrap;
	opacity: .82;
}
.lo-marquee__item svg { color: var(--lo-gold-500); }
.lo-section--dark .lo-marquee__item { color: rgba(255,255,255,.85); }

.lo-marquee__dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--lo-gold-400);
	margin-left: var(--lo-s4);
	flex: 0 0 auto;
}

/* The band the ticker sits in */
.lo-tickerband {
	padding-block: clamp(20px, 2.6vw, 34px);
	background: linear-gradient(180deg, var(--lo-green-50), var(--lo-cream));
	border-block: 1px solid var(--lo-line-soft);
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   9. Page-load intro curtain
   -------------------------------------------------------------------------- */
.lo-intro {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: grid;
	place-items: center;
	background: var(--lo-green-950);
	transition: opacity .55s var(--lo-m-ease), visibility .55s;
}
.lo-intro__mark {
	width: 62px; height: 62px;
	animation: lo-intro-pulse 1.5s var(--lo-m-ease-soft) infinite;
}
.lo-intro::after {
	content: "";
	position: absolute;
	left: 50%; bottom: 34%;
	transform: translateX(-50%);
	width: 132px; height: 2px;
	background: rgba(255,255,255,.14);
	overflow: hidden;
}
.lo-intro.is-done { opacity: 0; visibility: hidden; }
@keyframes lo-intro-pulse {
	0%, 100% { transform: scale(1); opacity: .9; }
	50%      { transform: scale(1.13); opacity: 1; }
}
body.lo-intro-active { overflow: hidden; }

/* --------------------------------------------------------------------------
   10. Micro-interactions
   -------------------------------------------------------------------------- */

/* Underline that wipes in from the left on any inline link in prose */
.lo-prose a:not(.lo-btn) {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .45s var(--lo-m-ease), color .3s;
}
.lo-prose a:not(.lo-btn):hover { background-size: 100% 1px; }

/* Icon buttons get a soft press */
.lo-action:active,
.lo-carousel__nav button:active,
[data-lo-car-prev]:active,
[data-lo-car-next]:active { transform: scale(.93); }

/* Cart bump */
@keyframes lo-bump {
	0%   { transform: scale(1); }
	28%  { transform: scale(1.22) rotate(-6deg); }
	60%  { transform: scale(.94) rotate(3deg); }
	100% { transform: scale(1); }
}
.lo-action--cart.is-bump { animation: lo-bump .7s var(--lo-m-ease-soft); }

/* Floating idle drift for decorative ornaments */
@keyframes lo-float {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--lo-orn-rot, 0deg)); }
	50%      { transform: translate3d(0, -16px, 0) rotate(calc(var(--lo-orn-rot, 0deg) + 2deg)); }
}
.lo-ornament--leaf,
.lo-phero__leaf { animation: lo-float 11s ease-in-out infinite; }

/* Gentle breathing glow on gold CTAs sitting on dark sections */
@keyframes lo-glow {
	0%, 100% { box-shadow: 0 14px 34px -14px rgba(208,160,60,.5); }
	50%      { box-shadow: 0 18px 48px -14px rgba(208,160,60,.78); }
}
.lo-section--dark .lo-btn--gold { animation: lo-glow 4.5s ease-in-out infinite; }

/* Scroll cue bob */
@keyframes lo-cue {
	0%, 100% { transform: translateY(0); opacity: .75; }
	50%      { transform: translateY(9px); opacity: 1; }
}
.lo-hero__cue,
.lo-hero__scroll { animation: lo-cue 2.1s ease-in-out infinite; }

/* Product card image lift */
.lo-pcard:hover .lo-media-frame img,
.woocommerce ul.products li.product:hover img { transform: scale(1.07); }

/* Sticky header shrink refinement */
.lo-header { transition: box-shadow .4s var(--lo-m-ease), background-color .4s var(--lo-m-ease), transform .45s var(--lo-m-ease); }
.lo-header.is-up { transform: translateY(-100%); }

/* --------------------------------------------------------------------------
   11. Reduced motion / no JS
   -------------------------------------------------------------------------- */
.no-js [data-lo-anim],
.no-js .lo-split__w {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
	clip-path: none !important;
}
.no-js .lo-imgreveal::after { display: none; }
.no-js .lo-intro { display: none; }

@media (prefers-reduced-motion: reduce) {
	[data-lo-anim],
	.lo-split__w,
	.lo-imgreveal > img,
	img.lo-imgload {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		transition: none !important;
	}
	.lo-imgreveal::after { display: none; }
	.lo-marquee__track,
	.lo-ornament--leaf,
	.lo-phero__leaf,
	.lo-section--dark .lo-btn--gold,
	.lo-hero__cue,
	.lo-hero__scroll,
	.lo-intro__mark { animation: none !important; }
	.lo-progress { display: none; }
	.lo-intro { display: none; }
	.lo-btn::after { display: none; }
}