/* ==========================================================================
   Wellcaza Care – premium layer
   Emerald + champagne + ivory, 3D depth, motion and the mobile contact dock.
   Loaded after main.css. All motion respects "reduce motion".
   ========================================================================== */

:root {
	--champagne-grad: linear-gradient(135deg, #ddd290 0%, #c7b75b 50%, #a99a44 100%);
	--emerald-grad: linear-gradient(140deg, #073c3d 0%, #0a4a4b 55%, #102c36 100%);
	--glass: rgb(255 255 255 / 72%);
	--shadow-3d: 0 2px 6px rgb(7 44 48 / 6%), 0 30px 70px -28px rgb(7 44 48 / 45%);
}

/* ---------- Base: warm ivory canvas ---------- */
body { background: var(--ivory); }
.wcz-header { background: rgb(250 247 240 / 90%); }
@media (max-width: 1099px) { .wcz-header { background: var(--ivory); } .wcz-nav { background: var(--ivory); } }
.wcz-section.is-tint { background: #f4f7f6; }
.wcz-section.is-mint { background: var(--teal-50); }
.wcz-card, .wcz-feature, .wcz-tile, .wcz-duo__card, .wcz-faq__item, .wcz-post-card, .wcz-contact-card, .wcz-panel, .wcz-steps li { border-color: var(--line); }
h1, h2 { letter-spacing: -.028em; }
.wcz-hero h1 em { color: transparent; background: linear-gradient(100deg, #12605e 0%, #2a8a85 50%, #a39444 100%); -webkit-background-clip: text; background-clip: text; }
.wcz-kicker::before { background: var(--champagne-grad); }

/* Champagne buttons with a light sweep */
.wcz-btn--gold, .wp-block-button.is-style-gold .wp-block-button__link { background: var(--champagne-grad); color: var(--navy); position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), 0 10px 24px -14px rgb(168 135 76 / 90%); }
.wcz-btn--gold::after, .wp-block-button.is-style-gold .wp-block-button__link::after {
	content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-20deg);
	background: linear-gradient(90deg, transparent, rgb(255 255 255 / 55%), transparent);
}
.wcz-btn--gold:hover::after, .wp-block-button.is-style-gold .wp-block-button__link:hover::after { transition: transform .8s var(--ease); transform: translateX(120%) skewX(-20deg); }
.wcz-btn--primary, .wp-block-button:not([class*="is-style-"]) .wp-block-button__link { background: var(--emerald-grad); box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 12px 26px -16px rgb(7 44 48 / 80%); }

/* ---------- Hero: depth, 3D rings, glass chips ---------- */
.wcz-hero {
	background:
		radial-gradient(900px 600px at 85% 20%, rgb(199 183 91 / 18%) 0%, transparent 60%),
		radial-gradient(700px 500px at 10% 90%, rgb(42 138 133 / 12%) 0%, transparent 60%),
		var(--ivory);
}
.wcz-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image: linear-gradient(rgb(7 60 61 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(7 60 61 / 5%) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%);
}
.wcz-hero::after { border-color: rgb(199 183 91 / 35%); }
.wcz-hero__visual { position: relative; perspective: 1400px; }
.wcz-hero__visual .wp-block-image { transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); position: relative; z-index: 2; }
.wcz-hero__visual .wp-block-image img { aspect-ratio: 4 / 5; border-radius: 34px; box-shadow: var(--shadow-3d); }
.wcz-hero__visual .wp-block-image::after {
	content: ""; position: absolute; inset: 0; border-radius: 34px; pointer-events: none;
	background: linear-gradient(160deg, rgb(255 255 255 / 22%) 0%, transparent 35%, transparent 70%, rgb(7 44 48 / 25%) 100%);
}

/* 3D orbit rings behind the photo */
.wcz-orbit { position: absolute; z-index: 1; inset: 6% -14% 6% -14%; pointer-events: none; transform-style: preserve-3d; perspective: 900px; }
.wcz-orbit span { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgb(199 183 91 / 55%); transform: rotateX(72deg) rotateZ(0deg); }
.wcz-orbit span:nth-child(2) { inset: 8%; border-color: rgb(42 138 133 / 40%); transform: rotateX(72deg) rotateY(18deg); }
.wcz-orbit span:nth-child(3) { inset: -6%; border-style: dashed; border-color: rgb(199 183 91 / 35%); transform: rotateX(78deg) rotateY(-14deg); }
.wcz-orbit span::before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--champagne-grad); box-shadow: 0 0 18px rgb(199 183 91 / 80%); }
.wcz-orbit span:nth-child(2)::before { background: #2a8a85; box-shadow: 0 0 16px rgb(42 138 133 / 70%); width: 10px; height: 10px; }
.wcz-orbit span:nth-child(3)::before { display: none; }

/* Glass chips */
.wcz-chip {
	position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px;
	padding: 10px 16px 10px 10px; border-radius: 999px; font: 600 .9rem/1.2 var(--font-head); color: var(--teal-900);
	background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
	border: 1px solid rgb(255 255 255 / 70%); box-shadow: 0 16px 40px -18px rgb(7 44 48 / 45%);
}
.wcz-chip .wcz-icon { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--emerald-grad); color: #e2d79a; }
.wcz-chip--care { top: 9%; left: -34px; }
.wcz-chip--place { top: 46%; right: -26px; }
.wcz-price-badge { z-index: 3; background: var(--emerald-grad); border: 1px solid rgb(199 183 91 / 35%); }
.wcz-price-badge strong { color: transparent; background: var(--champagne-grad); -webkit-background-clip: text; background-clip: text; }
@media (max-width: 781px) {
	.wcz-chip--care { left: 8px; top: 12px; }
	.wcz-chip--place { right: 8px; top: auto; bottom: 96px; }
	.wcz-orbit { inset: 4% -6%; }
}

/* ---------- Values marquee ---------- */
.wcz-content > .wcz-marquee { max-width: none; padding: 0; box-sizing: border-box; }
.wcz-marquee { background: var(--emerald-grad); overflow: hidden; padding-block: 18px !important; border-block: 1px solid rgb(199 183 91 / 30%); }
.wcz-marquee__list { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; gap: 0; }
.wcz-marquee__list li { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font: 600 clamp(1.05rem, .9rem + .6vw, 1.4rem)/1 var(--font-head); color: #eef3ee; white-space: nowrap; letter-spacing: .01em; }
.wcz-marquee__list li::after { content: ""; width: 9px; height: 9px; transform: rotate(45deg); background: var(--champagne-grad); }
@media (prefers-reduced-motion: no-preference) {
	.wcz-marquee.is-ready .wcz-marquee__list { animation: wcz-marquee 38s linear infinite; }
	.wcz-marquee:hover .wcz-marquee__list { animation-play-state: paused; }
}
@keyframes wcz-marquee { to { transform: translateX(-50%); } }

/* ---------- Layered photo composition ---------- */
.wcz-layered { position: relative; padding: 0 0 70px 0; }
.wcz-layered .wp-block-image { margin: 0; }
.wcz-layered__main img { width: 86%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 30px; box-shadow: var(--shadow-3d); }
.wcz-layered__float { position: absolute !important; right: 0; bottom: 0; width: 52%; z-index: 2; transform: translateY(var(--py, 0px)); transition: transform .2s linear; }
.wcz-layered__float img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; border: 6px solid var(--ivory); box-shadow: var(--shadow-3d); }
.wcz-layered__tag {
	position: absolute; left: 22px; top: 22px; z-index: 3; margin: 0; padding: 10px 16px; border-radius: 14px;
	background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	font: 500 .95rem/1.3 var(--font-head); color: var(--teal-900); max-width: 220px; box-shadow: 0 14px 30px -18px rgb(7 44 48 / 50%);
}
.wcz-layered::before { content: ""; position: absolute; left: -24px; bottom: 30px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgb(199 183 91 / 45%), transparent 70%); z-index: 0; }

