/*
 * Hudratt - home.css (front page only).
 * Hero sticky (200vh), spotlight, ritual (bento), reviews. Shared components stay in main.css.
 * Single breakpoint like the reference: max-width 768px. Mobile-first below.
 */

/* ==========================================================================
   Hero: sticky stage + two screens
   ========================================================================== */
.hd-hero {
	position: relative;
	overflow-x: clip;
	/* Mobile: the headline, label and tube sit above the centre (half of this value), clear of the strip.
	   Desktop resets it to 0. The stage and the intro screen both use it, so the tube stays behind the title. */
	--hd-hero-lift: 26svh;
	--hd-hero-tube-h: 50svh;
	--hd-spot-card-w: 78vw;
	--hd-spot-card-h: min(92vw, 52svh);
}

.hd-hero__stage {
	display: none;
}

.hd-hero__screen {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
}

/* Scroll-linked mode: only with JS and without reduced motion. Otherwise the
   product sits inside the spotlight card (see .hd-spot__landed). */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.hd-hero__screen--intro {
		height: 100vh;
		height: 100svh;
	}

	.hd-hero__stage {
		position: sticky;
		top: 0;
		z-index: 10;
		display: grid;
		place-items: center;
		height: 100vh;
		height: 100svh;
		padding-bottom: var(--hd-hero-lift);
		pointer-events: none;
	}

	/* Pulled up over the stage (a negative margin on the stage would extend its sticky range). */
	.hd-hero__screen--intro {
		margin-top: -100vh;
		margin-top: -100svh;
	}

	/* The stage tube lands in the card as the hero product, so that variant keeps no tube of its own.
	   The other flavour shows its own tube while the stage tube fades out (home.js). */
	.hd-spot__landed--hero {
		display: none;
	}
}

.hd-hero__product {
	position: relative;
	display: grid;
	place-items: center;
	height: var(--hd-hero-tube-h);
	aspect-ratio: 270 / 871;
	transform-origin: 50% 50%;
}

.hd-hero__tube {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	width: 100%;
	height: 100%;
	translate: -50% 0;
	transform: rotate(6deg) scale(1.1);
	transition: opacity var(--hd-dur-fast) var(--hd-ease-out);
	will-change: transform;
}

.hd-hero__tube-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.hd-hero__glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300%;
	aspect-ratio: 1;
	translate: -50% -50%;
	background: radial-gradient(circle, rgb(var(--hd-accent-rgb) / 0.4) 0%, rgb(var(--hd-accent-rgb) / 0) 62%);
	border-radius: 50%;
}

/* Intro screen */
.hd-hero__screen--intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 4vw var(--hd-hero-lift);
	text-align: center;
}

.hd-hero__title {
	font-size: 10.4vw;
	line-height: 1;
}

.hd-hero__line {
	position: relative;
	display: block;
}

.hd-hero__line--back {
	z-index: 1;
}


/* "más": the loader's ink-to-aqua gradient (keyframes hd-gradient-shift live in main.css); no outline, no blend. */
.hd-hero__title .hd-split__item--accent {
	color: transparent;
	background: linear-gradient(90deg, var(--hd-ink), var(--hd-accent), var(--hd-ink));
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	animation: hd-gradient-shift 2s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
	.hd-hero__title .hd-split__item--accent {
		background-size: 100% 100%;
		animation: none;
	}
}

.hd-hero__title .hd-split__item--accent::before {
	content: none;
}

