/* ==================================================================
   09 - HOME
   The six homepage sections.

     1. Hero              - logotype, headline, two calls to action
     2. Trust bar         - four reassurance items
     3. Shop by Fragrance - six category tiles
     4. Bestsellers       - product carousel
     5. Why WaxOrbit      - feature list beside a lifestyle image
     6. Testimonials      - three review cards

   Product card styling is NOT here - it lives in 10-woocommerce.css
   because the same card is used on the shop and related products.
   ================================================================== */


/* ==================================================================
   1. HERO
   ================================================================== */

.wo-hero {
	position: relative;
	padding-top: calc(var(--wo-header-offset) + var(--wo-space-6));
	padding-bottom: var(--wo-section-y);
	overflow: hidden;
}

.wo-hero__inner {
	display: grid;
	grid-template-columns: 1fr;   /* stacked - desktop split at 992px */
	gap: clamp(2.5rem, 6vw, 4rem);
	align-items: center;
}

/* ---- Copy ---- */

.wo-hero__content {
	max-width: 620px;
}

.wo-hero__eyebrow {
	display: block;
	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-semibold);
	letter-spacing: var(--wo-tracking-wider);
	text-transform: uppercase;
	color: var(--wo-gold);
	margin-bottom: var(--wo-space-4);
}

/* The oversized logotype. Purple "Orbit" comes from .wo-logo__accent. */
.wo-hero__logotype {
	font-family: var(--wo-font-display);
	font-size: var(--wo-text-5xl);
	font-weight: var(--wo-weight-bold);
	line-height: 0.95;
	letter-spacing: var(--wo-tracking-tight);
	font-variation-settings: 'opsz' 144, 'SOFT' 40, 'WONK' 1;
	color: var(--wo-text);
	margin-bottom: var(--wo-space-2);
}

.wo-hero__title {
	font-family: var(--wo-font-display);
	font-size: var(--wo-text-3xl);
	font-weight: var(--wo-weight-semibold);
	line-height: var(--wo-leading-tight);
	color: var(--wo-text);
	margin-bottom: var(--wo-space-5);
	text-wrap: balance;
}

.wo-hero__text {
	font-size: var(--wo-text-md);
	line-height: var(--wo-leading-relaxed);
	color: var(--wo-text-muted);
	max-width: 52ch;
	margin-bottom: var(--wo-space-8);
}

.wo-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wo-space-3);
}

/* ---- Media panel ---- */

.wo-hero__media {
	position: relative;
	border-radius: var(--wo-radius-xl) 0 0 var(--wo-radius-xl);
	overflow: hidden;
	background: var(--wo-grad-hero);
	box-shadow: var(--wo-shadow-lg);
	min-height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wo-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Placeholder shown until hero.jpg is uploaded. */
.wo-hero__placeholder {
	padding: var(--wo-space-10);
	text-align: center;
}

.wo-hero__placeholder-title {
	font-family: var(--wo-font-display);
	font-size: var(--wo-text-xl);
	color: rgba(255, 255, 255, 0.90);
	margin-bottom: var(--wo-space-2);
}

.wo-hero__placeholder-hint {
	font-size: var(--wo-text-xs);
	color: rgba(255, 255, 255, 0.55);
}

/* Slow drifting glow inside the panel. */
.wo-hero__media::after {
	content: '';
	position: absolute;
	inset: -30%;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.10), transparent 55%);
	animation: wo-drift 18s var(--wo-ease) infinite alternate;
	pointer-events: none;
}

@keyframes wo-drift {
	from { transform: translate(-4%, -3%); }
	to   { transform: translate(4%, 3%); }
}

@media (prefers-reduced-motion: reduce) {
	.wo-hero__media::after {
		animation: none;
	}
}


/* ==================================================================
   2. TRUST BAR
   ================================================================== */

.wo-trust {
	padding-block: var(--wo-space-8);
	background: rgba(255, 255, 255, 0.03);
	border-block: 1px solid var(--wo-line-faint);
}

.wo-trust__item {
	display: flex;
	align-items: center;
	gap: var(--wo-space-4);
}

.wo-trust__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	width: 42px;
	height: 42px;

	color: var(--wo-primary-hover);
	background: var(--wo-primary-soft);
	border: 1px solid var(--wo-primary-line);
	border-radius: var(--wo-radius-sm);
}

.wo-trust__icon svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wo-trust__title {
	font-family: var(--wo-font-body);
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
	line-height: 1.3;
	margin-bottom: 2px;
}

.wo-trust__text {
	font-size: var(--wo-text-xs);
	color: var(--wo-text-dim);
	line-height: 1.4;
	margin: 0;
}


/* ==================================================================
   3. SHOP BY FRAGRANCE
   ================================================================== */

.wo-categories {
	position: relative;
}

.wo-category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wo-space-4);

	padding: var(--wo-space-8) var(--wo-space-4);
	min-height: 160px;

	text-align: center;
	text-decoration: none;

	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-md);

	transition:
		background var(--wo-transition),
		border-color var(--wo-transition),
		transform var(--wo-transition),
		box-shadow var(--wo-transition);
}

