/**
 * Motion layer.
 *
 * The rule that matters: everything animates FROM a visible resting state.
 * Nothing is parked at opacity 0 waiting for a script — that is the bug on the
 * Islamabad Club site, where the page renders blank if the observer never
 * fires. Here, if JavaScript fails or is slow, the page is simply already
 * correct and the animation is what is missing, not the content.
 */

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

/*
 * The transform is applied only once JS has confirmed it can run, by adding
 * .club-motion-ready to the html element. Without that class these rules do
 * nothing at all and content sits where it belongs.
 */
.club-motion-ready [data-reveal] {
	opacity: 0.001;
	transform: translateY(18px);
	transition:
		opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}

.club-motion-ready [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Children stagger in sequence rather than arriving as a block. */
.club-motion-ready [data-reveal-stagger] > * {
	opacity: 0.001;
	transform: translateY(16px);
	transition:
		opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: calc(var(--club-stagger-index, 0) * 70ms);
}

.club-motion-ready [data-reveal-stagger].is-revealed > * {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   Parallax
   ========================================================================== */

/*
 * The hero image drifts slower than the page. --club-parallax is written by
 * the script; the default of 0 means no movement, so this is inert until then.
 */
.club-parallax {
	will-change: transform;
	transform: translate3d(0, var(--club-parallax, 0px), 0);
}

.club-parallax-frame {
	overflow: hidden;
	position: relative;
}

/* The image is taller than its frame so there is room to move. */
.club-parallax-frame > .club-parallax {
	position: absolute;
	inset: -12% 0;
	height: 124%;
	width: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Count-up
   ========================================================================== */

.club-count {
	font-variant-numeric: tabular-nums;
	/* Reserve the final width so the layout does not shift while counting. */
	display: inline-block;
	min-width: 1ch;
}

/* ==========================================================================
   Hover
   ========================================================================== */

.club-media > img {
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.club-hover-zoom:hover .club-media > img,
a:hover > .club-media > img {
	transform: scale(1.045);
}

/* ==========================================================================
   Respect the viewer's preference

   Anyone who has asked their device for less movement gets a still page.
   Every rule above is neutralised, including the inline custom properties
   the script writes.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.club-motion-ready [data-reveal],
	.club-motion-ready [data-reveal-stagger] > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.club-parallax {
		transform: none !important;
		will-change: auto;
	}

	.club-media > img {
		transition: none;
	}

	.club-hover-zoom:hover .club-media > img,
	a:hover > .club-media > img {
		transform: none;
	}
}