/* Both lines sit over the tube. The front line must not create a stacking context, so its words compete
   with the sticky stage; the back line already is one (home.js moves it), so the line itself is raised.
   home.js adds a white copy of each line (.hd-hero__line-over) clipped to the tube silhouette, so exactly
   the part of each letter over the tube is white. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.hd-hero__line--front .hd-split__word {
		position: relative;
		z-index: 20;
	}

	.hd-hero__line--back {
		z-index: 20;
	}

	.hd-hero__line-over {
		position: absolute;
		inset: 0;
		z-index: 21;
		color: var(--hd-on-dark);
		pointer-events: none;
		clip-path: inset(100%);
	}

	.hd-hero__line-over > .hd-split {
		display: inline-block;
	}

	.hd-hero__line-over .hd-split__item--accent {
		color: var(--hd-on-dark);
		background: none;
		animation: none;
	}

	/* Intro after the loader: line 1 from the left, line 2 from the right, then the tube from below and,
	   last, the label: a centred square with the drop pops in, unfolds into the capsule while the drop
	   slides to its place, and the text appears. Fill "backwards" only, so no transform (stacking context)
	   is left once each animation ends. home.js adds .is-intro-skip when the page opens already scrolled,
	   and sets --hd-label-sq (label height) and --hd-drop-shift (drop offset to the centre). */
	.hd-hero {
		--hd-intro-start: 0.5s; /* the loader is gone (main.css .hd-loader) */
		--hd-intro-step: 1s;
		--hd-intro-dur: 0.9s;
		--hd-intro-tube-dur: 1.1s;
		--hd-intro-label-start: calc(var(--hd-intro-start) + 2 * var(--hd-intro-step) + var(--hd-intro-tube-dur));
		--hd-intro-pop-dur: 0.35s;
		--hd-intro-unfold-dur: 0.6s;
		--hd-intro-text-dur: 0.4s;
	}

	.hd-hero__label {
		animation: hd-label-pop var(--hd-intro-pop-dur) var(--hd-ease-out) var(--hd-intro-label-start) backwards;
	}

	.hd-hero__label::before {
		animation: hd-label-unfold var(--hd-intro-unfold-dur) var(--hd-ease-out) calc(var(--hd-intro-label-start) + var(--hd-intro-pop-dur)) backwards;
	}

	.hd-hero__label-drop {
		animation: hd-label-drop var(--hd-intro-unfold-dur) var(--hd-ease-out) calc(var(--hd-intro-label-start) + var(--hd-intro-pop-dur)) backwards;
	}

	.hd-hero__label > span {
		animation: hd-label-text var(--hd-intro-text-dur) var(--hd-ease-out) calc(var(--hd-intro-label-start) + var(--hd-intro-pop-dur) + var(--hd-intro-unfold-dur)) backwards;
	}

	.hd-hero__line > .hd-split {
		display: inline-block;
	}

	.hd-hero__line--back > .hd-split {
		animation: hd-hero-in-left var(--hd-intro-dur) var(--hd-ease-out) var(--hd-intro-start) backwards;
	}

	.hd-hero__line--front > .hd-split {
		animation: hd-hero-in-right var(--hd-intro-dur) var(--hd-ease-out) calc(var(--hd-intro-start) + var(--hd-intro-step)) backwards;
	}

	.hd-hero__product {
		animation: hd-hero-in-up var(--hd-intro-tube-dur) var(--hd-ease-out) calc(var(--hd-intro-start) + 2 * var(--hd-intro-step)) backwards;
	}

	.hd-hero.is-intro-skip :is(.hd-hero__line > .hd-split, .hd-hero__product, .hd-hero__label, .hd-hero__label-drop, .hd-hero__label > span),
	.hd-hero.is-intro-skip .hd-hero__label::before {
		animation: none;
	}
}

@keyframes hd-label-pop {
	from {
		opacity: 0;
		transform: scale(0.4);
	}
}

/* Without the variables (no JS yet) the square falls back to the full capsule. */
@keyframes hd-label-unfold {
	from {
		right: calc(50% - var(--hd-label-sq, 100%) / 2);
		left: calc(50% - var(--hd-label-sq, 100%) / 2);
	}
}

@keyframes hd-label-drop {
	from {
		transform: translate3d(var(--hd-drop-shift, 0), 0, 0);
	}
}

@keyframes hd-label-text {
	from {
		opacity: 0;
		transform: translate3d(-0.5rem, 0, 0);
	}
}

@keyframes hd-hero-in-left {
	from {
		opacity: 0;
		transform: translate3d(-60vw, 0, 0);
	}
}

@keyframes hd-hero-in-right {
	from {
		opacity: 0;
		transform: translate3d(60vw, 0, 0);
	}
}

@keyframes hd-hero-in-up {
	from {
		opacity: 0;
		transform: translate3d(0, 80svh, 0);
	}
}