.wo-category-card:hover {
	background: var(--wo-primary-soft);
	border-color: var(--wo-primary-line);
	transform: translateY(-4px);
	box-shadow: var(--wo-shadow);
}

/* Circular letter avatar */
.wo-category-card__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 62px;
	height: 62px;

	font-family: var(--wo-font-display);
	font-size: var(--wo-text-xl);
	font-weight: var(--wo-weight-semibold);
	font-variation-settings: 'opsz' 40, 'WONK' 1;
	color: var(--wo-text);

	background: linear-gradient(150deg, var(--wo-nebula-2), var(--wo-nebula-1));
	border-radius: var(--wo-radius-circle);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);

	transition: transform var(--wo-transition);
}

.wo-category-card:hover .wo-category-card__avatar {
	transform: scale(1.07);
}

.wo-category-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wo-radius-circle);
}

.wo-category-card__name {
	font-family: var(--wo-font-display);
	font-size: var(--wo-text-md);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
	line-height: 1.2;
}

.wo-category-card__count {
	font-size: var(--wo-text-xs);
	color: var(--wo-text-dim);
}


/* ==================================================================
   4. BESTSELLERS CAROUSEL
   ================================================================== */

.wo-carousel {
	position: relative;
}

.wo-carousel__head {
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* Wraps the track so the arrows can be centred against the cards. */
.wo-carousel__viewport {
	position: relative;
}

.wo-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;
	padding: 0;

	color: var(--wo-text);
	background: rgba(20, 14, 42, 0.72);
	border: 1px solid var(--wo-line-strong);
	border-radius: var(--wo-radius-circle);
	box-shadow: var(--wo-shadow);

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	cursor: pointer;
	transition:
		background var(--wo-transition),
		border-color var(--wo-transition),
		opacity var(--wo-transition);
}

.wo-carousel__arrow:hover {
	background: var(--wo-primary);
	border-color: var(--wo-primary);
}

.wo-carousel__arrow:focus-visible {
	outline: none;
	box-shadow: var(--wo-ring);
}

.wo-carousel__arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

.wo-carousel__arrow svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Inside the edges on small screens so nothing is clipped. */
.wo-carousel__arrow--prev { left: 6px; }
.wo-carousel__arrow--next { right: 6px; }

/* Hidden when every card already fits. */
.wo-carousel.is-static .wo-carousel__arrow {
	display: none;
}

/* The track scrolls natively and snaps. The arrows just call
   scrollBy() - no layout maths, no library, works with touch,
   trackpad and keyboard for free. */
.wo-carousel__track {
	display: flex;
	gap: var(--wo-gap);

	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;

	/* Room for the card hover lift and glow. */
	padding-block: var(--wo-space-2) var(--wo-space-6);
}

.wo-carousel__track::-webkit-scrollbar {
	display: none;
}

/* Bleed to the screen edge so cards look like they continue. */
.wo-carousel__track--bleed {
	margin-inline: calc(var(--wo-gutter) * -1);
	padding-inline: var(--wo-gutter);
}

/* One card per view on mobile; the width is overridden per
   breakpoint in 12-responsive.css. */
.wo-carousel__item {
	flex: 0 0 auto;
	width: min(78vw, 300px);
	scroll-snap-align: start;
}

/* Progress dots for touch users. */
.wo-carousel__dots {
	display: flex;
	justify-content: center;
	gap: var(--wo-space-2);
	margin-top: var(--wo-space-5);
}

.wo-carousel__dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;

	/* Overrides the 44px touch-target minimum from 02-base.css,
	   which was stretching these into tall bars on phones. */
	min-width: 7px;
	min-height: 7px;

	padding: 0;
	background: var(--wo-line-strong);
	border: none;
	border-radius: var(--wo-radius-circle);
	cursor: pointer;
	transition: background var(--wo-transition), transform var(--wo-transition);
}

.wo-carousel__dot.is-active {
	background: var(--wo-primary);
	transform: scale(1.35);
}


/* ==================================================================
   5. WHY WAXORBIT
   ================================================================== */

.wo-features {
	position: relative;
	padding-block: var(--wo-section-y);
}

/* The inner grid doubles as the container, since the section is no
   longer full-bleed - the media panel is a rounded card now. */
.wo-features__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;

	width: min(100%, calc(var(--wo-container-wide) + (var(--wo-gutter) * 2)));
	margin-inline: auto;
	padding-inline: var(--wo-gutter);
}

.wo-features__content {
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wo-features__copy {
	width: 100%;
	max-width: 620px;
	margin-left: 0;
}

.wo-features__list {
	display: flex;
	flex-direction: column;
	gap: var(--wo-space-6);
	margin-top: var(--wo-space-8);
	list-style: none;
	padding: 0;
}

.wo-feature {
	display: flex;
	align-items: flex-start;
	gap: var(--wo-space-5);
}

.wo-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	width: 44px;
	height: 44px;

	color: var(--wo-primary-hover);
	background: var(--wo-primary-soft);
	border: 1px solid var(--wo-primary-line);
	border-radius: var(--wo-radius-sm);
}

