/**
 * Styles for the home page
 *
 * @copyright   2026, ON1
 */

/* !- Built for Photographers */
#built-for-photographers {
	background: var(--bg-900);
	padding: 3.5rem 0;
}

[data-theme="dark"] #built-for-photographers {
	background: var(--black);
}

#built-for-photographers h1 {
	margin-bottom: 0.5rem;
}

#built-for-photographers .sub-head {
	font-size: 1.25rem;
	margin-bottom: 1.75rem;
}

#built-for-photographers .trust-boxes {
	max-width: 800px;
}

#built-for-photographers .trust-box-item {
	align-items: center;
	background: var(--bg-700);
	border-radius: 50rem;
	display: flex;
	font-size: var(--text-mini);
	gap: 0.375rem;
	justify-content: center;
	padding: 0.5rem 0.5rem;
}

#built-for-photographers .trust-box-item i.fa-solid {
	color: var(--blue-500);
	font-size: var(--text-base);
}

#built-for-photographers .trust-box-item p {
	color: var(--text-100);
}

/* !- Hero */
/* Slideshow knobs. --hero-cycle must stay at 9s x number of images or the
   keyframe percentages below stop lining up. */
#hero {
	--hero-cycle: 27s;
	--hero-drift: 2.4;
	--hero-zoom: 1.05;
	align-items: center;
	background-color: var(--bg-900);
	display: flex;
	min-height: 750px;
	overflow: hidden;
	padding: 5.5rem 0 6rem;
	position: relative;
}

@media (max-width: 991.98px) {
	#hero {
		min-height: 0;
		padding: 3rem 0 3.5rem;
	}
}

/* !- Hero slideshow background */
#hero .hero-bg {
	inset: 0;
	isolation: isolate;
	position: absolute;
	z-index: 0;
}

#hero .hero-slideshow-layer {
	animation: heroSlideFade var(--hero-cycle) linear infinite both;
	animation-play-state: paused;
	inset: 0;
	opacity: 0;
	position: absolute;
	will-change: opacity;
}

#hero .hero-slideshow-layer:nth-of-type(1) {
	animation-delay: -3s;
}

#hero .hero-slideshow-layer:nth-of-type(2) {
	animation-delay: 6s;
}

#hero .hero-slideshow-layer:nth-of-type(3) {
	animation-delay: 15s;
}

#hero .hero-slideshow-img {
	animation: var(--hero-cycle) linear infinite both;
	animation-play-state: paused;
	backface-visibility: hidden;
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	width: 100%;
	will-change: transform;
}

#hero .hero-slideshow-layer:nth-of-type(1) .hero-slideshow-img {
	animation-delay: -3s;
	animation-name: heroDriftA;
}

#hero .hero-slideshow-layer:nth-of-type(2) .hero-slideshow-img {
	animation-delay: 6s;
	animation-name: heroDriftB;
}

#hero .hero-slideshow-layer:nth-of-type(3) .hero-slideshow-img {
	animation-delay: 15s;
	animation-name: heroDriftC;
}

