/* ==========================================================================
   Easing layer. Everything here only applies when <html> has .bme-motion
   (see inc/motion.php). With it off, the site is exactly as before.
   ========================================================================== */
:root {
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* soft landing */
	--ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

html.bme-motion { scroll-behavior: smooth; }

/* ---------- Scroll reveals (once per page view) ---------- */
html.bme-motion :is(.bme-split__text, .bme-split__pic, .bme-artists__text, .bme-alumni, .bme-artists__pic, .bme-quote, .bme-card, .bme-video, .bme-seemore, .bme-lineup, .bme-day__date, .bme-show, .bme-partners__col, .bme-logofarm, .bme-location__line, .bme-location__map, .bme-legal, .bme-footer__logo, .bme-footer__col) {
	opacity: 0;
	transform: translate3d(0, 34px, 0);
	transition: opacity 0.9s var(--ease-out) var(--d, 0ms), transform 1.15s var(--ease-out) var(--d, 0ms);
	will-change: opacity, transform;
	animation: bmeFailsafe 0.01s linear 4s forwards;  /* if scripts fail, show everything after 4s */
}
html.bme-motion-js :is(.bme-split__text, .bme-split__pic, .bme-artists__text, .bme-alumni, .bme-artists__pic, .bme-quote, .bme-card, .bme-video, .bme-seemore, .bme-lineup, .bme-day__date, .bme-show, .bme-partners__col, .bme-logofarm, .bme-location__line, .bme-location__map, .bme-legal, .bme-footer__logo, .bme-footer__col) { animation: none; }
html.bme-motion :is(.bme-split__text, .bme-split__pic, .bme-artists__text, .bme-alumni, .bme-artists__pic, .bme-quote, .bme-card, .bme-video, .bme-seemore, .bme-lineup, .bme-day__date, .bme-show, .bme-partners__col, .bme-logofarm, .bme-location__line, .bme-location__map, .bme-legal, .bme-footer__logo, .bme-footer__col).is-in { opacity: 1; transform: none; will-change: auto; }
@keyframes bmeFailsafe { to { opacity: 1; transform: none; } }

/* Heading bands: the halftone wipes in from the left, then the heading rises onto it. */
html.bme-motion .bme-band::before {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1.3s var(--ease-out);
	animation: bmeFailsafeClip 0.01s linear 4s forwards;
}
html.bme-motion .bme-band :is(h1, h2) {
	opacity: 0;
	translate: 0 26px;
	transition: opacity 0.9s var(--ease-out) 0.3s, translate 1.1s var(--ease-out) 0.3s;
	animation: bmeFailsafeText 0.01s linear 4s forwards;
}
html.bme-motion-js .bme-band::before,
html.bme-motion-js .bme-band :is(h1, h2) { animation: none; }
html.bme-motion .bme-band.is-in::before { clip-path: inset(0 0 0 0); }
html.bme-motion .bme-band.is-in :is(h1, h2) { opacity: 1; translate: 0 0; }
@keyframes bmeFailsafeClip { to { clip-path: inset(0 0 0 0); } }
@keyframes bmeFailsafeText { to { opacity: 1; translate: 0 0; } }

/* ---------- On load ---------- */
html.bme-motion .bme-header { animation: bmeDrop 0.9s var(--ease-out) backwards; }
@keyframes bmeDrop { from { opacity: 0; translate: 0 -14px; } }

html.bme-motion .bme-hero__media:not(video):not(iframe) {
	scale: 1.1;
	translate: 0 var(--py, 0px);
	animation: bmeSettle 2s var(--ease-out) backwards;
}
@keyframes bmeSettle { from { transform: scale(1.1); opacity: 0; } 30% { opacity: 1; } }
html.bme-motion .bme-hero--home :is(video, iframe).bme-hero__media { animation: bmeFade 1.6s ease backwards; }
html.bme-motion .bme-hero__overlay .BME-txt-main-headline { animation: bmeRise 1.1s var(--ease-out) 0.25s backwards; }
html.bme-motion .bme-sound { animation: bmeFade 1.2s ease 1.2s backwards; }
@keyframes bmeFade { from { opacity: 0; } }
@keyframes bmeRise { from { opacity: 0; translate: 0 30px; } }

/* ---------- Pop-ups ---------- */
html.bme-motion .bme-modal:not([hidden]) .bme-modal__backdrop { animation: bmeFade 0.4s ease backwards; }
html.bme-motion .bme-modal:not([hidden]) .bme-modal__dialog { animation: bmePop 0.6s var(--ease-out) backwards; }
@keyframes bmePop { from { opacity: 0; transform: translate3d(0, 30px, 0) scale(0.97); } }

/* ---------- Mobile menu ---------- */
html.bme-motion .bme-mobile-menu:not([hidden]) { animation: bmeMenuIn 0.5s var(--ease-out) backwards; }
@keyframes bmeMenuIn { from { opacity: 0; transform: translate3d(0, -18px, 0); } }
html.bme-motion .bme-mobile-menu:not([hidden]) .bme-mobile-menu__item {
	animation: bmeRise 0.7s var(--ease-out) backwards;
	animation-delay: calc(var(--n, 0) * 70ms + 150ms);
}
html.bme-motion .bme-mobile-menu__item:nth-child(1) { --n: 1; }
html.bme-motion .bme-mobile-menu__item:nth-child(2) { --n: 2; }
html.bme-motion .bme-mobile-menu__item:nth-child(3) { --n: 3; }
html.bme-motion .bme-mobile-menu__item:nth-child(4) { --n: 4; }
html.bme-motion .bme-mobile-menu__item:nth-child(5) { --n: 5; }
html.bme-motion .bme-mobile-menu__item:nth-child(6) { --n: 6; }
html.bme-motion .bme-mobile-menu__sub { animation: bmeFade 0.5s ease backwards; }

/* Respect devices set to "reduce motion": the layer is not even switched on (see inc/motion.php). */