/* =====================================================================
   Disciplines / "What we do" section
   Disciplines list: ink-black background,
   hairline dividers, sliding gradient fill, moving title, accent dot
   and the rotating arrow chip on hover.

   Scoped with the .tf-disc prefix so nothing else on the site is hit.
   ===================================================================== */

.tf-disc {
  --tf-accent: #ef233c;
  --tf-ink: #121517;
  --tf-gutter: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
  --tf-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  background-color: var(--tf-ink);
  color: #fff;
  padding-block: clamp(5rem, 9vw, 11rem);
  overflow: hidden;
}

/* faint brand glow so the black is not flat */
.tf-disc::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -30%;
  width: min(1100px, 120%);
  height: 80%;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(239, 35, 60, 0.10), rgba(239, 35, 60, 0) 70%);
}

.tf-disc__container {
  position: relative;
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--tf-gutter);
}

/* ---------------- intro ---------------- */
.tf-disc__intro {
  display: grid;
  gap: 2.5rem;
}

.tf-disc__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.tf-disc__eyebrow-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--tf-accent);
  box-shadow: 0 0 12px 1px rgba(239, 35, 60, 0.8);
}

.tf-disc__title {
  margin: 1.5rem 0 0;
  font-size: clamp(2.5rem, 1rem + 5.2vw, 7rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.tf-disc__accent {
  color: var(--tf-accent);
}

.tf-disc__lead {
  margin: 0;
  max-width: 24rem;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 40rem) {
  .tf-disc__lead {
    font-size: 1.125rem;
  }
}

@media (min-width: 64rem) {
  .tf-disc__intro {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2rem;
    align-items: end;
  }
  .tf-disc__intro-left {
    grid-column: span 8;
  }
  .tf-disc__lead {
    grid-column: span 4;
    justify-self: end;
    padding-bottom: 0.75rem;
  }
}

/* ---------------- list ---------------- */
.tf-disc__list {
  margin: clamp(5rem, 8vw, 7rem) 0 0;
  padding: 0;
  list-style: none;
}

.tf-disc__rule {
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.tf-disc__item {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  grid-template-areas:
    "index head arrow"
    ". items items";
  gap: 1.25rem 1rem;
  padding-block: 2rem;
  color: #fff;
  text-decoration: none;
}

/* the theme reset paints anchors #336 with an underline on hover - keep our row white */
.tf-disc__item:link,
.tf-disc__item:visited,
.tf-disc__item:hover,
.tf-disc__item:active,
.tf-disc__item:focus {
  color: #fff;
  text-decoration: none;
}

.tf-disc__fill {
  position: absolute;
  inset: 0 calc(var(--tf-gutter) * -1);
  z-index: -1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s var(--tf-ease);
}

.tf-disc__index {
  grid-area: index;
  padding-top: 0.6em;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(255, 255, 255, 0.4);
}

.tf-disc__head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tf-disc__name {
  position: relative;
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
  color: #fff;
  transition: translate 0.7s var(--tf-ease);
}

.tf-disc__dot {
  position: absolute;
  top: 50%;
  left: -0.45em;
  width: 0.14em;
  height: 0.14em;
  margin-top: -0.07em;
  border-radius: 999px;
  background: var(--tf-accent);
  scale: 0;
  transition: scale 0.6s var(--tf-ease);
}

.tf-disc__tagline {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.tf-disc__items {
  grid-area: items;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.5s;
}

.tf-disc__arrow {
  grid-area: arrow;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  font-size: 0.95rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  transition: background-color 0.5s var(--tf-ease), color 0.5s var(--tf-ease),
    box-shadow 0.5s var(--tf-ease), rotate 0.6s var(--tf-ease);
}

.tf-disc__arrow-icon {
  position: relative;
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  flex: none;
  overflow: clip;
}

.tf-disc__arrow-icon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.6s var(--tf-ease);
}

.tf-disc__arrow-icon svg:last-child {
  transform: translate(-120%, 120%);
}

.tf-disc__item:hover .tf-disc__arrow-icon svg:first-child {
  transform: translate(120%, -120%);
}

.tf-disc__item:hover .tf-disc__arrow-icon svg:last-child {
  transform: translate(0);
}

.tf-disc__item:focus-visible {
  outline: 1px solid var(--tf-accent);
  outline-offset: -2px;
  box-shadow: none;
}

@media (hover: hover) {
  .tf-disc__item:hover .tf-disc__fill {
    clip-path: inset(0);
  }
  .tf-disc__item:hover .tf-disc__name {
    translate: 0.55em;
  }
  .tf-disc__item:hover .tf-disc__dot {
    scale: 1;
  }
  .tf-disc__item:hover .tf-disc__items {
    color: rgba(255, 255, 255, 0.8);
  }
  .tf-disc__item:hover .tf-disc__arrow {
    color: var(--tf-ink);
    background: #fff;
    rotate: 45deg;
    box-shadow: inset 0 0 0 1px #fff;
  }
}

@media (min-width: 64rem) {
  .tf-disc__item {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: none;
    align-items: center;
    column-gap: 2rem;
    padding-block: 2.75rem;
  }
  .tf-disc__index {
    grid-column: 1;
  }
  .tf-disc__head {
    grid-column: 2 / span 5;
  }
  .tf-disc__items {
    grid-column: 7 / span 5;
  }
  .tf-disc__arrow {
    grid-column: 12;
    justify-self: end;
  }
}

/* ---------------- reveal on scroll ---------------- */
.tf-disc [data-disc-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.9s var(--tf-ease), transform 0.9s var(--tf-ease);
  transition-delay: var(--disc-delay, 0s);
}

.tf-disc [data-disc-reveal].is-in {
  opacity: 1;
  transform: none;
}

.tf-disc__rule[data-disc-reveal] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--tf-ease), opacity 0.6s linear;
}

.tf-disc__rule[data-disc-reveal].is-in {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .tf-disc [data-disc-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .tf-disc__fill,
  .tf-disc__name,
  .tf-disc__dot,
  .tf-disc__arrow,
  .tf-disc__arrow-icon svg {
    transition: none;
  }
}