/* ==========================================================================
   Divigi — section-hover.css
   Hover treatments for two front-page sections: Who We Are, and the counters.

   One authored moment each, both drawn from what the section already is rather
   than applied to it. Cursor position for the first comes from
   assets/js/section-hover.js; the second is pure CSS.
   ========================================================================== */

.about-area .image-wrapper,
.counter-wrapper {
	/* Same curve the services list moves on, so the page has one hand. */
	--sh-ease: cubic-bezier(.22, 1, .36, 1);
}


/* --------------------------------------------------------------------------
   1. Who We Are — the spotlight

   The section's own sentence is "We delve into your business vision to uncover
   and highlight the unique value your brand delivers". So the image behaves
   that way: bring the cursor to it and everything falls into shadow except the
   part you are looking at, which stays lit. You uncover the picture by moving
   over it. A generic zoom-on-hover would have said nothing.

   Built as a scrim with a hole in it rather than a second bright copy of the
   image: one element, no duplicate download, no chance of the two layers
   disagreeing about sizing. The lit region is simply the untouched photograph
   showing through, so it needs no colour matching either.

   Nothing shows at rest — the scrim fades up only on hover, so the section
   looks exactly as it did before anyone interacts with it.
   -------------------------------------------------------------------------- */

.about-area .image-wrapper {
	position: relative;
}

.about-area .image-wrapper img {
	display: block;
	transition: transform 1.4s var(--sh-ease);
}

/* A drift rather than a zoom. Barely a scale, but it gives the light something
   that moves under it, which is what sells the surface as a surface. */
.about-area .image-wrapper:hover img {
	transform: scale(1.025);
}

.about-area .image-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;

	background: rgba(4, 4, 6, .66);
	opacity: 0;
	transition: opacity .5s var(--sh-ease);

	/* The hole. Fully transparent at the centre so the photograph is untouched
	   where you are looking, then ramping to solid — the long ramp is what makes
	   it read as a pool of light instead of a cut-out circle. --sh-x/--sh-y are
	   written by section-hover.js and eased there, not here: a transition on the
	   mask would fight the per-frame updates. */
	-webkit-mask-image: radial-gradient(circle var(--sh-r, 300px) at var(--sh-x, 50%) var(--sh-y, 50%),
	                    transparent 0%, rgba(0, 0, 0, .45) 42%, #000 78%);
	        mask-image: radial-gradient(circle var(--sh-r, 300px) at var(--sh-x, 50%) var(--sh-y, 50%),
	                    transparent 0%, rgba(0, 0, 0, .45) 42%, #000 78%);
}

.about-area .image-wrapper:hover::after {
	opacity: 1;
}

/* Light theme dims less. The surrounding page is white, so the same scrim that
   reads as shadow on black reads as a heavy black slab here. */
:root:not(.dark) .about-area .image-wrapper::after {
	background: rgba(10, 10, 14, .52);
}


/* --------------------------------------------------------------------------
   2. Counters — bring one forward

   The four circles overlap in a row, Venn-fashion. That overlap is the whole
   composition, so the hover uses it: the circle under the cursor rises above
   its neighbours and the other three recede, which is only possible because
   they intersect. Anything that treated them as four separate tiles would have
   thrown away the one interesting thing about the arrangement.

   Depth comes from the stacking order and from the others dimming, not from a
   shadow — these are hairline rings on a flat ground, and a shadow under a 1px
   circle would be the only lit object on the page.
   -------------------------------------------------------------------------- */

/* Each .counter-item carries has_fade_anim, so GSAP writes its entrance to the
   element's INLINE style — and inline beats any stylesheet rule short of
   !important. Both properties the obvious version of this hover would reach for,
   opacity and transform, are therefore already spoken for: the dim and the lift
   silently did nothing while the bloom and the number scale worked.

   So this uses two properties GSAP never touches. `filter: opacity()` dims
   exactly as the opacity property would, ring included, and `top` lifts against
   the position: relative below. No !important, and nothing here fights the
   entrance animation for ownership of a property. */
.counter-item {
	position: relative;
	top: 0;
	transition: filter .55s var(--sh-ease),
	            top .7s var(--sh-ease);
}

/* Everything recedes on entering the group... */
.counter-wrapper:hover .counter-item {
	filter: opacity(.32);
}

/* ...and the one being pointed at comes back, and forward. The z-index is what
   makes the overlap resolve in its favour, so its ring reads as one unbroken
   circle while its neighbours are cut by it. */
.counter-wrapper .counter-item:hover {
	filter: none;
	z-index: 3;
	top: -10px;
}

/* The bloom. A soft interior light so the circle reads as filled rather than
   merely outlined, growing into place instead of switching on. */
.counter-item::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	pointer-events: none;

	background: radial-gradient(circle at 50% 50%, var(--sh-bloom, rgba(255, 255, 255, .11)), transparent 70%);
	opacity: 0;
	transform: scale(.72);
	transition: opacity .55s var(--sh-ease),
	            transform .8s var(--sh-ease);
}

.counter-item:hover::before {
	opacity: 1;
	transform: scale(1);
}

/* The pseudo-element is positioned and the number is not, so without this the
   bloom would paint over the very text it is meant to sit behind. */
.counter-item > * {
	position: relative;
	z-index: 1;
}

/* The number grows a little into the light. Kept under a tenth so it reads as
   the figure leaning forward, not as the layout resizing. */
.counter-item .number {
	transition: transform .7s var(--sh-ease);
}

.counter-item:hover .number {
	transform: scale(1.06);
}

:root:not(.dark) .counter-item {
	--sh-bloom: rgba(17, 16, 19, .07);
}


/* --------------------------------------------------------------------------
   Reduced motion and touch
   -------------------------------------------------------------------------- */

/* Both effects are motion by definition — a light that follows the cursor and
   a circle that rises. With motion reduced, the counter keeps the part that is
   information (which one you are pointing at) and drops the travel; the
   spotlight goes away entirely rather than becoming a scrim that snaps. */
@media (prefers-reduced-motion: reduce) {
	.about-area .image-wrapper::after { display: none; }
	.about-area .image-wrapper:hover img { transform: none; }

	.counter-item,
	.counter-item::before,
	.counter-item .number { transition: none; }

	.counter-wrapper .counter-item:hover { top: 0; }
	.counter-item:hover .number { transform: none; }
	.counter-item::before { display: none; }
}

/* No hover, no cursor to follow. Touch would otherwise leave the scrim stuck
   on after a tap, dimming the image with the spotlight frozen wherever the
   finger last landed. */
@media not all and (hover: hover) and (pointer: fine) {
	.about-area .image-wrapper::after { display: none; }
	.about-area .image-wrapper:hover img { transform: none; }
	.counter-wrapper:hover .counter-item { filter: none; }
	.counter-wrapper .counter-item:hover { top: 0; }
	.counter-item::before { display: none; }
}