/**
 * Viora Intro widget.
 *
 * Two columns: the text block on the left, the portrait plus the trusted-by
 * row on the right. Every value comes from the design system tokens.
 */

/*
 * Metrics are taken straight from the design frame (1440 artboard) and
 * expressed in vw so the whole composition scales as one. The px values in
 * the comments are the measured design values at 1440.
 */
.viora-intro {
	--viora-intro-gap: 0px;                                  /* columns touch */
	--viora-intro-heading-size: clamp(2.25rem, 5.278vw, 4.75rem);   /* 76 */
	--viora-intro-highlight-size: clamp(1.375rem, 2.083vw, 1.875rem); /* 30 */
	--viora-intro-text-size: clamp(1rem, 1.25vw, 1.125rem);  /* 18 */

	--viora-intro-pad-top: clamp(3rem, 5.833vw, 5.25rem);    /* 84 */
	--viora-intro-pad-bottom: clamp(3.5rem, 6.667vw, 6rem);  /* 96 */

	--viora-intro-heading-space: clamp(1.75rem, 4.41vw, 3.97rem);  /* 63.5 */
	--viora-intro-lead-space: clamp(2rem, 6.646vw, 5.98rem);       /* 95.7 */
	--viora-intro-actions-space: clamp(2.25rem, 9.444vw, 8.5rem);  /* 136 */
	--viora-intro-lead-gap: clamp(1.5rem, 8.194vw, 7.375rem);      /* 118 */

	--viora-intro-aside-gap: clamp(1.875rem, 4.514vw, 4.0625rem);  /* 65 */
	--viora-intro-logos-gap: clamp(1.5rem, 5.139vw, 4.625rem);     /* 74 */
	--viora-intro-logo-row: clamp(1.375rem, 2.083vw, 1.875rem);    /* 30 */
	--viora-intro-logo-space: clamp(2.5rem, 7.19vw, 6.47rem);      /* 103.54 */

	background-color: var(--viora-color-surface);
	color: var(--viora-color-heading);
	padding-block: var(--viora-intro-pad-top) var(--viora-intro-pad-bottom);
	overflow: hidden;
}

.viora-intro__inner {
	display: grid;
	/* 179→746 and 746→1261 of the 1082px content width. */
	grid-template-columns: var(--viora-intro-cols, 52.4%) 1fr;
	column-gap: var(--viora-intro-gap);
	align-items: start;
	/* Exactly 1082 at 1440 (179 either side), with breathing room below that. */
	width: min(1082px, 100% - 2 * var(--viora-layout-container-pad));
	margin-inline: auto;
}

/* -------------------------------------------------- *
 * Text column
 * -------------------------------------------------- */

.viora-intro__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Grid items default to min-width:auto and would refuse to shrink below
	   their content, pushing the whole section wider than the viewport. */
	min-width: 0;
}

/* Label 178 wide, 42 gap, rule 206 → 426 total. */
.viora-intro__subheading-row {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.917vw, 2.625rem);
	width: 100%;
	max-width: clamp(18rem, 29.583vw, 26.625rem);
}

.viora-intro__heading {
	margin: var(--viora-intro-heading-space) 0 0;
	font-family: var(--viora-font-display);
	font-size: var(--viora-intro-heading-size);
	font-weight: 400;
	line-height: 1.105;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	/* 574px at the 76px design size — keeps the line breaks the design has. */
	max-width: 7.6em;
}

.viora-intro__lead {
	display: flex;
	flex-wrap: wrap;
	gap: var(--viora-intro-lead-gap);
	margin-top: var(--viora-intro-lead-space);
}

/* 167 wide in the design. */
.viora-intro__highlight {
	flex: 0 0 auto;
	width: clamp(9rem, 11.597vw, 10.4375rem);
	color: var(--viora-color-accent);
}

.viora-intro__highlight-title {
	margin: 0;
	font-family: var(--viora-font-display);
	font-size: var(--viora-intro-highlight-size);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: -0.05em;
	text-transform: uppercase;
}

/* 125×12, sitting 17 below the highlight. */
.viora-intro__underline {
	display: block;
	width: clamp(6rem, 8.681vw, 7.8125rem);
	height: clamp(0.5rem, 0.833vw, 0.75rem);
	margin-top: clamp(0.625rem, 1.181vw, 1.0625rem);
	color: var(--viora-color-heading);
}

/* 249 wide in the design. */
.viora-intro__text {
	flex: 0 1 auto;
	width: clamp(13rem, 17.292vw, 15.5625rem);
	color: var(--viora-color-text);
	font-family: var(--viora-font-ui);
	font-size: var(--viora-intro-text-size);
	line-height: 1.643;
}

