/* =========================================================
   Webdazy — custom effects layer (works alongside Tailwind CDN)
   Brand reds: #F70606 / #FB8383 / #D91919
   ========================================================= */

:root {
	--brand-600: #f70606;
	--brand-700: #d91919;
	--brand-300: #fb8383;
	--ink: #1a1213;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

::selection { background: var(--brand-600); color: #fff; }

/* --- Reusable buttons (used across templates) --- */
.wd-btn-primary {
	display: inline-flex; align-items: center; gap: .5rem;
	background: linear-gradient(135deg, #f70606, #d91919);
	color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600;
	padding: .7rem 1.4rem; border-radius: .85rem;
	box-shadow: 0 12px 30px -12px rgba(247,6,6,.55);
	transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
	position: relative; overflow: hidden;
}
.wd-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 18px 40px -12px rgba(247,6,6,.6); }
.wd-btn-primary::after {
	content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
	transform: skewX(-20deg); transition: left .6s ease;
}
.wd-btn-primary:hover::after { left: 130%; }

.wd-btn-ghost {
	display: inline-flex; align-items: center; gap: .5rem;
	background: #fff; color: var(--brand-700);
	font-family: 'Poppins', sans-serif; font-weight: 600;
	padding: .7rem 1.4rem; border-radius: .85rem;
	border: 1.5px solid var(--brand-300);
	transition: all .25s ease;
}
.wd-btn-ghost:hover { background: #fff1f1; transform: translateY(-2px); }

/* --- Section title accent --- */
.wd-eyebrow {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .8rem;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--brand-700); background: #fff1f1;
	padding: .35rem .9rem; border-radius: 9999px;
}

/* =========================================================
   WATER / FLOATING CARD EFFECT
   ========================================================= */
.wd-card {
	position: relative; border-radius: 1.25rem; overflow: hidden;
	background: #fff; border: 1px solid #ffe1e1;
	box-shadow: 0 10px 30px -18px rgba(24,18,19,.35);
	transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
	will-change: transform;
}
.wd-card:hover {
	transform: translateY(-12px);
	box-shadow: 0 34px 60px -24px rgba(247,6,6,.4);
}
/* shine sweep on hover */
.wd-card::before {
	content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
	transform: translateX(-120%); transition: transform .8s ease;
}
.wd-card:hover::before { transform: translateX(120%); }

/* image zoom + gradient overlay for media cards */
.wd-media { position: relative; overflow: hidden; }
.wd-media img { transition: transform .8s cubic-bezier(.2,.8,.2,1); width: 100%; height: 100%; object-fit: cover; }
.wd-card:hover .wd-media img { transform: scale(1.12); }
.wd-media::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(217,25,25,.85) 0%, rgba(247,6,6,.15) 45%, transparent 70%);
	opacity: 0; transition: opacity .5s ease;
}
.wd-card:hover .wd-media::after { opacity: 1; }

/* sliding caption overlay */
.wd-overlay {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
	padding: 1.25rem; color: #fff;
	transform: translateY(38%); opacity: .92;
	transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}
.wd-card:hover .wd-overlay { transform: translateY(0); opacity: 1; }
.wd-overlay .wd-overlay-more {
	max-height: 0; overflow: hidden; opacity: 0;
	transition: max-height .5s ease, opacity .5s ease .1s;
}
.wd-card:hover .wd-overlay .wd-overlay-more { max-height: 120px; opacity: 1; }

/* floating icon badge */
.wd-badge {
	display: inline-flex; align-items: center; justify-content: center;
	height: 3.5rem; width: 3.5rem; border-radius: 1rem;
	background: linear-gradient(135deg, #f70606, #d91919); color: #fff;
	box-shadow: 0 12px 26px -10px rgba(247,6,6,.6);
	transition: transform .5s ease;
}
.wd-card:hover .wd-badge, .group:hover .wd-badge { transform: translateY(-6px) rotate(-6deg); }

/* =========================================================
   WATER / WAVE ANIMATED OVERLAYS
   ========================================================= */
.wd-wave-overlay {
	position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background:
		radial-gradient(60% 120% at 10% 10%, rgba(255,255,255,.25), transparent 60%),
		radial-gradient(50% 120% at 90% 30%, rgba(255,255,255,.18), transparent 60%);
	animation: wdDrift 12s ease-in-out infinite alternate;
}
@keyframes wdDrift {
	from { transform: translate3d(-10px,-6px,0) scale(1.02); }
	to   { transform: translate3d(12px,8px,0) scale(1.06); }
}

/* liquid blobs used in hero */
.wd-blob {
	position: absolute; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
	filter: blur(6px); opacity: .5; animation: wdMorph 14s ease-in-out infinite;
}
@keyframes wdMorph {
	0%,100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: translateY(0) rotate(0); }
	50%     { border-radius: 58% 42% 37% 63% / 56% 59% 41% 44%; transform: translateY(-18px) rotate(8deg); }
}

/* =========================================================
   HERO
   ========================================================= */
.wd-hero {
	position: relative; overflow: hidden;
	background:
		linear-gradient(120deg, rgba(26,18,19,.78), rgba(217,25,25,.55)),
		var(--hero-img, none);
	background-size: cover; background-position: center;
}
.wd-page-hero {
	position: relative; overflow: hidden;
	background:
		linear-gradient(120deg, rgba(26,18,19,.82), rgba(217,25,25,.6)),
		var(--hero-img, linear-gradient(135deg,#d91919,#f70606));
	background-size: cover; background-position: center;
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.wd-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.wd-reveal.is-visible { opacity: 1; transform: none; }
.wd-reveal.d1 { transition-delay: .08s; }
.wd-reveal.d2 { transition-delay: .16s; }
.wd-reveal.d3 { transition-delay: .24s; }
.wd-reveal.d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
	.wd-reveal, .wd-card, .wd-media img, .animate-floaty, .wd-wave-overlay, .wd-blob { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* =========================================================
   COUNTERS / STATS
   ========================================================= */
.wd-stat-num { font-family: 'Poppins', sans-serif; font-weight: 800; line-height: 1; }

/* form field focus */
.wd-input {
	width: 100%; border-radius: .75rem; border: 1.5px solid #ffdede;
	padding: .8rem 1rem; font-weight: 500; background: #fff; transition: border-color .2s, box-shadow .2s;
}
.wd-input:focus { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 4px rgba(247,6,6,.12); }

.wd-list-link {
	display: flex; align-items: center; justify-content: space-between;
	padding: .85rem 1rem; border-radius: .75rem; font-weight: 600;
	color: var(--ink); background: #fff; border: 1px solid #ffe1e1; transition: all .25s ease;
}
.wd-list-link:hover { background: #fff1f1; color: var(--brand-700); transform: translateX(4px); }
.wd-list-link.is-active { background: linear-gradient(135deg,#f70606,#d91919); color:#fff; border-color: transparent; }
.wd-list-link.is-active:hover { color:#fff; }

/* prose helper */
.wd-prose p { margin-bottom: 1rem; color: #4b4344; font-weight: 500; line-height: 1.75; }
.wd-prose h2, .wd-prose h3 { font-family:'Poppins',sans-serif; font-weight: 700; color: var(--ink); }