/* Shared motion layer: quick, calm transitions for page changes and UI states. */
:root{
  --hc-motion-fast: 170ms;
  --hc-motion-base: 260ms;
  --hc-motion-enter: 320ms;
  --hc-motion-ease: cubic-bezier(.2, 0, .2, 1);
}

html{
  scroll-behavior: smooth;
}

body{
  animation: hc-page-shell-enter 180ms var(--hc-motion-ease) both;
}

body.hc-page-leaving{
  opacity: 1;
  transform: none;
}

#main,
.main-content{
  animation: hc-content-enter var(--hc-motion-enter) var(--hc-motion-ease) both;
}

body.hc-page-leaving #main,
body.hc-page-leaving .main-content{
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--hc-motion-fast) var(--hc-motion-ease),
    transform var(--hc-motion-fast) var(--hc-motion-ease);
}

.btn,
.nav-link,
.dropdown-item,
.accordion-button,
.card,
.alert,
.modal-content,
.offcanvas,
.form-control,
.form-select,
.input-group-text,
.page-link,
.badge,
.list-group-item,
.table tbody tr,
.mobile-record-card,
[class*="card"],
button[class*="btn"],
a[class*="btn"]{
  transition-duration: var(--hc-motion-base);
  transition-timing-function: var(--hc-motion-ease);
}

.btn,
button[class*="btn"],
a[class*="btn"]{
  transition-property: background-color, border-color, color, box-shadow, transform, opacity;
}

@media (hover: hover){
  .btn:not(.btn-link):not(:disabled):hover,
  button[class*="btn"]:not(.btn-link):not(:disabled):hover,
  a[class*="btn"]:not(.btn-link):not(:disabled):hover{
    transform: translateY(-1px);
  }
}

.btn:not(.btn-link):active,
button[class*="btn"]:not(.btn-link):active,
a[class*="btn"]:not(.btn-link):active{
  transform: translateY(0);
  transition-duration: 90ms;
}

.card,
[class*="card"]{
  transition-property: background-color, border-color, box-shadow, transform, opacity;
}

.form-control,
.form-select,
.input-group-text{
  transition-property: border-color, box-shadow, background-color, color;
}

.form-control:focus,
.form-select:focus{
  transition-duration: var(--hc-motion-fast);
}

.page-link,
.badge,
.list-group-item,
.table tbody tr{
  transition-property: background-color, border-color, color, box-shadow, transform, opacity;
}

.table-hover > tbody > tr:hover > *{
  transition:
    background-color var(--hc-motion-base) var(--hc-motion-ease),
    color var(--hc-motion-base) var(--hc-motion-ease);
}

.mobile-record-card{
  transition-property: background-color, border-color, box-shadow, transform, opacity;
}

.mobile-record-card:focus-within{
  border-color: rgba(59, 130, 246, .35);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .1);
}

.rv-grid > .rv-card,
.fv-grid > .fv-card,
#favorites .row > .col,
#recent .row > .col,
#product-listing .row-cols-1 > .col,
.cat-section .row > [class*="col-"],
.admin-section .row > [class*="col-"],
.mobile-record-card{
  animation: hc-card-enter 360ms var(--hc-motion-ease) both;
  animation-delay: calc(var(--hc-stagger, 0) * 22ms);
}

.rv-grid > .rv-card:nth-child(2),
.fv-grid > .fv-card:nth-child(2),
#favorites .row > .col:nth-child(2),
#recent .row > .col:nth-child(2),
#product-listing .row-cols-1 > .col:nth-child(2),
.cat-section .row > [class*="col-"]:nth-child(2),
.admin-section .row > [class*="col-"]:nth-child(2),
.mobile-record-card:nth-child(2){ --hc-stagger: 1; }

.rv-grid > .rv-card:nth-child(3),
.fv-grid > .fv-card:nth-child(3),
#favorites .row > .col:nth-child(3),
#recent .row > .col:nth-child(3),
#product-listing .row-cols-1 > .col:nth-child(3),
.cat-section .row > [class*="col-"]:nth-child(3),
.admin-section .row > [class*="col-"]:nth-child(3),
.mobile-record-card:nth-child(3){ --hc-stagger: 2; }

