/**
 * Shriram Genetics: Design Tokens, Surface Palette, and Motion Foundation
 *
 * Agrow-inspired architectural tokens for native Gutenberg and Full Site Editing.
 * Establishes color roles, organic geometry, spacing primitives, shadows,
 * button foundations, and hardware-accelerated viewport reveals.
 *
 * @package Shriram_Genetics
 * @since 1.1.0
 */

/* =========================================================================
   1. Design Token Layer
   ========================================================================= */

:root {
	/* Semantic Color Roles */
	--sg-color-navy: #0B2341;
	--sg-color-navy-dark: #0A1D36;
	--sg-color-blue: #0E5EB8;
	--sg-color-blue-dark: #082E63;
	--sg-color-green: #4E9B43;
	--sg-color-green-soft: #EAF5E8;
	--sg-color-cream: #F9F8F5;
	--sg-color-mint: #EDF6EC;
	--sg-color-surface: #FFFFFF;
	--sg-color-surface-cream: #F9F8F5;
	--sg-color-surface-mint: #EDF6EC;
	--sg-color-text: #172033;
	--sg-color-muted: #667085;
	--sg-color-border: #E5EAF0;
	--sg-color-border-subtle: #EBEFEB;
	--sg-color-gold: #E8B923;

	/* Spacing Scale */
	--sg-space-xs: 0.5rem;    /* 8px */
	--sg-space-sm: 0.75rem;   /* 12px */
	--sg-space-md: 1rem;      /* 16px */
	--sg-space-lg: 1.5rem;    /* 24px */
	--sg-space-xl: 2rem;      /* 32px */
	--sg-space-2xl: 3rem;     /* 48px */
	--sg-space-3xl: 4.5rem;   /* 72px */

	/* Section Rhythm */
	--sg-space-section-mobile: clamp(3.5rem, 8vw, 5rem);
	--sg-space-section-desktop: clamp(5rem, 8vw, 8rem);

	/* Content Layout Widths */
	--sg-width-reading: 780px;
	--sg-width-content: 1200px;
	--sg-width-wide: 1360px;
	--sg-width-full: 100%;

	/* Border Radius Hierarchy */
	--sg-radius-xs: 6px;
	--sg-radius-sm: 10px;
	--sg-radius-md: 18px;
	--sg-radius-lg: 28px;
	--sg-radius-xl: 40px;
	--sg-radius-pill: 9999px;

	/* Controlled Shadow System */
	--sg-shadow-soft: 0 4px 16px rgba(11, 35, 65, 0.05);
	--sg-shadow-card: 0 10px 24px rgba(11, 35, 65, 0.07);
	--sg-shadow-lift: 0 16px 36px rgba(11, 35, 65, 0.10);
	--sg-shadow-button: 0 4px 12px rgba(14, 94, 184, 0.22);

	/* Motion Durations */
	--sg-duration-fast: 180ms;
	--sg-duration-normal: 300ms;
	--sg-duration-reveal: 600ms;
	--sg-duration-slow: 1000ms;

	/* Smooth Modern Easing */
	--sg-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
	--sg-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--sg-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   2. Button Foundation Primitives
   ========================================================================= */

.sg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none !important;
	border: 2px solid transparent;
	border-radius: var(--sg-radius-sm);
	cursor: pointer;
	transition: background-color var(--sg-duration-normal) var(--sg-ease-standard),
	            color var(--sg-duration-normal) var(--sg-ease-standard),
	            border-color var(--sg-duration-normal) var(--sg-ease-standard),
	            transform var(--sg-duration-fast) var(--sg-ease-standard),
	            box-shadow var(--sg-duration-normal) var(--sg-ease-standard);
	will-change: transform, box-shadow;
}

.sg-btn:focus-visible {
	outline: 2px solid var(--sg-color-blue);
	outline-offset: 3px;
}

/* Pill Button */
.sg-btn--pill {
	border-radius: var(--sg-radius-pill);
	padding-left: 1.75rem;
	padding-right: 1.75rem;
}

/* Primary Solid Button */
.sg-btn--primary {
	background-color: var(--sg-color-blue);
	color: #ffffff !important;
	border-color: var(--sg-color-blue);
}

.sg-btn--primary:hover {
	background-color: var(--sg-color-blue-dark);
	border-color: var(--sg-color-blue-dark);
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: var(--sg-shadow-button);
}

.sg-btn--primary:active {
	transform: translateY(0);
}

/* Secondary Outline / Ghost Button */
.sg-btn--secondary {
	background-color: transparent;
	color: var(--sg-color-navy) !important;
	border-color: var(--sg-color-navy);
}

.sg-btn--secondary:hover {
	background-color: var(--sg-color-navy);
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: var(--sg-shadow-soft);
}

.sg-btn--secondary:active {
	transform: translateY(0);
}

/* White Ghost Button (for Dark Backgrounds / Hero) */
.sg-btn--white-ghost {
	background-color: transparent;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.7);
}

.sg-btn--white-ghost:hover {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: #ffffff;
	color: #ffffff !important;
	transform: translateY(-2px);
}

/* Agricultural Green Button */
.sg-btn--green {
	background-color: var(--sg-color-green);
	color: #ffffff !important;
	border-color: var(--sg-color-green);
}

