/* ==========================================================================
   CODESCRIPTUM BLOG — ANIMATIONS
   Ultra-modern scroll, hover, parallax & micro-interaction animations
   ========================================================================== */

/* ── SCROLL REVEAL ─────────────────────────────────── */
[data-animate]{
	opacity:0;
	transition:opacity .7s cubic-bezier(.4,0,.2,1),
	           transform .7s cubic-bezier(.4,0,.2,1);
}
[data-animate="fade-up"]{
	transform:translateY(40px);
}
[data-animate="fade-down"]{
	transform:translateY(-40px);
}
[data-animate="fade-left"]{
	transform:translateX(60px);
}
[data-animate="fade-right"]{
	transform:translateX(-60px);
}
[data-animate="scale-in"]{
	transform:scale(0.9);
}
[data-animate="zoom-rotate"]{
	transform:scale(0.85) rotate(-3deg);
}
[data-animate="blur-in"]{
	filter:blur(10px);
	transform:translateY(20px);
}

[data-animate].is-visible{
	opacity:1;
	transform:none;
	filter:none;
}

/* Staggered children */
[data-stagger] > *{
	opacity:0;
	transform:translateY(30px);
	transition:opacity .5s cubic-bezier(.4,0,.2,1),
	           transform .5s cubic-bezier(.4,0,.2,1);
}
[data-stagger].is-visible > *:nth-child(1){ transition-delay:.05s; }
[data-stagger].is-visible > *:nth-child(2){ transition-delay:.12s; }
[data-stagger].is-visible > *:nth-child(3){ transition-delay:.19s; }
[data-stagger].is-visible > *:nth-child(4){ transition-delay:.26s; }
[data-stagger].is-visible > *:nth-child(5){ transition-delay:.33s; }
[data-stagger].is-visible > *:nth-child(6){ transition-delay:.40s; }
[data-stagger].is-visible > *:nth-child(7){ transition-delay:.47s; }
[data-stagger].is-visible > *:nth-child(8){ transition-delay:.54s; }
[data-stagger].is-visible > *:nth-child(9){ transition-delay:.61s; }
[data-stagger].is-visible > *{
	opacity:1;
	transform:none;
}

/* ── CARD TILT (3D hover) ──────────────────────────── */
.post-card{
	perspective:800px;
}
.post-card__inner{
	transition:transform .4s cubic-bezier(.4,0,.2,1);
	transform-style:preserve-3d;
}

/* ── MAGNETIC BUTTON ──────────────────────────────── */
.btn{
	transition:all .35s cubic-bezier(.4,0,.2,1),
	           box-shadow .35s ease;
}
.btn:active{
	transform:scale(0.97) !important;
}

/* ── GRADIENT BORDER ANIMATION ─────────────────────── */
.post-card::before{
	content:'';
	position:absolute;inset:-1px;
	border-radius:var(--radius-lg);
	padding:1px;
	background:conic-gradient(
		from var(--card-angle, 0deg),
		transparent 0%,
		var(--cat-color) 10%,
		transparent 20%
	);
	-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
	-webkit-mask-composite:xor;
	mask-composite:exclude;
	opacity:0;
	transition:opacity .5s;
	z-index:1;
	pointer-events:none;
}
.post-card:hover::before{
	opacity:1;
	animation:border-spin 3s linear infinite;
}
@keyframes border-spin{
	to{--card-angle:360deg}
}
@property --card-angle{
	syntax:'<angle>';
	initial-value:0deg;
	inherits:false;
}

