/* Gashi Construct trial animation layer. Keep separate so it can be tuned or removed cleanly. */

:root {
  --gashi-motion-fast: 180ms;
  --gashi-motion-med: 520ms;
  --gashi-motion-ease: cubic-bezier(.2, .72, .18, 1);
}

.anim-ready .anim-reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity var(--gashi-motion-med) var(--gashi-motion-ease),
    transform var(--gashi-motion-med) var(--gashi-motion-ease);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}

.anim-ready .anim-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.anim-ready .site-header {
  animation: gashiHeaderIn 480ms var(--gashi-motion-ease) both;
}

.anim-ready .hero-bg,
.anim-ready .offers-hero-bg,
.anim-ready .portfolio-hero-image,
.anim-ready .about-hero::after,
.anim-ready .services-hero-bg {
  animation: gashiImageSettle 1200ms var(--gashi-motion-ease) both;
}

.btn,
.offer-card-link,
.case-link,
.header-call,
.mobile-action-bar a {
  position: relative;
  overflow: hidden;
}

.btn::after,
.offer-card-link::after,
.case-link::after,
.header-call::after,
.mobile-action-bar a::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.18) 48%, transparent 58%);
  transform: translateX(-140%);
  transition: transform 620ms var(--gashi-motion-ease);
}

.btn:hover::after,
.offer-card-link:hover::after,
.case-link:hover::after,
.header-call:hover::after,
.mobile-action-bar a:hover::after {
  transform: translateX(140%);
}

.service-card,
.active-offer-card,
.future-window-card,
.portfolio-card,
.full-service-card,
.about-capability-card,
.about-client-card,
.case-stage-card {
  transition:
    transform var(--gashi-motion-fast) ease,
    border-color var(--gashi-motion-fast) ease,
    box-shadow var(--gashi-motion-fast) ease;
}

.service-card:hover,
.active-offer-card:hover,
.future-window-card:hover,
.portfolio-card:hover,
.full-service-card:hover,
.about-capability-card:hover,
.about-client-card:hover,
.case-stage-card:hover {
  transform: translateY(-4px);
  border-color: rgba(248,9,6,.38);
  box-shadow: 0 22px 55px rgba(0,0,0,.28);
}

.anim-ready .eyebrow,
.anim-ready .portfolio-badge,
.anim-ready .panel-label {
  background: linear-gradient(90deg, #F80906 0%, #F80906 48%, rgba(255,255,255,.72) 50%, #F80906 52%, #F80906 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gashiRedTrace 1200ms ease-out both;
}

@keyframes gashiHeaderIn {
  from {
    opacity: 0;
    transform: translate3d(0, -14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes gashiImageSettle {
  from {
    transform: scale(1.025);
    filter: saturate(.82) contrast(1.04);
  }
  to {
    transform: scale(1);
    filter: saturate(1) contrast(1);
  }
}

@keyframes gashiRedTrace {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .anim-ready .anim-reveal,
  .anim-ready .site-header,
  .anim-ready .hero-bg,
  .anim-ready .offers-hero-bg,
  .anim-ready .portfolio-hero-image,
  .anim-ready .about-hero::after,
  .anim-ready .services-hero-bg,
  .anim-ready .eyebrow,
  .anim-ready .portfolio-badge,
  .anim-ready .panel-label,
  .btn::after,
  .offer-card-link::after,
  .case-link::after,
  .header-call::after,
  .mobile-action-bar a::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}