/*
 * Shared motion layer for interactive theme components.
 *
 * Motion is intentionally subtle and respects prefers-reduced-motion.
 * Component layout remains owned by the existing component stylesheets.
 */

/* Hero atmosphere */
.isp-hero {
  animation: isp-hero-background-drift 14s ease-in-out infinite alternate;
  will-change: background-size, background-position;
}

.hero-discovery__blob {
  animation: isp-hero-blob-drift 9s ease-in-out infinite;
  will-change: transform;
}

.hero-float--one {
  animation: isp-hero-float-one 6.8s ease-in-out infinite;
  will-change: transform;
}

.hero-float--two {
  animation: isp-hero-float-two 7.6s ease-in-out infinite;
  will-change: transform;
}

@keyframes isp-hero-background-drift {
  0% {
    background-size: 100% 100%, 100% 100%, 100% 100%;
    background-position: 0 0, 0 0, 0 0;
  }
  50% {
    background-size: 103% 103%, 102% 102%, 100% 100%;
    background-position: 7px -5px, -6px 6px, 0 0;
  }
  100% {
    background-size: 101.5% 101.5%, 103% 103%, 100% 100%;
    background-position: -5px 5px, 7px -4px, 0 0;
  }
}

@keyframes isp-hero-blob-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(5px, -7px, 0) rotate(-1deg); }
}

@keyframes isp-hero-float-one {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(5deg); }
  50% { transform: translate3d(-4px, -7px, 0) rotate(2deg); }
}

@keyframes isp-hero-float-two {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg); }
  50% { transform: translate3d(5px, -6px, 0) rotate(-2deg); }
}

/* Search reveal */
.search-panel {
  display: block;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -7px, 0);
  border-top-color: transparent;
  transition:
    max-height .28s cubic-bezier(.2, .72, .25, 1),
    padding .28s cubic-bezier(.2, .72, .25, 1),
    opacity .18s ease,
    transform .28s cubic-bezier(.2, .72, .25, 1),
    border-color .18s ease,
    visibility 0s linear .28s;
}

.search-panel.is-open {
  max-height: 150px;
  padding-top: 14px;
  padding-bottom: 16px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  border-top-color: rgba(68, 68, 68, .06);
  transition-delay: 0s;
}

.search-panel__inner {
  transition: opacity .18s ease .04s, transform .26s cubic-bezier(.2, .72, .25, 1) .02s;
}

.search-panel:not(.is-open) .search-panel__inner {
  opacity: 0;
  transform: translate3d(0, -4px, 0);
  transition-delay: 0s;
}

.search-toggle svg,
.menu-toggle svg {
  transition: transform .22s ease;
}

.search-toggle[aria-expanded="true"] svg {
  transform: scale(.9) rotate(-8deg);
}

/* Mobile navigation reveal and submenu expansion */
@media (max-width: 960px) {
  .primary-navigation {
    display: block;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -8px, 0);
    border-top-color: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    transition:
      max-height .30s cubic-bezier(.2, .72, .25, 1),
      padding .30s cubic-bezier(.2, .72, .25, 1),
      opacity .20s ease,
      transform .30s cubic-bezier(.2, .72, .25, 1),
      border-color .18s ease,
      box-shadow .22s ease,
      visibility 0s linear .30s;
  }

  .primary-navigation.is-open {
    max-height: calc(100dvh - 72px);
    padding-top: 10px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    border-top-color: rgba(68, 68, 68, .06);
    border-bottom-color: rgba(68, 68, 68, .08);
    box-shadow: 0 18px 36px rgba(68, 68, 68, .10);
    transition-delay: 0s;
  }

  .admin-bar .primary-navigation.is-open {
    max-height: calc(100dvh - 118px);
  }

  .primary-navigation .primary-menu {
    transition: opacity .18s ease .04s, transform .28s cubic-bezier(.2, .72, .25, 1) .02s;
  }

  .primary-navigation:not(.is-open) .primary-menu {
    opacity: 0;
    transform: translate3d(0, -5px, 0);
    transition-delay: 0s;
  }

  .menu-toggle[aria-expanded="true"] svg {
    transform: scale(.92) rotate(90deg);
  }

  .menu-item-has-mega > .mega-menu,
  .menu-item-has-mega > .mega-menu--compact,
  .menu-item-has-mega:hover > .mega-menu,
  .menu-item-has-mega:focus-within > .mega-menu {
    display: block;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -5px, 0);
    transition:
      max-height .32s cubic-bezier(.2, .72, .25, 1),
      margin .32s cubic-bezier(.2, .72, .25, 1),
      opacity .18s ease,
      transform .28s cubic-bezier(.2, .72, .25, 1),
      visibility 0s linear .32s;
  }

  .menu-item-has-mega > .mega-menu.is-mobile-open,
  .menu-item-has-mega > .mega-menu--compact.is-mobile-open {
    display: block;
    max-height: 1600px;
    margin-top: 4px;
    margin-bottom: 8px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  .submenu-toggle svg {
    transition: transform .22s ease;
  }

  .submenu-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }
}

@media (max-width: 700px) {
  .search-panel.is-open {
    padding-top: 10px;
    padding-bottom: 12px;
  }

  .primary-navigation.is-open {
    max-height: calc(100dvh - 68px);
    padding-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .isp-hero,
  .hero-discovery__blob,
  .hero-float--one,
  .hero-float--two {
    animation: none !important;
    will-change: auto;
  }

  .search-panel,
  .search-panel__inner,
  .search-toggle svg,
  .menu-toggle svg,
  .primary-navigation,
  .primary-navigation .primary-menu,
  .menu-item-has-mega > .mega-menu,
  .menu-item-has-mega > .mega-menu--compact,
  .submenu-toggle svg {
    transition: none !important;
  }
}