/* each image: fade in 3s, hold 6s, fade out 3s, then wait its turn */
@keyframes heroSlideFade {
	0% { opacity: 0; }
	11.111% { opacity: 1; }
	33.333% { opacity: 1; }
	44.444% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes heroDriftA {
	0% { transform: scale(1) translate3d(calc(-0.8% * var(--hero-drift)), calc(0.4% * var(--hero-drift)), 0); }
	44.444%,
	100% { transform: scale(var(--hero-zoom)) translate3d(calc(0.8% * var(--hero-drift)), calc(-0.4% * var(--hero-drift)), 0); }
}

@keyframes heroDriftB {
	0% { transform: scale(var(--hero-zoom)) translate3d(calc(0.7% * var(--hero-drift)), calc(-0.5% * var(--hero-drift)), 0); }
	44.444%,
	100% { transform: scale(1) translate3d(calc(-0.7% * var(--hero-drift)), calc(0.5% * var(--hero-drift)), 0); }
}

@keyframes heroDriftC {
	0% { transform: scale(1) translate3d(calc(0.5% * var(--hero-drift)), calc(0.7% * var(--hero-drift)), 0); }
	44.444%,
	100% { transform: scale(var(--hero-zoom)) translate3d(calc(-0.5% * var(--hero-drift)), calc(-0.7% * var(--hero-drift)), 0); }
}

/* Single 50% black scrim. Brand rule: overlays never stack, so this is the
   only treatment over the photos. */
#hero .hero-scrim {
	background: var(--black);
	inset: 0;
	opacity: 0.35;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

/* Bleeds the section above into the photo. The alpha drops fast and then keeps a
   long shallow tail: the tail is what hides the seam, while the fast start keeps
   the solid band small -- it reads much heavier in light, where this is white
   over a dark photo. Tracks the page theme via the unpinned --bg-900. */
#hero .hero-fade-top {
	background: linear-gradient(to bottom,
		var(--bg-900) 0%,
		color-mix(in srgb, var(--bg-900) 62%, transparent) 6%,
		color-mix(in srgb, var(--bg-900) 38%, transparent) 13%,
		color-mix(in srgb, var(--bg-900) 22%, transparent) 21%,
		color-mix(in srgb, var(--bg-900) 13%, transparent) 30%,
		color-mix(in srgb, var(--bg-900) 7%, transparent) 42%,
		color-mix(in srgb, var(--bg-900) 3%, transparent) 57%,
		color-mix(in srgb, var(--bg-900) 1%, transparent) 76%,
		transparent 100%);
	height: 240px;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
}

/* Motion opt-outs: hold the first frame, never animate, never load images 2 and 3.
   The matching JS gate lives in home.js. */
@media (prefers-reduced-motion: reduce), (max-width: 640px) {
	#hero .hero-slideshow-layer {
		animation: none !important;
		opacity: 0 !important;
	}

	#hero .hero-slideshow-layer:nth-of-type(1) {
		opacity: 1 !important;
	}

	#hero .hero-slideshow-img {
		animation: none !important;
		transform: none !important;
	}
}

/* !- Hero copy */
#hero .hero-inner {
	position: relative;
	width: 100%;
	z-index: 3;
}

#hero .eyebrow-row {
	align-items: center;
	display: flex;
	gap: 0.625rem;
	margin-bottom: 1.75rem;
}

#hero .eyebrow-icon {
	display: block;
	height: 1.875rem;
	width: 1.875rem;
}

#hero .eyebrow-text {
	color: var(--white);
	font-size: var(--text-mini);
	font-weight: 700;
	letter-spacing: 0.09em;
	opacity: 0.7;
	text-transform: uppercase;
}

#hero .hero-title {
	color: var(--white);
	font-size: var(--text-4xl);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: 0.125rem;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

#hero .hero-version {
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: heroRise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
	background: linear-gradient(100deg, var(--blue-500) 0%, var(--orange-500) 50%, var(--pink-400) 100%);
	background-clip: text;
	display: inline-block;
	filter: drop-shadow(0 4px 22px rgba(0, 0, 0, 0.4));
	font-size: 7rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 0.94;
	margin-bottom: 1.625rem;
	opacity: 0;
	transform: translateY(14px);
}

#hero .hero-tagline {
	animation: heroRise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.22s both;
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--text-lg);
	font-weight: 500;
	line-height: 1.55;
	margin-bottom: 2.25rem;
	opacity: 0;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
	transform: translateY(14px);
}

@media (max-width: 991.98px) {
	#hero .hero-version {
		font-size: 4.375rem;
	}
}

@keyframes heroRise {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* !- Hero calls to action */
/* Two equally valid self-select paths, so both are solid-filled at equal
   weight: no primary/secondary hierarchy. */
#hero .dual-cta {
	animation: heroRise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.34s both;
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	opacity: 0;
	transform: translateY(14px);
}

/* Colour, radius and font weight all come from .btn + .bg-* + .text-white.
   This only adds the two-line stack the standard button doesn't have. */
#hero .btn-path {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 206px;
	padding: 0.875rem 1.375rem;
	transition: filter 0.18s ease, transform 0.18s ease;
}