.sg-btn--green:hover {
	background-color: #387930;
	border-color: #387930;
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(78, 155, 67, 0.25);
}

/* Button Icon Slide */
.sg-btn .sg-btn__icon {
	display: inline-block;
	transition: transform var(--sg-duration-fast) var(--sg-ease-standard);
}

.sg-btn:hover .sg-btn__icon {
	transform: translateX(4px);
}

/* =========================================================================
   3. Motion & Viewport Reveal Engine
   ========================================================================= */

/**
 * Progressive Enhancement Safety:
 * Elements are visible by default. Initial hidden state is applied ONLY
 * when JavaScript adds .sg-motion-ready to the root html element.
 */
.sg-motion-ready .sg-reveal:not(.is-revealed) {
	opacity: 0;
	pointer-events: none;
}

.sg-motion-ready .sg-reveal-up:not(.is-revealed) {
	transform: translateY(24px);
}

.sg-motion-ready .sg-reveal-down:not(.is-revealed) {
	transform: translateY(-24px);
}

.sg-motion-ready .sg-reveal-left:not(.is-revealed) {
	transform: translateX(-28px);
}

.sg-motion-ready .sg-reveal-right:not(.is-revealed) {
	transform: translateX(28px);
}

.sg-motion-ready .sg-reveal-scale:not(.is-revealed) {
	transform: scale(0.96);
}

/* Base Reveal Transition */
.sg-reveal {
	transition: opacity var(--sg-duration-reveal) var(--sg-ease-standard),
	            transform var(--sg-duration-reveal) var(--sg-ease-standard);
	will-change: opacity, transform;
}

/* Revealed State */
.sg-reveal.is-revealed {
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
}

/* Stagger Delays for Grid Children */
.sg-stagger > *:nth-child(1) { transition-delay: 60ms; }
.sg-stagger > *:nth-child(2) { transition-delay: 120ms; }
.sg-stagger > *:nth-child(3) { transition-delay: 180ms; }
.sg-stagger > *:nth-child(4) { transition-delay: 240ms; }
.sg-stagger > *:nth-child(5) { transition-delay: 300ms; }
.sg-stagger > *:nth-child(6) { transition-delay: 360ms; }

/* Interactive Hover Utilities */
.sg-hover-lift {
	transition: transform var(--sg-duration-normal) var(--sg-ease-standard),
	            box-shadow var(--sg-duration-normal) var(--sg-ease-standard);
	will-change: transform, box-shadow;
}

.sg-hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: var(--sg-shadow-lift);
}

.sg-hover-image {
	overflow: hidden;
}

.sg-hover-image img {
	transition: transform var(--sg-duration-slow) var(--sg-ease-out);
	will-change: transform;
}

.sg-hover-image:hover img {
	transform: scale(1.03);
}

/* Hero Entrance Keyframes */
@keyframes sgHeroEntrance {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.sg-hero-entrance {
	animation: sgHeroEntrance 800ms var(--sg-ease-standard) forwards;
}

/* Homepage hero: JS-enhanced stagger with a CSS-only image drift. */
@keyframes sgHeroContentReveal {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes sgHeroImageDrift {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.05);
	}
}

.sg-hero .wp-block-cover__image-background {
	animation: sgHeroImageDrift 22s var(--sg-ease-out) both;
	will-change: transform;
}

.sg-hero-motion-ready .sg-hero__eyebrow,
.sg-hero-motion-ready .sg-hero__headline,
.sg-hero-motion-ready .sg-hero__subhead,
.sg-hero-motion-ready .sg-hero__actions {
	opacity: 0;
	animation: sgHeroContentReveal 760ms var(--sg-ease-out) both;
}

.sg-hero-motion-ready .sg-hero__eyebrow { animation-delay: 60ms; }
.sg-hero-motion-ready .sg-hero__headline { animation-delay: 170ms; }
.sg-hero-motion-ready .sg-hero__subhead { animation-delay: 290ms; }
.sg-hero-motion-ready .sg-hero__actions { animation-delay: 410ms; }

@media (max-width: 768px) {
	.sg-hero .wp-block-cover__image-background {
		animation: none;
		transform: none;
		will-change: auto;
	}
}

/* =========================================================================
   4. Strict Accessibility (prefers-reduced-motion)
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	:root {
		--sg-duration-fast: 0ms;
		--sg-duration-normal: 0ms;
		--sg-duration-reveal: 0ms;
		--sg-duration-slow: 0ms;
	}

	.sg-reveal,
	.sg-motion-ready .sg-reveal,
	.sg-motion-ready .sg-reveal:not(.is-revealed) {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		pointer-events: auto !important;
	}

	.sg-hover-lift,
	.sg-hover-lift:hover {
		transform: none !important;
	}

	.sg-hover-image img,
	.sg-hover-image:hover img {
		transform: none !important;
	}

	.sg-hero-entrance {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.sg-hero .wp-block-cover__image-background,
	.sg-hero-motion-ready .sg-hero__eyebrow,
	.sg-hero-motion-ready .sg-hero__headline,
	.sg-hero-motion-ready .sg-hero__subhead,
	.sg-hero-motion-ready .sg-hero__actions {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		will-change: auto !important;
	}

	.sg-btn .sg-btn__icon,
	.sg-btn:hover .sg-btn__icon {
		transform: none !important;
	}
}