/* Label and pillars strip dressed as the tube body (proposal 04 "Cuerpo negro", docs/propuesta-ribbons-hero.html):
   dark surface, logo drop, light text. The translucent white 1px edge keeps the label apart from the
   tube when it crosses it (no coloured borders: CLAUDE.md). White text on dark 17.22:1. */
.hd-hero__label {
	position: relative;
	z-index: 20;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	max-width: 88vw;
	margin: 5svh 0 0;
	padding: 0.5rem 1rem 0.5rem 0.625rem;
	font-size: var(--hd-fs-label);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--hd-on-dark);
}

/* The capsule is drawn by ::before so the intro can unfold it from a centred square (home.css intro). */
.hd-hero__label::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	background: var(--hd-dark);
	border: 1px solid rgb(255 255 255 / 0.35);
	border-radius: var(--hd-radius);
}

.hd-hero__label-drop {
	flex: none;
	width: auto;
	height: 1.5em;
}

.hd-hero__strip {
	position: absolute;
	right: 1rem;
	bottom: calc(var(--hd-fab-size) + var(--hd-scrolltop-size) + 3.25rem);
	left: 1rem;
	z-index: 1;
}

/* Whole words, never hyphenated: the cells share the width when they fit and the strip scrolls sideways
   inside its own box when they don't (mobile, tablet). home.js adds .is-scrollable in that case: the fade
   on the right invites the swipe and the end padding lets the last cell clear it. */
.hd-hero__strip .hd-strip {
	--hd-strip-fade: 15%;
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--hd-radius);
}

.hd-hero__strip .hd-strip.is-scrollable {
	padding-inline-end: var(--hd-strip-fade);
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--hd-strip-fade)), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - var(--hd-strip-fade)), transparent);
}

.hd-hero__strip .hd-strip::-webkit-scrollbar {
	display: none;
}

.hd-hero__strip .hd-strip__item {
	flex: 1 0 auto;
	flex-direction: column;
	gap: 0.25rem;
	min-height: 3.5rem;
	padding: 0.5rem 0.875rem;
	font-size: var(--hd-fs-label);
	letter-spacing: 0.04em;
	white-space: nowrap;
	margin-left: 0;
	color: var(--hd-on-dark);
	background: var(--hd-dark);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-color: var(--hd-dark);
	border-radius: 0;
	box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.22);
	scroll-snap-align: start;
}

.hd-hero__strip .hd-strip__item svg {
	color: var(--hd-accent);
}

.hd-hero__strip .hd-strip__item:first-child {
	border-radius: var(--hd-radius) 0 0 var(--hd-radius);
	box-shadow: none;
}

.hd-hero__strip .hd-strip__item:last-child {
	border-radius: 0 var(--hd-radius) var(--hd-radius) 0;
}

/* Mobile ticker (home.js adds .is-ticker and clones the cells): the strip slides on its own, both
   copies side by side, and moves half its width per loop. Paused while touched or hovered. */
.hd-hero__strip.is-ticker {
	overflow: hidden;
	border-radius: var(--hd-radius);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hd-hero__strip.is-ticker .hd-strip {
	width: max-content;
	overflow: visible;
	padding: 0;
	-webkit-mask-image: none;
	mask-image: none;
	scroll-snap-type: none;
	border-radius: 0;
	animation: hd-strip-ticker 18s linear infinite;
}

.hd-hero__strip.is-ticker:hover .hd-strip,
.hd-hero__strip.is-ticker:active .hd-strip {
	animation-play-state: paused;
}

.hd-hero__strip.is-ticker .hd-strip__item,
.hd-hero__strip.is-ticker .hd-strip__item:first-child,
.hd-hero__strip.is-ticker .hd-strip__item:last-child {
	flex: none;
	border-radius: 0;
	box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.22);
}

@keyframes hd-strip-ticker {
	to {
		transform: translateX(-50%);
	}
}

/* ==========================================================================
   Spotlight: compact product info | card | buy box
   ========================================================================== */
.hd-hero__screen.hd-spot {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	align-items: center;
	min-height: 0;
	padding: 2.5rem 6vw 4.5rem;
}

/* ==========================================================================
   What it is + ritual (bento): title and text, three photo steps with their text
   inside the photo, and a black "how to use" bar
   ========================================================================== */