.wo-feature__icon svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wo-feature__title {
	font-family: var(--wo-font-body);
	font-size: var(--wo-text-md);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
	line-height: 1.3;
	margin-bottom: var(--wo-space-2);
}

.wo-feature__text {
	font-size: var(--wo-text-base);
	line-height: var(--wo-leading-normal);
	color: var(--wo-text-muted);
	margin: 0;
}

/* ---- Media panel ----
   The container takes its height from the image rather than the
   other way round. That is what removes both the crop and the empty
   space below it: no fixed height, no cover, no absolute
   positioning. Any aspect ratio fits. */

.wo-features__media {
	position: relative;
	min-height: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: clamp(1.25rem, 2.5vw, 2rem);
	overflow: hidden;

	box-shadow:
		0 24px 60px rgba(6, 3, 20, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.wo-features__media img {
	position: static;
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: inherit;
}

/* Placeholder needs its own height, since there is no image to
   supply one. */
.wo-features__placeholder {
	position: relative;
	width: 100%;
	min-height: clamp(260px, 42vw, 420px);

	display: grid;
	place-items: center;
	text-align: center;
	padding: var(--wo-space-8);

	background: var(--wo-grad-hero);
}

.wo-features__placeholder-title {
	font-family: var(--wo-font-display);
	font-size: var(--wo-text-lg);
	color: rgba(255, 255, 255, 0.90);
	margin-bottom: var(--wo-space-2);
}

.wo-features__placeholder-hint {
	font-size: var(--wo-text-xs);
	color: rgba(255, 255, 255, 0.55);
}


/* ==================================================================
   6. TESTIMONIALS
   ================================================================== */

.wo-testimonials {
	position: relative;
}

.wo-testimonial {
	display: flex;
	flex-direction: column;
	gap: var(--wo-space-4);

	padding: var(--wo-space-8) var(--wo-space-6);
	height: 100%;

	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-md);

	transition: border-color var(--wo-transition), transform var(--wo-transition), background var(--wo-transition);
}

.wo-testimonial:hover {
	background: rgba(255, 255, 255, 0.055);
	border-color: var(--wo-primary-line);
	transform: translateY(-3px);
}

.wo-testimonial__stars {
	display: flex;
	gap: 3px;
	color: var(--wo-star);
	font-size: var(--wo-text-sm);
	line-height: 1;
}

.wo-testimonial__quote {
	font-size: var(--wo-text-base);
	line-height: var(--wo-leading-normal);
	color: var(--wo-text);
	margin: 0;
	flex: 1 1 auto;
}

.wo-testimonial__author {
	font-size: var(--wo-text-sm);
	color: var(--wo-text-dim);
	margin: 0;
}

/* Testimonial cards vary in text length; equal height keeps the row
   tidy without forcing a fixed min-height. */
.wo-testimonials .wo-grid > * {
	display: flex;
}


/* ==================================================================
   SHARED HOMEPAGE PIECES
   ================================================================== */

/* Section that needs a soft vignette behind it. */
.wo-section--glow::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 60% at 50% 40%, rgba(124, 92, 255, 0.10), transparent 70%);
	pointer-events: none;
	z-index: 0;
}

/* Centred call to action strip. */
.wo-cta-strip {
	text-align: center;
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.wo-cta-strip__title {
	font-size: var(--wo-text-3xl);
	margin-bottom: var(--wo-space-4);
}

.wo-cta-strip__text {
	font-size: var(--wo-text-md);
	color: var(--wo-text-muted);
	max-width: 54ch;
	margin: 0 auto var(--wo-space-8);
}


/* ------------------------------------------------------------------
   SCROLL REVEAL
   Elements fade up as they enter the viewport. main.js adds
   .is-visible via IntersectionObserver. If JS fails the content
   still shows, because the observer sets the class - the base state
   only applies when .wo-reveal is present AND JS has initialised.
   ------------------------------------------------------------------ */

.js .wo-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--wo-duration-slow) var(--wo-ease-out),
		transform var(--wo-duration-slow) var(--wo-ease-out);
}

.js .wo-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Staggered children */
.js .wo-reveal--stagger > * {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity var(--wo-duration-slow) var(--wo-ease-out),
		transform var(--wo-duration-slow) var(--wo-ease-out);
}

.js .wo-reveal--stagger.is-visible > * {
	opacity: 1;
	transform: translateY(0);
}

.js .wo-reveal--stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.js .wo-reveal--stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
.js .wo-reveal--stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
.js .wo-reveal--stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
.js .wo-reveal--stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
.js .wo-reveal--stagger.is-visible > *:nth-child(6) { transition-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
	.js .wo-reveal,
	.js .wo-reveal--stagger > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}