/* Recreates the Webflow Interactions (IX2) from the original site without webflow.js.
   Timings and easings are taken from the site's IX2 data.
   outExpo  = cubic-bezier(.19, 1, .22, 1)
   outQuint = cubic-bezier(.23, 1, .32, 1) */
:root {
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
}

/* ---------- Page transition (Page Transition / On Click Transition) ----------
   html.pt-cover is set by an inline <head> script before first paint. */
html.pt-cover .transition-wrap,
html.pt-leave .transition-wrap { display: flex; }
html.pt-cover .page-transition-column,
html.pt-leave .page-transition-column { display: block; }
.page-transition-row { width: 100%; }
.page-transition-column { height: 100%; }
.page-transition-logo { opacity: 1; }
html.pt-reveal .page-transition-column { height: 0; transition: height .5s var(--ease-out-expo) .5s; }
html.pt-reveal .transition-column-two { transition-duration: .9s; }
html.pt-reveal .transition-column-three { transition-duration: 1.4s; }
html.pt-reveal .page-transition-logo { opacity: 0; transition: opacity .5s var(--ease-out-expo) .5s; }
html.pt-reveal .page-transition-row { width: 0; transition: width .5s var(--ease-out-expo) .75s; }
html.pt-reveal .transition-three { transition-duration: .9s; }
html.pt-reveal .transition-two { transition-duration: 1.4s; }
/* leaving: rows and columns grow from 0 */
html.pt-leave-start .page-transition-row { width: 0; }
html.pt-leave-start .page-transition-column { height: 0; }
html.pt-leave-start .page-transition-logo,
html.pt-leave .page-transition-logo { opacity: 0; }
html.pt-leave .page-transition-row,
html.pt-leave .page-transition-column { transition: width .35s var(--ease-out-expo), height .35s var(--ease-out-expo); }
html.pt-leave .transition-two, html.pt-leave .transition-column-one { transition-duration: .2s; }
html.pt-leave .transition-three, html.pt-leave .transition-column-three { transition-duration: .5s; }

/* ---------- Nav mega menus (Menu Reveal On/Off) ---------- */
.nav-mega-menu { display: none; opacity: 0; }
.link-wrap.is-open > .nav-mega-menu { display: flex; opacity: 1; }
/* Webflow's .nav-reveal is pinned top:16px AND bottom:0 inside the 78px navbar.
   When it grows to 454px it overflows that box, and current Chrome aligns
   overflowing absolute boxes back into place, which yanks it up 16px.
   Unpinning the bottom keeps it at top:16px and lets it grow downward. */
.nav-reveal { bottom: auto; transition: height .2s var(--ease-out-expo); }
.nav-reveal.is-open { height: 454px; transition-duration: .8s; }

/* ---------- Image cards: grayscale -> color + zoom (Menu Item / Info Grid / Class Grid) ---------- */
.menu-item .menu-image-wrap,
.menu-item .classes-image,
.class-item .class-image-wrap {
  filter: saturate(0%);
  transition: filter .5s var(--ease-out-expo), transform .5s var(--ease-out-expo);
}
.class-item .class-image-wrap { transform: scale(1.025); }
.menu-item:hover .menu-image-wrap,
.menu-item:hover .classes-image { filter: saturate(100%); transform: scale(1.1); }
.class-item:hover .class-image-wrap { filter: saturate(100%); transform: scale(1.2); }

