/* =========================================================================
   It Customs - Lightweight Landing Effects (CSS only)
   Replacement for the heavy GSAP/ScrollSmoother stack in animation.js.
   Pair this with assets/js/landing-effects.js (IntersectionObserver) which
   toggles the `.is-visible` class as elements scroll into view.
   ========================================================================= */

/* Smooth native scroll without ScrollSmoother overhead */
html { scroll-behavior: smooth; }

/* Base "appear on scroll" pattern -------------------------------------------
   Add .ic-reveal to any element you want to animate in.
   landing-effects.js will add .is-visible when it enters the viewport.       */
.ic-reveal {
	opacity: 0;
	transform: translate3d(0, 32px, 0);
	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
.ic-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* Variants — pick the direction with an extra modifier */
.ic-reveal.ic-from-left  { transform: translate3d(-40px, 0, 0); }
.ic-reveal.ic-from-right { transform: translate3d(40px, 0, 0); }
.ic-reveal.ic-from-down  { transform: translate3d(0, -32px, 0); }
.ic-reveal.ic-zoom       { transform: scale(0.92); }
.ic-reveal.ic-from-left.is-visible,
.ic-reveal.ic-from-right.is-visible,
.ic-reveal.ic-from-down.is-visible,
.ic-reveal.ic-zoom.is-visible {
	transform: translate3d(0, 0, 0) scale(1);
}

/* Stagger helper: nth-child delays for groups of cards/items */
.ic-stagger > .ic-reveal:nth-child(1) { transition-delay: 0.05s; }
.ic-stagger > .ic-reveal:nth-child(2) { transition-delay: 0.15s; }
.ic-stagger > .ic-reveal:nth-child(3) { transition-delay: 0.25s; }
.ic-stagger > .ic-reveal:nth-child(4) { transition-delay: 0.35s; }
.ic-stagger > .ic-reveal:nth-child(5) { transition-delay: 0.45s; }
.ic-stagger > .ic-reveal:nth-child(6) { transition-delay: 0.55s; }

/* Headline auto-fade ---------------------------------------------------------
   Replaces the SplitText char-by-char animation that animation.js used to
   apply to .headline. Now headlines simply fade+rise when in view.           */
.headline {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition:
		opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.headline.is-visible,
.headline.is-visible * { opacity: 1; }
.headline.is-visible { transform: translate3d(0, 0, 0); }

/* If JS is disabled, headlines should still be visible */
.no-js .headline,
.no-js .ic-reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* Subtle hero image float ---------------------------------------------------- */
@keyframes icFloat {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(0, -10px, 0); }
}
.ic-float { animation: icFloat 6s ease-in-out infinite; }

/* Background gradient pulse for primary CTAs --------------------------------- */
@keyframes icPulseGlow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.35); }
	50%      { box-shadow: 0 0 0 14px rgba(0, 229, 255, 0); }
}
.ic-pulse { animation: icPulseGlow 2.4s ease-out infinite; }

/* Word-rotate / counter fallback (animation.js used GSAP for these) ---------- */
@keyframes icSpin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
.word-rotate-box.animate-rotate { animation: icSpin 14s linear infinite; }

/* On-load landing animations -------------------------------------------------
   Pure CSS, run automatically when the page loads. No JS / no scroll needed.
   Apply directly to elements you want to animate as the page lands:
     .land-fade-up      fade + translate up
     .land-slide-left   slide in from the left
     .land-slide-right  slide in from the right
     .land-slide-down   slide in from above
     .land-zoom-in      zoom in from 0.92x
   Stack with .land-delay-N (1-6) to stagger groups (each step ~ 0.12s).      */
@keyframes icLandFadeUp {
	from { opacity: 0; transform: translate3d(0, 36px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes icLandSlideLeft {
	from { opacity: 0; transform: translate3d(-56px, 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes icLandSlideRight {
	from { opacity: 0; transform: translate3d(56px, 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes icLandSlideDown {
	from { opacity: 0; transform: translate3d(0, -36px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes icLandZoomIn {
	from { opacity: 0; transform: scale(0.92); }
	to   { opacity: 1; transform: scale(1); }
}

.land-fade-up,
.land-slide-left,
.land-slide-right,
.land-slide-down,
.land-zoom-in {
	opacity: 0;
	animation-duration: 0.95s;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	animation-fill-mode: forwards;
	will-change: opacity, transform;
}
.land-fade-up     { animation-name: icLandFadeUp; }
.land-slide-left  { animation-name: icLandSlideLeft; }
.land-slide-right { animation-name: icLandSlideRight; }
.land-slide-down  { animation-name: icLandSlideDown; }
.land-zoom-in     { animation-name: icLandZoomIn; }

.land-delay-1 { animation-delay: 0.10s; }
.land-delay-2 { animation-delay: 0.22s; }
.land-delay-3 { animation-delay: 0.34s; }
.land-delay-4 { animation-delay: 0.46s; }
.land-delay-5 { animation-delay: 0.58s; }
.land-delay-6 { animation-delay: 0.70s; }

/* Hero banner ---------------------------------------------------------------
   Runs immediately on load (not scroll-triggered) so the hero text always
   animates in even though it's above the fold.                             */
@keyframes icHeroFadeUp {
	from { opacity: 0; transform: translate3d(0, 28px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes icHeroBadgeFade {
	from { opacity: 0; transform: scale(0.9); filter: blur(6px); }
	to   { opacity: 1; transform: scale(1);   filter: blur(0); }
}
@keyframes icHeroShine {
	0%   { background-position: 200% center; }
	100% { background-position: -200% center; }
}
@keyframes icHeroSlideRight {
	from { opacity: 0; transform: translate3d(-28px, 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Badge above the hero title */
.hero-badge {
	display: inline-block;
	opacity: 0;
	animation: icHeroBadgeFade 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

/* Hero H1 — fade-up plus a slow shine sweep that loops gently */
.hero-title {
	opacity: 0;
	background-image: linear-gradient(
		90deg,
		#ffffff 0%,
		#ffffff 35%,
		#00E5FF 50%,
		#ffffff 65%,
		#ffffff 100%
	);
	background-size: 200% auto;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation:
		icHeroFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards,
		icHeroShine 4s linear 1.25s infinite;
}

/* Override the .headline scroll-reveal for the hero so it doesn't double-run */
.hero-title.headline { opacity: 0; transform: none; transition: none; }
.hero-title.headline.is-visible { opacity: 0; }

/* Hero CTA + stats — slide in from the left, staggered */
.main-banner .btn,
.main-banner button[data-type] {
	opacity: 0;
	animation: icHeroSlideRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}
.main-banner .sm\:flex.items-center.relative > div {
	opacity: 0;
	animation: icHeroFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.75s forwards;
}
.main-banner .sm\:flex.items-center.relative > div:last-child {
	animation-delay: 0.95s;
}

/* Reduce motion — respect OS-level preference -------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ic-reveal,
	.headline,
	.ic-float,
	.ic-pulse,
	.hero-badge,
	.hero-title,
	.main-banner .btn,
	.main-banner button[data-type],
	.main-banner .sm\:flex.items-center.relative > div,
	.land-fade-up,
	.land-slide-left,
	.land-slide-right,
	.land-slide-down,
	.land-zoom-in,
	.word-rotate-box.animate-rotate {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
		-webkit-text-fill-color: currentColor !important;
		background: none !important;
	}
}