/* ==========================================================================
   Cessaland — Landing
   ========================================================================== */

.hero {
  padding-block: var(--space-8) var(--space-7);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
}

.hero__eyebrow-line {
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--amber-500), transparent);
}

/* Now that the eyebrow is centered, the line flanks both sides of the text
   symmetrically — each gradient fades outward, away from the label.
   DOM order: --right comes first, and in an RTL flex row the first child
   sits physically on the right, so --right needs amber near its own left
   edge (facing the text) fading out to the right; --left is the mirror. */
.hero__eyebrow-line--right {
  background: linear-gradient(90deg, var(--amber-500), transparent);
}

.hero__eyebrow-line--left {
  background: linear-gradient(270deg, var(--amber-500), transparent);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.18;
  max-width: 16ch;
  margin-inline: auto;
}

.hero__title em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(95deg, var(--amber-300), var(--amber-500) 60%, var(--teal-300));
  -webkit-background-clip: text;
  background-clip: text;
}

.hero__desc {
  margin-top: var(--space-4);
  margin-inline: auto;
  max-width: 46ch;
  color: var(--text-secondary);
  font-size: 1.05rem;
}

.hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hero__stat b {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--amber-300);
}

.hero__stat span {
  font-size: var(--fs-micro);
  color: var(--text-tertiary);
}

.hero__meta {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}

/* ---- Load-in reveal (hero) -------------------------------------------------
   Each hero element fades up into place on first paint, staggered slightly
   so they settle one after another rather than popping in at once. */

@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal-up {
  opacity: 0;
  animation: heroReveal 0.8s var(--ease-lamp) forwards;
}

.hero__eyebrow.reveal-up { animation-delay: 0.05s; }
.hero__title.reveal-up { animation-delay: 0.16s; }
.hero__desc.reveal-up { animation-delay: 0.3s; }
.hero__meta.reveal-up { animation-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-up {
    animation: none;
    opacity: 1;
  }
}

/* ---- Tools grid --------------------------------------------------------- */

.tools {
  padding-block: var(--space-6) var(--space-9);
  scroll-margin-top: var(--space-8);
}

.tools__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  max-width: 880px;
  margin-inline: auto;
}

.tools__head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
}

.tools__head p {
  color: var(--text-tertiary);
  font-size: var(--fs-small);
}

/* ==========================================================================
   Card grid sizing — everything about how big the cards are and how
   they're arranged lives in this one block. To tweak it:

   1. OVERALL GRID WIDTH  → `.bento` → `max-width`
      Wider value = the whole 2×2 block spreads out more.

   2. HOW MANY PER ROW  → `.bento > *` grid-column span (out of 12 columns)
      Currently `span 6` at ≥620px = 2 per row (6+6=12).
      `span 4` = 3 per row. `span 12` = 1 per row (stacked, like on mobile).

   3. GAP BETWEEN CARDS  → `.bento` → `gap`
      Use any of the spacing tokens from tokens.css (--space-4 … --space-8),
      or a plain px/rem value.

   4. CARD HEIGHT / IMAGE SIZE  → `.bento .card__visual` → `aspect-ratio`
      e.g. `4 / 3` = taller image, `16 / 9` = shorter/wider image.
      This is the single biggest lever on how "big" each card feels.

   5. INNER PADDING / TEXT SIZE  → `.bento .card__body`, `.card__title`,
      `.card__desc` → padding and font-size.

   6. BREAKPOINT WHERE IT SWITCHES TO 2 COLUMNS  → the `@media (min-width: …)`
      query just above this comment.
   ========================================================================== */

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
  max-width: 880px;
  margin-inline: auto;
}

.bento > * {
  grid-column: span 12;
}

@media (min-width: 620px) {
  .bento > * { grid-column: span 6; }
}

.bento .card__visual {
  aspect-ratio: 16 / 10;
}

.bento .card__body {
  padding: var(--space-5);
}

.bento .card__title {
  font-size: 1.2rem;
}

.bento .card__desc {
  font-size: 0.88rem;
  line-height: 1.65;
}

/* ---- Scroll-in reveal (cards) -----------------------------------------------
   Cards fade + rise into place as the tools section enters the viewport,
   staggered left-to-right / top-to-bottom in DOM order. JS toggles
   .is-visible via IntersectionObserver; see landing.js. */

.bento > .card-link {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-lamp), transform 0.7s var(--ease-lamp);
}

.bento > .card-link.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bento > .card-link:nth-child(1) { transition-delay: 0s; }
.bento > .card-link:nth-child(2) { transition-delay: 0.08s; }
.bento > .card-link:nth-child(3) { transition-delay: 0.16s; }
.bento > .card-link:nth-child(4) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .bento > .card-link {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Footer --------------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-6) var(--space-8);
  border-top: 1px solid var(--border);
}

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--fs-micro);
}

.site-footer__row .wordmark {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .hero { padding-block: var(--space-7) var(--space-6); }
}

/* ==========================================================================
   Mobile Fixes: Prevent Shifting & Scale Down Sizes
   ========================================================================== */

/* ۱. جلوگیری از شیفت خوردن سایت با مخفی کردن سرریزِ هاله‌های نور */
.page {
  overflow-x: hidden;
  width: 100%;
}

@media (max-width: 480px) {
  .container {
    padding-inline: var(--space-4) !important;
  }

  .bento {
    gap: var(--space-4) !important;
  }
  .bento .card__body {
    padding: var(--space-4) !important;
  }
  .bento .card__title {
    font-size: 1.05rem !important;
  }
  .bento .card__desc {
    font-size: 0.82rem !important;
  }
  .card__action {
    font-size: 0.8rem !important;
  }
  .card__visual {
    aspect-ratio: 16 / 9 !important;
  }
  .card__icon {
    width: 32px !important;
    height: 32px !important;
    top: var(--space-3) !important;
    inset-inline-start: var(--space-3) !important;
  }
  .card__icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  .hero__title {
    font-size: 1.6rem !important;
  }
  .hero__desc {
    font-size: 0.9rem !important;
  }
  
  .nav__bar {
    padding: var(--space-2) var(--space-3) !important;
  }
  .wordmark {
    font-size: 0.9rem !important;
  }
}