.portfolio-case-card--telforce .portfolio-case-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.portfolio-case-card--telforce .portfolio-case-card__body { flex: 1; }
.portfolio-case-card--telforce .portfolio-case-card__more {
  display: inline-block;
  width: fit-content;
  margin-top: auto;
  padding-top: .7rem;
  color: #e8e5db;
  font-family: var(--font-mono);
  font-size: .67rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.portfolio-case-card--telforce .portfolio-case-card__visual {
  transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease;
}
.portfolio-case-card--telforce .portfolio-case-card__link:hover .portfolio-case-card__visual,
.portfolio-case-card--telforce .portfolio-case-card__link:focus-visible .portfolio-case-card__visual {
  transform: scale(1.025);
}
.portfolio-case-card--telforce .portfolio-case-card__link:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: -2px; }
.portfolio-case-card__art-note {
  position: absolute;
  right: .7rem;
  bottom: .6rem;
  padding: .35rem .45rem;
  color: rgba(255,255,255,.76);
  background: rgba(4,6,7,.7);
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tf-preview-motion {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.portfolio-case-card--telforce .portfolio-case-card__link:hover .tf-preview-motion,
.portfolio-case-card--telforce .portfolio-case-card__link:focus-visible .tf-preview-motion { transform: scale(1.025); }
.tf-motion__route,
.tf-motion__forecast {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: tf-draw 7s ease-in-out infinite;
}
.tf-motion__route { stroke: rgba(255, 255, 255, 0.88); }
.tf-motion__forecast { stroke: #FFFFFF; stroke-width: 4.5; }
.tf-motion__pin,
.tf-motion__forecast-point {
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 2.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: tf-pulse 7s ease-out infinite;
}
.tf-motion__pin--1 { animation-delay: .3s; }
.tf-motion__pin--2 { animation-delay: .8s; }
.tf-motion__pin--3 { animation-delay: 1.3s; }
.tf-motion__pin--4 { animation-delay: 1.8s; }
.tf-motion__forecast-point { stroke: #FFFFFF; animation-delay: 2s; }
.tf-motion__scanner { transform: translateX(-75px); opacity: 0; animation: tf-scan-code 5s ease-in-out infinite; }
@keyframes tf-draw { 0%, 5% { stroke-dashoffset: 700; opacity: 0; } 12% { opacity: 1; } 45%, 75% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes tf-pulse { 0%, 6% { opacity: 0; transform: scale(.5); } 12% { opacity: .9; transform: scale(1); } 20%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes tf-scan-code { 0%, 12% { transform: translateX(-75px); opacity: 0; } 18% { opacity: 1; } 56% { transform: translateX(300px); opacity: 1; } 68%, 100% { transform: translateX(300px); opacity: 0; } }
.case-study__film--visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: clamp(18rem, 56vh, 40rem);
  object-fit: cover;
  background: #080808;
}
.case-study__film--visual .tf-preview-motion { z-index: 1; }
.case-study__film--visual .case-study__art-note {
  position: absolute;
  z-index: 3;
  right: clamp(1rem, 3vw, 2rem);
  bottom: 1rem;
  color: rgba(255,255,255,.74);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.case-study__film--visual img { animation: tf-reveal 1.1s ease-out both; }
@keyframes tf-reveal { from { opacity: .4; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 900px) {
  .case-study__film--visual img { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-case-card--telforce .portfolio-case-card__visual,
  .case-study__film--visual img { transition: none; animation: none; }
}
html.reduce-motion .portfolio-case-card--telforce .portfolio-case-card__visual,
html.reduce-motion .case-study__film--visual img { transition: none; animation: none; }
html.reduce-motion .tf-preview-motion { display: none; }
