/* ==========================================================================
   AZOTH animations
   Every option is a body class, picked in Customize > AZOTH > Animations:
   az-load-*    titles when a page opens
   az-reveal-*  cards and sections when they scroll into view
   az-hover-*   cards and slabs on hover
   az-menu-*    the ticket menu opening
   az-btn-*     buttons on hover
   az-grain     moving film grain over everything
   az-cursor    pink dot cursor
   Page transitions are added as a separate <style> (they cannot be scoped).
   ========================================================================== */

:root { --az-in: cubic-bezier(.16, 1, .3, 1); --az-bounce: cubic-bezier(.34, 1.56, .64, 1); }

/* --------------------------------------------------------------------------
   1. Page load: titles
   JS wraps each word: <span class="az-w"><span class="az-w__i" style="--i:n">word</span></span>
   -------------------------------------------------------------------------- */
.az-w { display: inline-block; vertical-align: top; }
.az-w__i { display: inline-block; }

.js .az-load-rise [data-anim-title] .az-w { overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.js .az-load-rise [data-anim-title] .az-w__i { transform: translateY(105%); }
.az-load-rise.az-loaded [data-anim-title] .az-w__i { transform: none; transition: transform 1s var(--az-in) calc(var(--i, 0) * 70ms + 80ms); }

.js .az-load-slant [data-anim-title] .az-w__i { opacity: 0; transform: translateY(40%) skewY(8deg); transform-origin: left bottom; }
.az-load-slant.az-loaded [data-anim-title] .az-w__i { opacity: 1; transform: none; transition: transform .9s var(--az-in) calc(var(--i, 0) * 80ms), opacity .5s ease calc(var(--i, 0) * 80ms); }

.js .az-load-blur [data-anim-title] { opacity: 0; filter: blur(18px); transform: scale(1.04); transform-origin: left bottom; }
.az-load-blur.az-loaded [data-anim-title] { opacity: 1; filter: blur(0); transform: none; transition: opacity 1s ease, filter 1.1s var(--az-in), transform 1.2s var(--az-in); }

.js .az-load-stamp [data-anim-title] { opacity: 0; transform: scale(1.35) rotate(-3deg); transform-origin: 20% 60%; }
.az-load-stamp.az-loaded [data-anim-title] { animation: az-stamp .55s var(--az-bounce) .1s both; }
@keyframes az-stamp { 0% { opacity: 0; transform: scale(1.35) rotate(-3deg); } 60% { opacity: 1; transform: scale(.97) rotate(.5deg); } 100% { opacity: 1; transform: none; } }

.js .az-load-flicker [data-anim-title] { opacity: 0; }
.az-load-flicker.az-loaded [data-anim-title] { animation: az-flicker 1.1s steps(1) .15s both; }
@keyframes az-flicker {
	0% { opacity: 0; } 8% { opacity: 1; } 12% { opacity: .1; } 20% { opacity: 1; } 24% { opacity: .2; }
	34% { opacity: 1; text-shadow: 0 0 24px rgba(255, 61, 139, .9); } 40% { opacity: .5; } 46%, 100% { opacity: 1; text-shadow: none; }
}

/* Kicker, lede and side bits follow the title in every load style except none. */
.js body:not(.az-load-none) [data-anim-after] { opacity: 0; transform: translateY(12px); }
body.az-loaded:not(.az-load-none) [data-anim-after] { opacity: 1; transform: none; transition: opacity .7s ease .45s, transform .9s var(--az-in) .45s; }

/* --------------------------------------------------------------------------
   2. Scroll reveal: [data-reveal] gets .is-in, --i is the position in its group
   -------------------------------------------------------------------------- */
.az-reveal-fade-up [data-reveal], .az-reveal-deal [data-reveal], .az-reveal-wipe [data-reveal],
.az-reveal-zoom [data-reveal], .az-reveal-blur [data-reveal] { --d: calc(var(--i, 0) * 80ms); }

.js .az-reveal-fade-up [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px); }
.az-reveal-fade-up [data-reveal].is-in { transition: opacity .7s ease var(--d), transform .9s var(--az-in) var(--d); }

