/* ==========================================================================
   BRICO v5 - "Market"
   tokens.css - design tokens + shared primitives.
   Loaded by every page (storefront AND admin) before store.css / admin.css.

   Blend brief: storefront 80% marketplace (MLC ref), admin dashboard 60%
   Harbor, admin shell/orders Trendify structure.
   Soft, rounded, friendly: Plus Jakarta Sans, pill buttons, white cards on
   a lavender wash, soft shadows. Coral = action, violet = brand, green =
   success. store.css keeps --brand violet; admin.css re-points it to coral.
   ========================================================================== */

:root {
  /* ---- palette ----
     Premium pass: neutrals are true warm-stone/charcoal now, not
     violet-tinted - violet and coral are reserved for deliberate accents
     (brand mark, CTAs, active states) so they read as confident choices
     against a clean canvas instead of tinting everything a little. */
  --bg: #f6f4ef;
  --bg-deep: #ece7d9;
  --card: #ffffff;
  --ink: #1f1c1a;
  --ink-soft: #615c53;
  --faint: #96907f;
  --line: #e7e2d5;

  --coral: #f04e23;
  --coral-deep: #d63e16;
  --coral-soft: #fde9e1;

  --violet: #6c5ce7;
  --violet-deep: #5849d6;
  --violet-soft: #edeaff;

  --green: #1fa95c;
  --green-soft: #e2f6ea;
  --amber: #e8930c;
  --amber-soft: #fff3dc;
  --red: #e5484d;
  --red-soft: #fdecec;
  --gold: #ffc531;

  --dark: #1b1626;
  --dark-2: #251e33;
  --dark-line: rgba(255, 255, 255, 0.12);
  --dark-ink: #f4f2fb;
  --dark-faint: rgba(244, 242, 251, 0.55);

  /* --brand is re-pointed per surface: violet on the store, coral in admin */
  --brand: var(--violet);
  --brand-deep: var(--violet-deep);
  --brand-soft: var(--violet-soft);

  /* ---- type ---- */
  --font-sans: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;
  /* Space Grotesk: a bolder, more geometric display face used only for
     headlines/brand - creates real typographic contrast against the body
     text instead of one uniform weight-only hierarchy everywhere. */
  --font-display: "Space Grotesk", "Plus Jakarta Sans", -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --t-display: clamp(2rem, 4.5vw, 3.25rem);
  --t-h1: 1.75rem;
  --t-h2: 1.3rem;

  /* ---- shape + elevation ----
     Tightened from the original 24/20/14 scale - smaller radii read as
     more precise/considered, large radii read as playful/toy-like. */
  --r-xl: 20px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 10px;
  --r-pill: 999px;

  --shadow: 0 10px 30px rgba(31, 28, 26, 0.11);
  --shadow-sm: 0 4px 14px rgba(31, 28, 26, 0.08);
  --shadow-lg: 0 20px 50px rgba(31, 28, 26, 0.15);
}

/* ---- reset / base ---- */
/* The hidden attribute must always win over a class's display value. */
[hidden] {
  display: none !important;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  /* Premium pass: one deliberate accent glow (coral, matching the CTA
     color) plus a neutral ink glow for depth - not three competing
     brand-color washes. A calm stone canvas is what lets the hero/cards/
     accents read as confident choices instead of everything being a
     little bit colored. background-attachment:fixed is unreliable on iOS
     Safari (often just falls back to a flat fill), which is why the page
     could read as plain white on a phone - everything here is a normal
     scrolling background plus the fixed grain overlay below (body::before),
     which is the only layer that needs to stay anchored. */
  background:
    radial-gradient(900px 560px at 96% -10%, rgba(240, 78, 35, 0.09) 0%, transparent 60%),
    radial-gradient(720px 620px at -8% 104%, rgba(31, 26, 23, 0.05) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(31, 26, 23, 0.025) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, auto, 100% 100%;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
/* Fine grain, fixed to the viewport, so large flat areas (empty states,
   card gutters) read as textured paper rather than flat digital white.
   Visible on close look, still light enough to sit behind text/photos. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#app,
.admin-shell,
.hd,
body > * {
  position: relative;
}

/* ==========================================================================
   BRAND MARK - shared by the storefront header, login split-card, and the
   admin sidebar. Colored by --brand/--brand-deep, which store.css keeps
   violet and admin.css re-points to coral, so one definition serves both.
   ========================================================================== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}
.brand-mark {
  --a: var(--brand, #6c5ce7);
  --b: var(--brand-deep, #5849d6);
  width: 46px;
  height: 46px;
  /* a hexagon "nut/bolt" badge instead of a rounded square with a letter in
     it - reads as a mark, not a generic app-icon tile */
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0% 50%);
  background: linear-gradient(155deg, var(--a) 0%, var(--b) 78%);
  color: #fff;
  font-weight: 800;
  font-size: 1.4rem;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px -4px rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.16), inset 0 2px 3px rgba(255, 255, 255, 0.35), inset 0 -3px 5px rgba(0, 0, 0, 0.22);
  box-shadow: 0 10px 20px -4px color-mix(in srgb, var(--a) 60%, transparent), inset 0 0 0 2px rgba(255, 255, 255, 0.16), inset 0 2px 3px rgba(255, 255, 255, 0.35), inset 0 -3px 5px rgba(0, 0, 0, 0.22);
  transition: transform 220ms var(--ease, ease);
}
.brand:hover .brand-mark {
  transform: rotate(-8deg) scale(1.04);
}
/* soft diagonal sheen, like brushed metal catching light - purely
   decorative, never intercepts clicks */
