/**
 * Porting additions — interaction states that used to be React conditional
 * rendering (AnimatePresence mount/unmount) and are now always-in-DOM
 * elements toggled by a class. app.css (the compiled Tailwind output) is
 * kept verbatim; everything new lives here.
 */

/* Lock horizontal scroll — prevents mobile viewports from panning
   sideways when an element overflows its container. */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Restore the normal system cursor — app.css hides it (cursor:none) to
   make room for the custom animated cursor, which is now disabled. */
[data-cursor="hover"], a, body, button, input, label, select, textarea {
  cursor: revert;
}

/* Mobile nav overlay (navbar.tsx AnimatePresence) */
.js-nav-overlay {
  display: none;
}
.js-nav-overlay.is-open {
  display: flex;
}

/* Language switcher dropdown (language-switcher.tsx AnimatePresence) */
[data-lang-menu] {
  display: none;
}
[data-lang-menu].is-open {
  display: block;
}

/* Theme toggle icon swap (theme-toggle.tsx AnimatePresence) */
html.dark [data-theme-icon="moon"],
html:not(.dark) [data-theme-icon="sun"] {
  display: inline-flex;
}
html.dark [data-theme-icon="sun"],
html:not(.dark) [data-theme-icon="moon"] {
  display: none;
}

/* Command palette theme command row + open state (command-palette.tsx) */
.js-command-palette {
  display: none;
}
.js-command-palette.is-open {
  display: block;
}
html.dark .cmd-theme-dark {
  display: none;
}
html:not(.dark) .cmd-theme-light {
  display: none;
}

/* Preloader exit (preloader.tsx AnimatePresence exit) */
.js-preloader {
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.js-preloader.preloader-exit {
  transform: translateY(-100%);
}

/* Back-to-top visibility (back-to-top.tsx AnimatePresence) */
.js-back-to-top {
  opacity: 0;
  transform: scale(0.6) translateY(20px);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}
.js-back-to-top.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* Contact form submit button icon swap (contact.tsx status states) */
.js-contact-submit [data-icon-idle],
.js-contact-submit [data-icon-sending],
.js-contact-submit [data-icon-sent] {
  display: none;
}
.js-contact-form[data-status="idle"] .js-contact-submit [data-icon-idle],
.js-contact-form[data-status="error"] .js-contact-submit [data-icon-idle] {
  display: inline-flex;
}
.js-contact-form[data-status="sending"] .js-contact-submit [data-icon-sending] {
  display: inline-flex;
}
.js-contact-form[data-status="sent"] .js-contact-submit [data-icon-sent] {
  display: inline-flex;
}