/* ==========================================================================
   Shiva Tatwa Digital, animations
   Scroll reveals, keyframes and the reduced-motion override.
   ========================================================================== */

/* Scroll reveal. Elements are only hidden once JS has confirmed it is running
   (html.js), so content is never invisible if scripts fail. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .9s var(--ease), transform .9s var(--ease);
	transition-delay: calc(var(--d, 0) * 70ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Hero entrance */
.js .hero [data-reveal] { transform: translateY(36px); filter: blur(6px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); }
.js .hero [data-reveal].is-visible { filter: none; }
.js .hero__content > :nth-child(1) { --d: 1; }
.js .hero__content > :nth-child(2) { --d: 3; }
.js .hero__content > :nth-child(3) { --d: 5; }
.js .hero__content > :nth-child(4) { --d: 7; }
.js .hero__content > :nth-child(5) { --d: 9; }
.hero__visual { animation: hero-visual 1.6s var(--ease) both .2s; }

.text-gradient { animation: gradient-shift 8s ease-in-out infinite; }

@keyframes hero-visual { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes underline-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dash-draw { to { stroke-dashoffset: 0; } }
@keyframes dash-fade { to { opacity: 1; } }
@keyframes dash-bar { to { transform: scaleX(1); } }
@keyframes pulse-accent { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .6), 0 0 18px var(--c-accent); } 70% { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0), 0 0 18px var(--c-accent); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0), 0 0 18px var(--c-accent); } }
@keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes float-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 30px) scale(1.08); } }
@keyframes float-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(50px, -30px) scale(1.12); } }
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); } 70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
@keyframes ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes scroll-dot { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes word-in { from { opacity: 0; transform: translateY(.5em) rotateX(-60deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes word-out { to { opacity: 0; transform: translateY(-.5em) rotateX(60deg); filter: blur(6px); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Respect the visitor's motion preference: no movement, instant reveals. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		transition-delay: 0s !important;
	}
	.js [data-reveal] { opacity: 1; transform: none; filter: none; }
	.marquee__track, .tools__track { animation: none; }
	.tools__track { flex-wrap: wrap; width: auto; justify-content: center; }
	.tools__track > [aria-hidden="true"], .marquee__track > :nth-child(n+8) { display: none; }
	/* Show the finished dashboard state instantly. */
	.dash__line { stroke-dashoffset: 0; }
	.dash__area, .dash__pin { opacity: 1; }
	.dash__bar i { transform: none; }
	.cursor-glow { display: none; }
}

/* Section animations (step tabs, call-to-action border, page banner light beam, purpose glow) */
@keyframes step-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@property --cta-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes cta-spin { to { --cta-angle: 360deg; } }
@keyframes beam { from { transform: rotate(22deg) translateX(-8%); } to { transform: rotate(22deg) translateX(10%); } }
@keyframes spot-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.08); } }