/* ==========================================================================
   SUDAIR PHARMA — MOTION
   Corporate-pharma motion: short travel, exponential ease-out, no bounce.
   Motion reveals structure and rewards attention; it never performs.

   Governing rule, unchanged: THE FINISHED STATE IS THE DEFAULT. Every hiding
   rule is nested under `.sud-motion`, a class JS adds. If the script never runs
   — blocked, headless, hidden tab — the page renders complete rather than blank.
   ========================================================================== */

:root {
	--sud-ease-out:  cubic-bezier(.16, 1, .3, 1);    /* ease-out-expo  */
	--sud-ease-soft: cubic-bezier(.22, 1, .36, 1);   /* ease-out-quint */
	--sud-t-fast:    .22s;
	--sud-t-base:    .42s;
	--sud-t-slow:    .72s;
	--sud-t-reveal:  .95s;
}

/* --------------------------------------------------------------------------
   1. SCROLL REVEAL
   -------------------------------------------------------------------------- */

.sud-motion [data-sud-reveal]:not(.is-visible) {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
}

.sud-motion [data-sud-reveal] {
	transition:
		opacity var(--sud-t-slow) var(--sud-ease-out),
		transform var(--sud-t-slow) var(--sud-ease-out);
}

.sud-motion [data-sud-reveal].is-visible { opacity: 1; transform: none; }

/* Stagger. 70ms reads as one considered sequence rather than a queue. */
.sud-motion [data-sud-delay="1"] { transition-delay: .07s; }
.sud-motion [data-sud-delay="2"] { transition-delay: .14s; }
.sud-motion [data-sud-delay="3"] { transition-delay: .21s; }
.sud-motion [data-sud-delay="4"] { transition-delay: .28s; }
.sud-motion [data-sud-delay="5"] { transition-delay: .35s; }

/* --------------------------------------------------------------------------
   2. CARD STAGGER
   Applied to any grid the script marks. Children animate in sequence rather
   than each needing its own delay attribute.
   -------------------------------------------------------------------------- */

.sud-motion .sud-stagger > *:not(.is-visible) {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
}

.sud-motion .sud-stagger > * {
	transition:
		opacity var(--sud-t-slow) var(--sud-ease-out),
		transform var(--sud-t-slow) var(--sud-ease-out);
}

.sud-motion .sud-stagger.is-visible > * { opacity: 1; transform: none; }

.sud-motion .sud-stagger.is-visible > *:nth-child(1) { transition-delay: .00s; }
.sud-motion .sud-stagger.is-visible > *:nth-child(2) { transition-delay: .07s; }
.sud-motion .sud-stagger.is-visible > *:nth-child(3) { transition-delay: .14s; }
.sud-motion .sud-stagger.is-visible > *:nth-child(4) { transition-delay: .21s; }
.sud-motion .sud-stagger.is-visible > *:nth-child(5) { transition-delay: .28s; }
.sud-motion .sud-stagger.is-visible > *:nth-child(6) { transition-delay: .35s; }
.sud-motion .sud-stagger.is-visible > *:nth-child(7) { transition-delay: .42s; }
.sud-motion .sud-stagger.is-visible > *:nth-child(8) { transition-delay: .49s; }

/* --------------------------------------------------------------------------
   3. IMAGE MASK REVEAL
   The photograph is uncovered by a wipe while scaling back from a slight
   over-zoom. Reads as a camera settling, not a slide-in.
   -------------------------------------------------------------------------- */

.sud-motion .sud-reveal-img { overflow: hidden; }

.sud-motion .sud-reveal-img:not(.is-visible) > img,
.sud-motion .sud-reveal-img:not(.is-visible) img {
	clip-path: inset(0 0 100% 0);
	transform: scale(1.12);
}

.sud-motion .sud-reveal-img img {
	transition:
		clip-path var(--sud-t-reveal) var(--sud-ease-out),
		transform 1.4s var(--sud-ease-out);
	will-change: clip-path, transform;
}

.sud-motion .sud-reveal-img.is-visible img {
	clip-path: inset(0 0 0 0);
	transform: scale(1);
}

/* --------------------------------------------------------------------------
   4. HERO ENTRANCE
   One orchestrated page-load, on the hero only. The rest of the site is quiet.
   -------------------------------------------------------------------------- */

.sud-motion .sud-banner .sud-banner__copy > *,
.sud-motion .sud-hero .e-con-inner > *,
.sud-motion .sud-h-hero .e-con-inner > * {
	animation: sud-rise var(--sud-t-slow) var(--sud-ease-out) both;
}

.sud-motion .sud-banner .sud-banner__copy > *:nth-child(1),
.sud-motion .sud-hero .e-con-inner > *:nth-child(1) { animation-delay: .05s; }
.sud-motion .sud-banner .sud-banner__copy > *:nth-child(2),
.sud-motion .sud-hero .e-con-inner > *:nth-child(2) { animation-delay: .13s; }
.sud-motion .sud-banner .sud-banner__copy > *:nth-child(3),
.sud-motion .sud-hero .e-con-inner > *:nth-child(3) { animation-delay: .21s; }
.sud-motion .sud-banner .sud-banner__copy > *:nth-child(4),
.sud-motion .sud-hero .e-con-inner > *:nth-child(4) { animation-delay: .29s; }

