@import "tailwindcss";

@theme {
  /* ---- palette ------------------------------------------------------- */
  --color-ink: #0e1013;
  --color-ink-2: #16191d;
  --color-ink-3: #22262b;
  --color-paper: #fbfaf8;
  --color-sand: #f2eee8;
  --color-muted: #5c6873; /* brand body grey, carried over from the current site */
  --color-gold: #f98223; /* Raoofi brand orange */
  --color-gold-soft: #fbae70;
  --color-line: #e2ddd5;

  /* ---- type ---------------------------------------------------------- */
  --font-sans: var(--font-iranyekan), system-ui, sans-serif;
  --font-latin: var(--font-arual), Arial, sans-serif;

  /* ---- motion -------------------------------------------------------- */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);

  --animate-fade-up: fade-up 0.9s var(--ease-out-soft) both;
  --animate-slow-zoom: slow-zoom 9s var(--ease-out-soft) both;
  --animate-marquee: marquee 38s linear infinite;

  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(22px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes slow-zoom {
    from {
      transform: scale(1.12);
    }
    to {
      transform: scale(1);
    }
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(50%);
    }
  }
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    background-color: var(--color-paper);
    color: var(--color-muted);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1,
  h2,
  h3,
  h4 {
    color: var(--color-ink);
    font-weight: 700;
    line-height: 1.45;
  }

  ::selection {
    background-color: var(--color-gold);
    color: #fff;
  }

  /* A restrained gold scrollbar keeps the luxury tone on desktop. */
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--color-sand);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--color-gold);
  }
}

@layer components {
  /* Latin lock-ups (project names, kickers) always read left-to-right. */
  .latin {
    font-family: var(--font-latin);
    direction: ltr;
    unicode-bidi: isolate;
  }

  /* Thin gold rule that precedes every section kicker. */
  .kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-gold);
    font-size: 0.75rem;
    letter-spacing: 0.32em;
  }
  .kicker::before {
    content: "";
    width: 2.5rem;
    height: 1px;
    background: currentColor;
  }

  /* Rich text rendered from the portfolio API's mainTextHtml field. */
  .cms-body {
    max-width: 738px;
    margin-inline: auto;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 2.1;
  }
  .cms-body p {
    margin-block: 1.25em;
  }
  .cms-body strong,
  .cms-body b {
    color: var(--color-ink);
    font-weight: 700;
  }
  .cms-body a {
    color: var(--color-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .cms-body a:hover {
    color: var(--color-ink);
  }
  .cms-body img {
    display: block;
    width: 100%;
    height: auto;
    margin-block: 2em;
  }
  .cms-body h1,
  .cms-body h2,
  .cms-body h3 {
    margin-block: 1.5em 0.75em;
    color: var(--color-ink);
    font-weight: 700;
  }
}

@utility no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}