/* ---------- Service cards with photos ---------- */
.wcz-card__media { aspect-ratio: 4 / 3; position: relative; }
.wcz-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(7 44 48 / 55%) 100%); }
.wcz-card__badge { position: absolute; left: 18px; bottom: -22px; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--emerald-grad); color: #e2d79a; box-shadow: 0 12px 24px -10px rgb(7 44 48 / 60%); border: 3px solid #fff; }
.wcz-card__badge .wcz-icon { width: 24px; height: 24px; }
.wcz-card { position: relative; }
.wcz-card__body { padding-top: 36px; }

/* ---------- 3D tilt (pointer devices only, set by JS) ---------- */
@media (hover: hover) and (pointer: fine) {
	.wcz-tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); transition: transform .45s var(--ease), box-shadow .45s var(--ease); will-change: transform; }
	.wcz-tilt.is-tilting { transition: transform .1s linear, box-shadow .3s; box-shadow: var(--shadow-3d); }
	.wcz-tilt::before { transition: transform .45s var(--ease); }
	.wcz-feature.wcz-tilt:hover::before { transform: translateZ(30px) scale(1.06); }
	.wcz-card.wcz-tilt:hover, .wcz-feature.wcz-tilt:hover, .wcz-duo__card.wcz-tilt:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
}
.wcz-feature::before { background: var(--emerald-grad) !important; }
.is-dark .wcz-feature::before { background: var(--champagne-grad) !important; }
.wcz-tile[class*="wcz-i-"]::before { background: var(--emerald-grad); }