/* ---------- Arrow icons (were Lottie animations) ---------- */
.go-to-click-lottie, .lottie-view-all-icon { display: flex; align-items: center; justify-content: center; }
.go-to-click-lottie::before, .lottie-view-all-icon::before {
  content: "→"; font-size: 18px; line-height: 1; color: var(--red, #f5333f);
  transition: transform 1.2s var(--ease-out-expo);
}
.flip-go-to-click .go-to-click-lottie::before, .flip-lottie::before { content: "←"; }
.white-lottie-animation::before, .large-lottie::before { color: #fff; }

/* View All (View All On/Off): block grows 80px -> 112px, arrow fades in */
.view-all-block:not(.go-to-click-interaction) { width: 80px; transition: width 1.2s var(--ease-out-expo); }
.view-all-block:not(.go-to-click-interaction):hover { width: 112px; }
.lottie-view-all-icon { opacity: 0; transition: opacity .5s var(--ease-out-expo); }
.view-all-block:hover .lottie-view-all-icon,
.class-item:hover .lottie-view-all-icon { opacity: 1; }
.view-all-block:hover .lottie-view-all-icon::before,
.class-item:hover .lottie-view-all-icon::before { transform: translateX(6px); }

/* Product / post cards (Product Item On/Off): "Watch"/"Shop now" label + arrow fade in */
.item-link .go-to-click-label,
.item-link .go-to-click-lottie { opacity: 0; transition: opacity .8s var(--ease-out-expo); }
.item-link:hover .go-to-click-label,
.item-link:hover .go-to-click-lottie { opacity: 1; }
.item-link:hover .go-to-click-lottie::before { transform: translateX(4px); }

/* "Return home" links (Return to Store On/Off): arrow nudges */
.go-to-click-interaction:hover .go-to-click-lottie::before { transform: translateX(4px); }
.flip-go-to-click:hover .go-to-click-lottie::before { transform: translateX(-4px); }

/* ---------- Hamburger + full-screen menu (Hamburger Menu On/Off) ---------- */
.hamburger-menu { border: 0; }
.hamburger-icon { position: relative; width: 100%; height: 100%; }
.hamburger-icon::before, .hamburger-icon::after, .hamburger-icon > span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: #fff;
  transition: transform .5s var(--ease-out-expo), opacity .3s;
}
.hamburger-icon::before { top: 25%; }
.hamburger-icon > span { top: calc(50% - 1px); }
.hamburger-icon::after { bottom: 25%; }
html.menu-open .hamburger-icon::before { transform: translateY(6px) rotate(45deg); }
html.menu-open .hamburger-icon > span { opacity: 0; }
html.menu-open .hamburger-icon::after { transform: translateY(-6px) rotate(-45deg); }

.section.overlay-menu-wrap {
  display: none; position: fixed; left: 0; right: 0; top: 78px; z-index: 98;
  height: 0; overflow: hidden auto; transition: height .5s var(--ease-out-expo);
}
html.menu-shown .section.overlay-menu-wrap { display: flex; }
html.menu-open .section.overlay-menu-wrap { height: calc(100vh - 78px); }
html.menu-open { overflow: hidden; }

/* Mobile menu dropdowns (Menu Dropdown Open/Closed): 32px -> auto */
.mobile-link-wrap { height: 32px; transition: height .5s var(--ease-out-expo); }
.mobile-menu-icon::before { content: "+"; display: inline-block; margin-left: 6px; transition: transform .5s var(--ease-out-expo); }
.mobile-link-wrap.is-open .mobile-menu-icon::before { transform: rotate(45deg); }

/* ---------- FAQ accordion (FAQ Open/Close): 76px -> auto, 800ms outQuint ---------- */
.faq-item.w-dropdown { transition: height .8s var(--ease-out-quint); }
.faq-item .w-dropdown-toggle { cursor: pointer; }
.faq-item .w-dropdown-list { display: block; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; top: 50%; right: 0; width: 16px; height: 2px; background: #fff;
  transition: transform .8s var(--ease-out-quint);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-item.is-open .faq-icon::after { transform: rotate(0deg); }

/* ---------- Contact notice close (Notice Off) ---------- */
.notice-container { transition: opacity .3s, transform .3s; }
.notice-container.is-hidden { opacity: 0; transform: translateY(-8px); }

/* ---------- Scroll reveal on the lineage timeline (slideInLeft / slideInRight) ---------- */
html.js-reveal [data-reveal] { opacity: 0; transition: opacity 1s var(--ease-out-quart), transform 1s var(--ease-out-quart); }
html.js-reveal [data-reveal="left"] { transform: translateX(-100px); }
html.js-reveal [data-reveal="right"] { transform: translateX(100px); }
html.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Hero slider ---------- */
.hero-mask .w-slide { display: none; }
.hero-mask .w-slide.is-active { display: inline-block; animation: slide-fade .8s var(--ease-out-expo); }
@keyframes slide-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Reduced motion: keep behavior, drop movement ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}