/**
 * TechAtScale Motion & Interaction Styles
 *
 * Micro-interactions, scroll reveal transitions, and GPU-accelerated
 * header art animations.
 */

/* Scroll reveal initial state and transitions */
.tas-motion .tas-reveal:not(.tas-in) {
  opacity: 0;
  transform: translateY(20px);
}

.tas-reveal {
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--tas-delay, 0ms);
}

/* Fix: a revealed card or button also lifts on hover; keep the reveal's fade and delay for both. */
.tas-reveal.tas-lift,
.tas-reveal.tas-press {
  transition: opacity 600ms ease var(--tas-delay, 0ms), transform 300ms cubic-bezier(.2, .7, .2, 1), box-shadow 220ms ease;
}

/* Button and action link tactile feedback */
.tas-press {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.tas-press:hover,
.tas-press:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(2, 62, 138, 0.45);
}

.tas-press:active {
  transform: translateY(0) scale(0.98);
}

.tas-press:focus-visible {
  outline: 3px solid #00edd3;
  outline-offset: 2px;
}

/* Card elevation feedback */
.tas-lift {
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.tas-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(2, 62, 138, 0.35);
}

/* Icon reveal animations */
.tas-motion .tas-icon:not(.tas-in) {
  opacity: 0;
  transform: scale(0.6) rotate(-12deg);
}

.tas-icon {
  display: inline-block;
  transition: opacity 500ms ease, transform 500ms cubic-bezier(.3, 1.4, .5, 1);
}

/* Horizontal line and divider reveals */
.tas-motion .tas-line:not(.tas-in) {
  transform: scaleX(0);
}

.tas-line {
  transform-origin: left;
  transition: transform 900ms cubic-bezier(.2, .7, .2, 1);
}

/* Added: vertical timeline lines grow downwards. */
.tas-motion .tas-line--v:not(.tas-in) {
  transform: scaleY(0);
}

.tas-line--v {
  transform-origin: top;
}

/* Quote step progress bar fill animation */
.tas-motion .tas-progress {
  transform-origin: left;
  animation: tas-fill 900ms cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes tas-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Quote step entrance slide-in */
.tas-motion .tas-step-in {
  animation: tas-step 600ms cubic-bezier(.2, .7, .2, 1) both;
}

/* Fix: slide only, no fade. On the quote steps the card's headline is the largest paint, and an
   opacity fade would hold that paint back. */
@keyframes tas-step {
  from {
    transform: translateX(24px);
  }
  to {
    transform: none;
  }
}

/* Header art containers and video background */
.tas-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.tas-art--band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30rem;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.tas-art__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  transition: opacity 1.2s ease;
}

.tas-art__video.tas-playing {
  opacity: 1;
}

.tas-art__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* SVG generative ambient animations */
.tas-art__node {
  transform-box: fill-box;
  transform-origin: center;
  animation: tas-pulse 6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes tas-pulse {
  0%, 100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.15);
  }
}

.tas-art__arc {
  opacity: 0.35;
  animation: tas-drift 18s ease-in-out infinite alternate;
}

@keyframes tas-drift {
  from {
    transform: translate(-24px, 6px);
  }
  to {
    transform: translate(24px, -6px);
  }
}

/* Decorative backdrop scrims */
.tas-art__scrim {
  position: absolute;
  inset: 0;
}

.tas-art--dark .tas-art__scrim {
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(1, 30, 70, 0.62), rgba(1, 30, 70, 0.38) 70%, rgba(1, 30, 70, 0.3));
}

/* Added: for art with bright detail behind the headline (chosen per page by measured contrast). */
.tas-art--dark.tas-art--strong .tas-art__scrim {
  background: radial-gradient(ellipse 75% 85% at 50% 50%, rgba(1, 30, 70, 0.76), rgba(1, 30, 70, 0.52) 70%, rgba(1, 30, 70, 0.4));
}

.tas-art--light .tas-art__scrim {
  background: radial-gradient(ellipse 70% 80% at 50% 45%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.45) 70%, rgba(255, 255, 255, 0.3));
}

/* Reduced motion and static mode overrides */
.tas-still .tas-reveal,
.tas-still .tas-press,
.tas-still .tas-lift,
.tas-still .tas-icon,
.tas-still .tas-line,
.tas-still .tas-progress,
.tas-still .tas-step-in,
.tas-still .tas-art__video,
.tas-still .tas-art__node,
.tas-still .tas-art__arc {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.tas-still .tas-art__arc {
  opacity: 0.35 !important;
}

.tas-still .tas-art__node {
  opacity: 0.9 !important;
}

.tas-still .tas-reveal:not(.tas-in),
.tas-still .tas-icon:not(.tas-in),
.tas-still .tas-line:not(.tas-in) {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .tas-reveal,
  .tas-press,
  .tas-lift,
  .tas-icon,
  .tas-line,
  .tas-progress,
  .tas-step-in,
  .tas-art__video,
  .tas-art__node,
  .tas-art__arc {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .tas-art__arc {
    opacity: 0.35 !important;
  }

  .tas-art__node {
    opacity: 0.9 !important;
  }

  .tas-motion .tas-reveal:not(.tas-in),
  .tas-motion .tas-icon:not(.tas-in),
  .tas-motion .tas-line:not(.tas-in) {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Added (TECHATSCAL-3, 21 Oct 2026): text that does not move when Poppins arrives. Poppins loads with
   display=swap, so the page first paints in Arial; Poppins is wider, so the headline and the line under it
   gained a line each and pushed the page down (Services on a phone: layout shift 0.088). These faces are
   Arial sized to Poppins' width and line metrics, measured from Poppins 400 and 700 over the
   live pages' paragraphs and headings (12,338 and 1,178 characters), so the swap keeps the same line breaks. */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  font-weight: 100 600;
  size-adjust: 113.05%;
  ascent-override: 92.88%;
  descent-override: 30.96%;
  line-gap-override: 8.85%;
}
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold");
  font-weight: 700 900;
  size-adjust: 106.19%;
  ascent-override: 98.88%;
  descent-override: 32.96%;
  line-gap-override: 9.42%;
}
html .font-display {
  font-family: Poppins, "Poppins Fallback", sans-serif;
}