/* ---------- Story section with parallax photo ---------- */
.wcz-story.has-bg { min-height: 560px; display: flex; flex-direction: column; justify-content: center; }
.wcz-story.has-bg::before { display: none; }
.wcz-story .wcz-story__bg { position: absolute !important; inset: -12% 0; margin: 0; max-width: none !important; padding: 0 !important; z-index: 0; }
.wcz-story .wcz-story__bg img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transform: translateY(var(--py, 0px)) scale(1.05); }
.wcz-story.has-bg::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgb(7 44 48 / 94%) 0%, rgb(7 60 61 / 82%) 45%, rgb(7 60 61 / 45%) 100%); }
.wcz-story.has-bg > :not(.wcz-story__bg) { position: relative; z-index: 1; }
@media (max-width: 781px) { .wcz-story.has-bg::after { background: linear-gradient(180deg, rgb(7 44 48 / 80%), rgb(7 44 48 / 94%)); } }

/* ---------- Image reveal (clip) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.wcz-clip-reveal img { clip-path: inset(8% 8% 8% 8% round 28px); transform: scale(1.12); transition: clip-path 1.1s var(--ease), transform 1.4s var(--ease); }
	.wcz-clip-reveal.is-in img { clip-path: inset(0 0 0 0 round 0); transform: scale(1); }
	.wcz-layered__float.wcz-clip-reveal img { transform: none; }
}

/* ---------- Home gallery: editorial mosaic ---------- */
@media (min-width: 900px) {
	.wcz-gallery-home { grid-template-columns: repeat(4, 1fr) !important; grid-auto-rows: 220px; }
	.wcz-gallery-home .wp-block-image:first-child { grid-column: span 2; grid-row: span 2; }
	.wcz-gallery-home .wp-block-image:nth-child(4) { grid-column: span 2; }
	.wcz-gallery-home .wp-block-image img { aspect-ratio: auto !important; height: 100% !important; }
}

/* ---------- Page heroes: photo with depth ---------- */
.wcz-page-hero { background: var(--emerald-grad); }
.wcz-page-hero__photo { perspective: 1200px; }
.wcz-page-hero__photo img { aspect-ratio: 4 / 3; border-radius: 28px; transform: rotateY(-6deg) rotateX(2deg); box-shadow: -30px 40px 80px -40px rgb(0 0 0 / 70%); border: 1px solid rgb(199 183 91 / 35%); transition: transform .8s var(--ease); }
.wcz-page-hero__photo:hover img { transform: rotateY(0) rotateX(0); }
.wcz-team-photo { margin-bottom: 2.5rem !important; }
.wcz-team-photo img { aspect-ratio: 21 / 9 !important; }

