/**
 * Geometric Shapes Edge Decorations
 * 
 * Whimsical geometric shapes positioned around the edges of the site
 * Uses colors from the UPK flyer for a fun learning vibe
 * 
 * To remove: Delete this file and remove enqueue/output functions from functions.php
 */

/* Make site-inner the positioning context */
.site-inner {
	position: relative;
	overflow-x: hidden; /* Clip shapes extending beyond, prevent horizontal scroll */
}

/* Container for all shapes - positioned with page content */
.yak-geometric-shapes {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none; /* Shapes don't interfere with clicks */
	z-index: 1;
	overflow: visible; /* Allow shapes to extend beyond */
}

/* Content layer sits above decorative shapes so text is never obscured */
.content-sidebar-wrap {
	position: relative;
	z-index: 2;
}

.yak-shape {
	pointer-events: none;
	opacity: 0; /* Hide initially until JS positions them */
}

/* Show shapes after JS initializes */
.yak-shape[style*="top"] {
	opacity: 1;
	transition: opacity 0.4s ease-in;
}

/* ----------------------------------------
   LEFT EDGE SHAPES
---------------------------------------- */

/* Left 1: Shape */
.yak-shape-left-1 {
	position: absolute;
	left: -70px;
	top: 0; /* Positioned by JavaScript */
	z-index: 1;
}

/* Left 2: Shape */
.yak-shape-left-2 {
	position: absolute;
	left: -50px;
	top: 0; /* Positioned by JavaScript */
	z-index: 1;
}

/* Left 3: Shape */
.yak-shape-left-3 {
	position: absolute;
	left: -60px;
	top: 0; /* Positioned by JavaScript */
	z-index: 1;
}

/* ----------------------------------------
   RIGHT EDGE SHAPES
---------------------------------------- */

/* Right 1: Shape */
.yak-shape-right-1 {
	position: absolute;
	right: -80px;
	top: 0; /* Positioned by JavaScript */
	z-index: 1;
}

/* Right 2: Shape */
.yak-shape-right-2 {
	position: absolute;
	right: -60px;
	top: 0; /* Positioned by JavaScript */
	z-index: 1;
}

/* Right 3: Shape */
.yak-shape-right-3 {
	position: absolute;
	right: -55px;
	top: 0; /* Positioned by JavaScript */
	z-index: 1;
}

/* ----------------------------------------
   BOUNCE ANIMATION (on scroll stop)
---------------------------------------- */

/* Very subtle bounce - triggered by JS after user scrolls AND stops */
@keyframes yakShapeBounce {
	0% {
		transform: translateY(0) scale(1);
	}
	30% {
		transform: translateY(-3px) scale(1.005);
	}
	50% {
		transform: translateY(-1.5px) scale(1.003);
	}
	65% {
		transform: translateY(-2px) scale(1.004);
	}
	80% {
		transform: translateY(-0.5px) scale(1.001);
	}
	100% {
		transform: translateY(0) scale(1);
	}
}

.yak-shape-bounce {
	animation: yakShapeBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* For rotated shapes, preserve their base rotation during bounce */
.yak-shape-bounce[style*="rotate"] {
	animation: yakShapeBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ----------------------------------------
   ACCESSIBILITY & RESPONSIVE
---------------------------------------- */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
	.yak-shape {
		animation: none !important;
	}
}

/* Hide on mobile/tablet */
@media (max-width: 960px) {
	.yak-geometric-shapes,
	.yak-shape {
		display: none !important;
	}
}

/* Push shapes further off-screen on smaller desktops so they stay in margin gutters */
@media (max-width: 1440px) and (min-width: 961px) {
	.yak-shape-left-1 { left: -120px; }
	.yak-shape-left-2 { left: -110px; }
	.yak-shape-left-3 { left: -115px; }
	.yak-shape-right-1 { right: -120px; }
	.yak-shape-right-2 { right: -110px; }
	.yak-shape-right-3 { right: -115px; }
}