/**
 * GUL Animations — entrance + hover utility classes wired by block-controls.
 * Entrance animations are gated on .is-revealed which view-animations.js adds via IntersectionObserver.
 */

/* Entrance — default off-state */
.gul-anim-fade-in,
.gul-anim-slide-up,
.gul-anim-zoom-in { opacity: 0; transition: opacity .7s ease, transform .7s ease; will-change: transform, opacity; }
.gul-anim-slide-up { transform: translateY(28px); }
.gul-anim-zoom-in  { transform: scale(.94); }

.gul-anim-fade-in.is-revealed,
.gul-anim-slide-up.is-revealed,
.gul-anim-zoom-in.is-revealed { opacity: 1; transform: none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.gul-anim-fade-in, .gul-anim-slide-up, .gul-anim-zoom-in { opacity: 1; transform: none; transition: none; }
}

/* Continuous */
.gul-anim-float { animation: gul-float 4.5s ease-in-out infinite; }
.gul-anim-pulse { animation: gul-pulse 2.2s ease-in-out infinite; }
@keyframes gul-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes gul-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* Hover effects */
.gul-hover-zoom,
.gul-hover-zoom-lg,
.gul-hover-shadow-pop,
.gul-hover-lift,
.gul-hover-glow { transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; }
.gul-hover-zoom:hover       { transform: scale(1.02); }
.gul-hover-zoom-lg:hover    { transform: scale(1.05); }
.gul-hover-shadow-pop:hover { box-shadow: 0 24px 60px -16px rgba(0,0,0,.25); }
.gul-hover-lift:hover       { transform: translateY(-6px); box-shadow: 0 18px 40px -12px rgba(0,0,0,.18); }
.gul-hover-glow:hover       { box-shadow: 0 0 0 4px rgba(0,147,254,.18), 0 0 30px rgba(0,147,254,.45); }

/* Image placeholder — used when a block expects an image but none is set */
.gul-image-placeholder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 280px;
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
	border: 2px dashed #cbd5e1;
	border-radius: 16px;
	color: #64748b;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.gul-image-placeholder::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 64px; height: 64px;
	transform: translate(-50%, calc(-50% - 18px));
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/contain no-repeat;
}
.gul-image-placeholder > span { transform: translateY(28px); }