.hd-bento {
	display: flex;
	flex-direction: column;
	gap: var(--hd-gap-md);
	padding: var(--hd-section-y) var(--hd-gutter);
}

.hd-bento__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hd-gap-sm);
	margin-bottom: var(--hd-gap-md);
	text-align: center;
}

.hd-bento__text {
	max-width: 44rem;
	font-size: var(--hd-fs-body);
	text-wrap: balance;
}

.hd-bento__steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--hd-gap-md) var(--hd-gap-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The card is the photo; the text sits inside it, over a dark gradient. */
.hd-bento__step {
	position: relative;
	min-width: 0;
	overflow: hidden;
	background: var(--hd-surface-solid);
	border: var(--hd-border);
	border-radius: var(--hd-radius);
}

.hd-bento__media {
	display: block;
	aspect-ratio: 1;
	color: var(--hd-ink);
}

.hd-bento__media:focus-visible {
	outline: 2px solid var(--hd-on-dark);
	outline-offset: -4px;
}

.hd-bento__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--hd-dur-med) var(--hd-ease-out);
}

.hd-bento__step:hover .hd-bento__photo,
a.hd-bento__media:focus-visible .hd-bento__photo {
	transform: scale(1.04);
}

.hd-bento__over {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 3.5rem 1.25rem 1.25rem;
	color: var(--hd-on-dark);
	background: linear-gradient(0deg, rgb(0 0 0 / 0.82), rgb(0 0 0 / 0.55) 55%, rgb(0 0 0 / 0));
	pointer-events: none; /* the photo underneath is the link */
}

.hd-bento__num {
	color: rgb(255 255 255 / 0.8);
}

.hd-bento__word {
	margin: 0;
	font-size: clamp(1.25rem, 2.1vw, 2rem);
	color: var(--hd-on-dark);
}

.hd-bento__line {
	font-size: var(--hd-fs-body);
	color: rgb(255 255 255 / 0.92);
}

/* Marker band under the accent word, deeper celeste on the dark gradient. */
.hd-bento__word .hd-split__item--accent {
	position: relative;
	isolation: isolate;
	color: var(--hd-on-dark);
	background: none;
}

.hd-bento__word .hd-split__item--accent::before {
	position: absolute;
	inset: 58% 0 6%;
	z-index: -1;
	content: "";
	background: var(--hd-accent-deep);
}

.hd-bento__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding: 1.25rem 1.5rem;
	color: var(--hd-on-dark);
	background: var(--hd-dark);
	border-radius: var(--hd-radius);
}

.hd-bento__use {
	display: flex;
	flex: 1 1 24rem;
	flex-direction: column;
	gap: 0.4rem;
}

.hd-bento__use .hd-label {
	color: rgb(255 255 255 / 0.7);
}

.hd-bento__use-text {
	max-width: 46rem;
	font-size: var(--hd-fs-body);
}

@media (min-width: 769px) {
	.hd-bento {
		padding: 20vh var(--hd-gutter) 10vh;
	}

	.hd-bento__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hd-bento__media {
		aspect-ratio: 4 / 5;
	}
}

/* ==========================================================================
   Reviews (testimonial cards in the carousel + the shared "Ver más" dialog)
   ========================================================================== */
.hd-review__toggle {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	margin-top: 0.25rem;
	font-size: var(--hd-fs-small);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
	list-style: none;
}

.hd-review__toggle::-webkit-details-marker {
	display: none;
}

.hd-review__toggle:focus-visible {
	outline: 2px solid var(--hd-ink);
	outline-offset: 2px;
}

/* Without JS the details open in place: the full text replaces the excerpt. */
.hd-review:has(.hd-review__more[open]) .hd-review__excerpt,
.hd-review__more[open] .hd-review__toggle {
	display: none;
}

.hd-review__full p {
	margin: 0 0 0.75rem;
}

.hd-review__author {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}

.hd-review__source {
	display: block;
	flex: none;
	width: 1.75rem;
	height: auto;
}

.hd-review__source-link {
	display: inline-flex;
	flex: none;
	padding: 0.5rem;
	margin: -0.5rem;
	border-radius: var(--hd-radius);
	transition: background-color var(--hd-dur-fast) ease;
}