.brand-mark::before {
  content: "";
  position: absolute;
  inset: -50% -20% auto auto;
  width: 65%;
  height: 220%;
  background: rgba(255, 255, 255, 0.28);
  transform: rotate(22deg);
  pointer-events: none;
}
/* a small rivet/bolt dot at the top point of the hexagon - the one
   "industrial" accent detail */
.brand-mark::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
}
h1,
h2,
h3,
h4,
p,
dl,
dd,
figure {
  margin: 0;
}
a {
  color: inherit;
}
img {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  color: inherit;
}
::selection {
  background: var(--brand-soft);
}

/* ---- layout helpers ---- */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.noscroll {
  overflow: hidden;
}
.mono {
  font-family: var(--font-mono);
}
.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- eyebrows / section heads ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}
.eyebrow .n {
  color: var(--brand);
  font-weight: 800;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.section-sub {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-top: 8px;
  max-width: 56ch;
}

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms var(--ease), color 160ms var(--ease),
    border-color 160ms var(--ease), transform 160ms var(--ease),
    box-shadow 160ms var(--ease);
  user-select: none;
  white-space: nowrap;
}
.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.btn:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 6px 16px rgba(108, 92, 231, 0.32);
}
.btn-primary:hover:not(:disabled) {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
}
.btn-coral {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
  box-shadow: 0 6px 16px rgba(240, 78, 35, 0.32);
}
.btn-coral:hover:not(:disabled) {
  background: var(--coral-deep);
  border-color: var(--coral-deep);
}
.btn-soft {
  background: var(--brand-soft);
  border-color: transparent;
  color: var(--brand-deep);
}
.btn-soft:hover:not(:disabled) {
  background: var(--brand);
  color: #fff;
}
.btn-ghost {
  border-color: var(--line);
  color: var(--ink-soft);
  background: var(--card);
}
.btn-ghost:hover:not(:disabled) {
  border-color: var(--ink);
  color: var(--ink);
}
.btn-danger {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.btn-danger:hover:not(:disabled) {
  background: #c93439;
  border-color: #c93439;
}
.btn-sm {
  padding: 8px 16px;
  font-size: 0.78rem;
}
.btn-lg {
  padding: 15px 30px;
  font-size: 0.98rem;
}
.btn-block {
  width: 100%;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease),
    color 160ms var(--ease), transform 160ms var(--ease);
}
.icon-btn svg {
  width: 19px;
  height: 19px;
}
.icon-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.icon-btn:active {
  transform: scale(0.94);
}
.icon-btn.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.icon-btn .count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--coral);
  color: #fff;
  border: 2px solid var(--card);
  border-radius: var(--r-pill);
  font-size: 0.62rem;
  font-weight: 800;
}
.icon-btn .count[hidden] {
  display: none;
}

/* dark-surface variant (admin sidebar, drawers on dark) */
.on-dark .icon-btn,
.icon-btn.on-dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--dark-line);
  color: var(--dark-ink);
}
.on-dark .icon-btn:hover,
.icon-btn.on-dark:hover {
  border-color: var(--dark-ink);
  color: #fff;
}
.on-dark .icon-btn .count,
.icon-btn.on-dark .count {
  border-color: var(--dark);
}

/* ---- forms ---- */
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}
.field > span,
.field-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px 14px;
  width: 100%;
  transition: border-color 120ms, box-shadow 120ms;
}
/* iOS Safari auto-zooms the page on focus for any text input under 16px.
   Force 16px specifically on touch/narrow viewports so focusing a field
   never triggers that zoom, while keeping the smaller desktop size. */
