/*
 * Theme support styles. app.css is the Tailwind build from the Next.js app; this file adds only what
 * Next.js did with framer-motion and inline state: entrance animations, scroll reveals, the
 * sticky-nav states, the burger icon, the tab pill, and the skin-layer slabs.
 */

/* ---- Entrance animations (hero) --------------------------------------- */
@keyframes vv-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes vv-clip { from { clip-path: inset(100% 0% 0% 0%); } to { clip-path: inset(0% 0% 0% 0%); } }
@keyframes vv-rise { from { opacity: 0; transform: translateY(30px) rotate(6deg); } to { opacity: 1; transform: rotate(4deg); } }
@keyframes vv-badge { from { opacity: 0; transform: rotate(-40deg) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes vv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes vv-spin { to { transform: rotate(360deg); } }
@keyframes vv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes vv-glow { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, 30px); } }
@keyframes vv-word { from { transform: translateY(105%) rotate(4deg); } to { transform: none; } }
@keyframes vv-fade { from { opacity: 0; } to { opacity: 1; } }

.anim-fade-up { animation: vv-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.anim-fade-up-late { animation: vv-up 1s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both; }
.vv-arch-reveal { animation: vv-clip 1.4s cubic-bezier(0.77, 0, 0.18, 1) 0.3s both; }
.vv-photo2 { transform: rotate(4deg); animation: vv-rise 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both; }
.vv-badge { animation: vv-badge 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1s both; }
.vv-spin { animation: vv-spin 22s linear infinite; }
.vv-float { animation: vv-float 7s ease-in-out 1s infinite; }
.vv-stats { animation: vv-fade 1s ease 1.3s both; }
.vv-glow { animation: vv-glow 14s ease-in-out infinite; }
.vv-ticker-track { animation: vv-marquee 38s linear infinite; }

/* Parallax targets are moved by theme.js on scroll. */
.vv-parallax, .vv-zoom { will-change: transform; }

/* Headline: each word rises out of its own mask, as the Next.js WordReveal does. */
.vv-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; margin-right: 0.22em; }
.vv-word:last-child { margin-right: 0; }
.vv-word > span { display: inline-block; animation: vv-word 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.vv-word:nth-child(1) > span { animation-delay: 0.15s; }
.vv-word:nth-child(2) > span { animation-delay: 0.23s; }
.vv-word:nth-child(3) > span { animation-delay: 0.31s; }
.vv-word:nth-child(4) > span { animation-delay: 0.39s; }
.vv-word:nth-child(5) > span { animation-delay: 0.47s; }
.vv-word:nth-child(6) > span { animation-delay: 0.55s; }
.vv-word:nth-child(7) > span { animation-delay: 0.63s; }
.vv-word:nth-child(8) > span { animation-delay: 0.71s; }

/* ---- Scroll reveals (only when JavaScript runs, so content never hides without it) ---- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--vv-d, 0s), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--vv-d, 0s);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }
html.js [data-reveal-chip] { opacity: 0; transform: scale(0.9); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--vv-d, 0s), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--vv-d, 0s); }
html.js [data-reveal-chip].is-in { opacity: 1; transform: none; }
html.js [data-reveal-slot] { opacity: 0; transform: translateY(-48px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--vv-d, 0s), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--vv-d, 0s); }
html.js [data-reveal-slot].is-in { opacity: 1; transform: none; }
/* Specialty cards lift slightly on hover, as the Next.js whileHover does. */
html.js article[data-reveal].is-in:hover { transform: translateY(-6px); transition-delay: 0s; }

/* ---- Navigation -------------------------------------------------------- */
.vv-nav-pill { transition: background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1); background-color: rgba(251, 248, 243, 0); }
.vv-nav-pill.is-scrolled { background-color: rgba(251, 248, 243, 0.92); box-shadow: 0 18px 40px -24px rgba(31, 25, 21, 0.35); }
[data-vv-nav].is-open .vv-nav-pill { background-color: rgba(251, 248, 243, 0.92); }

.vv-burger { position: relative; display: block; width: 1.25rem; height: 0.875rem; }
.vv-burger span { position: absolute; left: 0; width: 1.25rem; height: 1px; background: #1f1915; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.vv-burger span:first-child { top: 0; }
.vv-burger span:last-child { bottom: 0; }
[data-vv-nav].is-open .vv-burger span:first-child { transform: translateY(6.5px) rotate(45deg); }
[data-vv-nav].is-open .vv-burger span:last-child { transform: translateY(-6.5px) rotate(-45deg); }

/* Magnetic buttons (fine pointers only) move via inline transform from theme.js. */
.vv-magnetic { display: inline-block; }

/* ---- Treatment grid tabs ---------------------------------------------- */
.vv-tabs { position: relative; }
.vv-tab-pill { top: 0.25rem; bottom: 0.25rem; left: 0; width: 0; transition: left 0.45s cubic-bezier(0.22, 1, 0.36, 1), width 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.vv-tab { transition: color 0.3s; }
.vv-tab[aria-selected="true"] { color: #f6f1ea; }

/* ---- Surgical photo strip ---------------------------------------------- */
.vv-drag-track { will-change: transform; touch-action: pan-y; }
.vv-drag-track.is-dragging { cursor: grabbing; }

/* ---- Skin layers ------------------------------------------------------- */
.vv-slot { transition: none; }
.vv-slab { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 12px 24px -18px rgba(31, 25, 21, 0.35); border: 0; font: inherit; text-align: left; }
.vv-slab.is-active { transform: translateX(-32px); box-shadow: 0 34px 50px -26px rgba(31, 25, 21, 0.5); }
.vv-panel.is-active { animation: vv-fade 0.4s ease both; }

/* ---- FAQ --------------------------------------------------------------- */
.vv-faq-icon { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
[aria-expanded="true"] > .vv-faq-icon { transform: rotate(45deg); }

/* ---- Forms ------------------------------------------------------------- */
.vv-enquiry .field input:focus, .vv-enquiry .field textarea:focus, .vv-enquiry .field select:focus { outline: none; }
.vv-enquiry button[disabled] { opacity: 0.6; cursor: progress; }
.vv-success { display: grid; gap: 0.75rem; padding: 1.5rem 0; color: #5e4f44; font-size: 1.0625rem; }
.vv-success.hidden, .vv-error.hidden { display: none; }
.vv-success p:first-child { color: #1f1915; }

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html.js [data-reveal], html.js [data-reveal-chip], html.js [data-reveal-slot] { opacity: 1; transform: none; }
}