.hd-review__source-link:hover,
.hd-review__source-link:focus-visible {
	background: rgb(27 27 27 / 0.08);
}

.hd-review__source-link:focus-visible {
	outline: 2px solid var(--hd-ink);
	outline-offset: 2px;
}

.hd-review-dialog {
	width: min(40rem, calc(100vw - 2rem));
	max-height: min(85svh, 48rem);
	padding: 0;
	color: var(--hd-ink);
	background: var(--hd-surface-solid);
	border: var(--hd-border);
	border-radius: var(--hd-radius);
}

.hd-review-dialog::backdrop {
	background: rgb(27 27 27 / 0.6);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.hd-review-dialog[open] {
	animation: hd-review-in var(--hd-dur-med) var(--hd-ease-out);
}

.hd-review-dialog__inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-height: inherit;
	padding: clamp(1.25rem, 3vw, 2rem);
}

.hd-review-dialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.hd-review-dialog__body {
	overflow-y: auto;
	font-size: var(--hd-fs-body);
	overscroll-behavior: contain;
}

.hd-review-dialog__body p {
	margin: 0 0 0.85rem;
}

.hd-review-dialog__author {
	padding-top: 1rem;
	border-top: 1px solid rgb(27 27 27 / 0.15);
}

@keyframes hd-review-in {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hd-review-dialog[open] {
		animation: none;
	}
}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 769px) {
	.hd-hero {
		--hd-hero-lift: 0;
		--hd-hero-tube-h: 66svh;
		--hd-spot-card-w: 24vw;
		--hd-spot-card-h: 56svh;
	}

	.hd-hero__title {
		font-size: clamp(2.5rem, 8.4vw, 9rem);
		line-height: 0.98;
	}

	.hd-hero__label {
		max-width: 60vw;
		padding: 0.5625rem 1.25rem 0.5625rem 0.75rem;
		letter-spacing: 0.1em;
		font-size: clamp(0.8125rem, 1.15vw, 1.25rem);
	}

	.hd-hero__strip {
		right: var(--hd-gutter);
		bottom: 2.5svh;
		left: var(--hd-gutter);
	}

	.hd-hero__strip .hd-strip__item {
		flex: 1 0 auto;
		flex-direction: row;
		gap: 0.5rem;
		min-height: clamp(3.5rem, 7.5vh, 5rem);
		padding: 0.5rem 1rem;
		font-size: var(--hd-fs-label);
		letter-spacing: 0.12em;
	}

	/* Spotlight: info | card | buy box in a compact band */
	.hd-hero__screen.hd-spot {
		grid-template-columns: minmax(0, 1fr) var(--hd-spot-card-w) minmax(0, 1.35fr);
		column-gap: 2.5vw;
		padding: 5svh 10vw clamp(4rem, 10vh, 8rem);
	}

	/* Small tablets: the side margins give room to the buy box so its button and packs fit. */
	@media (max-width: 1023.98px) {
		.hd-hero__screen.hd-spot {
			padding-inline: 5vw;
		}
	}

	.hd-spot__info {
		text-align: right;
	}

	.hd-spot__stack {
		justify-items: end;
	}

	.hd-spot__chips {
		justify-content: flex-end;
	}

	.hd-spot__box {
		padding: 1.25rem 1.5rem;
	}

	/* The buy box is as tall as the photo card: the row takes the taller of the two (the card's own
	   height is its minimum) and the box spreads its content evenly over that height. */
	.hd-hero__screen.hd-spot {
		align-items: stretch;
	}

	.hd-hero__screen.hd-spot .hd-spot__info {
		align-self: center;
	}

	.hd-hero__screen.hd-spot .hd-spot__card {
		height: auto;
		min-height: var(--hd-spot-card-h);
	}

	.hd-hero__screen.hd-spot .hd-spot__box {
		justify-content: space-between;
	}

	.hd-hero__screen.hd-spot .hd-spot__form {
		flex: 1;
		justify-content: space-between;
	}
}

/* ==========================================================================
   Reduced motion: no scroll-linked will-change
   ========================================================================== */
