/**
 * Cyber50 — Premium Animation Layer
 * ----------------------------------------------------------------------
 * Pure bolt-on. Loads AFTER theme.css and only adds to existing classes —
 * nothing here is required by the base theme, so it's safe to remove by
 * deleting one enqueue line in functions.php.
 *
 * Covers: scroll progress bar, shrinking header, magnetic + shine buttons,
 * tilting spotlight cards, animated stat counters, gradient border "beam"
 * panels, shimmering kickers, underline nav links, image zoom reveals,
 * fade-edge marquee, and a richer staggered scroll-reveal.
 *
 * Fully respects prefers-reduced-motion and the theme's own
 * `c50--reduce-motion` body class / cyber50Cfg.reduceMotion setting.
 * ------------------------------------------------------------------- */

:root {
	--c50p-acc: var(--acc, #2d4ee0);
	--c50p-acc-soft: var(--acc-tint, rgba(45, 78, 224, .12));
	--c50p-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ===================================================================
   0. Scroll progress bar
   =================================================================== */
.c50p-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0%;
	z-index: 200;
	background: linear-gradient(90deg, var(--c50p-acc), #a9c2ff, var(--c50p-acc));
	background-size: 200% 100%;
	box-shadow: 0 0 12px var(--c50p-acc), 0 0 2px rgba(255, 255, 255, .6);
	transition: width .12s linear;
	pointer-events: none;
	animation: c50p-shimmer 3s linear infinite;
}
body.admin-bar .c50p-progress { top: 32px; }

@keyframes c50p-shimmer {
	to { background-position: -200% 0; }
}

/* ===================================================================
   1. Header — shrinks + gains depth once you scroll
   =================================================================== */
.c50-header {
	transition: box-shadow .35s var(--c50p-ease), backdrop-filter .35s var(--c50p-ease);
}
.c50--scrolled .c50-header {
	box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}
.c50--scrolled .c50-header .c50-header__inner {
	transition: min-height .3s var(--c50p-ease), padding .3s var(--c50p-ease);
	min-height: 54px;
	padding-top: 4px;
	padding-bottom: 4px;
}
.c50-header__inner { transition: min-height .3s var(--c50p-ease), padding .3s var(--c50p-ease); }

/* ===================================================================
   2. Buttons — shine sweep, magnetic pull, click ripple
   =================================================================== */
.c50-btn,
.c50-header__cta,
.c50-slider__btn,
.c50-theme-btn,
.c50-lang-btn {
	position: relative;
	overflow: hidden;
	will-change: transform;
}

/* diagonal shine sweep on hover */
.c50-btn::before,
.c50-header__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .55) 52%, transparent 70%);
	transform: translateX(-120%);
	pointer-events: none;
}
.c50-btn:hover::before,
.c50-header__cta:hover::before {
	transform: translateX(120%);
	transition: transform .85s var(--c50p-ease);
}
.c50-btn::before,
.c50-header__cta::before { transition: transform 0s; }

/* subtle lift + tighter shadow on hover, layered over theme's own transition */
.c50-btn:hover,
.c50-header__cta:hover {
	transform: translateY(-2px);
}
.c50-btn:active,
.c50-header__cta:active {
	transform: translateY(0) scale(.97);
}

/* ripple (JS adds .c50p-ripple span on click) */
.c50p-ripple-span {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	background: rgba(255, 255, 255, .55);
	pointer-events: none;
	animation: c50p-ripple .6s var(--c50p-ease);
}
.c50-btn--primary .c50p-ripple-span,
.c50-btn--invert .c50p-ripple-span { background: rgba(255, 255, 255, .45); }
.c50-btn--outline .c50p-ripple-span,
.c50-btn--ghost .c50p-ripple-span { background: rgba(45, 78, 224, .25); }
@keyframes c50p-ripple {
	to { transform: scale(2.6); opacity: 0; }
}

/* ===================================================================
   3. Cards — 3D tilt + cursor spotlight
   =================================================================== */
