/* Display headings. Instrument Sans is loaded as a variable font (Google Fonts:
   weight 400-700, width 75-100%), so the condensed cut headings used to get
   from a separate single-weight .ttf now comes from the width axis. */
.font-instrument {
  font-family: "Instrument Sans", ui-sans-serif, sans-serif;
  font-stretch: 75%;
  font-weight: 700;
}

/* Safety zone overlay for print preview */
.safety-zone {
  position: absolute;
  top: 3%;
  left: 3%;
  right: 3%;
  bottom: 3%;
  border: 2px dashed #22c55e;
  z-index: 10;
  pointer-events: none;
}

/* Subtle zoom animation for hero background */
@keyframes subtle-zoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.animate-subtle-zoom {
  animation: subtle-zoom 20s ease-in-out infinite;
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .animate-subtle-zoom {
    animation: none;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Press animation for buttons */
button,
[type="button"],
[type="submit"],
a[class*="bg-"] {
  transition: transform 100ms cubic-bezier(0.2, 0, 0.2, 1);
}

button:active,
[type="button"]:active,
[type="submit"]:active,
a[class*="bg-"]:active {
  transform: scale(0.98);
}

/* Escape hatch from the site-wide border-radius:0 rule. Circular controls that
   overlay imagery (slider arrows, the lightbox close button) read as buttons
   only when they're round, so they opt back in explicitly. !important is
   required to outrank the global rule, which is itself !important. */
.slider-arrow {
  border-radius: 9999px !important;
}

/* Same escape hatch, for artist portraits. A separate class rather than reusing
   .slider-arrow: these are images, not controls, and overloading that name would
   make the next person think a portrait is a button. Needs a square box to read
   as a circle rather than an ellipse — see the aspect-square on its container. */
.avatar-circle {
  border-radius: 9999px !important;
  overflow: hidden;
}

/* Hide the scrollbar on the scroll-snap image track — the swipe and the progress
   line convey position; a scrollbar would just clutter the artwork. */
.no-scrollbar {
  -ms-overflow-style: none;   /* IE / old Edge */
  scrollbar-width: none;      /* Firefox */
}
.no-scrollbar::-webkit-scrollbar {
  display: none;              /* WebKit / Blink */
}

/* Indeterminate upload bar. Replaces a spinning ring, which relied on
   rounded-full and so rendered as a spinning *square* under the global
   border-radius:0 rule. A sliding bar needs no radius and matches the flat
   language used elsewhere (the gallery slider indicator). The reduced-motion
   block below neutralises this automatically. */
@keyframes upload-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(500%); }
}

.upload-indeterminate-bar {
  animation: upload-indeterminate 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* The size rows on the product page opt out of the global press animation:
   they are flush-stacked with shared borders, so scaling one on press breaks
   the shared line and makes the whole list jump. */
[data-format-picker-target="option"],
[data-format-picker-target="option"]:active {
  transition: border-color 150ms ease;
  transform: none;
}

/* Tabular numbers for price displays */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Windows fix: the dark-styled "Print size" <select> renders its native option
   list white-on-white on Windows browsers (macOS ignores these colors for the
   native menu). Force readable on-theme dark options. Other selects use a light
   background, so this is scoped to the format picker only. */
select[name="format_id"] option {
  color: #ffffff;
  background-color: #18181b;
}

/* Flat design: no rounded corners anywhere. Overrides Tailwind's rounded-*
   utilities, inline styles, and cursor.css in one rule — including markup built
   in JS (e.g. the dashboard side panel). Remove this block to restore radii. */
*,
*::before,
*::after {
  border-radius: 0 !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */