/* Homepage hero slider: the artwork slide plus product slides that crossfade
   with a slow zoom. The slider keeps the artwork's proportions (wordpress.css). */

.hero-slider { container-type: inline-size; }

.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.hero-slide.is-active { z-index: 1; opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; }
.hero-slide-media { position: absolute; inset: 0; transform: scale(1.06); transition: transform 7s cubic-bezier(.2, .6, .2, 1); }
.hero-slide.is-active .hero-slide-media { transform: none; }

/* Pieces that rise into place when their slide becomes active */
.hero-word,
.hero-product,
.hero-caption,
.hero-slide .hero-ctas { opacity: 0; translate: 0 24px; transition: opacity .8s ease, translate .9s cubic-bezier(.2, .7, .2, 1); }
.hero-slide.is-active .hero-word,
.hero-slide.is-active .hero-product,
.hero-slide.is-active .hero-caption,
.hero-slide.is-active .hero-ctas { opacity: 1; translate: none; }
.hero-slide.is-active .hero-word { transition-delay: .15s; }
.hero-slide.is-active .hero-product { transition-delay: .3s; }
.hero-slide.is-active .hero-caption { transition-delay: .45s; }
.hero-slide.is-active .hero-ctas { transition-delay: .6s; }

/* Product slides, drawn to match the artwork */
.hero-slide--product { background: radial-gradient(circle at 50% 60%, #fff 0, var(--hero-tint) 36%, var(--hero-bg) 100%); }
.hero-slide--2 { --hero-bg: #b9daf4; --hero-tint: #e4f1fc; }
.hero-slide--3 { --hero-bg: #c4d2f2; --hero-tint: #e9eefc; }
.hero-slide--4 { --hero-bg: #b7dfe9; --hero-tint: #e3f4f8; }
.hero-word { position: absolute; top: 47%; left: 50%; color: #fff; font-size: 15cqw; font-weight: 900; line-height: 1; letter-spacing: -.045em; white-space: nowrap; transform: translate(-50%, -50%); text-shadow: 0 30px 80px rgba(26, 82, 148, .12); }
.hero-product { position: absolute; top: 9%; left: 50%; width: 42%; height: 72%; transform: translateX(-50%); }
.hero-product img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 38px 33px rgba(18, 45, 76, .24)); animation: hero-bob 7s ease-in-out infinite; }
.hero-caption { position: absolute; top: 9%; left: 5%; max-width: 24%; }
.hero-caption .kicker { margin-bottom: .9cqw; font-size: max(11px, .85cqw); }
.hero-caption h2 { margin: 0; color: var(--ink); font-size: 3.1cqw; line-height: 1; letter-spacing: -.05em; }

@keyframes hero-bob { 50% { translate: 0 -1.2cqw; } }

/* Arrows, shown while pointing at the slider */
.hero-arrow { position: absolute; top: 50%; z-index: 5; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; padding: 0; background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .95); border-radius: 50%; box-shadow: 0 10px 24px rgba(20, 63, 105, .14); color: var(--ink); cursor: pointer; opacity: 0; backdrop-filter: blur(10px); transition: opacity .3s, background .2s, color .2s; }
.hero-prev { left: 24px; }
.hero-next { right: 24px; }
.hero-slider:hover .hero-arrow,
.hero-arrow:focus-visible { opacity: 1; }
.hero-arrow:hover { background: #fff; color: var(--blue); }
.hero-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Progress dots: the active one fills, then the next slide shows */
.hero-dots { position: absolute; bottom: 7%; left: 3%; z-index: 5; display: flex; gap: 8px; }
.hero-dot { position: relative; width: 34px; height: 4px; padding: 0; background: rgba(13, 30, 49, .18); border: 0; border-radius: 4px; cursor: pointer; }
.hero-dot::before { content: ""; position: absolute; inset: -10px -2px; }
.hero-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.hero-dot[aria-current="true"]::after { transform: scaleX(1); }
.hero-slider.is-playing .hero-dot[aria-current="true"]::after { animation: hero-progress var(--hero-delay, 6s) linear forwards; }
.hero-slider.is-paused .hero-dot[aria-current="true"]::after { animation-play-state: paused; }
@keyframes hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (hover: none) {
	.hero-arrow { display: none; }
}

@media (max-width: 680px) {
	.hero-caption,
	.hero-arrow { display: none; }
	.hero-product { top: 6%; width: 50%; height: 68%; }
	.hero-dots { top: 8%; right: 4%; bottom: auto; left: auto; gap: 5px; }
	.hero-dot { width: 20px; height: 3px; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-slide,
	.hero-slide-media,
	.hero-word,
	.hero-product,
	.hero-caption,
	.hero-slide .hero-ctas { transition-duration: .01s !important; transition-delay: 0s !important; }
	.hero-slide-media { transform: none; }
	.hero-product img { animation: none; }
}