/* ================================================================
   SB Webmarketing — Scroll Animations
   CSS-only transitions triggered by IntersectionObserver (animations.js)
   ================================================================ */

/* ---------------------------------------------------------------
   Base: elements are invisible until observed
   --------------------------------------------------------------- */
.sb-animate {
	opacity: 0;
	will-change: opacity, transform;
}

/* ---------------------------------------------------------------
   Fade In Up (default)
   --------------------------------------------------------------- */
.sb-fade-in-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
	            transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sb-fade-in-up.sb-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---------------------------------------------------------------
   Fade In (no movement)
   --------------------------------------------------------------- */
.sb-fade-in {
	opacity: 0;
	transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sb-fade-in.sb-visible {
	opacity: 1;
}

/* ---------------------------------------------------------------
   Fade In Left
   --------------------------------------------------------------- */
.sb-fade-in-left {
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
	            transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sb-fade-in-left.sb-visible {
	opacity: 1;
	transform: translateX(0);
}

/* ---------------------------------------------------------------
   Fade In Right
   --------------------------------------------------------------- */
.sb-fade-in-right {
	opacity: 0;
	transform: translateX(30px);
	transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
	            transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sb-fade-in-right.sb-visible {
	opacity: 1;
	transform: translateX(0);
}

/* ---------------------------------------------------------------
   Scale In
   --------------------------------------------------------------- */
.sb-scale-in {
	opacity: 0;
	transform: scale(0.95);
	transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
	            transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sb-scale-in.sb-visible {
	opacity: 1;
	transform: scale(1);
}

/* ---------------------------------------------------------------
   Stagger Delays (for grid children)
   Applied via data-delay attribute or nth-child
   --------------------------------------------------------------- */
.sb-stagger > *:nth-child(1) { transition-delay: 0ms; }
.sb-stagger > *:nth-child(2) { transition-delay: 100ms; }
.sb-stagger > *:nth-child(3) { transition-delay: 200ms; }
.sb-stagger > *:nth-child(4) { transition-delay: 300ms; }
.sb-stagger > *:nth-child(5) { transition-delay: 400ms; }
.sb-stagger > *:nth-child(6) { transition-delay: 500ms; }
.sb-stagger > *:nth-child(7) { transition-delay: 600ms; }
.sb-stagger > *:nth-child(8) { transition-delay: 700ms; }

/* Custom delay via attribute */
[data-delay="100"] { transition-delay: 100ms !important; }
[data-delay="200"] { transition-delay: 200ms !important; }
[data-delay="300"] { transition-delay: 300ms !important; }
[data-delay="400"] { transition-delay: 400ms !important; }

/* ---------------------------------------------------------------
   Button Hover
   --------------------------------------------------------------- */
.wp-block-button__link,
.sb-btn {
	transition: background-color 0.3s ease,
	            color 0.3s ease,
	            transform 0.3s ease,
	            box-shadow 0.3s ease;
}

.wp-block-button__link:hover,
.sb-btn:hover {
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------
   Button Shimmer (shine sweep on hover)
   --------------------------------------------------------------- */
.sb-btn--primary {
	position: relative;
	overflow: hidden;
}

.sb-btn--primary::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.2),
		transparent
	);
	transition: left 0.5s ease;
	pointer-events: none;
}

.sb-btn--primary:hover::after {
	left: 120%;
}

/* ---------------------------------------------------------------
   Button Arrow Animation
   --------------------------------------------------------------- */
.sb-btn__arrow {
	display: inline-block;
	transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sb-btn:hover .sb-btn__arrow,
.sb-card:hover .sb-btn__arrow,
a:hover > .sb-btn__arrow {
	transform: translateX(4px);
}

/* ---------------------------------------------------------------
   Gradient Text Shimmer (hero label)
   --------------------------------------------------------------- */
@keyframes sb-gradient-shift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* ---------------------------------------------------------------
   Glow Pulse (CTA, cards)
   --------------------------------------------------------------- */
@keyframes sb-glow-pulse {
	0%, 100% { box-shadow: 0 0 20px rgba(51, 91, 255, 0.3); }
	50%      { box-shadow: 0 0 40px rgba(51, 91, 255, 0.5); }
}

/* ---------------------------------------------------------------
   Mesh Gradient Animation (CTA section)
   --------------------------------------------------------------- */
@keyframes sb-mesh-drift {
	0%   { background-position: 0% 0%; }
	25%  { background-position: 100% 0%; }
	50%  { background-position: 100% 100%; }
	75%  { background-position: 0% 100%; }
	100% { background-position: 0% 0%; }
}

/* ---------------------------------------------------------------
   Float Animation (decorative elements)
   --------------------------------------------------------------- */
@keyframes sb-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}

@keyframes sb-float-slow {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-8px) rotate(3deg); }
}

/* ---------------------------------------------------------------
   Star Twinkle (hero)
   --------------------------------------------------------------- */
@keyframes sb-twinkle {
	0%, 100% { opacity: var(--star-opacity, 0.2); }
	50%      { opacity: calc(var(--star-opacity, 0.2) + 0.3); }
}

/* ---------------------------------------------------------------
   Card Hover (elevation + lift)
   --------------------------------------------------------------- */
.sb-card {
	transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
	            box-shadow 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
	            border-color 0.4s ease;
}

.sb-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 40px rgba(51, 91, 255, 0.12),
	            0 4px 12px rgba(10, 37, 64, 0.06);
	border-color: rgba(51, 91, 255, 0.2);
}

/* Card icon pulse on hover */
.sb-card__icon {
	transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
	            background-color 0.4s ease;
}

.sb-card:hover .sb-card__icon {
	transform: scale(1.08);
}

/* Card link arrow animation */
.sb-card__link {
	transition: color 0.3s ease;
}

