/* AT motion language. Shared by the app and accessible server-rendered pages. */
:root {
  --at-motion-quick: 140ms;
  --at-motion-ui: 220ms;
  --at-motion-scene: 420ms;
  --at-motion-ease: cubic-bezier(.22,.8,.24,1);
}
/* No staged visibility on transaction controls, workspace shells or dialog ancestors. */
html[data-motion-system="at-v1"] :is(.booking-shell,.auth-shell,.workspace,.workspace-content,.booking-step-content,.auth-card form,.booking-success),
html[data-motion-system="at-v1"] :is(.booking-step-content,.workspace-content,.data-view,.staff-today,.kpi-grid,.agenda-table,.client-appointment-list,.staff-admin-list) > * {
  animation: none !important;
  animation-delay: 0s !important;
}
html[data-motion-system="at-v1"] :is(.workspace,.workspace-content,.modal-backdrop) {
  transform: none !important;
  translate: none !important;
  scale: none !important;
}
html[data-motion-system="at-v1"] :is(.hero-art img,.hero-copy h1 > span,.hero-description,.hero-actions,.hero-signoff,.hero-scroll,.service-row,[data-reveal]) {
  opacity: 1 !important;
  animation: none !important;
  translate: none !important;
  clip-path: none !important;
}
html[data-motion-system="at-v1"] :is(button,a.button,.button,summary,[role="button"]) {
  transition: background-color var(--at-motion-quick) ease, color var(--at-motion-quick) ease,
    border-color var(--at-motion-quick) ease, box-shadow var(--at-motion-ui) ease,
    transform var(--at-motion-ui) var(--at-motion-ease);
}
html[data-motion-system="at-v1"] :is(input,select,textarea) {
  transition: border-color var(--at-motion-quick) ease, box-shadow var(--at-motion-quick) ease, background-color var(--at-motion-quick) ease;
}
html[data-motion-system="at-v1"] :is(.service-check,.booking-step > span,.status-pill,.active-badge,.tab-button,.workspace-nav button,.analytics-period button) {
  transition: background-color var(--at-motion-quick) ease, color var(--at-motion-quick) ease,
    border-color var(--at-motion-quick) ease, box-shadow var(--at-motion-ui) ease;
}
html[data-motion-system="at-v1"] :is(.booking-service-row,.technician-choice,.date-strip button,.slot-button,.calendar-event,.calendar-appointment,.appointment-card,.client-appointment-card) {
  transition: border-color var(--at-motion-quick) ease, background-color var(--at-motion-quick) ease,
    box-shadow var(--at-motion-ui) ease, transform var(--at-motion-ui) var(--at-motion-ease);
}
html[data-motion-system="at-v1"] .booking-step.current > span::after { animation: none; content: none; }
html[data-motion-system="at-v1"] .booking-step.current > span { box-shadow: 0 0 0 4px color-mix(in srgb,var(--copper,#b69a59) 14%,transparent); }
html[data-motion-system="at-v1"] :is(.booking-service-row,.technician-choice,.slot-button)[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--copper,#b69a59),0 3px 14px color-mix(in srgb,var(--ink,#302620) 6%,transparent);
}
html[data-motion-system="at-v1"] :is(.booking-service-row,.technician-choice,.slot-button):hover { transform: none; }
html[data-motion-system="at-v1"] .motion-depth-surface.is-motion-tilted {
  transform: perspective(1050px) rotateX(var(--surface-tilt-x,0deg)) rotateY(var(--surface-tilt-y,0deg));
  transition: transform var(--at-motion-ui) var(--at-motion-ease);
}
html[data-motion-system="at-v1"] .analytics-track > span { transform-origin: left center; }
html[data-motion-system="at-v1"] .analytics-day > span { transform-origin: center bottom; }
html[data-motion-system="at-v1"] .analytics-day > span {
  transition: height var(--at-motion-scene) var(--at-motion-ease), background-color var(--at-motion-quick) ease;
}
html[data-motion-system="at-v1"] .analytics-track > span { transition: width var(--at-motion-scene) var(--at-motion-ease); }
@keyframes atMenuArrive { from { opacity: .94; } to { opacity: 1; } }
@keyframes atDetailArrive { from { opacity: .88; } to { opacity: 1; } }
html[data-motion-mode="full"] :is(.workspace-sidebar.mobile-open,.public-nav.is-open) {
  animation: atMenuArrive var(--at-motion-ui) var(--at-motion-ease);
}
html[data-motion-mode="full"] details[open] > :not(summary) { animation: atDetailArrive var(--at-motion-ui) ease; }
html[data-motion-mode="full"] .success-mark { animation-duration: 380ms; animation-delay: 0ms; }
html[data-motion-mode="full"] .success-mark svg { animation-delay: 80ms; }
html[data-motion-system="at-v1"] [data-motion-ambient="paused"],
html[data-motion-visibility="paused"] *,
html[data-motion-visibility="paused"] *::before,
html[data-motion-visibility="paused"] *::after { animation-play-state: paused !important; }
html[data-motion-system="at-v1"] :is(.hero-art-image,.promise-sculpture img) { will-change: auto; }
@media (hover:hover) and (pointer:fine) {
  html[data-motion-mode="full"] :is(.button,.header-book,.round-arrow):not(:disabled):hover { transform: translateY(-2px); }
  html[data-motion-mode="full"] :is(.button,.header-book):hover > svg { transform: translateX(3px); }
  html[data-motion-mode="full"] :is(.button,.header-book,.round-arrow) > svg { transition: transform var(--at-motion-ui) var(--at-motion-ease); }
  html[data-motion-mode="full"] :is(.workspace-nav button,.catalog-list a,.tab-button):hover { transform: translateX(2px); }
}
@media (hover:none) {
  html[data-motion-system="at-v1"] :is(.button,.header-book,.round-arrow,.workspace-nav button,.service-row,.appointment-card,.client-appointment-card):hover { transform: none; }
}
/* Motion preferences live in the account, not in a persistent navigation overlay. */
.at-motion-account-card {
  margin-top: 24px; padding: clamp(20px,3vw,32px); border: 1px solid var(--line,#e7dfd1);
  background: var(--theme-surface,var(--white,#fffdf9)); max-width: 860px;
}
.at-motion-account-card h2 { font: 500 28px/1.2 var(--serif,Georgia,serif); margin: 0 0 12px; }
.at-motion-account-card p { color: var(--muted,#776f66); line-height: 1.7; max-width: 65ch; }
.at-motion-options { border: 0; padding: 0; margin: 20px 0; display: grid; gap: 10px; }
.at-motion-options legend { font-size: 13px; font-weight: 600; padding: 0 0 12px; }
.at-motion-options label {
  display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--line,#e7dfd1);
  padding: 14px 16px; cursor: pointer; min-height: 64px;
  transition: border-color var(--at-motion-quick) ease, background-color var(--at-motion-quick) ease;
}
.at-motion-options label:has(input:checked) { border-color: var(--copper,#b69a59); background: color-mix(in srgb,var(--copper,#b69a59) 7%,transparent); }
.at-motion-options input { flex: 0 0 18px; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--copper,#b69a59); }
.at-motion-options label span { display: grid; gap: 5px; min-width: 0; }
.at-motion-options small { color: var(--muted,#776f66); line-height: 1.5; }
.at-motion-account-card [role="status"] { font-size: 13px; margin-bottom: 0; }
.at-motion-options label:focus-within { outline: 2px solid var(--focus,var(--copper,#987a38)); outline-offset: 3px; }
/* Never override layout transforms used to center overlays. Only decorative transforms reset. */
html[data-motion-mode="reduced"] *,html[data-motion-mode="reduced"] *::before,html[data-motion-mode="reduced"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html[data-motion-mode="reduced"] :is(.hero-art,.hero-art-image,.hero-art img,.promise-sculpture,.promise-sculpture img,[data-depth],.motion-depth-surface,.button,.header-book,.service-row,.gallery-tile,.workspace-nav button,.booking-service-row,.technician-choice,.slot-button) {
  transform: none !important; translate: none !important; scale: none !important;
}
html[data-motion-mode="reduced"] :is([data-reveal],.hero-copy h1 > span,.hero-description,.hero-actions,.hero-signoff,.hero-scroll) { opacity: 1 !important; clip-path: none !important; }
html[data-motion-mode="reduced"] .success-mark svg { stroke-dashoffset: 0 !important; }
@media(prefers-reduced-motion:reduce) {
  html[data-motion-system="at-v1"] *,html[data-motion-system="at-v1"] *::before,html[data-motion-system="at-v1"] *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}

html[data-motion-engine="gsap"] .success-mark svg { animation:none!important;stroke-dashoffset:0!important;stroke-dasharray:none!important; }

/* Mobile editorial scenes: original choreography; native scrolling, no pinned checkout. */
.hero-motion-seal,.at-hero-title-reel,.gallery-touch-controls { display:none; }
.hero-title-stage { position:relative; }
@keyframes atSealOrbit { to { transform:rotate(360deg); } }
@keyframes atPublicCurtain { from { clip-path:inset(0 0 92% 0 round 0 0 24px 24px); } to { clip-path:inset(0 0 0 0 round 0 0 0 0); } }
@media(max-width:799px) {
  .public-page .hero-title-stage h1 { position:relative; }
  .public-page .hero-art-image { animation:none; transform-origin:70% 62%; }
  .public-page .hero-art img { transform-origin:72% 60%; }
  .hero-motion-seal {
    position:absolute; display:grid; place-items:center; width:100px; height:100px;
    right:19px; bottom:56px; z-index:3; pointer-events:none; border-radius:50%;
    background:color-mix(in srgb,var(--paper,#faf7f0) 86%,transparent);
    border:1px solid color-mix(in srgb,var(--copper,#a48642) 38%,transparent);
    color:var(--ink,#2d261d); box-shadow:0 12px 32px #31201014;
  }
  .hero-motion-seal > span { font:500 30px/1 var(--serif,Georgia,serif); letter-spacing:.07em; }
  .hero-seal-ring { position:absolute; inset:0; width:100%; height:100%; fill:var(--copper,#a48642); }
  .hero-seal-ring text { font:10px var(--sans,Manrope,sans-serif); letter-spacing:1.8px; }
  html[data-motion-mode="full"] .hero-seal-ring { animation:atSealOrbit 24s linear infinite; }
  html[data-motion-mode="full"] .hero-motion-seal[data-motion-ambient="paused"] .hero-seal-ring { animation-play-state:paused; }
  .hero-title-stage[data-at-title-active="true"] h1 { color:transparent !important; text-shadow:none !important; }
  .hero-title-stage[data-at-title-active="true"] .at-hero-title-reel {
    display:block; position:absolute; inset:0; pointer-events:none;
    font:inherit; color:var(--ink,#2d261d);
  }
  .at-hero-title-reel .at-title-word { transform-origin:50% 100%; }
  html[data-motion-mode="full"] .public-nav.is-open { animation:atPublicCurtain 340ms var(--at-motion-ease); }
  .public-page .gallery-band { overflow:hidden; padding-bottom:32px; }
  .public-page .gallery-touch-track {
    display:flex; position:relative; gap:18px; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; scroll-padding-inline:18px; overscroll-behavior-x:contain;
    margin:32px -18px 0; padding:12px 18px 26px; max-width:calc(100% + 36px);
    scrollbar-width:none; touch-action:auto;
  }
  .public-page .gallery-touch-track::-webkit-scrollbar { display:none; }
  .public-page .gallery-touch-track .gallery-tile {
    flex:0 0 min(78vw,330px); height:clamp(320px,102vw,420px); margin:0;
    scroll-snap-align:center; overflow:hidden; border-radius:100px 3px 3px 3px;
    transform:none !important; background:var(--ink,#29231e);
  }
  .public-page .gallery-touch-track .gallery-tile img { width:100%; height:100%; transform-origin:50% 50%; }
  .public-page .gallery-touch-track .gallery-tile::after {
    content:""; position:absolute; inset:58% 0 0; pointer-events:none;
    background:linear-gradient(transparent,#120d0ccc); z-index:1;
  }
  .public-page .gallery-touch-track .gallery-caption { bottom:20px; left:20px; right:20px; }
  .gallery-touch-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#f7f2e9; margin-top:2px; }
  .gallery-touch-controls > div:first-child { display:grid; gap:6px; }
  .gallery-touch-controls span { font-size:12px; }
  .gallery-touch-controls small { color:#d8c8ae; font-size:11px; }
  .gallery-touch-arrows { display:flex; gap:8px; }
  .gallery-touch-arrows button {
    width:44px; height:44px; padding:0; display:grid; place-items:center; border-radius:50%;
    border:1px solid #e1d0ac77; background:transparent; color:#f7f2e9;
  }
  .gallery-touch-arrows button:disabled { opacity:.35; cursor:default; }
  .gallery-touch-track:focus-visible,.gallery-touch-arrows button:focus-visible { outline:2px solid #f7dda3; outline-offset:4px; }
}
html[data-motion-mode="reduced"] .hero-title-stage h1 { color:var(--ink,#2d261d) !important; }
html[data-motion-mode="reduced"] .at-hero-title-reel { display:none !important; }
html[data-motion-mode="reduced"] .hero-seal-ring { animation:none !important; }
html[data-motion-mode="reduced"] .gallery-touch-track { scroll-behavior:auto !important; }

/* Include ancestors: otherwise a card's tilt would still move its text. */
html[data-motion-system="at-v1"] :is(
  h1,h2,h3,h4,h5,h6,p,blockquote,figcaption,.hero-monogram,.hero-motion-seal,
  .hero-copy,.hero-actions,.hero-signoff,.hero-scroll,.hero-scroll svg,.public-nav,.public-nav > button,
  .workspace-sidebar.mobile-open,details[open] > :not(summary),
  .service-row,.service-row-arrow,.service-row-title,.services-art,.about-photo,.team-card,
  .booking-summary,.auth-card,.next-client-card,.kpi-card,.panel-card,.appointment-card,.client-appointment-card,.client-welcome-art,
  .form-error,.form-success,.inline-notice,.status-pill,.summary-total strong,.empty-state,
  .motion-depth-surface,.admin-edit-dialog,.appointment-detail-modal,.customer-detail-modal,
  button,a.button,.button,.header-book,.text-link,.round-arrow,summary,[role="button"],
  button svg,.button svg,.header-book svg,.text-link svg,.round-arrow svg,.service-check svg,
  .booking-step > span,.active-badge,.tab-button
) {
  animation:none !important; transform:none !important; translate:none !important; scale:none !important;
  transition:background-color 140ms ease,color 140ms ease,border-color 140ms ease,box-shadow 180ms ease !important;
}
html[data-motion-system="at-v1"] .service-row:hover,
html[data-motion-system="at-v1"] .service-row:focus-visible { padding-left:7px; }
@media (max-width:799px) {
  html[data-motion-system="at-v1"] .service-row:hover,
  html[data-motion-system="at-v1"] .service-row:focus-visible { padding-left:3px; }
}
html[data-motion-system="at-v1"] .hero-title-stage h1 { color:var(--ink) !important; }
html[data-motion-system="at-v1"] .at-hero-title-reel { display:none !important; }

/* Keep layout-based hiding, but never slide menu text or rotate FAQ characters. */
html[data-motion-system="at-v1"] .workspace-sidebar { animation:none !important; transition:none !important; }
html[data-motion-system="at-v1"] summary span { transform:none !important; transition:none !important; animation:none !important; }
.cms-field-boolean { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 12px; }
.cms-field-boolean label { display:flex; align-items:center; min-height:44px; margin:0; }
.cms-field-boolean input[type="checkbox"] { width:28px; height:28px; min-height:28px; padding:0; margin:0; accent-color:var(--copper); }.cms-field-boolean .cms-field-meta { grid-column:1/-1; }.cms-field-boolean .cms-field-meta small { display:none; }

/* The original brand seal is the sole intentionally rotating text element. */
html[data-motion-visibility="paused"] .hero-seal-ring { animation-play-state:paused !important; }