.viora-intro__text p {
	margin: 0 0 var(--viora-space-2xs);
}

.viora-intro__text p:last-child {
	margin-bottom: 0;
}

/* Flex, not a block: an inline-flex button would sit on the parent's text
   baseline and drift as soon as its line-height changes. */
.viora-intro__actions {
	display: flex;
	margin-top: var(--viora-intro-actions-space);
}

/* 220×58: 16px block padding, 30/23 inline, 38 gap, 15px text at 1.7. */
.viora-intro__button {
	gap: clamp(1.25rem, 2.639vw, 2.375rem);
	padding: 1rem 1.4375rem 1rem 1.875rem;
	font-family: var(--viora-font-ui);
	font-size: 0.9375rem;
	line-height: 1.7;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}

.viora-intro__button .viora-btn__arrow {
	display: block;
	width: 1.875rem;
	height: 0.875rem;
}

/* -------------------------------------------------- *
 * Media column
 * -------------------------------------------------- */

.viora-intro__aside {
	display: flex;
	flex-direction: column;
	gap: var(--viora-intro-aside-gap);
	min-width: 0;
}

/*
 * 426×546 (ratio 0.78), right-aligned inside the 515px column — the logo row
 * below it is the widest element, the portrait is inset from the left.
 */
.viora-intro__media {
	position: relative;
	align-self: flex-end;
	width: var(--viora-intro-media-width, 82.72%);
	margin: 0;
	aspect-ratio: 0.78;
	overflow: hidden;
	will-change: transform;
}

.viora-intro__media-inner {
	position: absolute;
	inset: 0;
}

.viora-intro__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.viora-intro__logos {
	display: flex;
	flex-direction: column;
	gap: var(--viora-intro-logos-gap);
}

/* Rule 123.8 wide, then the label right-aligned to the column edge. */
.viora-intro__logos-head {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.778vw, 2.5rem);
}

.viora-intro__logos-head .viora-rule {
	flex: 0 0 auto;
	width: clamp(4rem, 8.597vw, 7.7375rem);
}

.viora-intro__logos-label {
	flex: 1 1 auto;
	text-align: right;
}

/* -------------------------------------------------- *
 * Logo slider
 *
 * The viewport is exactly the design's logo row: 30px tall, full column
 * width, with a fixed 103.54px gap between logos. With three logos that
 * reproduces the design one to one; beyond that the track loops.
 * -------------------------------------------------- */

.viora-intro__logo-slider {
	position: relative;
	overflow: hidden;
	min-height: var(--viora-intro-logo-row);
}

.viora-intro__logo-list {
	display: flex;
	align-items: center;
	gap: var(--viora-intro-logo-space);
	min-height: var(--viora-intro-logo-row);
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}

/* Static mode keeps the design's edge-to-edge distribution. */
.viora-intro__logo-slider:not(.viora-intro__logo-slider--auto) .viora-intro__logo-list {
	justify-content: space-between;
}

.viora-intro__logo-slider--auto .viora-intro__logo-list {
	width: max-content;
	flex-wrap: nowrap;
}

.viora-intro__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.viora-intro__logo img {
	display: block;
	width: auto;
	max-width: none;
	max-height: 26px;
	object-fit: contain;
}

/* Cloned run that makes the loop seamless — hidden from assistive tech. */
.viora-intro__logo--clone {
	pointer-events: none;
}

/* -------------------------------------------------- *
 * Reveal choreography
 *
 * `is-animated` (set by JS) arms the hidden states; each `.viora-intro__item`
 * plays when the observer marks it `is-in`. Without JS nothing is hidden.
 * -------------------------------------------------- */

.viora-intro.is-animated {
	--viora-intro-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Subheading: rises while its tracking settles from airy to spec. */

.viora-intro.is-animated .viora-intro__subheading {
	opacity: 0;
	transform: translateY(14px);
	letter-spacing: 0.6em;
}

.viora-intro.is-animated .viora-intro__subheading-row.is-in .viora-intro__subheading {
	opacity: 1;
	transform: none;
	letter-spacing: 0.37em;
	transition:
		opacity 0.9s var(--viora-intro-ease),
		transform 0.9s var(--viora-intro-ease),
		letter-spacing 1.4s var(--viora-intro-ease);
}

/* Rules: draw from their leading edge. */

.viora-intro.is-animated .viora-rule {
	transform: scaleX(0);
	transform-origin: left center;
}

.viora-intro.is-animated .viora-intro__logos-head .viora-rule {
	transform-origin: right center;
}

.viora-intro.is-animated .is-in .viora-rule {
	transform: scaleX(1);
	transition: transform 1.2s var(--viora-intro-ease) 0.25s;
}

/* Heading: masked words rise line by line with a slight settle of rotation. */

.viora-intro__word-mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	/* Room for descenders while the word travels through the mask. */
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}

