/*
 * LoseSize — Custom Styles
 * Animations, noise overlay, and design system overrides
 */

/* ============================================
   Global Content Constraint
   ============================================ */
body .is-layout-constrained,
body .wp-block-group.alignfull > .wp-block-group:not(.alignfull):not([style*="position:fixed"]),
body .wp-block-columns:not(.alignfull) {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Keep full-width backgrounds but constrain inner content */
.wp-block-group.alignfull[style*="background"] > .wp-block-columns,
.wp-block-group.alignfull[style*="background"] > .wp-block-group:not([style*="position:fixed"]):not([style*="position:absolute"]) {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================
   SVG Noise Overlay
   ============================================ */
body::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	opacity: 0.04;
	pointer-events: none;
	z-index: 1000;
}

/* ============================================
   Scroll Reveal Animations
   ============================================ */
.losesize-reveal {
	opacity: 0;
	transform: translateY(100px);
	transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.losesize-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================
   Hero Floating Images
   ============================================ */
.losesize-hero-floats {
	pointer-events: none;
}

.float-img {
	will-change: transform;
	animation: losesize-float 6s ease-in-out infinite;
}

.float-2 {
	animation-delay: -3s;
}

@keyframes losesize-float {
	0%, 100% {
		transform: translateY(0) rotate(var(--float-rotate, 12deg));
	}
	50% {
		transform: translateY(-20px) rotate(calc(var(--float-rotate, 12deg) + 5deg));
	}
}

.float-1 {
	--float-rotate: 12deg;
}

.float-2 {
	--float-rotate: -6deg;
}

/* ============================================
   Tool Card Hover Effects
   ============================================ */
.losesize-tool-btn .wp-block-button__link {
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.losesize-tool-btn .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary) !important;
	color: #ffffff !important;
}

/* ============================================
   Blog Card Hover
   ============================================ */
.losesize-blog-card .wp-block-post-featured-image img {
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.losesize-blog-card:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

/* ============================================
   Trust Badges Grayscale
   ============================================ */
.losesize-trust-badges {
	opacity: 0.6;
	filter: grayscale(100%);
	transition: all 0.7s ease;
}

.losesize-trust-badges:hover {
	opacity: 1;
	filter: grayscale(0%);
}

/* ============================================
   Selection Color
   ============================================ */
::selection {
	background-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--on-primary-container);
}

/* ============================================
   Smooth Scroll
   ============================================ */
html {
	scroll-behavior: smooth;
}

/* ============================================
   Fixed Header Backdrop
   ============================================ */
.wp-block-template-part[data-area="header"] .wp-block-group {
	background: rgba(254, 250, 224, 0.85) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

/* ============================================
   Footer Rounded Top
   ============================================ */
[data-area="footer"] > .wp-block-group {
	border-radius: 5rem 5rem 0 0;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 768px) {
	.losesize-hero-floats {
		display: none;
	}

	.wp-block-column[style*="border-radius:2.5rem"] {
		border-radius: 1.5rem !important;
	}
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
	body::after {
		display: none;
	}

	.losesize-hero-floats {
		display: none;
	}
}