/* Control motion only. Load after the approved Claude layout stylesheet.
   Keep scene, story, hotspot positions and all resting geometry untouched. */
:root {
  --control-ease: cubic-bezier(.22, .68, .25, 1);
}

/* Native anchor animation keeps wheel/touch scrolling under browser control. */
html { scroll-behavior: smooth; }
button, summary, a {
  -webkit-tap-highlight-color: transparent;
  transition: background-color 220ms var(--control-ease), color 180ms ease-out,
    border-color 220ms var(--control-ease), box-shadow 240ms var(--control-ease),
    opacity 180ms ease-out;
}
/* Individual scale composes with positioned controls' existing transforms. */
button:not(:disabled), .button, .header-call, .story-action, .call-bar a {
  transition: background-color 220ms var(--control-ease), color 180ms ease-out,
    border-color 220ms var(--control-ease), box-shadow 240ms var(--control-ease),
    opacity 180ms ease-out, scale 260ms var(--control-ease);
}
button:not(:disabled):active { scale: .985; }
.language-switch.has-motion-indicator { position: relative; isolation: isolate; }
.language-switch.has-motion-indicator [data-language] { position: relative; z-index: 1; }
.language-switch.has-motion-indicator [data-language][aria-pressed=true] {
  background: transparent; box-shadow: none;
}
.language-indicator {
  position: absolute; top: 0; left: 0; border-radius: 999px;
  background: var(--white, #fff); box-shadow: 0 1px 3px rgb(22 33 29 / .12);
  pointer-events: none; z-index: 0;
  transition: transform 340ms var(--control-ease), width 340ms var(--control-ease), height 220ms ease-out;
}
.faq details[data-motion-open=false] .faq-icon::after { transform: rotate(90deg); }
.faq details[data-motion-open=true] .faq-icon::after { transform: rotate(0); }

.button,
.header-call,
.text-size,
.language-switch [data-language],
.scene-controls button,
.parts button,
.story-action,
.story-tools button,
.story-nav a,
.case-detail-button,
.gallery-dialog-controls button,
.gallery-detail-text,
.gallery-detail-close,
.gallery-close,
.hotspot-close,
.callback-close,
.contact-submit,
.call-bar a {
  transition:
    background-color 220ms var(--control-ease),
    color 180ms ease-out,
    border-color 220ms var(--control-ease),
    box-shadow 240ms var(--control-ease),
    opacity 180ms ease-out,
    scale 260ms var(--control-ease),
    transform 180ms var(--control-ease);
}

/* Press feedback is limited to controls with no positional transform. */
.button:not(:disabled):active,
.header-call:active,
.story-action:not(:disabled):active,
.contact-submit:not(:disabled):active,
.gallery-dialog-controls button:not(:disabled):active,
.callback-close:not(:disabled):active,
.call-bar a:active {
  /* Override the base .button transform so only individual scale supplies feedback. */
  transform: none;
  scale: .985;
  transition-duration: 100ms;
}

/* Explicit arrow selectors exclude phone, zoom and rotation SVG icons. */
.text-link > span[aria-hidden="true"],
.case-link > span[aria-hidden="true"],
.story-action > span[aria-hidden="true"],
.hero-proof > span:last-child {
  transition: transform 260ms var(--control-ease);
}

.gallery-detail-text > span,
.element-menu summary > span {
  transition: transform 260ms var(--control-ease);
}

@media (hover: hover) and (pointer: fine) {
  .text-link:hover > span[aria-hidden="true"],
  .case-link:hover > span[aria-hidden="true"],
  .story-action:not(:disabled):hover > span[aria-hidden="true"] {
    transform: translate(2px, -2px);
  }

  .callback-close:hover,
  .gallery-close:hover,
  .gallery-detail-close:hover {
    background-color: var(--sand);
  }
}

/* Keyboard focus stays immediate; only the decorative arrow moves. */
.text-link:focus-visible > span[aria-hidden="true"],
.case-link:focus-visible > span[aria-hidden="true"],
.story-action:not(:disabled):focus-visible > span[aria-hidden="true"] {
  transform: translate(2px, -2px);
}

.hero-proof:focus-visible > span:last-child {
  transform: translateX(4px);
}

.callback-dialog[open] {
  animation: callback-enter 220ms var(--control-ease) both;
}

.callback-dialog[open]::backdrop {
  animation: callback-backdrop-enter 180ms ease-out both;
}

@keyframes callback-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes callback-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  button, summary, a, .language-indicator { transition: none !important; }
  button:active, .button:active, .header-call:active, .story-action:active,
  .call-bar a:active { scale: none !important; }
  .callback-dialog[open],
  .callback-dialog[open]::backdrop {
    animation: none;
  }

  .button:active,
  .header-call:active,
  .story-action:active,
  .contact-submit:active,
  .gallery-dialog-controls button:active,
  .callback-close:active,
  .call-bar a:active,
  .text-link > span[aria-hidden="true"],
  .case-link > span[aria-hidden="true"],
  .story-action > span[aria-hidden="true"],
  .hero-proof > span:last-child {
    transform: none !important;
  }
}

.language-switch a[data-language]{display:flex;align-items:center;justify-content:center;text-decoration:none}