@keyframes sud-rise {
	from { opacity: 0; transform: translate3d(0, 18px, 0); }
	to   { opacity: 1; transform: none; }
}

/* Brand rule along the banner's lower edge, drawn in */
.sud-motion .sud-banner::after {
	animation: sud-edge 1.1s var(--sud-ease-out) .5s both;
}

@keyframes sud-edge {
	from { transform: scaleX(0); transform-origin: left center; }
	to   { transform: scaleX(1); transform-origin: left center; }
}

[dir="rtl"] .sud-motion .sud-banner::after { animation-name: sud-edge-rtl; }

@keyframes sud-edge-rtl {
	from { transform: scaleX(0); transform-origin: right center; }
	to   { transform: scaleX(1); transform-origin: right center; }
}

/* --------------------------------------------------------------------------
   5. PARALLAX + FLOAT
   Driven by a scroll-linked custom property the script sets. Transform only,
   so it never triggers layout.
   -------------------------------------------------------------------------- */

.sud-motion [data-sud-parallax] {
	transform: translate3d(0, calc(var(--sud-py, 0) * 1px), 0);
	will-change: transform;
}

/* Gentle idle float for the decorative chips and the hero's floating card */
.sud-motion .sud-float {
	animation: sud-bob 7s ease-in-out infinite;
}

@keyframes sud-bob {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(0, -9px, 0); }
}

.sud-motion .sud-compose__inset { animation: sud-bob 9s ease-in-out infinite .6s; }

/* --------------------------------------------------------------------------
   6. HOVER + MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */

.sud-card, .sud-mediacard, .sud-area-card {
	transition:
		transform var(--sud-t-base) var(--sud-ease-soft),
		box-shadow var(--sud-t-base) var(--sud-ease-soft),
		border-color var(--sud-t-base) var(--sud-ease-soft);
}

@media (hover: hover) {
	.sud-card:hover, .sud-mediacard:hover {
		transform: translate3d(0, -6px, 0);
		box-shadow: var(--sud-shadow-lg);
	}

	/* Slow push on card photography */
	.sud-mediacard__img { overflow: hidden; }
	.sud-mediacard__img img { transition: transform 1.1s var(--sud-ease-soft); }
	.sud-mediacard:hover .sud-mediacard__img img { transform: scale(1.06); }

	/* Icon chips lift with their card */
	.sud-card .elementor-icon { transition: transform var(--sud-t-base) var(--sud-ease-soft), background var(--sud-t-base) var(--sud-ease-soft), color var(--sud-t-base) var(--sud-ease-soft); }
	.sud-card:hover .elementor-icon { transform: translate3d(0, -2px, 0) scale(1.06); }

	/* Links draw their own underline */
	.sud-mediacard__more a, .sud-mega__all {
		background-image: linear-gradient(currentColor, currentColor);
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 0% 1px;
		transition: background-size var(--sud-t-base) var(--sud-ease-soft);
	}
	.sud-mediacard__more a:hover, .sud-mega__all:hover { background-size: 100% 1px; }

	/* Buttons: lift plus a soft brand glow */
	.elementor-button, .sud-hd__cta {
		transition:
			transform var(--sud-t-base) var(--sud-ease-soft),
			box-shadow var(--sud-t-base) var(--sud-ease-soft),
			background-color var(--sud-t-base) var(--sud-ease-soft),
			border-color var(--sud-t-base) var(--sud-ease-soft);
	}
	.elementor-button:hover, .sud-hd__cta:hover {
		transform: translate3d(0, -2px, 0);
		box-shadow: 0 10px 26px rgba(0, 99, 68, .26);
	}

	/* Pressed state — instant, so it feels physical */
	.elementor-button:active, .sud-hd__cta:active { transform: translate3d(0, 0, 0); transition-duration: .06s; }
}

/* --------------------------------------------------------------------------
   7. COUNTERS
   -------------------------------------------------------------------------- */

.elementor-counter-number-wrapper,
.sud-float__n { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   8. REDUCED MOTION
   An equally finished static presentation, not a degraded one.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sud-motion [data-sud-reveal],
	.sud-motion [data-sud-reveal]:not(.is-visible),
	.sud-motion .sud-stagger > *,
	.sud-motion .sud-stagger > *:not(.is-visible) {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.sud-motion .sud-reveal-img img,
	.sud-motion .sud-reveal-img:not(.is-visible) img {
		clip-path: none !important;
		transform: none !important;
		transition: none !important;
	}

	.sud-motion .sud-banner .sud-banner__copy > *,
	.sud-motion .sud-hero .e-con-inner > *,
	.sud-motion .sud-h-hero .e-con-inner > *,
	.sud-motion .sud-banner::after,
	.sud-motion .sud-float,
	.sud-motion .sud-compose__inset {
		animation: none !important;
	}

	.sud-motion [data-sud-parallax] { transform: none !important; }

	.sud-card:hover, .sud-mediacard:hover,
	.elementor-button:hover, .sud-hd__cta:hover { transform: none; }

	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}