.js .az-reveal-deal [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(60px) rotate(-4deg); }
.js .az-reveal-deal [data-reveal]:nth-child(even):not(.is-in) { transform: translateY(60px) rotate(3deg); }
.az-reveal-deal [data-reveal].is-in { transition: opacity .5s ease var(--d), transform .9s var(--az-bounce) var(--d); }

.js .az-reveal-wipe [data-reveal]:not(.is-in) { clip-path: inset(100% 0 0 0 round 16px); }
.az-reveal-wipe [data-reveal].is-in { clip-path: inset(0 0 0 0 round 0); transition: clip-path 1s var(--az-in) var(--d); }

.js .az-reveal-zoom [data-reveal]:not(.is-in) { opacity: 0; transform: scale(.92); }
.az-reveal-zoom [data-reveal].is-in { transition: opacity .6s ease var(--d), transform .9s var(--az-in) var(--d); }

.js .az-reveal-blur [data-reveal]:not(.is-in) { opacity: 0; filter: blur(12px); }
.az-reveal-blur [data-reveal].is-in { transition: opacity .8s ease var(--d), filter .9s var(--az-in) var(--d); }

/* --------------------------------------------------------------------------
   3. Card hover (event, archive, journal, contact cards and the home slabs)
   "ring" is the base style in azoth.css.
   -------------------------------------------------------------------------- */
.az-hover-none .az-ecard:hover, .az-hover-none .az-acard:hover, .az-hover-none .az-pcard:hover { box-shadow: 0 0 0 1px var(--line); }
.az-hover-none .az-ecard:hover img, .az-hover-none .az-acard:hover img, .az-hover-none .az-pcard:hover img { transform: none; }
.az-hover-none .az-slab:not(.az-slab--ghost):hover { padding-left: 28px; box-shadow: none; }

.az-hover-lift .az-ecard, .az-hover-lift .az-acard, .az-hover-lift .az-pcard, .az-hover-lift .az-ccard, .az-hover-lift .az-slab { transition: transform .45s var(--az-in), box-shadow .45s var(--az-in); }
.az-hover-lift .az-ecard:hover, .az-hover-lift .az-acard:hover, .az-hover-lift .az-pcard:hover, .az-hover-lift .az-ccard:hover { transform: translateY(-8px); box-shadow: 0 0 0 1px var(--line), 0 24px 48px rgba(20, 17, 19, .22); }
.az-hover-lift .az-slab:not(.az-slab--ghost):hover { padding-left: 28px; transform: translateX(-8px); box-shadow: 8px 8px 0 var(--ink); }

.az-hover-tilt .az-ecard, .az-hover-tilt .az-acard, .az-hover-tilt .az-pcard, .az-hover-tilt .az-ccard { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .2s ease-out, box-shadow .3s; will-change: transform; }
.az-hover-tilt .az-ecard:hover, .az-hover-tilt .az-acard:hover, .az-hover-tilt .az-pcard:hover { box-shadow: 0 0 0 1px var(--line), 0 30px 60px rgba(20, 17, 19, .25); }
.az-hover-tilt .az-slab:not(.az-slab--ghost):hover { padding-left: 28px; transform: rotate(-1.2deg) scale(1.01); box-shadow: none; }
.az-hover-tilt .az-slab { transition: transform .35s var(--az-bounce); }

.az-hover-glow .az-ecard:hover, .az-hover-glow .az-acard:hover, .az-hover-glow .az-pcard:hover, .az-hover-glow .az-ccard:hover { box-shadow: 0 0 0 2px var(--pink), 0 0 60px rgba(255, 61, 139, .55); }
.az-hover-glow .az-ecard:hover img, .az-hover-glow .az-acard:hover img, .az-hover-glow .az-pcard:hover img { filter: saturate(1.35) contrast(1.05); }
.az-hover-glow .az-slab:not(.az-slab--ghost):hover { padding-left: 28px; box-shadow: 0 0 0 3px var(--ink), 0 0 70px rgba(255, 61, 139, .7); }

/* --------------------------------------------------------------------------
   4. Ticket menu opening (plays every time it opens)
   -------------------------------------------------------------------------- */
