@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideRight {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scalePop {
  0%   { opacity: 0; transform: scale(.93); }
  65%  { transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 8px rgba(30,144,255,.50); }
  50%       { box-shadow: 0 0 20px rgba(30,144,255,.95), 0 0 38px rgba(30,144,255,.30); }
}

@keyframes rotateMark {
  from { transform: rotate(12deg); }
  to   { transform: rotate(372deg); }
}

@keyframes drawerIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

header {
  animation: fadeIn .35s ease both;
}

.logoMark {
  animation: rotateMark 1.1s cubic-bezier(.22,.68,0,1.25) .05s both;
}

.dot {
  animation: pulseDot 2.8s ease-in-out infinite;
}

.hero .chip {
  opacity: 0;
  animation: slideRight .55s cubic-bezier(.22,.68,0,1.2) .10s forwards;
}

.hero .hTitle {
  opacity: 0;
  animation: fadeUp .60s cubic-bezier(.22,.68,0,1.15) .22s forwards;
}

.hero .lead {
  opacity: 0;
  animation: fadeUp .50s ease .36s forwards;
}

.hero .heroBtnRow {
  opacity: 0;
  animation: fadeUp .48s ease .50s forwards;
}

.hero .heroChipRow {
  opacity: 0;
  animation: fadeUp .45s ease .62s forwards;
}

.hero .floatPanel {
  opacity: 0;
  animation: scalePop .60s cubic-bezier(.22,.68,0,1.15) .28s forwards;
}

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 1.05s ease,
    transform 1.05s cubic-bezier(.22,.68,0,1);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .95s ease,
    transform .95s cubic-bezier(.22,.68,0,1);
  will-change: opacity, transform;
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: .00s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: .16s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: .32s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: .48s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: .64s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: .80s; opacity: 1; transform: translateY(0); }

.card {
  transition: transform .22s cubic-bezier(.22,.68,0,1.2),
              box-shadow .22s ease,
              border-color .22s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 80px rgba(0,0,0,.58), 0 0 0 1px rgba(30,144,255,.11);
  border-color: rgba(255,255,255,.13);
}

.step {
  transition: transform .20s ease, border-color .20s ease, background .20s ease;
}

.step:hover {
  transform: translateY(-3px);
  border-color: rgba(77,163,255,.28);
  background: rgba(30,144,255,.06);
}

.tlItem {
  transition: transform .20s ease, border-color .20s ease;
}

.tlItem:hover {
  transform: translateX(5px);
  border-color: rgba(77,163,255,.22);
}

.serviceCard {
  transition: transform .22s cubic-bezier(.22,.68,0,1.2),
              box-shadow .22s ease,
              border-color .22s ease;
}

.serviceCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(30,144,255,.14);
  border-color: rgba(77,163,255,.20);
}

.serviceMedia {
  overflow: hidden;
}

.serviceMedia img {
  transition: transform .55s cubic-bezier(.22,.68,0,1.15), filter .55s ease;
}

.serviceCard:hover .serviceMedia img {
  transform: scale(1.06);
  filter: saturate(1.14) contrast(1.07);
}

.galleryItem {
  transition: transform .22s cubic-bezier(.22,.68,0,1.2),
              box-shadow .22s ease,
              border-color .22s ease !important;
}

.galleryItem:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 20px 56px rgba(0,0,0,.48), 0 0 0 1px rgba(30,144,255,.18);
  border-color: rgba(77,163,255,.24) !important;
}

.galleryItem img {
  transition: transform .50s cubic-bezier(.22,.68,0,1.15);
}

.galleryItem:hover img {
  transform: scale(1.08);
}

.btn {
  transition: transform .18s ease,
              background .18s ease,
              box-shadow .18s ease,
              border-color .18s ease !important;
}

.btn:active {
  transform: translateY(1px) scale(.98) !important;
}

.btnPrimary {
  background-size: 200% auto;
  background-image: linear-gradient(
    135deg,
    rgba(30,144,255,.98)   0%,
    rgba(77,163,255,.95)  38%,
    rgba(120,190,255,.98) 55%,
    rgba(77,163,255,.95)  72%,
    rgba(30,144,255,.98) 100%
  );
  transition: background-position .55s ease,
              box-shadow .18s ease,
              transform .18s ease !important;
}

.btnPrimary:hover {
  background-position: right center;
}

.vinRow input {
  transition: border-color .20s ease, box-shadow .20s ease;
}

.vinRow input:focus {
  border-color: rgba(77,163,255,.55);
  box-shadow: 0 0 0 4px rgba(30,144,255,.14);
}

.pill {
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  cursor: default;
}

.pill:hover {
  background: rgba(30,144,255,.12);
  border-color: rgba(77,163,255,.30);
  transform: translateY(-1px);
}

.vinRowBtn {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.vinRowBtn:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(30,144,255,.12) !important;
}

nav a {
  position: relative;
}

nav a::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 5px;
  height: 1.5px;
  background: var(--accent2);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s cubic-bezier(.22,.68,0,1.2);
}

nav a:hover::after,
nav a.active::after {
  transform: scaleX(1);
}

.drawer.open {
  animation: drawerIn .22s cubic-bezier(.22,.68,0,1.2) both;
}

.modal.open .modalBackdrop {
  animation: fadeIn .20s ease both;
}

.modal.open .modalDialog {
  animation: scalePop .28s cubic-bezier(.22,.68,0,1.2) both;
}

.page {
  animation: fadeIn .45s ease both;
}

footer {
  animation: fadeIn .50s ease .08s both;
}
  
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .2s !important;
    transition-duration: .2s !important;
  }
}