.rv-grid > .rv-card:nth-child(4),
.fv-grid > .fv-card:nth-child(4),
#favorites .row > .col:nth-child(4),
#recent .row > .col:nth-child(4),
#product-listing .row-cols-1 > .col:nth-child(4),
.cat-section .row > [class*="col-"]:nth-child(4),
.admin-section .row > [class*="col-"]:nth-child(4),
.mobile-record-card:nth-child(4){ --hc-stagger: 3; }

.rv-grid > .rv-card:nth-child(5),
.fv-grid > .fv-card:nth-child(5),
#favorites .row > .col:nth-child(5),
#recent .row > .col:nth-child(5),
#product-listing .row-cols-1 > .col:nth-child(5),
.cat-section .row > [class*="col-"]:nth-child(5),
.admin-section .row > [class*="col-"]:nth-child(5),
.mobile-record-card:nth-child(5){ --hc-stagger: 4; }

.rv-grid > .rv-card:nth-child(6),
.fv-grid > .fv-card:nth-child(6),
#favorites .row > .col:nth-child(6),
#recent .row > .col:nth-child(6),
#product-listing .row-cols-1 > .col:nth-child(6),
.cat-section .row > [class*="col-"]:nth-child(6),
.admin-section .row > [class*="col-"]:nth-child(6),
.mobile-record-card:nth-child(6){ --hc-stagger: 5; }

.rv-grid > .rv-card:nth-child(7),
.fv-grid > .fv-card:nth-child(7),
#favorites .row > .col:nth-child(7),
#recent .row > .col:nth-child(7),
#product-listing .row-cols-1 > .col:nth-child(7),
.cat-section .row > [class*="col-"]:nth-child(7),
.admin-section .row > [class*="col-"]:nth-child(7),
.mobile-record-card:nth-child(7){ --hc-stagger: 6; }

.rv-grid > .rv-card:nth-child(8),
.fv-grid > .fv-card:nth-child(8),
#favorites .row > .col:nth-child(8),
#recent .row > .col:nth-child(8),
#product-listing .row-cols-1 > .col:nth-child(8),
.cat-section .row > [class*="col-"]:nth-child(8),
.admin-section .row > [class*="col-"]:nth-child(8),
.mobile-record-card:nth-child(8){ --hc-stagger: 7; }

.collapsing{
  transition-duration: 220ms;
  transition-timing-function: var(--hc-motion-ease);
}

.offcanvas{
  transition-duration: 220ms;
  transition-timing-function: var(--hc-motion-ease);
}

.modal.fade .modal-dialog{
  transition-duration: 180ms;
  transition-timing-function: var(--hc-motion-ease);
}

.carousel-fade .carousel-item{
  transition-duration: 420ms;
  transition-timing-function: ease;
}

@view-transition{
  navigation: auto;
}

::view-transition-old(root){
  animation: hc-view-old 170ms var(--hc-motion-ease) both;
}

::view-transition-new(root){
  animation: hc-view-new 300ms var(--hc-motion-ease) both;
}

a{
  transition-property: color, background-color, border-color, opacity, box-shadow;
  transition-duration: var(--hc-motion-base);
  transition-timing-function: var(--hc-motion-ease);
}

@keyframes hc-page-shell-enter{
  from{
    opacity: .96;
  }
  to{
    opacity: 1;
  }
}

@keyframes hc-content-enter{
  from{
    opacity: 0;
    transform: translateY(14px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hc-card-enter{
  from{
    opacity: 0;
    transform: translateY(12px) scale(.99);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes hc-view-old{
  to{
    opacity: .96;
  }
}

@keyframes hc-view-new{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  body{
    animation: none;
  }

  body.hc-page-leaving{
    opacity: 1;
    transform: none;
  }

  #main,
  .main-content,
  .rv-grid > .rv-card,
  .fv-grid > .fv-card,
  #favorites .row > .col,
  #recent .row > .col,
  #product-listing .row-cols-1 > .col,
  .cat-section .row > [class*="col-"],
  .admin-section .row > [class*="col-"],
  .mobile-record-card{
    animation: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root){
    animation: none !important;
  }
}