/* ═══════════════════════════════════════════════════════════════════════
   AFA AI WEBSITE — signature footer
   Reference build: saradavoudifar.pages.dev (live since 2026-09-27).
   Mechanic: 21st.dev "Footer Section 5" (solaceui) as first adapted on
   hesam-ebrahimnezhad.pages.dev — an oversized outlined wordmark sitting
   behind a fluted-glass panel that covers the bottom of its letters.

   Theme it ONLY through the custom properties on .afa-sig. Every other
   number below is the reference value; change it only with a reason.
   ═══════════════════════════════════════════════════════════════════════ */

.afa-sig {
  /* ── theme (reference values: Sara Davoudifar, green + gold) ── */
  --afa-sig-accent: 216 183 122;       /* gold  #d8b77a — RGB triplet, used with alpha */
  --afa-sig-accent-lit: 242 222 176;   /* light gold #f2deb0 */
  --afa-sig-text: 230 225 220;         /* ivory #e6e1dc */
  --afa-sig-panel-from: #131f18;       /* panel gradient, lighter end (top-left) */
  --afa-sig-panel-to: #0a150f;         /* panel gradient, darker end (bottom-right) */
  --afa-sig-word-font: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif; /* italic 500 */
  --afa-sig-ui-font: inherit;          /* the site's body sans */
  --afa-sig-display-font: inherit;     /* the site's heading font (client name) */
  --afa-sig-max: 1240px;
  --afa-sig-gutter: clamp(20px, 5vw, 72px);

  position: relative;
  /* the scroll-driven entrance of everything inside is bound to this box */
  view-timeline: --afa-sig block;
  font-family: var(--afa-sig-ui-font);
  color: rgb(var(--afa-sig-text));
  /* ⚠️ NO overflow here or on any ancestor up to the page:
     overflow:hidden makes a scroll container — it clips the wordmark AND
     binds view() timelines to a box that never scrolls, so the animation
     silently never runs. Use overflow: clip on ancestors if you must clip. */
}

/* ── 1. the wordmark band (sits on the footer's own background) ── */
.afa-sig__band {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top: clamp(44px, 10vh, 120px);
}
.afa-sig__word {
  display: block;
  font-family: var(--afa-sig-word-font);
  font-style: italic;
  font-weight: 500;
  /* word width ≈ 8.3 × font-size in Bodoni Moda italic: 10.4vw keeps it
     inside the viewport from 390px to 1440px; cap 160px at 1920px */
  font-size: clamp(36px, 10.4vw, 160px);
  line-height: 1;
  margin-bottom: -0.1em;          /* the panel covers the bottom 0.1em of the letters */
  letter-spacing: 0.02em;
  white-space: nowrap;
  direction: ltr;                 /* always LTR, also on RTL pages */
  color: transparent;
  -webkit-text-stroke: 1px rgb(var(--afa-sig-accent) / 0.46);
  user-select: none;
}

/* ── 2. the fluted glass panel ── */
.afa-sig__panel {
  position: relative;
  z-index: 1;
  background: linear-gradient(160deg, var(--afa-sig-panel-from) 0%, var(--afa-sig-panel-to) 100%);
  border-top: 1px solid rgb(var(--afa-sig-accent) / 0.24);
}
.afa-sig__flutes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgb(var(--afa-sig-accent-lit) / 0.045) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.22) 0 4px, transparent 4px 9px),
    linear-gradient(115deg, rgb(var(--afa-sig-accent) / 0.1), transparent 55%);
  -webkit-mask-image: linear-gradient(to bottom, #000, rgb(0 0 0 / 0.3));
  mask-image: linear-gradient(to bottom, #000, rgb(0 0 0 / 0.3));
}
.afa-sig__inner {
  position: relative;
  max-width: var(--afa-sig-max);
  margin-inline: auto;
  padding-inline: var(--afa-sig-gutter);
}
.afa-sig__row {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 6vh, 56px);
  padding-top: clamp(40px, 7vh, 64px);
  padding-bottom: clamp(30px, 5vh, 44px);
}
@media (min-width: 1024px) {
  .afa-sig__row {
    flex-direction: row;
    justify-content: space-between;
    gap: 48px;
  }
}