.c50p-tilt {
	transform-style: preserve-3d;
	will-change: transform;
	transition: transform .5s var(--c50p-ease), box-shadow .35s var(--c50p-ease);
	position: relative;
}
.c50p-tilt.c50p-tilting {
	transition: box-shadow .35s var(--c50p-ease);
}

.c50p-spotlight {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity .35s ease;
	background: radial-gradient(320px circle at var(--c50p-mx, 50%) var(--c50p-my, 50%), var(--c50p-acc-soft), transparent 65%);
	z-index: 1;
}
.c50p-tilt:hover .c50p-spotlight { opacity: 1; }

/* keep real content above the spotlight layer */
.c50p-tilt > *:not(.c50p-spotlight) { position: relative; z-index: 2; }

/* ===================================================================
   4. Animated gradient "beam" border for hero panels / CTA bands
   =================================================================== */
.c50p-beam {
	position: relative;
	isolation: isolate;
}
.c50p-beam::before {
	content: "";
	position: absolute;
	inset: -1.5px;
	border-radius: inherit;
	padding: 1.5px;
	background: conic-gradient(from var(--c50p-angle, 0deg), transparent 0%, var(--c50p-acc) 12%, transparent 28%, transparent 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: c50p-spin 4.5s linear infinite;
	z-index: -1;
	opacity: .85;
}
@keyframes c50p-spin {
	to { --c50p-angle: 360deg; }
}
@property --c50p-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

/* ===================================================================
   5. Kickers / eyebrows — shimmering gradient text
   =================================================================== */
.c50-kicker {
	background: linear-gradient(90deg, var(--c50p-acc) 0%, #a9c2ff 35%, var(--c50p-acc) 70%);
	background-size: 220% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: c50p-textshine 5s linear infinite;
}
@keyframes c50p-textshine {
	to { background-position: -220% center; }
}

/* ===================================================================
   6. Nav links — animated underline sweep
   =================================================================== */
.c50-nav__link {
	position: relative;
}
.c50-nav__link::after {
	content: "";
	position: absolute;
	left: 11px;
	right: 11px;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--c50p-ease);
}
.c50-nav__link:hover::after,
.c50-nav__link.is-active::after {
	transform: scaleX(1);
}
[dir="rtl"] .c50-nav__link::after { transform-origin: right; }

/* ===================================================================
   7. Image zoom reveal inside cards / panels
   =================================================================== */
.c50-panel__img,
.c50-team-card__photo img,
.c50-post-card__thumb img,
.c50-delivery__frame > img {
	transition: transform .7s var(--c50p-ease), filter .7s var(--c50p-ease);
}
a.c50-panel:hover .c50-panel__img,
.c50-team-card:hover .c50-team-card__photo img,
.c50-post-card:hover .c50-post-card__thumb img {
	transform: scale(1.06);
}

/* ===================================================================
   8. Marquee — soft fade at the edges instead of a hard cut
   =================================================================== */
.c50-marquee {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.c50-marquee:hover .c50-marquee__track {
	animation-play-state: paused;
}

/* ===================================================================
   9. Stat counters — glow pulse while counting, settles after
   =================================================================== */
.c50-hero__stat-value.c50p-counting {
	text-shadow: 0 0 18px rgba(45, 78, 224, .35);
}

/* ===================================================================
   10. Richer scroll reveal variants (opt-in via data-reveal-premium)
   =================================================================== */
[data-reveal-premium] {
	opacity: 0;
	transform: translateY(28px) scale(.96);
	filter: blur(6px);
	transition: opacity .8s var(--c50p-ease), transform .8s var(--c50p-ease), filter .8s var(--c50p-ease);
	transition-delay: var(--c50p-rd, 0s);
}
[data-reveal-premium].is-revealed {
	opacity: 1;
	transform: none;
	filter: blur(0);
}
/* ===================================================================
   11. Page hero + homepage hero — staggered entrance on load
   =================================================================== */
.c50-page-hero__inner > *,
.c50-hero__intro > * {
	opacity: 0;
	transform: translateY(22px);
	animation: c50p-heroIn .8s var(--c50p-ease) forwards;
}
.c50-page-hero__inner > *:nth-child(1), .c50-hero__intro > *:nth-child(1) { animation-delay: .05s; }
.c50-page-hero__inner > *:nth-child(2), .c50-hero__intro > *:nth-child(2) { animation-delay: .18s; }
.c50-page-hero__inner > *:nth-child(3), .c50-hero__intro > *:nth-child(3) { animation-delay: .30s; }
.c50-page-hero__inner > *:nth-child(4), .c50-hero__intro > *:nth-child(4) { animation-delay: .42s; }
.c50-page-hero__inner > *:nth-child(5), .c50-hero__intro > *:nth-child(5) { animation-delay: .54s; }
@keyframes c50p-heroIn {
	to { opacity: 1; transform: none; }
}

/* ===================================================================
   12. Icon tiles (award icon, industry-card icon-tile) — hover pop
   =================================================================== */
.c50-award-card__head i,
.c50-icon-tile {
	display: inline-flex;
	transition: transform .45s var(--c50p-ease), background .3s ease;
}
.c50-award-card:hover .c50-award-card__head i,
.c50-industry-card:hover .c50-icon-tile,
.c50-product-card:hover .c50-icon-tile {
	transform: scale(1.12) rotate(-6deg);
}

/* ===================================================================
   13. Card top-border sweep accent on hover
   =================================================================== */
.c50-award-card,
.c50-industry-card,
.c50-product-card {
	position: relative;
	overflow: hidden;
}
.c50-award-card::after,
.c50-industry-card::after,
.c50-product-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--c50p-acc), #a9c2ff);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s var(--c50p-ease);
	z-index: 3;
}
.c50-award-card:hover::after,
.c50-industry-card:hover::after,
.c50-product-card:hover::after {
	transform: scaleX(1);
}