#hero .btn-path:hover {
	filter: brightness(1.06);
	transform: translateY(-2px);
}

#hero .btn-path:active {
	transform: translateY(0);
}

#hero .btn-path-tag {
	font-size: var(--text-micro);
	letter-spacing: 0.06em;
	opacity: 0.85;
	text-transform: uppercase;
}

#hero .btn-path-label {
	align-items: center;
	display: flex;
	font-size: var(--text-base);
	gap: 0.4375rem;
}

/* !- Hero device */
#hero .device-col {
	align-items: center;
	display: flex;
	flex-direction: column;
	position: relative;
}

#hero .device-glow {
	background: radial-gradient(circle, var(--blue-transparent) 0%, color-mix(in srgb, var(--legacy-purple-500) 14%, transparent) 45%, transparent 70%);
	border-radius: 50%;
	filter: blur(10px);
	height: 640px;
	position: absolute;
	width: 640px;
	z-index: 0;
}

@media (max-width: 991.98px) {
	#hero .device-glow {
		height: 420px;
		width: 420px;
	}
}

#hero .hero-device-img {
	height: auto;
	max-width: 100%;
	position: relative;
	width: 100%;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	#hero .hero-version,
	#hero .hero-tagline,
	#hero .dual-cta {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* !- Hero features */
/* Own band below the photo, on a solid surface that tracks the theme. */
#hero-features {
	background: var(--bg-800);
	padding: 2.75rem 0;
}

#hero-features .hero-feature {
	display: flex;
	gap: 0.875rem;
}

/* The scroll-in reveal is opt-in: home.js adds .js-reveal only once it has an
   IntersectionObserver to drive it. Without that the items are simply visible,
   so a JS failure can never leave this copy stuck at opacity 0. */
#hero-features.js-reveal .hero-feature {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

#hero-features.js-reveal .hero-feature.in-view {
	opacity: 1;
	transform: translateY(0);
}

#hero-features .hero-feature-icon {
	align-items: center;
	background: var(--bg-700);
	border-radius: var(--border-radius);
	display: flex;
	flex: none;
	height: 38px;
	justify-content: center;
	width: 38px;
}

#hero-features .hero-feature-icon i {
	color: var(--text-100);
	font-size: 18px;
}

#hero-features .hero-feature-title {
	color: var(--text-100);
	font-size: var(--text-sm);
	font-weight: 700;
	margin-bottom: 0.25rem;
}

#hero-features .hero-feature-copy {
	color: var(--text-300);
	font-size: var(--text-mini);
	line-height: 1.5;
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	#hero-features.js-reveal .hero-feature {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* !- Fact buckets */
#fact-buckets {
	padding: 2.5rem 0;
}

#fact-buckets .stat-num {
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background: linear-gradient(90deg, var(--teal-500) 0%, var(--blue-500) 100%);
	background-clip: text;
	font-size: 3rem;
	font-weight: 900;
	line-height: 1.1;
	margin-bottom: 0.25rem;
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
}

#fact-buckets .stat-label {
	color: var(--text-500);
	font-size: var(--text-sm);
}

@media (min-width: 768px) {
	#fact-buckets .stat-item+.stat-item {
		border-left: 1px solid var(--bg-600);
	}
}

/* !- Apps */
#apps h2 {
	color: var(--text-100);
}

#apps .section-intro {
	margin-bottom: 2rem;
}

#apps .product-cards {
	margin-bottom: 2.25rem;
}

#apps .product-cards .badge {
	font-size: var(--text-tiny);
	font-weight: 900;
	letter-spacing: 0.1em;
	position: absolute;
	right: 1rem;
	text-transform: uppercase;
	top: 1rem;
}

#apps .product-cards .list-inline {
	margin-bottom: 0;
	margin-top: auto;
}

#apps .pcard {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	padding: 2.25rem;
	position: relative;
}

#apps .pcard p:has(> img) {
	margin-bottom: 1rem;
}

#apps .pcard-name {
	color: var(--text-100);
	font-size: var(--text-2xl);
	font-weight: 700;
	margin-bottom: 0.75rem;
}