.viora-intro.is-animated .viora-intro__word {
	display: inline-block;
	transform: translateY(120%) rotate(3deg);
	transform-origin: 0 100%;
}

.viora-intro.is-animated .viora-intro__heading.is-in .viora-intro__word {
	transform: none;
	transition: transform 1.05s var(--viora-intro-ease);
	transition-delay: calc(var(--viora-word, 0) * 90ms + 100ms);
}

/* Fallback when the heading was not split (Elementor edit mode). */

.viora-intro.is-animated .viora-intro__heading:not(.has-split) {
	opacity: 0;
	transform: translateY(30px);
}

.viora-intro.is-animated .viora-intro__heading:not(.has-split).is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity 1s var(--viora-intro-ease),
		transform 1s var(--viora-intro-ease);
}

/* Highlight + paragraph: unblur into place, then the underline draws. */

.viora-intro.is-animated .viora-intro__highlight,
.viora-intro.is-animated .viora-intro__text {
	opacity: 0;
	transform: translateY(26px);
	filter: blur(8px);
}

.viora-intro.is-animated .viora-intro__lead.is-in .viora-intro__highlight,
.viora-intro.is-animated .viora-intro__lead.is-in .viora-intro__text {
	opacity: 1;
	transform: none;
	filter: none;
	transition:
		opacity 0.95s var(--viora-intro-ease),
		transform 0.95s var(--viora-intro-ease),
		filter 0.95s var(--viora-intro-ease);
}

.viora-intro.is-animated .viora-intro__lead.is-in .viora-intro__text {
	transition-delay: 0.15s;
}

.viora-intro.is-animated .viora-intro__underline path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.viora-intro.is-animated .viora-intro__lead.is-in .viora-intro__underline path {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1s var(--viora-intro-ease) 0.55s;
}

.viora-intro.is-animated .viora-intro__lead.is-in .viora-intro__underline path + path {
	transition-delay: 0.75s;
}

/* Button: quiet fade-up after the lead. */

.viora-intro.is-animated .viora-intro__actions {
	opacity: 0;
	transform: translateY(24px);
}

.viora-intro.is-animated .viora-intro__actions.is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.9s var(--viora-intro-ease) 0.1s,
		transform 0.9s var(--viora-intro-ease) 0.1s;
}

/* Portrait: a curtain lifts once the image has loaded, while the photo
   settles from an overscanned zoom. */

/*
 * The clip lives on the inner layer. A clip-path on the observed figure would
 * zero its intersection ratio, and the reveal observer would never fire.
 */
.viora-intro.is-animated .viora-intro__media-inner {
	clip-path: inset(0 0 100% 0);
}

.viora-intro.is-animated .viora-intro__media img {
	transform: scale(1.22) translateY(3%);
	transform-origin: center top;
}

.viora-intro.is-animated .viora-intro__media.is-in.is-loaded .viora-intro__media-inner {
	clip-path: inset(0 0 0 0);
	transition: clip-path 0.85s var(--viora-intro-ease);
}

.viora-intro.is-animated .viora-intro__media.is-in.is-loaded img {
	transform: none;
	transition: transform 1.2s var(--viora-intro-ease);
}

/* Trusted-by: label fades, logos stagger up one by one. */

.viora-intro.is-animated .viora-intro__logos-label {
	opacity: 0;
	transform: translateY(12px);
}

.viora-intro.is-animated .viora-intro__logos.is-in .viora-intro__logos-label {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.9s var(--viora-intro-ease),
		transform 0.9s var(--viora-intro-ease);
}

.viora-intro.is-animated .viora-intro__logo {
	opacity: 0;
	transform: translateY(18px);
}

.viora-intro.is-animated .viora-intro__logos.is-in .viora-intro__logo {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.85s var(--viora-intro-ease),
		transform 0.85s var(--viora-intro-ease);
	transition-delay: calc(var(--viora-logo, 0) * 110ms + 0.25s);
}

/* -------------------------------------------------- *
 * Responsive
 * -------------------------------------------------- */

/*
 * Tablet — Elementor's tablet breakpoint. The two columns become one, and the
 * whole rhythm is retuned in one place by overriding the metric tokens: the
 * desktop values are derived from a 1440 artboard and are far too airy here.
 */