/* Pricing card glow */
.wcz-price { box-shadow: var(--shadow-3d); border: 1px solid rgb(199 183 91 / 30%); }
.wcz-price__main { background: var(--emerald-grad); }
.wcz-price__amount { background: var(--champagne-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wcz-price__cur { color: inherit; }
.wcz-price__per { -webkit-text-fill-color: rgb(255 255 255 / 75%); }

/* Footer + CTA */
.wcz-footer { background: #0c2830; }
.wcz-cta-band, .wcz-section.is-dark { background: var(--emerald-grad); }
.wcz-footer__tagline, .wcz-footer__belong .wcz-icon { color: #e2d79a; }

/* ==========================================================================
   Floating contact: desktop stack + mobile dock
   ========================================================================== */
.wcz-float { position: fixed; z-index: 90; display: flex; transition: transform .4s var(--ease), opacity .4s var(--ease); }
.wcz-float__btn { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font: 700 .95rem/1 var(--font-head); color: #fff; }
.wcz-float__btn:hover { color: #fff; text-decoration: none; }
.wcz-float__ico { display: inline-grid; place-items: center; }
.wcz-float__ico .wcz-icon { width: 22px; height: 22px; }

@media (max-width: 781px) {
	body { padding-bottom: 96px; }
	.wcz-float {
		left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
		display: grid; grid-template-columns: 64px 64px 1fr; gap: 8px; padding: 8px;
		border-radius: 26px; background: rgb(5 38 40 / 90%);
		-webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
		border: 1px solid rgb(199 183 91 / 28%);
		box-shadow: 0 20px 44px -14px rgb(0 0 0 / 55%), inset 0 1px 0 rgb(255 255 255 / 8%);
	}
	.wcz-float.is-tucked { transform: translateY(calc(100% + 30px)); opacity: 0; }
	.wcz-float__btn { flex-direction: column; gap: 4px; height: 56px; border-radius: 19px; font-size: .72rem; font-weight: 650; letter-spacing: .01em; background: rgb(255 255 255 / 7%); transition: background-color .2s, transform .2s; }
	.wcz-float__btn:active { transform: scale(.96); }
	.wcz-float__btn--call .wcz-float__ico { color: #e2d79a; }
	.wcz-float__btn--wa .wcz-float__ico { color: #5fd68f; }
	.wcz-float__btn--enq { flex-direction: row; gap: 10px; font-size: 1.02rem; font-weight: 750; color: var(--navy); background: var(--champagne-grad); box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), 0 8px 20px -10px rgb(199 183 91 / 80%); }
	.wcz-float__btn--enq:hover { color: var(--navy); }
	.wcz-float__btn--enq .wcz-float__ico { width: 34px; height: 34px; border-radius: 12px; background: rgb(7 44 48 / 12%); }
	.wcz-float__btn--enq .wcz-icon { width: 19px; height: 19px; }
}
@media (min-width: 782px) {
	.wcz-float { right: 22px; bottom: 22px; flex-direction: column; gap: 10px; align-items: flex-end; }
	.wcz-float.is-hidden { opacity: 0; pointer-events: none; transform: translateY(12px); }
	.wcz-float__btn { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 2px rgb(255 255 255 / 85%), var(--shadow-lg); transition: transform .25s var(--ease); }
	.wcz-float__btn:hover { transform: translateY(-3px) scale(1.04); }
	.wcz-float__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.wcz-float__btn--call { background: var(--emerald-grad); }
	.wcz-float__btn--wa { background: var(--wa); }
	.wcz-float__btn--enq { width: auto; border-radius: 999px; padding: 0 22px 0 18px; background: var(--champagne-grad); color: var(--navy); }
	.wcz-float__btn--enq:hover { color: var(--navy); }
	.wcz-float__btn--enq .wcz-float__label { position: static; width: auto; height: auto; clip-path: none; }
}
body.wcz-menu-open .wcz-float { display: none; }

/* Hero entrance + floating motion */
@media (prefers-reduced-motion: no-preference) {
	.wcz-chip--care { animation: wcz-float-a 7s ease-in-out infinite; }
	.wcz-chip--place { animation: wcz-float-b 8s ease-in-out infinite; }
	.wcz-price-badge { animation: wcz-float-a 9s ease-in-out infinite; }
	.wcz-orbit span:nth-child(1) { animation: wcz-spin-a 26s linear infinite; }
	.wcz-orbit span:nth-child(2) { animation: wcz-spin-b 34s linear infinite; }
	.wcz-orbit span:nth-child(3) { animation: wcz-spin-c 48s linear infinite; }
}
@keyframes wcz-float-a { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } }
@keyframes wcz-float-b { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, 10px, 0); } }
@keyframes wcz-spin-a { to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes wcz-spin-b { to { transform: rotateX(72deg) rotateY(18deg) rotateZ(-360deg); } }
@keyframes wcz-spin-c { to { transform: rotateX(78deg) rotateY(-14deg) rotateZ(360deg); } }