#apps .pcard-tag {
	color: var(--text-300);
	margin-bottom: 1.5rem;
}

#apps .pcard-price .fw-bolder {
	color: var(--text-50);
}

#apps .raw-product-cards .btn {
	font-size: var(--text-sm);
}

#apps .raw-product-cards .bg-hollow {
	border-color: var(--bg-400);
	color: var(--text-50);
}

#apps .raw-product-cards .featured {
	background: var(--blue-100);
	border-color: var(--blue-200);
}

#apps .individual-apps h3 {
	color: var(--text-400);
	font-size: var(--text-base);
	font-weight: 900;
	letter-spacing: 0.1em;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
}

#apps .individual-apps .product-cards {
	margin-bottom: 1.5rem;
}

#apps .individual-apps .pcard {
	padding: 1.5rem;
}

#apps .individual-apps .pcard.active {
	background: var(--bg-700);
}

#apps .individual-apps .pcard-top {
	margin-bottom: 1rem;
}

#apps .individual-apps .pcard-name {
	font-size: var(--text-xl);
	margin-bottom: 0;
}

#apps .individual-apps .pcard-tag {
	font-size: var(--text-mini);
	line-height: 1.5;
	margin-bottom: 0;
}

#apps .individual-apps .pcard-price {
	margin-bottom: 1rem;
}

#apps .individual-apps .pcard .list-inline p {
	margin: 0;
}

#apps .individual-apps .pcard .learn-more-link {
	color: var(--text-400);
	font-size: var(--text-mini);
}

[data-theme="light"] #apps .raw-product-cards .featured .pcard-name {
	color: var(--text-800);
}

[data-theme="light"] #apps .raw-product-cards .featured .pcard-tag,
[data-theme="light"] #apps .raw-product-cards .featured .pcard-price {
	color: var(--text-600);
}

[data-theme="light"] #apps .raw-product-cards .featured .pcard-price .fw-bolder {
	color: var(--text-900);
}


[data-theme="light"] #apps .raw-product-cards .featured .bg-hollow {
	color: var(--text-700);
}

/* !- How Photographers Work */
#how-photographers-work .section-intro {
	margin-bottom: 2rem;
}

#how-photographers-work .work-items-wrapper {
	margin-bottom: 2.25rem;
}

#how-photographers-work .work-items {
	background: var(--border-subtle);
	border: 1px solid var(--border-subtle);
	border-radius: var(--border-radius);
	display: grid;
	gap: 1px;
	grid-template-columns: 1fr;
	overflow: hidden;
	position: relative;
	z-index: 2;
}

@media (min-width: 768px) {
	#how-photographers-work .work-items {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	#how-photographers-work .work-items {
		grid-template-columns: repeat(3, 1fr);
	}
}

#how-photographers-work .work-item {
	background: var(--bg-800);
	padding: 2rem;
}

#how-photographers-work .work-item img {
	margin-bottom: 1.25rem;
}

#how-photographers-work .work-items .work-title {
	font-size: var(--text-base);
}

#how-photographers-work .work-items .work-copy {
	font-size: var(--text-xs);
}

#how-photographers-work .r26-ui {
	margin-top: -1.5rem;
	position: relative;
	z-index: 1;
}

/* !- Why ON1 */
#why-on1 {
	background: var(--bg-800);
}

#why-on1 .learn-more-link {
	color: var(--blue-500);
	font-size: var(--text-sm);
	font-weight: 700;
	text-decoration: none;
}

#why-on1 .why-top {
	margin-bottom: 2.25rem;
}

/* !- Industry Pros */
#industry-pros {
	background: var(--bg-800);
}

#industry-pros .pros-intro h2 {
	margin: 0;
}

#industry-pros .pro-inner {
	background: var(--bg-900);
	border: 1px solid var(--border-subtle);
	border-radius: var(--border-radius);
	height: 100%;
	padding: 1.5rem;
}

#industry-pros .pro-quote {
	color: var(--text-400);
	font-style: italic;
}

#industry-pros .pro-name {
	color: var(--text-500);
	font-size: var(--text-mini);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* !- Start Editing Today */
#start-editing-today .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}