/* ASTRAVECT Aerospace V5 — interaction polish and high-resolution application media */
:root {
  --v5-ease: cubic-bezier(.2, .75, .25, 1);
}

/* A quiet scrolled state gives the sticky header depth without changing its geometry. */
.site-header {
  transition: background-color .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.site-header.is-scrolled {
  background: rgba(255,255,255,.975);
  border-bottom-color: rgba(8,34,59,.12);
  box-shadow: 0 8px 28px rgba(7,28,49,.085);
}

/* The indicator is the only active/hover underline; the link itself never draws a second line. */
.desktop-nav a {
  position: relative;
  transition: color .22s ease, opacity .22s ease;
}
.desktop-nav a:hover { opacity: .84; }
.nav-indicator {
  will-change: transform, width;
  transition: transform .48s cubic-bezier(.22, 1, .36, 1),
              width .38s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
}

/* Native anchor navigation uses the sticky-header offset and browser history correctly. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
main section[id] { scroll-margin-top: 96px; }

/* Crisp application images: the image now fills a fixed media canvas instead of inheriting
   a percentage height from a min-height-only parent (the cause of the grey strips). */
.application-card {
  height: 326px;
  min-height: 326px;
  isolation: isolate;
  border: 1px solid rgba(145,190,220,.12);
  box-shadow: 0 15px 36px rgba(6,28,52,.14);
  transition: transform .36s var(--v5-ease), box-shadow .36s ease, border-color .36s ease;
}
.application-card > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  transform: scale(1.001);
  filter: saturate(.96) contrast(1.02);
  transition: transform .8s var(--v5-ease), filter .5s ease;
}
.application-card::after {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(4,20,39,.02) 0%, rgba(4,20,39,.26) 34%, rgba(4,20,39,.88) 100%),
    linear-gradient(0deg, rgba(4,20,39,.84) 0%, rgba(4,20,39,.28) 47%, rgba(4,20,39,.04) 100%);
  transition: opacity .4s ease, background .4s ease;
}
.application-card:hover {
  transform: translateY(-5px);
  border-color: rgba(62,190,236,.48);
  box-shadow: 0 23px 46px rgba(6,28,52,.2), 0 0 0 1px rgba(39,178,229,.08);
}
.application-card:hover > img {
  transform: scale(1.055);
  filter: saturate(1.06) contrast(1.04);
}
.application-overlay {
  width: 70%;
  padding: 24px 24px 25px 12px;
}
.application-overlay h3 { line-height: 1.22; }
.application-overlay a {
  transition: transform .28s var(--v5-ease), background-color .25s ease, border-color .25s ease;
}
.application-card:hover .application-overlay a {
  transform: translate(2px,-2px);
  border-color: rgba(105,215,255,.95);
  background: rgba(12,127,193,.24);
}

/* The Verify use-case thumbnails use the same high-resolution originals. */
.usecase-card img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
}
.usecase-card {
  transition: transform .34s var(--v5-ease), box-shadow .34s ease, border-color .34s ease;
}
.usecase-card:hover {
  transform: translateY(-4px);
  border-color: rgba(8,127,202,.28);
  box-shadow: 0 15px 32px rgba(7,31,59,.11);
}
.usecase-card img { transition: transform .65s var(--v5-ease); }
.usecase-card:hover img { transform: scale(1.035); }

/* Consistent micro-interactions across buttons and text links. */
.button, .text-link, .language-control select, .footer-language select {
  transition: transform .24s var(--v5-ease), box-shadow .24s ease, background-color .24s ease,
              border-color .24s ease, color .24s ease;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(.985); }
.text-link { transition: color .22s ease, gap .22s ease; }
.text-link:hover { gap: 11px; }

/* Subtle reveal on scroll; elements remain visible if motion is reduced or JS is unavailable. */
html.has-reveal .reveal-on-scroll {
  opacity: 0;
  transform: translate3d(0,16px,0);
  transition: opacity .62s ease, transform .72s var(--v5-ease);
}
html.has-reveal .reveal-on-scroll.is-in-view {
  opacity: 1;
  transform: translate3d(0,0,0);
}

@media (max-width: 1180px) {
  .application-card { height: 310px; min-height: 310px; }
  .application-overlay { width: 76%; padding-right: 20px; }
}
@media (max-width: 900px) {
  html { scroll-padding-top: 82px; }
  main section[id] { scroll-margin-top: 82px; }
  .application-card { height: 300px; min-height: 300px; }
  .application-overlay { width: 72%; }
}
@media (max-width: 620px) {
  .application-grid { gap: 14px; }
  .application-card { height: 260px; min-height: 260px; }
  .application-card > img { object-position: center 44%; }
  .application-overlay { width: 74%; padding: 17px 18px 19px 8px; }
  .application-overlay h3 { font-size: 17px; }
  .application-overlay p { font-size: 11px; line-height: 1.55; }
  .application-overlay a { right: 14px; bottom: 16px; }
  .usecase-card img { height: 100%; min-height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  html.has-reveal .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
  .nav-indicator, .site-header, .application-card, .application-card > img,
  .application-overlay a, .usecase-card, .usecase-card img, .button, .text-link {
    transition: none !important;
  }
}