/* ── 3. brand block: AFA builder link + the client's name ── */
.afa-sig__brand {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 34ch;
}
.afa-sig__builder {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  align-self: flex-start;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}
.afa-sig__builder:focus-visible {
  outline: 2px solid rgb(var(--afa-sig-accent));
  outline-offset: 4px;
}
.afa-sig__mark {
  display: block;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  transition:
    filter 0.5s ease,
    scale 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.afa-sig__builder-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.afa-sig__prefix {
  font-size: 12px;
  color: rgb(var(--afa-sig-text) / 0.6);
}
.afa-sig__name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgb(var(--afa-sig-text));
  direction: ltr;
  transition: color 0.3s;
}
.afa-sig__site {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgb(var(--afa-sig-accent) / 0.8);
  direction: ltr;
}
.afa-sig__arrow {
  display: inline-block;
  margin-inline-start: 4px;
  transition: transform 0.3s;
}
.afa-sig__builder:hover .afa-sig__name {
  color: rgb(var(--afa-sig-accent-lit));
}
.afa-sig__builder:hover .afa-sig__arrow {
  transform: translate(2px, -2px);
}
@media (hover: hover) and (pointer: fine) {
  .afa-sig__builder:hover .afa-sig__mark {
    filter: drop-shadow(0 0 14px rgb(var(--afa-sig-accent-lit) / 0.35));
    scale: 1.06;
  }
}
.afa-sig__subject {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.afa-sig__subject-name {
  font-family: var(--afa-sig-display-font);
  font-size: 19px;
  font-weight: 900;
  color: rgb(var(--afa-sig-text));
}
.afa-sig__subject-line {
  font-size: 13px;
  color: rgb(var(--afa-sig-text) / 0.6);
}

/* ── 4. link columns: two real columns on phones (four 80px slivers do not read) ── */
.afa-sig__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 36px;
}
@media (min-width: 640px) {
  .afa-sig__cols {
    display: flex;
    gap: clamp(40px, 6vw, 88px);
  }
}
.afa-sig__col-title {
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgb(var(--afa-sig-accent-lit));
}
/* Latin labels are letter-spaced, so they are uppercase (tracked lowercase is a typo) */
.afa-sig:dir(ltr) .afa-sig__col-title {
  text-transform: uppercase;
}
.afa-sig__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.afa-sig__link,
.afa-sig__current {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}
.afa-sig__link {
  color: rgb(var(--afa-sig-text) / 0.7);
  text-decoration: none;
  transition: color 0.3s;
}
.afa-sig__link:hover {
  color: rgb(var(--afa-sig-accent-lit));
}
.afa-sig__link:focus-visible {
  outline: 2px solid rgb(var(--afa-sig-accent));
  outline-offset: 2px;
}
.afa-sig__current {
  color: rgb(var(--afa-sig-accent-lit));   /* the current language is not a link */
}

/* ── 5. legal line ── */
.afa-sig__legal {
  margin: 0;
  border-top: 1px solid rgb(var(--afa-sig-accent) / 0.15);
  padding: 24px 0;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: rgb(var(--afa-sig-text) / 0.55);
}

/* ── 6. motion: scroll-driven, from-only keyframes (rest state = fully visible) ── */
@keyframes afa-sig-strike {
  from {
    opacity: 0;
    translate: 0 14%;
    letter-spacing: 0.14em;
    -webkit-text-stroke-color: rgb(var(--afa-sig-accent) / 0.06);
  }
}
@keyframes afa-sig-rise {
  from {
    opacity: 0;
    translate: 0 18px;
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .afa-sig__word {
      animation: afa-sig-strike linear both;
      animation-timeline: --afa-sig;
      animation-range: entry 8% entry 62%;
    }
    /* the page ends here, so ranges end on "entry", never on "cover";
       columns follow the brand block by --d steps */
    .afa-sig__rise {
      animation: afa-sig-rise linear both;
      animation-timeline: --afa-sig;
      animation-range: entry calc(26% + var(--d, 0) * 8%) entry calc(70% + var(--d, 0) * 8%);
    }
  }
}