.az-menu-drop .az-menu:not([hidden]) { animation: az-drop .35s var(--az-in) both; }
@keyframes az-drop { from { opacity: 0; transform: translateY(-10px); } }

.az-menu-unfold .az-menu:not([hidden]) { animation: az-unfold .5s var(--az-in) both; transform-origin: top center; }
.az-menu-unfold .az-menu:not([hidden]) .az-menu__list li { animation: az-item .45s var(--az-in) both; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
@keyframes az-unfold { from { transform: scaleY(.15); opacity: 0; } }
@keyframes az-item { from { opacity: 0; transform: translateY(-8px); } }

.az-menu-tear .az-menu:not([hidden]) { animation: az-tear .6s var(--az-bounce) both; transform-origin: top right; }
@keyframes az-tear { from { opacity: 0; transform: rotate(-10deg) translate(20px, -30px) scale(.9); } }

.az-menu-curtain .az-menu:not([hidden]) { animation: az-curtain .55s var(--az-in) both; }
.az-menu-curtain .az-menu:not([hidden]) .az-menu__list li { animation: az-item-x .45s var(--az-in) both; animation-delay: calc(var(--i, 0) * 40ms + 150ms); }
@keyframes az-curtain { from { clip-path: circle(0 at calc(100% - 40px) -40px); } to { clip-path: circle(150% at calc(100% - 40px) -40px); } }
@keyframes az-item-x { from { opacity: 0; transform: translateX(16px); } }

.az-scrim:not([hidden]) { animation: az-fade .3s ease both; }
@keyframes az-fade { from { opacity: 0; } }

/* --------------------------------------------------------------------------
   5. Button hover. "invert" is the base style in azoth.css.
   -------------------------------------------------------------------------- */
.az-btn-fill .az-btn, .az-btn-fill .wp-block-button__link {
	background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-size: 0% 100%;
	transition: background-size .45s var(--az-in), color .3s ease;
}
.az-btn-fill .az-btn:hover, .az-btn-fill .wp-block-button__link:hover { background-color: inherit; background-size: 100% 100%; color: var(--paper); }
.az-btn-fill .az-btn--pink:hover { background-color: var(--pink); }
.az-btn-fill .wp-block-button__link:hover { background-color: var(--pink); }

.az-btn-spin .az-btn:hover { background: var(--pink); color: var(--ink); }
.az-btn-spin .az-btn:hover .az-btn__icon { border-color: var(--ink); }
.az-btn-spin .az-btn:hover .az-plus { background: var(--ink); color: var(--white); }
.az-btn-spin .az-btn .az-plus { transition: transform .45s var(--az-bounce); }
.az-btn-spin .az-btn:hover .az-plus { transform: rotate(180deg) scale(1.15); }
.az-btn-spin .az-btn--pink:hover { background: var(--blush); }

.az-btn-nudge .az-btn:hover { background: var(--white); color: var(--ink); transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--ink); }
.az-btn-nudge .az-btn--pink:hover { background: var(--pink); }
.az-btn-nudge .az-btn:hover .az-btn__icon { border-color: var(--ink); }
.az-btn-nudge .az-btn:hover .az-plus { background: var(--ink); color: var(--white); }
.az-btn-nudge .az-btn:active { transform: none; box-shadow: none; }

/* --------------------------------------------------------------------------
   6. Extras
   -------------------------------------------------------------------------- */
.az-grain::after {
	content: ""; position: fixed; inset: -50%; z-index: 80; pointer-events: none; opacity: .09;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: az-grain 1s steps(6) infinite; mix-blend-mode: overlay;
}
@keyframes az-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

.az-cursor-dot { position: fixed; left: 0; top: 0; z-index: 95; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--pink); pointer-events: none; mix-blend-mode: difference; transition: width .25s var(--az-in), height .25s var(--az-in), margin .25s var(--az-in), opacity .2s; opacity: 0; }
.az-cursor-dot.is-on { opacity: 1; }
.az-cursor-dot.is-link { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
@media (hover: none) { .az-cursor-dot { display: none; } }

/* Respect people who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
	.js [data-anim-title], .js [data-anim-title] .az-w__i, .js [data-anim-after], .js [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
	.az-grain::after { animation: none; }
	.az-cursor-dot { display: none; }
}