/* ===================================================================
   14. Product tab panes — fade/slide on switch instead of hard cut
   =================================================================== */
.c50-tabpane {
	transition: opacity .35s var(--c50p-ease), transform .35s var(--c50p-ease);
}
.c50-tabpane:not(.is-active) {
	opacity: 0;
	transform: translateY(6px);
}
.c50-tabpane.is-active {
	opacity: 1;
	transform: none;
}

/* ===================================================================
   15. Tab buttons — active underline slide
   =================================================================== */
.c50-tab {
	position: relative;
	transition: color .25s ease;
}
.c50-tab::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: -1px;
	height: 2px;
	background: var(--c50p-acc);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--c50p-ease);
}
.c50-tab.is-active::after {
	transform: scaleX(1);
}

/* Reduced motion — extend the existing rule */
@media (prefers-reduced-motion: reduce) {
	.c50-page-hero__inner > *,
	.c50-hero__intro > * { animation: none !important; opacity: 1 !important; transform: none !important; }
	.c50-award-card__head i, .c50-icon-tile,
	.c50-award-card::after, .c50-industry-card::after, .c50-product-card::after,
	.c50-tabpane, .c50-tab::after { transition: none !important; }
}
body.c50--reduce-motion .c50-page-hero__inner > *,
body.c50--reduce-motion .c50-hero__intro > * { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ===================================================================
   Reduced motion — disable everything decorative, instantly
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
	.c50p-progress,
	.c50p-beam::before,
	.c50-kicker { animation: none !important; }
	.c50p-tilt { transition: none !important; transform: none !important; }
	.c50p-spotlight { display: none !important; }
	[data-reveal-premium] {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}
body.c50--reduce-motion .c50p-progress,
body.c50--reduce-motion .c50p-beam::before,
body.c50--reduce-motion .c50-kicker { animation: none !important; }
body.c50--reduce-motion .c50p-tilt { transition: none !important; transform: none !important; }
body.c50--reduce-motion .c50p-spotlight { display: none !important; }
body.c50--reduce-motion [data-reveal-premium] {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
	transition: none !important;
}