/* Shared PANELTEN motion system */
@view-transition { navigation: auto; }

::view-transition-group(root) {
  animation-duration: 240ms;
  animation-timing-function: ease-out;
}

::view-transition-old(root) { animation: none; opacity: 0; }
::view-transition-new(root) { animation: panelten-page-in 220ms ease-out both; }

@keyframes panelten-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.has-drilldown-entry.motion-enabled .site-header {
  opacity: 1;
  transform: none;
  transition: none;
}

.is-drilldown-source { isolation: isolate; }

.is-drilling-down .is-drilldown-source {
  opacity: .52 !important;
  transform: scale(.985) !important;
  transition: opacity 140ms ease-out, transform 180ms cubic-bezier(.25,.8,.25,1) !important;
}

.is-drilling-down .is-drilldown-source .card-overlay,
.is-drilling-down .is-drilldown-source > span,
.is-drilling-down .is-drilldown-source > p {
  transition: opacity 240ms ease;
}

.is-drilling-down .is-drilldown-source .card-overlay > :not(div),
.is-drilling-down .is-drilldown-source .card-overlay p,
.is-drilling-down .is-drilldown-source > span,
.is-drilling-down .is-drilldown-source > p { opacity: 0; }

.motion-enabled .site-header {
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}

.motion-enabled .site-header.is-ready {
  opacity: 1;
  transform: translateY(0);
}

/* Keep navigation available while visitors move through every published page. */
.site-header,
.site-header.scroll-aware-header {
  position: fixed !important;
  inset: 0 0 auto;
  z-index: 100;
  transition: opacity .35s ease, transform .35s ease, background-color .25s ease, box-shadow .25s ease;
}

.motion-enabled .site-header {
  opacity: 1;
  transform: translateY(0);
}

.site-header.scroll-aware-header.is-scrolled {
  background: rgba(255, 255, 255, .92);
  border-bottom-color: rgba(41, 41, 41, .12);
  box-shadow: 0 10px 30px rgba(41, 41, 41, .09);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}

.home-page .site-header.scroll-aware-header.is-scrolled .nav > a:not(.nav-cta) {
  color: #292929;
  text-shadow: none;
}

.home-page .site-header .nav > a:not(.nav-cta) {
  position: relative;
  transition: color .2s ease, opacity .2s ease;
}

.home-page .site-header .nav > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: -11px;
  left: 0;
  height: 2px;
  background: #c1ff72;
  transition: right .25s ease;
}

.home-page .site-header .nav > a.is-active:not(.nav-cta) {
  opacity: 1;
  font-weight: 600;
}

.home-page .site-header .nav > a.is-active:not(.nav-cta)::after { right: 0; }

@media (max-width: 760px) {
  body:not(.home-page) > .site-header.scroll-aware-header + main { padding-top: 72px; }
  .home-page .site-header .nav > a:not(.nav-cta)::after { bottom: 4px; }
}

.motion-enabled .motion-item {
  --motion-delay: 0ms;
  opacity: 0;
  transform: translate3d(0,32px,0);
  filter: blur(5px);
  transition:
    opacity .78s cubic-bezier(.22,1,.36,1) var(--motion-delay),
    transform .9s cubic-bezier(.22,1,.36,1) var(--motion-delay),
    filter .78s ease var(--motion-delay);
  will-change: opacity, transform, filter;
}

.motion-enabled .motion-item.motion-hero {
  transform: translate3d(0,42px,0);
  transition-duration: .9s,1.05s,.9s;
}

.motion-enabled .motion-item.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0);
  filter: blur(0);
  will-change: auto;
}

.motion-enabled .motion-image {
  opacity: 0;
  clip-path: inset(0 0 14% 0);
  transform: translate3d(0,24px,0);
  transition:
    opacity .8s ease,
    clip-path 1.05s cubic-bezier(.22,1,.36,1),
    transform 1.05s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}

.motion-enabled .motion-image > img {
  transform: scale(1.055);
  transition: transform 1.35s cubic-bezier(.22,1,.36,1);
}

.motion-enabled .motion-image.is-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translate3d(0,0,0);
}

.motion-enabled .motion-image.is-visible > img { transform: scale(1); }

.motion-enabled .applications-photo.motion-image > img,
.motion-enabled .applications-photo.motion-image.is-visible > img {
  transform: none;
  transition: none;
}

.motion-enabled.motion-replay-prep .site-header,
.motion-enabled.motion-replay-prep .motion-item,
.motion-enabled.motion-replay-prep .motion-image,
.motion-enabled.motion-replay-prep .motion-image > img {
  transition: none !important;
}

.button,
.nav-cta,
.text-link,
.surface-back,
.tech-learn {
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, opacity .3s ease;
}

.button span,
.nav-cta span,
.text-link span,
.tech-learn span { display: inline-block; transition: transform .3s cubic-bezier(.22,1,.36,1); }

@media (hover:hover) {
  .button:hover,
  .nav-cta:hover,
  .tech-learn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(41,41,41,.14); }
  .button:hover span,
  .nav-cta:hover span,
  .text-link:hover span,
  .tech-learn:hover span { transform: translate(4px,-3px); }
  .surface-back:hover { transform: translateX(-4px); }

  .motion-enabled .motion-item.is-visible.collection-card:hover,
  .motion-enabled .motion-item.is-visible.core-card:hover,
  .motion-enabled .motion-item.is-visible.finish-family-card:hover,
  .motion-enabled .motion-item.is-visible.pet-finish-card:hover {
    transform: translateY(-6px);
  }

  .finish-family-card,
  .pet-finish-card { transition: transform .38s cubic-bezier(.22,1,.36,1), box-shadow .38s ease; }
  .finish-family-card:hover,
  .pet-finish-card:hover { box-shadow: 0 24px 52px rgba(41,41,41,.12); }
  .finish-family-swatch img,
  .pet-finish-image img,
  .finish-sample img { transition: transform .75s cubic-bezier(.22,1,.36,1); }
  .finish-family-card:hover img,
  .pet-finish-card:hover img,
  .finish-grid article:hover .finish-sample img { transform: scale(1.035); }
}

.finish-grid .finish-sample img,
.finish-grid article:hover .finish-sample img {
  transform: none;
  transition: none;
}

.finish-family-grid .finish-family-swatch img,
.finish-family-grid .finish-family-card:hover .finish-family-swatch img {
  transform: none;
  transition: none;
}

@media (max-width:700px) {
  ::view-transition-group(root) { animation-duration: 220ms; }

  .motion-enabled .motion-item { transform: translate3d(0,20px,0); filter: blur(2px); }
  .motion-enabled .collection-grid .collection-card,
  .motion-enabled .core-grid .core-card,
  .motion-enabled .application-gallery .application-image {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    will-change: auto;
  }
  .motion-enabled .hero .hero-panels.hero-timber-stage.motion-item { filter: none; }
  .motion-enabled .motion-item.motion-hero { transform: translate3d(0,26px,0); }
  .motion-enabled .motion-item.is-visible { transform: translate3d(0,0,0); filter: none; }
  .motion-enabled .motion-image { transform: translate3d(0,16px,0); clip-path: inset(0 0 8% 0); }
  .motion-enabled .motion-image.is-visible { transform: translate3d(0,0,0); clip-path: inset(0); }
}

@media (prefers-reduced-motion:reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation-duration: .01ms !important; }

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