/* Motion and the booking popup. Loaded after main.css so it only adds to it. */

/* Position now uses the individual `translate` property, so a button's hover and press
   transforms never fight with the centring. */
.hero-cta { transform: none; translate: -50% 0; }
.float-cta {
	transform: none;
	translate: -50% 16px;
	scale: .7;
	transition: opacity .2s, translate .45s var(--spring), scale .45s var(--spring), visibility .2s, transform .25s var(--spring), background-color .18s, color .18s;
}
.float-cta.is-on { transform: none; translate: -50% 0; scale: 1; }

/* Buttons: spring on hover and press, a band of light, and a pulsing ring on the calls to action. */
.btn { overflow: hidden; isolation: isolate; transition: background-color .18s, color .18s, transform .25s var(--spring), box-shadow .2s; }
.hero-cta:hover, .float-cta:hover { transform: translateY(-3px) scale(1.05); }
.btn:hover { transform: translateY(-3px) scale(1.05); }
.btn:active { transform: translateY(1px) scale(.97); }
.bk-send { position: relative; }
.btn::before {
	content: "";
	position: absolute;
	inset: -2px auto -2px 0;
	z-index: -1;
	width: 42%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
	transform: translateX(-140%) skewX(-18deg);
	animation: fdd-shine 3.8s ease-in-out infinite;
}
.btn--ink::before { background: linear-gradient(100deg, transparent, rgba(252, 152, 36, .6), transparent); }
.btn[disabled]::before { display: none; }

.hero-cta { animation: fdd-jump .85s .3s backwards, fdd-ring 2.2s 1.2s infinite; }
.float-cta.is-on { animation: fdd-ring 2.2s infinite, fdd-wiggle 6s 2s infinite; }
.bk-send:not([disabled]) { animation: fdd-ring-ink 2.4s infinite; }

.slider-btn:not(:disabled) { animation: fdd-ring 2.4s infinite; }
.slider-btn:hover:not(:disabled) { transform: scale(1.14); }
.slider-btn:active:not(:disabled) { transform: scale(.94); }
.slider-btn { transition: background-color .18s, color .18s, opacity .18s, transform .25s var(--spring); }
.slider-btn:hover svg { animation: fdd-arrow .6s ease-in-out infinite; }
.slider-btn--prev:hover svg { animation-name: fdd-arrow-back; }

.foot-apps a { transition: transform .25s var(--spring); }
.foot-apps a:hover { transform: translateY(-6px) scale(1.1); }
.foot-apps a:active { transform: scale(.94); }
.foot-apps a:hover svg { animation: fdd-tilt .5s ease-in-out; }
.foot-apps [data-contact="phone"] { animation: fdd-ring 2.2s infinite; }
.foot-apps [data-contact="whatsapp"] { animation: fdd-ring-green 2.2s .4s infinite; }
.lang-switch summary:hover svg { animation: fdd-spin .7s var(--spring); }

.svc { transition: transform .3s var(--spring), box-shadow .3s; }
.svc:hover { transform: translateY(-8px); box-shadow: 0 14px 0 -4px var(--orange); }
.menu-hint { animation: fdd-bob 2.4s ease-in-out infinite; }

@keyframes fdd-shine {
	0%, 45% { transform: translateX(-140%) skewX(-18deg); }
	80%, 100% { transform: translateX(340%) skewX(-18deg); }
}
@keyframes fdd-ring {
	0% { box-shadow: 0 0 0 0 rgba(252, 152, 36, .75); }
	70%, 100% { box-shadow: 0 0 0 16px rgba(252, 152, 36, 0); }
}
@keyframes fdd-ring-ink {
	0% { box-shadow: 0 0 0 0 rgba(17, 17, 17, .45); }
	70%, 100% { box-shadow: 0 0 0 13px rgba(17, 17, 17, 0); }
}
@keyframes fdd-ring-green {
	0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .7); }
	70%, 100% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
}
@keyframes fdd-wiggle {
	0%, 88%, 100% { rotate: 0deg; }
	90% { rotate: -3deg; }
	92% { rotate: 3deg; }
	94% { rotate: -2deg; }
	96% { rotate: 2deg; }
}
@keyframes fdd-arrow { 50% { transform: translateX(4px); } }
@keyframes fdd-arrow-back {
	0%, 100% { transform: rotate(180deg); }
	50% { transform: rotate(180deg) translateX(4px); }
}
@keyframes fdd-tilt {
	25% { transform: rotate(-12deg); }
	75% { transform: rotate(12deg); }
}
@keyframes fdd-spin { to { transform: rotate(360deg); } }
@keyframes fdd-bob { 50% { transform: translateY(-4px); } }

/* Scroll-in effects. main.js adds .rv only to elements that are still below the fold. */
.rv { opacity: 0; }
.rv-in { opacity: 1; animation-delay: var(--rv-delay, 0s); animation-fill-mode: backwards; }
.rv-drop.rv-in { animation-name: fdd-drop; animation-duration: .9s; }
.rv-jump.rv-in { animation-name: fdd-jump; animation-duration: .85s; }
.rv-rise.rv-in { animation-name: fdd-rise; animation-duration: .7s; animation-timing-function: ease-out; }
.rv-sway.rv-in { animation-name: fdd-sway; animation-duration: 1.3s; }