/* ==========================================================================
   Manifesto: fixed tablets that rise with the scroll at different moments (Home only).
   Layout (position, size, angle) is static; home.js only moves them in Y.
   ========================================================================== */
.hd-manifesto--tablets {
	position: relative;
	overflow: hidden;
	padding-block: 22vw;
}

@media (min-width: 769px) {
	.hd-manifesto--tablets {
		min-height: 60vh;
		min-height: 60svh;
		padding-block: var(--hd-section-y);
	}
}

.hd-manifesto__cta {
	margin-top: 0.5rem;
}

.hd-manifesto--tablets .hd-manifesto__inner {
	position: relative;
	z-index: 1;
}

.hd-manifesto__tablets {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.hd-tablet {
	position: absolute;
	width: calc(var(--hd-tablet-size, 4) * 1rem);
	max-width: none;
	height: auto;
	filter: brightness(0.8) blur(var(--hd-tablet-blur, 0px));
}

.hd-tablet:nth-child(n + 8) {
	display: none;
}

.hd-tablet:nth-child(1) {
	top: 96%;
	left: 4%;
	--hd-tablet-size: 5.5;
	--hd-tablet-blur: 0px;
	rotate: -18deg;
}

.hd-tablet:nth-child(2) {
	top: 99%;
	left: 14%;
	--hd-tablet-size: 8.5;
	--hd-tablet-blur: 0px;
	rotate: 12deg;
}

.hd-tablet:nth-child(3) {
	top: 94%;
	left: 27%;
	--hd-tablet-size: 4;
	--hd-tablet-blur: 1.5px;
	rotate: 30deg;
}

.hd-tablet:nth-child(4) {
	top: 101%;
	left: 37%;
	--hd-tablet-size: 7;
	--hd-tablet-blur: 0px;
	rotate: -25deg;
}

.hd-tablet:nth-child(5) {
	top: 97%;
	left: 48%;
	--hd-tablet-size: 3.5;
	--hd-tablet-blur: 2px;
	rotate: 8deg;
}

.hd-tablet:nth-child(6) {
	top: 100%;
	left: 58%;
	--hd-tablet-size: 9;
	--hd-tablet-blur: 0px;
	rotate: 20deg;
}

.hd-tablet:nth-child(7) {
	top: 95%;
	left: 68%;
	--hd-tablet-size: 4.5;
	--hd-tablet-blur: 1.5px;
	rotate: -12deg;
}

.hd-tablet:nth-child(8) {
	top: 98%;
	left: 76%;
	--hd-tablet-size: 6.5;
	--hd-tablet-blur: 0px;
	rotate: 35deg;
}

.hd-tablet:nth-child(9) {
	top: 102%;
	left: 86%;
	--hd-tablet-size: 5;
	--hd-tablet-blur: 0px;
	rotate: -30deg;
}

.hd-tablet:nth-child(10) {
	top: 93%;
	left: 92%;
	--hd-tablet-size: 3.5;
	--hd-tablet-blur: 2px;
	rotate: 15deg;
}

.hd-tablet:nth-child(11) {
	top: 100%;
	left: 20%;
	--hd-tablet-size: 5;
	--hd-tablet-blur: 0px;
	rotate: -8deg;
}

.hd-tablet:nth-child(12) {
	top: 96%;
	left: 63%;
	--hd-tablet-size: 3.2;
	--hd-tablet-blur: 2px;
	rotate: 22deg;
}

.hd-tablet:nth-child(13) {
	top: 99%;
	left: 82%;
	--hd-tablet-size: 4;
	--hd-tablet-blur: 1.5px;
	rotate: -20deg;
}

@media (min-width: 769px) {
	.hd-tablet:nth-child(n + 8) {
		display: block;
	}
}

@media (max-width: 768px) {
	.hd-tablet {
		width: calc(var(--hd-tablet-size, 4) * 0.62rem);
	}
}

.hd-manifesto__tablets.is-parallax .hd-tablet {
	will-change: transform;
}


@media (prefers-reduced-motion: reduce) {
	.hd-hero__tube {
		will-change: auto;
	}

	.hd-bento__photo {
		transition: none;
	}
}

/* Static product highlights: photos fill the media box */
.hd-product-card--promo .hd-product-card__media img {
	object-fit: cover;
}