/* ── FLOATING PARTICLES ────────────────────────────── */
.hero__particle{
	position:absolute;
	width:4px;height:4px;
	background:var(--cat-color);
	border-radius:50%;
	opacity:0;
	animation:particle-float 8s ease-in-out infinite;
}
.hero__particle:nth-child(1){ left:10%;top:20%;animation-delay:0s;animation-duration:7s; }
.hero__particle:nth-child(2){ left:30%;top:60%;animation-delay:1.5s;animation-duration:9s; }
.hero__particle:nth-child(3){ left:50%;top:30%;animation-delay:3s;animation-duration:6s; }
.hero__particle:nth-child(4){ left:70%;top:70%;animation-delay:0.5s;animation-duration:8s; }
.hero__particle:nth-child(5){ left:85%;top:40%;animation-delay:2s;animation-duration:10s; }
.hero__particle:nth-child(6){ left:15%;top:80%;animation-delay:4s;animation-duration:7.5s; }
.hero__particle:nth-child(7){ left:60%;top:15%;animation-delay:1s;animation-duration:9.5s; }
.hero__particle:nth-child(8){ left:90%;top:85%;animation-delay:3.5s;animation-duration:6.5s; }
.hero__particle:nth-child(9){ left:40%;top:80%;animation-delay:2.5s;animation-duration:8.5s; }
.hero__particle:nth-child(10){ left:75%;top:25%;animation-delay:4.5s;animation-duration:7.2s; }
.hero__particle:nth-child(11){ left:20%;top:45%;animation-delay:1.2s;animation-duration:9.8s; }
.hero__particle:nth-child(12){ left:55%;top:65%;animation-delay:0.8s;animation-duration:6.8s; }
.hero__particle:nth-child(13){ left:5%;top:35%;animation-delay:3.2s;animation-duration:7.8s; }
.hero__particle:nth-child(14){ left:65%;top:90%;animation-delay:1.8s;animation-duration:8.2s; }
.hero__particle:nth-child(15){ left:82%;top:55%;animation-delay:0.3s;animation-duration:9.2s; }
.hero__particle:nth-child(16){ left:35%;top:10%;animation-delay:5s;animation-duration:6.5s; }
@keyframes particle-float{
	0%{ opacity:0;transform:translateY(0) scale(0); }
	15%{ opacity:.6;transform:translateY(-20px) scale(1); }
	50%{ opacity:.3;transform:translateY(-60px) scale(0.8); }
	85%{ opacity:.5;transform:translateY(-100px) scale(1.2); }
	100%{ opacity:0;transform:translateY(-140px) scale(0); }
}

/* ── GLITCH TEXT ────────────────────────────────────── */
.glitch{
	position:relative;
}
.glitch::before,
.glitch::after{
	content:attr(data-text);
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	background:var(--bg-primary);
	overflow:hidden;
	pointer-events:none;
}
.glitch::before{
	left:2px;text-shadow:-2px 0 var(--cat-color);
	clip-path:polygon(0 0,100% 0,100% 45%,0 45%);
	animation:glitch-top 2.5s infinite linear alternate;
}
.glitch::after{
	left:-2px;text-shadow:2px 0 var(--pink);
	clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%);
	animation:glitch-bottom 3s infinite linear alternate;
}
@keyframes glitch-top{
	0%,90%,100%{transform:none;opacity:1}
	92%{transform:translate(-3px,-1px);opacity:.8}
	94%{transform:translate(3px,1px);opacity:.6}
	96%{transform:translate(-1px,2px);opacity:.8}
	98%{transform:translate(2px,-1px);opacity:1}
}
@keyframes glitch-bottom{
	0%,88%,100%{transform:none;opacity:1}
	90%{transform:translate(3px,1px);opacity:.7}
	93%{transform:translate(-2px,-1px);opacity:.8}
	95%{transform:translate(1px,2px);opacity:.6}
	97%{transform:translate(-3px,-1px);opacity:1}
}

/* ── MORPHING BLOB (hero background) ──────────────── */
.morph-blob{
	position:absolute;
	width:450px;height:450px;
	filter:blur(60px);
	opacity:.15;
	animation:morph 15s ease-in-out infinite;
}
@keyframes morph{
	0%,100%{
		border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;
		transform:rotate(0deg) scale(1);
	}
	25%{
		border-radius:30% 60% 70% 40% / 50% 60% 30% 60%;
		transform:rotate(90deg) scale(1.1);
	}
	50%{
		border-radius:50% 60% 30% 60% / 30% 50% 70% 60%;
		transform:rotate(180deg) scale(0.95);
	}
	75%{
		border-radius:60% 30% 50% 40% / 70% 40% 50% 60%;
		transform:rotate(270deg) scale(1.05);
	}
}