@media (max-width: 1024px) {
	.viora-intro {
		--viora-intro-pad-top: clamp(3rem, 6vw, 4.5rem);
		--viora-intro-pad-bottom: clamp(3rem, 6vw, 4.5rem);
		--viora-intro-heading-space: clamp(1.5rem, 3.5vw, 2.5rem);
		--viora-intro-lead-space: clamp(1.75rem, 4.5vw, 3rem);
		--viora-intro-actions-space: clamp(1.75rem, 4vw, 2.75rem);
		--viora-intro-lead-gap: clamp(1.5rem, 5vw, 3.5rem);
		--viora-intro-aside-gap: clamp(1.75rem, 4vw, 2.75rem);
		--viora-intro-logos-gap: clamp(1.25rem, 3vw, 2rem);
		--viora-intro-logo-space: clamp(2.5rem, 8vw, 5rem);
		/* The image now spans the column, so it must not stay portrait. */
		--viora-intro-media-width: 100%;
	}

	.viora-intro__inner {
		grid-template-columns: 1fr;
		row-gap: clamp(2.5rem, 5.5vw, 3.75rem);
	}

	.viora-intro__content {
		max-width: none;
	}

	/* Wider wrap: at tablet sizes the 7.6em desktop measure breaks too early. */
	.viora-intro__heading {
		max-width: 11em;
	}

	.viora-intro__highlight {
		width: clamp(9rem, 22vw, 12rem);
	}

	.viora-intro__text {
		flex: 1 1 18rem;
		width: auto;
		max-width: 30rem;
	}

	.viora-intro__media {
		align-self: stretch;
		aspect-ratio: 1.5;
	}
}

/* Mobile — Elementor's mobile breakpoint. */
@media (max-width: 767px) {
	.viora-intro {
		--viora-intro-pad-top: 3rem;
		--viora-intro-pad-bottom: 3.5rem;
		--viora-intro-heading-space: 1.25rem;
		--viora-intro-lead-space: 1.75rem;
		--viora-intro-actions-space: 2rem;
		--viora-intro-lead-gap: 1.5rem;
		--viora-intro-aside-gap: 2rem;
		--viora-intro-logos-gap: 1.25rem;
		--viora-intro-logo-space: clamp(2rem, 12vw, 3.5rem);
		/* Continuous with the tablet ramp at 767 (≈40px) so the heading never
		   grows as the screen shrinks. */
		--viora-intro-heading-size: clamp(1.875rem, 8.2vw, 2.5rem);
	}

	.viora-intro__inner {
		row-gap: 2.25rem;
	}

	.viora-intro__heading {
		max-width: none;
	}

	.viora-intro__lead {
		flex-direction: column;
	}

	/* Column flex makes flex-basis a height — reset it or the text block
	   reserves its basis as empty space below the paragraph. */
	.viora-intro__highlight,
	.viora-intro__text {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
	}

	.viora-intro__media {
		aspect-ratio: 1;
	}

	/* Label first, rule takes whatever is left — the letter-spaced label is
	   too wide to follow a fixed-width rule on a phone. */
	.viora-intro__logos-head {
		flex-direction: row-reverse;
		justify-content: flex-start;
	}

	.viora-intro__logos-head .viora-rule {
		flex: 1 1 1.5rem;
		width: auto;
		min-width: 1.5rem;
	}

	.viora-intro__logos-label {
		flex: 0 1 auto;
		text-align: left;
	}

	/* Static mode only: the slider track sets its own nowrap layout. */
	.viora-intro__logo-list {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: var(--viora-space-sm) var(--viora-space-md);
	}

	.viora-intro__logo img {
		max-width: 100%;
	}

	.viora-intro__button {
		width: 100%;
		justify-content: space-between;
	}
}

/* The script never arms `is-animated` under reduced motion; this is the
   belt-and-braces layer for cached or raced states. */
@media (prefers-reduced-motion: reduce) {
	.viora-intro.is-animated .viora-intro__subheading,
	.viora-intro.is-animated .viora-intro__heading:not(.has-split),
	.viora-intro.is-animated .viora-intro__word,
	.viora-intro.is-animated .viora-rule,
	.viora-intro.is-animated .viora-intro__highlight,
	.viora-intro.is-animated .viora-intro__text,
	.viora-intro.is-animated .viora-intro__actions,
	.viora-intro.is-animated .viora-intro__logos-label,
	.viora-intro.is-animated .viora-intro__logo {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}

	.viora-intro.is-animated .viora-intro__subheading {
		letter-spacing: 0.37em;
	}

	.viora-intro.is-animated .viora-intro__media-inner {
		clip-path: none;
	}

	.viora-intro.is-animated .viora-intro__media img {
		transform: none;
	}

	.viora-intro.is-animated .viora-intro__underline path {
		stroke-dashoffset: 0;
		transition: none;
	}

	.viora-intro__media,
	.viora-intro__heading,
	.viora-intro__lead {
		transform: none !important;
	}
}