@keyframes fdd-drop {
	0% { opacity: 0; transform: translateY(-90px) rotate(-2deg); }
	55% { opacity: 1; transform: translateY(0) rotate(0); }
	70% { transform: translateY(-16px); }
	85% { transform: translateY(0); }
	93% { transform: translateY(-5px); }
	100% { transform: translateY(0); }
}
@keyframes fdd-jump {
	0% { opacity: 0; transform: translateY(80px) scale(.88); }
	50% { opacity: 1; transform: translateY(-18px) scale(1.03); }
	72% { transform: translateY(6px) scale(.99); }
	88% { transform: translateY(-3px) scale(1); }
	100% { transform: translateY(0) scale(1); }
}
@keyframes fdd-rise {
	0% { opacity: 0; transform: translateY(28px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes fdd-sway {
	0% { opacity: 0; transform: translateY(-160px) rotate(-16deg); }
	50% { opacity: 1; transform: translateY(0) rotate(7deg); }
	72% { transform: rotate(-4deg); }
	88% { transform: rotate(2deg); }
	100% { transform: rotate(0); }
}

/* Booking form (Contact Form 7). Its own stylesheet is switched off, so what it needs is here. */
.bk-label { display: block; margin-bottom: 7px; font-weight: 700; font-size: 15px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.bk-form { margin: 0; }
.bk-form .wpcf7-form-control-wrap { display: block; }
.bk-field label, .bk-phone label, .bk-datetime label { display: block; margin: 0; font-weight: inherit; font-size: inherit; }
.bk-card .wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); border: 0; word-wrap: normal; }
.bk-form .hidden-fields-container { display: none; }
.bk-date-hint { inset: 2px 42px auto 2px; height: 46px; }
.bk-form .wpcf7-not-valid-tip { display: block; margin-top: 6px; color: var(--error); font-size: 14px; font-weight: 600; }
.bk-form .bk .wpcf7-not-valid { border-color: var(--error) !important; }
.bk-form .wpcf7-response-output { margin: 14px 0 0; padding: 0; border: 0; color: var(--error); font-size: 14px; font-weight: 600; text-align: center; }
.bk-form .wpcf7-response-output:empty, .wpcf7-form.init .wpcf7-response-output, .wpcf7-form.sent .wpcf7-response-output { display: none; }
.wpcf7-form.submitting .bk-send { opacity: .65; pointer-events: none; cursor: progress; }
.bk-fallback { padding: 24px 8px; text-align: center; }
.bk-fallback-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }
.bk-fallback-admin { margin-top: 18px; padding: 10px 14px; border: 2px dashed var(--ink); border-radius: 12px; font-size: 13px; }

/* Date and time side by side */
.bk-datetime { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.bk-datetime select { padding-inline: 12px; }

/* Booking popup */
body:has(dialog[open]) { overflow: hidden; }
.pop {
	position: fixed;
	width: min(560px, 100vw - 20px);
	max-width: none;
	max-height: calc(100dvh - 20px);
	margin: auto;
	padding: clamp(26px, 4vw, 36px) clamp(14px, 3.5vw, 28px) clamp(16px, 3vw, 26px);
	border: 2.5px solid var(--ink);
	border-radius: 28px;
	background: var(--orange);
	color: var(--ink);
	overflow: auto;
	overscroll-behavior: contain;
}
.pop::backdrop { background: rgba(17, 17, 17, .78); }
.pop[open] { animation: fdd-pop .65s var(--spring); }
.pop[open]::backdrop { animation: fdd-fade .35s ease-out; }
.pop-head { position: relative; z-index: 1; text-align: center; padding-inline: 26px; }
.pop .title { font-size: clamp(26px, 6vw, 38px); }
.pop .sub { margin-top: 10px; font-size: 16px; }
.pop .bk-card { position: relative; z-index: 1; margin-top: 18px; padding: 18px; border-radius: 20px; }
.pop .bk { grid-template-columns: 1fr; gap: 14px; }
.pop-daisy { position: absolute; left: -44px; top: -34px; width: 150px; opacity: .3; rotate: -18deg; pointer-events: none; }
.pop-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 2.5px solid var(--ink);
	border-radius: 50%;
	background: var(--white);
	color: var(--ink);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: transform .25s var(--spring), background-color .18s;
}
.pop-close:hover { transform: rotate(90deg) scale(1.1); background: var(--ink); color: var(--orange); }

@keyframes fdd-pop {
	0% { opacity: 0; transform: translateY(-70px) scale(.8) rotate(-2deg); }
	100% { opacity: 1; transform: none; }
}
@keyframes fdd-fade { from { opacity: 0; } }

@media (max-width: 719px) {
	.hero-cta { translate: none; }
	.pop-daisy { width: 110px; left: -30px; top: -24px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.rv { opacity: 1; }
}
@media print { .rv { opacity: 1; } }