/* ── TEXT REVEAL (typing) ──────────────────────────── */
.text-reveal{
	overflow:hidden;
	display:inline-block;
}
.text-reveal__inner{
	display:inline-block;
	transform:translateY(110%);
	transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.text-reveal.is-visible .text-reveal__inner{
	transform:translateY(0);
}

/* ── SHINE EFFECT (cards, buttons) ────────────────── */
.shine{
	position:relative;overflow:hidden;
}
.shine::after{
	content:'';
	position:absolute;inset:0;
	background:linear-gradient(
		110deg,
		transparent 20%,
		rgba(255,255,255,0.05) 40%,
		rgba(255,255,255,0.12) 50%,
		rgba(255,255,255,0.05) 60%,
		transparent 80%
	);
	transform:translateX(-100%);
	transition:none;
}
.shine:hover::after{
	animation:shine-sweep .8s ease forwards;
}
@keyframes shine-sweep{
	to{ transform:translateX(100%); }
}

/* ── COUNTER ANIMATION ─────────────────────────────── */
.count-up{
	display:inline-block;
	font-variant-numeric:tabular-nums;
}

/* ── WAVE DIVIDER ──────────────────────────────────── */
.wave-divider{
	position:absolute;bottom:0;left:0;width:100%;
	overflow:hidden;line-height:0;
}
.wave-divider svg{
	position:relative;display:block;
	width:calc(100% + 1.3px);height:60px;
}
.wave-divider svg path{
	fill:var(--bg-primary);
}

/* ── SCROLL LINE (single post) ────────────────────── */
.reading-progress{
	position:fixed;left:24px;top:50%;
	transform:translateY(-50%);
	width:3px;height:120px;
	background:rgba(255,255,255,0.06);
	border-radius:3px;
	z-index:100;
	overflow:hidden;
}
.reading-progress__fill{
	width:100%;height:0%;
	background:var(--cat-gradient);
	border-radius:3px;
	transition:height .1s linear;
}
@media(max-width:1200px){ .reading-progress{ display:none; } }

/* ── MARQUEE (infinite scroll) ────────────────────── */
.marquee{
	overflow:hidden;
	white-space:nowrap;
	padding:14px 0;
}
.marquee__track{
	display:inline-flex;gap:40px;
	animation:marquee-scroll 30s linear infinite;
}
.marquee__track:not(.marquee__track--neon) span{
	font-family:'Space Grotesk',sans-serif;
	font-size:1rem;font-weight:600;
	color:rgba(255,255,255,0.08);
	text-transform:uppercase;letter-spacing:.1em;
}
@keyframes marquee-scroll{
	0%{transform:translateX(0)}
	100%{transform:translateX(-50%)}
}

/* ── NOISE TEXTURE OVERLAY ─────────────────────────── */
.noise-overlay{
	position:fixed;inset:0;z-index:9998;
	pointer-events:none;
	opacity:.015;
	background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat:repeat;
}

/* ── HOVER LINE EFFECT ─────────────────────────────── */
.hover-line{
	position:relative;
	display:inline;
}
.hover-line::after{
	content:'';
	position:absolute;bottom:-2px;left:0;
	width:0%;height:2px;
	background:var(--cat-gradient);
	transition:width .3s cubic-bezier(.4,0,.2,1);
}
.hover-line:hover::after{
	width:100%;
}

/* ── SPRING BOUNCE ────────────────────────────────── */
@keyframes spring-in{
	0%{transform:scale(0);opacity:0}
	40%{transform:scale(1.08)}
	60%{transform:scale(0.97)}
	80%{transform:scale(1.02)}
	100%{transform:scale(1);opacity:1}
}
.spring-in{
	animation:spring-in .6s cubic-bezier(.175,.885,.32,1.275) forwards;
}

/* ── LOADING SKELETON ─────────────────────────────── */
.skeleton{
	background:linear-gradient(
		90deg,
		rgba(255,255,255,0.04) 25%,
		rgba(255,255,255,0.08) 50%,
		rgba(255,255,255,0.04) 75%
	);
	background-size:200% 100%;
	animation:skeleton-loading 1.5s ease-in-out infinite;
	border-radius:var(--radius-sm);
}
@keyframes skeleton-loading{
	0%{background-position:200% 0}
	100%{background-position:-200% 0}
}

/* ── TOOLTIP ──────────────────────────────────────── */
[data-tooltip]{
	position:relative;
}
[data-tooltip]::after{
	content:attr(data-tooltip);
	position:absolute;bottom:calc(100% + 8px);left:50%;
	transform:translateX(-50%) translateY(4px);
	font-size:.72rem;font-weight:500;
	color:#fff;
	background:rgba(15,23,42,0.95);
	border:1px solid var(--border-medium);
	padding:4px 10px;border-radius:6px;
	white-space:nowrap;
	opacity:0;pointer-events:none;
	transition:all .2s;
}
[data-tooltip]:hover::after{
	opacity:1;
	transform:translateX(-50%) translateY(0);
}

/* ── PULSE GLOW (CTA) ─────────────────────────────── */
@keyframes pulse-glow{
	0%,100%{box-shadow:0 0 20px rgba(99,102,241,0.2)}
	50%{box-shadow:0 0 40px rgba(99,102,241,0.4),0 0 80px rgba(99,102,241,0.1)}
}
.pulse-cta{
	animation:pulse-glow 3s ease-in-out infinite;
}

/* ── NUMBER TICKER ────────────────────────────────── */
.ticker{
	display:inline-flex;
	overflow:hidden;
	height:1.2em;line-height:1.2;
}
.ticker__digit{
	display:inline-block;
	animation:tick-up .6s ease forwards;
}
@keyframes tick-up{
	from{transform:translateY(100%);opacity:0}
	to{transform:translateY(0);opacity:1}
}

/* ── IMAGE PARALLAX ──────────────────────────────── */
.parallax-img{
	overflow:hidden;
	border-radius:var(--radius-lg);
}
.parallax-img img{
	transition:transform .1s linear;
	will-change:transform;
}

/* ── FOCUS GLOW (accessibility) ───────────────────── */
a:focus-visible,
button:focus-visible{
	outline:2px solid var(--cat-color);
	outline-offset:3px;
	border-radius:4px;
}

/* ── GLOW PULSE (category tiles, CTA cards) ──────────── */
@keyframes glow-pulse{
	0%,100%{box-shadow:0 0 0 rgba(99,102,241,0)}
	50%{box-shadow:0 0 25px rgba(99,102,241,0.15),0 0 60px rgba(99,102,241,0.05)}
}
.cat-tile:hover{
	animation:glow-pulse 2s ease-in-out infinite;
}

/* ── GRADIENT TEXT SHIMMER ────────────────────────────── */
@keyframes text-shimmer{
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
.text-shimmer{
	background:linear-gradient(90deg,var(--cat-color),var(--cyan),var(--pink),var(--cat-color));
	background-size:300% 100%;
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	background-clip:text;
	animation:text-shimmer 4s ease-in-out infinite;
}

/* ── FLOATING BADGE ──────────────────────────────────── */
@keyframes badge-float{
	0%,100%{transform:translateY(0) rotate(0deg)}
	25%{transform:translateY(-3px) rotate(0.5deg)}
	75%{transform:translateY(3px) rotate(-0.5deg)}
}
.badge{
	animation:badge-float 4s ease-in-out infinite;
	display:inline-flex;
}

/* ── ICON BOUNCE ON HOVER ────────────────────────────── */
.cat-tile:hover .cat-tile__icon i{
	animation:icon-bounce .5s cubic-bezier(.4,0,.2,1);
}
@keyframes icon-bounce{
	0%{transform:scale(1) rotate(0)}
	30%{transform:scale(1.3) rotate(-10deg)}
	60%{transform:scale(0.9) rotate(5deg)}
	100%{transform:scale(1) rotate(0)}
}

/* ── POST CARD ENHANCED HOVER ────────────────────────── */
.posts-grid .post-card{
	transition:transform .4s cubic-bezier(.4,0,.2,1),
	           box-shadow .4s ease,
	           background .3s ease,
	           border-color .3s ease;
}
.posts-grid .post-card:hover{
	box-shadow:0 16px 48px rgba(0,0,0,0.3),0 0 0 1px rgba(99,102,241,0.08);
}

/* ── CTA INLINE GLOW ─────────────────────────────────── */
.cta-inline{
	position:relative;
	overflow:hidden;
}
.cta-inline::before{
	content:'';position:absolute;inset:0;
	background:linear-gradient(135deg,rgba(99,102,241,0.05),rgba(6,182,212,0.05));
	opacity:0;transition:opacity .6s;
}
.cta-inline:hover::before{
	opacity:1;
}

/* ── STATS COUNTER GLOW ──────────────────────────────── */
.hero__stat-value{
	text-shadow:0 0 40px rgba(99,102,241,0.3);
}

/* ── PAGINATION HOVER ────────────────────────────────── */
.pagination a{
	transition:all .3s cubic-bezier(.4,0,.2,1);
}
.pagination a:hover{
	transform:translateY(-2px);
	box-shadow:0 4px 16px rgba(99,102,241,0.2);
}

/* ── CTA BETWEEN POSTS — ROTATING GLOW ──────────────── */
.cta-between{
	position:relative;overflow:hidden;
}
.cta-between::before{
	content:'';position:absolute;top:-50%;left:-50%;
	width:200%;height:200%;
	background:conic-gradient(from 0deg,transparent,rgba(99,102,241,0.03),transparent,rgba(6,182,212,0.03),transparent);
	animation:cta-rotate 8s linear infinite;
	pointer-events:none;
}
@keyframes cta-rotate{
	to{transform:rotate(360deg)}
}

/* ── FOOTER LINK UNDERLINE ───────────────────────────── */
.site-footer a{
	position:relative;
}
.site-footer a::after{
	content:'';position:absolute;bottom:-1px;left:0;
	width:0;height:1px;
	background:var(--cat-gradient);
	transition:width .3s ease;
}
.site-footer a:hover::after{
	width:100%;
}

/* ── MORPH BLOB VARIANTS ─────────────────────────────── */
.morph-blob:nth-child(4){
	animation:morph 18s ease-in-out infinite;
}
.morph-blob:nth-child(5){
	animation:morph 22s ease-in-out infinite reverse;
}

/* ── HERO CONTENT ENTRANCE ───────────────────────────── */
@keyframes hero-entrance{
	0%{opacity:0;transform:translateY(40px) scale(0.97)}
	100%{opacity:1;transform:translateY(0) scale(1)}
}
.hero__content.is-visible{
	animation:hero-entrance .8s cubic-bezier(.16,1,.3,1) forwards;
}

/* ── PULSE DOT (badge icon) ──────────────────────────── */
@keyframes pulse-dot-anim{
	0%,100%{opacity:1;transform:scale(1)}
	50%{opacity:.6;transform:scale(1.3)}
}
.pulse-dot{
	animation:pulse-dot-anim 2s ease-in-out infinite;
}

/* ── SECTION DIVIDER GRADIENT LINE ───────────────────── */
.section--lighter::before{
	content:'';position:absolute;top:0;left:10%;right:10%;
	height:1px;
	background:linear-gradient(90deg,transparent,rgba(99,102,241,0.15),rgba(6,182,212,0.1),transparent);
}

/* ── CTA SERVICES CARD HOVER LIFT ────────────────────── */
.cta-services__card{
	transition:transform .4s cubic-bezier(.4,0,.2,1),
	           box-shadow .4s ease,
	           border-color .3s ease;
}
.cta-services__card:hover .cta-services__icon{
	transform:scale(1.1) rotate(-5deg);
	transition:transform .3s cubic-bezier(.4,0,.2,1);
}

/* ── TAG HOVER ───────────────────────────────────────── */
.post-tags a{
	transition:all .25s ease;
}
.post-tags a:hover{
	transform:translateY(-2px);
	box-shadow:0 4px 12px rgba(99,102,241,0.15);
}

/* ── NEWSLETTER INPUT FOCUS GLOW ─────────────────────── */
.newsletter__input:focus{
	box-shadow:0 0 0 3px rgba(99,102,241,0.2),0 0 20px rgba(99,102,241,0.08);
}

/* ── WHITE SECTION CARD ANIMATIONS ───────────────────── */
.why-card--light::after{
	content:'';position:absolute;top:-50%;right:-50%;
	width:100%;height:100%;
	background:radial-gradient(circle,rgba(99,102,241,0.04),transparent 70%);
	opacity:0;transition:opacity .5s;
	pointer-events:none;
}
.why-card--light:hover::after{
	opacity:1;
}
@keyframes number-fade{
	0%{opacity:0;transform:translateY(10px)}
	100%{opacity:1;transform:translateY(0)}
}
.why-card--light.is-visible .why-card__number{
	animation:number-fade .6s cubic-bezier(.16,1,.3,1) forwards;
}

/* ── PROCESS TIMELINE DOT PULSE ──────────────────────── */
@keyframes timeline-pulse{
	0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,0.3)}
	50%{box-shadow:0 0 0 10px rgba(99,102,241,0)}
}
.process-step__dot{
	animation:timeline-pulse 2.5s ease-in-out infinite;
}
.process-step:nth-child(2) .process-step__dot{animation-delay:.5s}
.process-step:nth-child(3) .process-step__dot{animation-delay:1s}
.process-step:nth-child(4) .process-step__dot{animation-delay:1.5s}

