@charset "UTF-8";
/* CSS Document */

/* =========================================
   MENU PAGE ANIMATIONS
   ========================================= */

html {
  scroll-behavior: smooth;
}

/* =========================================
   SHARED TRANSITIONS
   ========================================= */

.menu-page a,
.menu-page button,
.menu-page img,
.menu-page .menu-card,
.menu-page .feature-card,
.menu-page .menu-hero-highlight,
.menu-page .menu-nav-grid a,
.menu-page .btn-primary,
.menu-page .btn-outline {
  transition:
    transform 0.32s ease,
    opacity 0.32s ease,
    box-shadow 0.32s ease,
    border-color 0.32s ease,
    background-color 0.32s ease,
    color 0.32s ease,
    filter 0.32s ease;
}

/* =========================================
   HERO ENTRANCE
   ========================================= */

.menu-hero-content {
  animation: menuHeroContentIn 0.95s ease both;
}

.menu-hero-media {
  animation: menuHeroMediaIn 1.05s ease both;
}

.menu-hero-highlights .menu-hero-highlight:nth-child(1) {
  animation: menuFadeUp 0.9s ease 0.12s both;
}

.menu-hero-highlights .menu-hero-highlight:nth-child(2) {
  animation: menuFadeUp 0.9s ease 0.22s both;
}

.menu-hero-highlights .menu-hero-highlight:nth-child(3) {
  animation: menuFadeUp 0.9s ease 0.32s both;
}

.menu-nav {
  animation: menuFadeUp 0.9s ease 0.18s both;
}

/* =========================================
   FEATURE STRIP ENTRANCE
   ========================================= */

.menu-feature .feature-card:nth-child(1) {
  animation: menuFadeUp 0.85s ease 0.10s both;
}

.menu-feature .feature-card:nth-child(2) {
  animation: menuFadeUp 0.85s ease 0.20s both;
}

.menu-feature .feature-card:nth-child(3) {
  animation: menuFadeUp 0.85s ease 0.30s both;
}

/* =========================================
   CARD HOVER FEEL
   ========================================= */

.menu-card:hover,
.menu-card:focus-within {
  transform: translateY(-8px);
}

.menu-card:hover img,
.menu-card:focus-within img {
  transform: scale(1.04);
}

.menu-card:hover .menu-card-content,
.menu-card:focus-within .menu-card-content {
  transform: translateY(-2px);
}

.menu-card .menu-card-content {
  transition:
    transform 0.32s ease,
    opacity 0.32s ease;
}

/* =========================================
   QUICK NAV HOVER
   ========================================= */

.menu-nav-grid a:hover,
.menu-nav-grid a:focus {
  transform: translateY(-2px) scale(1.01);
}

/* =========================================
   BUTTON HOVER
   ========================================= */

.btn-primary:hover,
.btn-primary:focus,
.btn-outline:hover,
.btn-outline:focus {
  transform: translateY(-2px);
}

/* =========================================
   HERO HIGHLIGHT HOVER
   ========================================= */

.menu-hero-highlight:hover,
.menu-hero-highlight:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 22px 38px rgba(8, 23, 34, 0.22);
}

/* =========================================
   FEATURE CARD HOVER
   ========================================= */

.feature-card:hover,
.feature-card:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 24px 44px rgba(8, 23, 34, 0.18);
}

/* =========================================
   IMAGE FRAME HOVER
   ========================================= */

.menu-hero-media-frame {
  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease,
    filter 0.45s ease;
}

.menu-hero-media-frame:hover {
  transform: translateY(-4px);
  box-shadow:
    0 34px 68px rgba(8, 23, 34, 0.30),
    0 12px 28px rgba(8, 23, 34, 0.18);
}

.menu-hero-media-frame img {
  transition:
    transform 0.75s ease,
    filter 0.45s ease;
}

.menu-hero-media-frame:hover img {
  transform: scale(1.03);
  filter: saturate(1.03);
}

/* =========================================
   FLOATING SHAPES
   ========================================= */

.shape-1 {
  animation: menuFloatOne 10s ease-in-out infinite;
}

.shape-2 {
  animation: menuFloatTwo 12s ease-in-out infinite;
}

.shape-3 {
  animation: menuFloatThree 11s ease-in-out infinite;
}

/* =========================================
   SECTION HEADER ACCENT
   ========================================= */

.category-header:before {
  animation: menuGlowBar 4.2s ease-in-out infinite;
}

/* =========================================
   BADGE CARD
   ========================================= */

.menu-hero-badge-card {
  animation: menuBadgeFloat 7s ease-in-out infinite;
}

/* =========================================
   KEYFRAMES
   ========================================= */

@keyframes menuHeroContentIn {
  0% {
    opacity: 0;
    transform: translateY(34px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes menuHeroMediaIn {
  0% {
    opacity: 0;
    transform: translateY(38px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes menuFadeUp {
  0% {
    opacity: 0;
    transform: translateY(26px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes menuFloatOne {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(16px, -14px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes menuFloatTwo {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-18px, 18px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes menuFloatThree {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(14px, 14px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes menuGlowBar {
  0% {
    box-shadow: 0 8px 22px rgba(79, 163, 196, 0.14);
    opacity: 0.92;
  }
  50% {
    box-shadow: 0 10px 26px rgba(79, 163, 196, 0.24);
    opacity: 1;
  }
  100% {
    box-shadow: 0 8px 22px rgba(79, 163, 196, 0.14);
    opacity: 0.92;
  }
}

@keyframes menuBadgeFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0);
  }
}

/* =========================================
   REDUCED MOTION
   ========================================= */

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

  .menu-page *,
  .menu-page *:before,
  .menu-page *:after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================
   RESPONSIVE - 992
   ========================================= */

@media screen and (max-width: 992px) {
  .menu-card:hover,
  .menu-card:focus-within,
  .feature-card:hover,
  .feature-card:focus-within,
  .menu-hero-highlight:hover,
  .menu-hero-highlight:focus-within {
    transform: translateY(-4px);
  }

  .menu-hero-media-frame:hover {
    transform: translateY(-2px);
  }
}

/* =========================================
   RESPONSIVE - 768
   ========================================= */

@media screen and (max-width: 768px) {
  .shape-1,
  .shape-2,
  .shape-3,
  .menu-hero-badge-card,
  .category-header:before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .menu-card:hover,
  .menu-card:focus-within,
  .feature-card:hover,
  .feature-card:focus-within,
  .menu-hero-highlight:hover,
  .menu-hero-highlight:focus-within,
  .menu-nav-grid a:hover,
  .menu-nav-grid a:focus,
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-outline:hover,
  .btn-outline:focus {
    transform: translateY(-2px);
  }

  .menu-hero-media-frame:hover img,
  .menu-card:hover img,
  .menu-card:focus-within img {
    transform: scale(1.02);
  }
}

/* =========================================
   RESPONSIVE - 480
   ========================================= */

@media screen and (max-width: 480px) {
  .menu-card:hover,
  .menu-card:focus-within,
  .feature-card:hover,
  .feature-card:focus-within,
  .menu-hero-highlight:hover,
  .menu-hero-highlight:focus-within,
  .menu-nav-grid a:hover,
  .menu-nav-grid a:focus,
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-outline:hover,
  .btn-outline:focus,
  .menu-hero-media-frame:hover {
    transform: none;
  }

  .menu-hero-media-frame:hover img,
  .menu-card:hover img,
  .menu-card:focus-within img {
    transform: none;
    filter: none;
  }
}