.sb-card:hover .sb-card__link {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------
   Case Study Card Hover
   --------------------------------------------------------------- */
.sb-case-card {
	transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
	            box-shadow 0.4s ease;
}

.sb-case-card:hover {
	transform: translateY(-6px) scale(1.01);
	box-shadow: 0 20px 60px rgba(51, 91, 255, 0.25);
}

/* ---------------------------------------------------------------
   Blog Card Hover
   --------------------------------------------------------------- */
.sb-blog-card {
	transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
	            box-shadow 0.4s ease;
}

.sb-blog-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 40px rgba(10, 37, 64, 0.08);
}

/* Nav link underline animation */
.sb-header__nav a {
	position: relative;
}

.sb-header__nav a::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 50%;
	width: 0;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: width 0.3s ease, left 0.3s ease;
}

.sb-header__nav a:hover::after {
	width: 100%;
	left: 0;
}

/* ---------------------------------------------------------------
   Image Hover (zoom)
   --------------------------------------------------------------- */
.sb-img-zoom {
	overflow: hidden;
}

.sb-img-zoom img {
	transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sb-img-zoom:hover img {
	transform: scale(1.03);
}

/* ---------------------------------------------------------------
   Logos Infinite Scroll — Premium Carousel
   --------------------------------------------------------------- */

/* Wrapper with edge-fade masks */
.sb-logos-wrapper {
	position: relative;
	overflow: hidden;
	padding: 1rem 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* The sliding track */
.sb-logos-track {
	display: flex;
	gap: 2.5rem;
	width: max-content;
	animation: sb-scroll-logos 20s linear infinite;
}

/* Pause on hover for readability */
.sb-logos-wrapper:hover .sb-logos-track {
	animation-play-state: paused;
}

@keyframes sb-scroll-logos {
	0%   { transform: translateX(0); }
	100% { transform: translateX(calc(-50% - 1.25rem)); }
}

/* Logo cards */
.sb-logos-track .sb-logo-card {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 180px;
	height: 64px;
	padding: 0.75rem 1.25rem;
	border: 1px solid rgba(30, 155, 255, 0.1);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(4px);
	transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.sb-logos-track .sb-logo-card:hover {
	border-color: rgba(30, 155, 255, 0.3);
	background: rgba(30, 155, 255, 0.06);
	transform: translateY(-2px);
}

.sb-logos-track .sb-logo-card img {
	max-height: 40px;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	filter: grayscale(100%) brightness(1.5);
	opacity: 0.55;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.sb-logos-track .sb-logo-card:hover img {
	filter: grayscale(0%) brightness(1);
	opacity: 1;
}

/* Light background variant */
.sb-section--light .sb-logos-track .sb-logo-card {
	border-color: rgba(10, 37, 64, 0.08);
	background: rgba(10, 37, 64, 0.03);
}

.sb-section--light .sb-logos-track .sb-logo-card:hover {
	border-color: rgba(30, 155, 255, 0.25);
	background: rgba(30, 155, 255, 0.05);
}

.sb-section--light .sb-logos-track .sb-logo-card img {
	filter: grayscale(100%) brightness(0.9);
	opacity: 0.45;
}

.sb-section--light .sb-logos-track .sb-logo-card:hover img {
	filter: grayscale(0%) brightness(1);
	opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
	.sb-logos-track {
		gap: 1.5rem;
	}
	.sb-logos-track .sb-logo-card {
		width: 110px;
		height: 48px;
		padding: 0.5rem 0.75rem;
	}
	.sb-logos-track .sb-logo-card img {
		max-height: 22px;
	}
}

/* ---------------------------------------------------------------
   Counter Animation
   --------------------------------------------------------------- */
.sb-counter {
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--text-primary);
}

.sb-counter__label {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--text-secondary);
	margin-top: 0.5rem;
}

/* ---------------------------------------------------------------
   SVG Icon Stroke Animation (hover)
   --------------------------------------------------------------- */
.sb-icon-animated path {
	stroke-dasharray: 200;
	stroke-dashoffset: 200;
	transition: stroke-dashoffset 0.6s ease;
}

.sb-card:hover .sb-icon-animated path {
	stroke-dashoffset: 0;
}

/* ---------------------------------------------------------------
   Section Divider — Mountain Ridge SVG
   --------------------------------------------------------------- */
.sb-ridge-divider {
	width: 100%;
	height: 40px;
	overflow: hidden;
	line-height: 0;
}

.sb-ridge-divider svg {
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------
   Reduce Motion (accessibility)
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sb-fade-in-up,
	.sb-fade-in,
	.sb-fade-in-left,
	.sb-fade-in-right,
	.sb-scale-in {
		transition: none;
		opacity: 1;
		transform: none;
	}

	.sb-logos-track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
	}

	.sb-logos-wrapper {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.sb-card,
	.sb-case-card,
	.sb-blog-card,
	.sb-card__icon,
	.sb-feature-card,
	.sb-btn,
	.sb-btn--gradient-border,
	.wp-block-button__link,
	.sb-btn__arrow {
		transition: none;
	}

	.sb-card:hover,
	.sb-case-card:hover,
	.sb-blog-card:hover,
	.sb-feature-card:hover {
		transform: none;
	}

	.sb-btn--primary::after {
		display: none;
	}

	.sb-img-zoom img,
	.sb-case-card__img,
	.sb-blog-card__img {
		transition: none;
	}

	.sb-hero-home__label,
	.sb-section--gradient::before,
	.sb-section--gradient::after,
	.sb-cta-final::before,
	.sb-cta-final__deco--1,
	.sb-cta-final__deco--2 {
		animation: none;
	}

	.sb-header__nav a::after {
		display: none;
	}
}