@media (max-width: 782px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px;
  }
}
input::placeholder,
textarea::placeholder {
  color: var(--faint);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
input[aria-invalid="true"] {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}
textarea {
  resize: vertical;
  min-height: 90px;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c5672' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
@media (max-width: 640px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}
.form-hint {
  font-size: 0.82rem;
  color: var(--faint);
  margin-top: 6px;
}
.form-hint.success {
  color: var(--green);
}
.form-hint.error {
  color: var(--red);
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  cursor: pointer;
}
.checkbox-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  flex: none;
}

/* ---- status plates & stock lamps ---- */
.plate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  background: var(--bg-deep);
  white-space: nowrap;
}
.plate-ok {
  color: #14663a;
  background: var(--green-soft);
}
.plate-warn {
  color: #92580a;
  background: var(--amber-soft);
}
.plate-bad {
  color: #b3272d;
  background: var(--red-soft);
}
.plate-info {
  color: var(--violet-deep);
  background: var(--violet-soft);
}
.plate-brand {
  color: #fff;
  background: var(--brand);
}

.stocklamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
}
.stocklamp::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--faint);
}
.stocklamp.ok {
  color: #14663a;
}
.stocklamp.ok::before {
  background: var(--green);
}
.stocklamp.low {
  color: #92580a;
}
.stocklamp.low::before {
  background: var(--amber);
}
.stocklamp.out {
  color: #b3272d;
}
.stocklamp.out::before {
  background: var(--red);
}

/* ---- tables ---- */
.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.ledger thead th {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.ledger tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.ledger tbody tr:last-child td {
  border-bottom: none;
}
.ledger tbody tr:hover td {
  background: #faf9fe;
}
.ledger td.num,
.ledger th.num {
  text-align: right;
}

/* ---- quantity stepper ---- */
.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  overflow: hidden;
}
.qty-stepper button {
  width: 38px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
}
.qty-stepper button:hover {
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.qty-stepper button svg {
  width: 15px;
  height: 15px;
}
.qty-stepper .qty-value {
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 0 8px;
}

/* ---- drawer ---- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 22, 38, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease);
  z-index: 90;
}
.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 94vw);
  background: var(--card);
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  box-shadow: var(--shadow-lg);
  z-index: 95;
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform 280ms var(--ease);
}
.drawer.open {
  transform: translateX(0);
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.drawer-head h2 {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
}
.drawer-foot {
  flex: none;
  border-top: 1px solid var(--line);
  padding: 16px 22px;
  background: #faf9fe;
  border-radius: 0 0 0 var(--r-xl);
}

/* ---- modal ---- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 22, 38, 0.5);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 16px;
  overflow-y: auto;
  animation: modal-in 220ms var(--ease);
}
.modal-box {
  background: var(--card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 600px;
}
.modal-box.wide {
  max-width: 880px;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 {
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.modal-body {
  padding: 24px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: #faf9fe;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
@keyframes modal-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---- toasts ---- */
.toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(360px, calc(100vw - 36px));
}
.toast {
  background: var(--dark);
  color: var(--dark-ink);
  border-radius: var(--r-md);
  padding: 13px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: toast-in 240ms var(--ease);
  box-shadow: var(--shadow-lg);
}
.toast svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  color: var(--violet-soft);
}
.toast.is-ok svg {
  color: #5eead4;
}
.toast.is-bad svg {
  color: #fda4a8;
}
.toast.out {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms, transform 200ms;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- loading / empty / error states ---- */
.skel {
  position: relative;
  overflow: hidden;
  background: var(--bg-deep);
  border-radius: var(--r-lg);
  min-height: 14px;
}
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.75) 50%,
    transparent 80%
  );
  animation: skel-sweep 1.2s infinite;
}
@keyframes skel-sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
.empty {
  text-align: center;
  padding: 56px 24px;
  border: 2px dashed var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}
.empty svg {
  width: 38px;
  height: 38px;
  color: var(--faint);
  margin: 0 auto 14px;
}
.empty h3 {
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 6px;
}
.empty p {
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin-bottom: 16px;
}
.errorbox {
  border: 1.5px solid var(--red);
  background: var(--red-soft);
  color: #b3272d;
  padding: 14px 16px;
  font-size: 0.9rem;
  border-radius: var(--r-md);
}

/* ---- stamp-in animation for badges/plates ---- */
@keyframes stamp-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.stamp {
  animation: stamp-in 160ms var(--ease);
}

/* ---- reveal on scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
}
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}