/* ── SERVICE CARD ICON GLOW ──────────────────────────── */
@keyframes icon-glow{
	0%,100%{box-shadow:0 4px 20px rgba(0,0,0,0.3)}
	50%{box-shadow:0 4px 30px rgba(99,102,241,0.3),0 0 20px rgba(99,102,241,0.1)}
}
.service-card:hover .service-card__icon{
	animation:icon-glow 2s ease-in-out infinite;
}

/* ── HERO BADGE ENTRANCE ─────────────────────────────── */
@keyframes badge-entrance{
	0%{opacity:0;transform:translateY(-10px) scale(0.9)}
	100%{opacity:1;transform:translateY(0) scale(1)}
}
.hero__eyebrow .badge{
	animation:badge-entrance .5s cubic-bezier(.16,1,.3,1) .2s both;
}

/* ── FEATURED CARD PULSE BORDER ──────────────────────── */
.featured-card::before{
	content:'';position:absolute;inset:-1px;
	border-radius:var(--radius-xl);
	padding:1px;
	background:conic-gradient(from var(--card-angle,0deg),transparent 0%,rgba(99,102,241,0.2) 10%,transparent 20%);
	-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
	-webkit-mask-composite:xor;mask-composite:exclude;
	opacity:0;transition:opacity .5s;pointer-events:none;z-index:2;
}
.featured-card:hover::before{
	opacity:1;animation:border-spin 4s linear infinite;
}

/* ── CTA BANNER TEXT GLOW ────────────────────────────── */
.cta-banner--animated .cta-banner__title{
	text-shadow:0 0 60px rgba(99,102,241,0.15);
}

/* ── MARQUEE HOVER PAUSE ─────────────────────────────── */
.marquee:hover .marquee__track{
	animation-play-state:paused;
}

/* ── REDUCE MOTION ────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
	*,*::before,*::after{
		animation-duration:.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.01ms !important;
	}
	[data-animate]{
		opacity:1 !important;
		transform:none !important;
		filter:none !important;
	}
	.cursor-glow,.noise-overlay{ display:none !important; }
}