/* ── RESET & BASE ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --grid-height: clamp(120px, 12svh, 240px);
  --bg: #0a0a0a;
  --fg: #f0ede8;
  --muted: rgba(240, 237, 232, 0.4);
  --accent: #c8a97e;
  --ui-bg: rgba(10, 10, 10, 0.85);
  --transition: 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

input,
textarea {
  font: inherit;
}

html {
  scroll-behavior: smooth;
}

.transition-enter,
.transition-leave {
  transition-property: transform, opacity;
  transition-duration: 400ms;
}

/* Transition in from the left to the right */
/* 2. Entering (Slide In) */
.transition-x-enter-start-right {
  transform: translateX(-100%);
  opacity: 0;
}
.transition-x-enter-end-right {
  transform: translateX(0);
  opacity: 1;
}
/* 3. Leaving (Slide Out) */
.transition-x-leave-start-right {
  transform: translateX(0);
  opacity: 1;
}
.transition-x-leave-end-right {
  transform: translateX(-100%);
  opacity: 0;
}

/* Transition in from the right to the left */
/* 2. Entering (Slide In) */
.transition-x-enter-start-left {
  transform: translateX(100%);
  opacity: 0;
}
.transition-x-enter-end-left {
  transform: translateX(0);
  opacity: 1;
}
/* 3. Leaving (Slide Out) */
.transition-x-leave-start-left {
  transform: translateX(0);
  opacity: 1;
}
.transition-x-leave-end-left {
  transform: translateX(100%);
  opacity: 0;
}