/* Additions to the original (Next.js/Tailwind) stylesheets. Behaviour lives in site.js. */

/* Scroll fade-ins. Without scripts (no .js on <html>) everything is simply shown. */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.77,0,.175,1), transform .9s cubic-bezier(.77,0,.175,1); }
.js .rv.in { opacity: 1; transform: none; }
.js header.rv { transform: translateY(-20px); }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } }

/* Results ticker on the homepage */
@keyframes isp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.isp-marquee { animation: isp-marquee 40s linear infinite; width: max-content; }
.isp-marquee.reverse { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .isp-marquee { animation: none; } }

/* Video and photo pop-up */
.isp-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.94); padding: 16px; }
.isp-modal video, .isp-modal img { max-width: min(1400px, 100%); max-height: 86vh; width: auto; border-radius: 2px; background: #000; }
.isp-modal video { width: min(1400px, 100%); }
.isp-modal-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 22px; line-height: 1; background: transparent; cursor: pointer; }
.isp-modal-close:hover { border-color: rgba(255,255,255,.5); }

/* Services dropdown and mobile menu */
.isp-dropdown { animation: isp-fade .25s ease both; }
.isp-mobile-menu { animation: isp-reveal .6s cubic-bezier(.77,0,.175,1) both; }
@keyframes isp-fade { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes isp-reveal { from { clip-path: circle(0% at calc(100% - 40px) 40px); } to { clip-path: circle(150% at calc(100% - 40px) 40px); } }
button[aria-label="Toggle menu"][aria-expanded="true"] span:nth-child(1) { top: 50% !important; transform: translateY(-50%) rotate(45deg) !important; }
button[aria-label="Toggle menu"][aria-expanded="true"] span:nth-child(2) { opacity: 0; }
button[aria-label="Toggle menu"][aria-expanded="true"] span:nth-child(3) { bottom: 50% !important; transform: translateY(50%) rotate(-45deg) !important; }
button[aria-label="Toggle menu"] span { transition: all .4s cubic-bezier(.77,0,.175,1); }

/* Booking calendar on /schedule */
.isp-calendar { width: 100%; min-height: 720px; border: 0; border-radius: 8px; background: #fff; }

/* Form messages */
.isp-form-error { margin-top: 12px; font-size: 13px; color: #f87171; }