/* ===========================================================================
   Textal animations
   Everything here sits behind prefers-reduced-motion: no-preference.
   Scroll reveals also need html.textal-js (added in <head> by functions.php),
   so content is never hidden if JavaScript is off.
   Opt out on any block: Advanced → Additional CSS class → textal-no-anim
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

	/* ---- Scroll reveal ------------------------------------------------- */
	.textal-js .textal-reveal {
		opacity: 0;
		transform: translate3d(0, 28px, 0);
		filter: blur(4px);
		transition:
			opacity 0.8s cubic-bezier(.2,.7,.2,1) var(--textal-delay, 0ms),
			transform 0.8s cubic-bezier(.2,.7,.2,1) var(--textal-delay, 0ms),
			filter 0.8s ease var(--textal-delay, 0ms);
	}
	.textal-js .textal-reveal--side { transform: translate3d(-36px, 0, 0); }
	.textal-js .textal-reveal.is-in {
		opacity: 1;
		transform: none;
		filter: none;
	}

	/* Kicker line draws in */
	.textal-js .wp-block-heading.is-style-kicker::before,
	.textal-js .wp-block-heading.is-style-kicker::after {
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.7s cubic-bezier(.7,0,.2,1) 0.25s;
	}
	.textal-js .wp-block-heading.is-style-kicker::after { transform-origin: right; }
	.textal-js .textal-hero .is-style-kicker::before,
	.textal-js .textal-hero .is-style-kicker::after,
	.textal-js .is-in .is-style-kicker::before,
	.textal-js .is-in .is-style-kicker::after,
	.textal-js .is-in.is-style-kicker::before,
	.textal-js .is-in.is-style-kicker::after { transform: scaleX(1); }

	/* ---- Hero entrance (on page load) ---------------------------------- */
	.textal-js .textal-hero > .wp-block-cover__inner-container > .wp-block-group > *,
	.textal-js .textal-hero > .wp-block-cover__inner-container > *:not(.wp-block-group) {
		animation: textal-rise 1s cubic-bezier(.2,.7,.2,1) both;
	}
	.textal-js .textal-hero > .wp-block-cover__inner-container > .wp-block-group > *:nth-child(2),
	.textal-js .textal-hero > .wp-block-cover__inner-container > *:not(.wp-block-group):nth-child(2) { animation-delay: 0.12s; }
	.textal-js .textal-hero > .wp-block-cover__inner-container > .wp-block-group > *:nth-child(3),
	.textal-js .textal-hero > .wp-block-cover__inner-container > *:not(.wp-block-group):nth-child(3) { animation-delay: 0.3s; }
	.textal-js .textal-hero > .wp-block-cover__inner-container > .wp-block-group > *:nth-child(n+4),
	.textal-js .textal-hero > .wp-block-cover__inner-container > *:not(.wp-block-group):nth-child(n+4) { animation-delay: 0.45s; }

	/* The big wordmark slams in: tracking collapses, blur clears */
	.textal-js .textal-hero .textal-wordmark {
		animation: textal-slam 2.2s cubic-bezier(.16,1,.3,1) 0.15s both;
	}

	/* Paused (and hidden by fill-mode) until the hero scrolls into view */
	.textal-js .textal-hero:not(.is-in) > .wp-block-cover__inner-container > .wp-block-group > *,
	.textal-js .textal-hero:not(.is-in) > .wp-block-cover__inner-container > *:not(.wp-block-group),
	.textal-js .textal-hero:not(.is-in) .textal-wordmark { animation-play-state: paused; }

	/* Headings that also have a looping style keep both animations */
	.textal-js .textal-hero .is-style-glitch {
		animation: textal-slam 1.1s cubic-bezier(.16,1,.3,1) 0.1s both, textal-glitch 7s steps(1, end) 2.5s infinite;
	}
	.textal-js .textal-hero .is-style-stroke {
		animation: textal-rise 1s cubic-bezier(.2,.7,.2,1) 0.12s both, textal-stroke-pulse 3.2s ease-in-out 1.2s infinite;
	}

	/* Gig rows keep their hover transitions after revealing */
	.textal-js .is-style-gig-row.textal-reveal.is-in {
		transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--textal-delay, 0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--textal-delay, 0ms), filter .8s ease var(--textal-delay, 0ms), background-color .2s ease, padding .25s ease;
	}

	/* Hero content drifts slower than the page (set by animations.js) */
	.textal-hero > .wp-block-cover__inner-container > .wp-block-group {
		transform: translate3d(0, calc(var(--textal-parallax, 0px) * 0.6), 0);
		will-change: transform;
	}
	/* Background slowly breathes */
	.textal-hero::before {
		animation: textal-breathe 9s ease-in-out infinite alternate;
	}

	/* ---- Glitch heading: occasional jolt ------------------------------- */
	.is-style-glitch {
		animation: textal-glitch 7s steps(1, end) 1.4s infinite;
	}

	/* ---- Outlined heading: slow pulse of the stroke -------------------- */
	.is-style-stroke {
		animation: textal-stroke-pulse 3.2s ease-in-out infinite;
	}

	/* ---- Film grain flickers ------------------------------------------- */
	.is-style-grain::after {
		animation: textal-grain 0.9s steps(4) infinite;
	}

	/* ---- Header -------------------------------------------------------- */
	.textal-header .wp-block-navigation-item__content { position: relative; }
	.textal-header .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		left: 0; right: 0; bottom: -6px;
		height: 2px;
		background: var(--wp--preset--color--accent);
		transform: scaleX(0);
		transform-origin: right;
		transition: transform 0.35s cubic-bezier(.7,0,.2,1);
	}
	.textal-header .wp-block-navigation-item__content:hover::after,
	.textal-header .wp-block-navigation-item__content:focus-visible::after {
		transform: scaleX(1);
		transform-origin: left;
	}

	/* ---- Buttons: light sweep on hover --------------------------------- */
	.wp-element-button { position: relative; overflow: hidden; transition: background-color .25s, color .25s, border-color .25s, transform .15s; }
	.wp-element-button::after {
		content: "";
		position: absolute;
		top: 0; bottom: 0; left: -60%;
		width: 40%;
		background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
		transform: skewX(-20deg);
		pointer-events: none;
	}
	.wp-element-button:hover::after { animation: textal-sweep 0.7s ease; }
	.wp-element-button:active { transform: translateY(1px) scale(.98); }

	/* ---- Gig rows: red bar slides in on hover -------------------------- */
	.wp-block-group.is-style-gig-row { position: relative; }
	.wp-block-group.is-style-gig-row::before {
		content: "";
		position: absolute;
		left: 0; top: -1px; bottom: -1px;
		width: 4px;
		background: var(--wp--preset--color--accent);
		transform: scaleY(0);
		transition: transform 0.3s cubic-bezier(.7,0,.2,1);
	}
	.wp-block-group.is-style-gig-row:hover::before { transform: scaleY(1); }
	.wp-block-group.is-style-gig-row:hover { padding-left: var(--wp--preset--spacing--20); }

	/* ---- Cards & images lift ------------------------------------------- */
	.wp-block-group.is-style-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s; }
	.wp-block-group.is-style-card:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--accent); }
	.wp-block-image.is-style-grit img { transition: box-shadow .4s cubic-bezier(.2,.7,.2,1), transform .4s cubic-bezier(.2,.7,.2,1); }
	.wp-block-image.is-style-grit:hover img { transform: translate(-4px, -4px); box-shadow: 14px 14px 0 var(--wp--preset--color--accent); }

	/* ---- Social icons -------------------------------------------------- */
	.wp-block-social-link { transition: transform .2s ease !important; }
	.wp-block-social-link:hover { transform: translateY(-3px) rotate(-6deg) !important; }

	/* ---- Horizon line draws outwards on load / reveal ------------------ */
	.textal-js .textal-hero > .wp-block-cover__inner-container > .wp-block-group > .is-style-horizon,
	.textal-js .textal-hero > .wp-block-cover__inner-container > .is-style-horizon,
	.textal-js .textal-reveal .is-style-horizon { animation: textal-horizon 1.6s cubic-bezier(.7,0,.2,1) 0.9s both; }
	.textal-js .textal-hero:not(.is-in) > .wp-block-cover__inner-container .is-style-horizon { animation-play-state: paused; }
	@keyframes textal-horizon { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

	/* ---- Logo red: live pulse on the next gig, grid floor drifts ------- */
	.textal-next-tag::before { animation: textal-live 1.6s ease-in-out infinite; }
	@keyframes textal-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
	.wp-block-group.is-style-gridfloor::after { animation: textal-grid 6s linear infinite; }
	@keyframes textal-grid { from { background-position: 50% 0, 0 0, 0 0; } to { background-position: 50% 0, 0 56px, 0 0; } }

	/* ---- Scroll cue bobs gently ---------------------------------------- */
	.textal-scroll-cue::after { animation: textal-cue 2.4s ease-in-out infinite; transform-origin: top; }
	@keyframes textal-cue { 0%, 100% { transform: scaleY(0.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

	/* ---- Mobile drawer: slides in, links follow one by one ------------- */
	.wp-block-navigation__responsive-container.is-menu-open {
		animation: textal-drawer-in 0.42s cubic-bezier(.2,.7,.2,1) both !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
	.wp-block-navigation__responsive-container.is-menu-open .textal-nav-social {
		animation: textal-drawer-item 0.5s cubic-bezier(.2,.7,.2,1) both;
	}
	.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: .10s; }
	.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: .15s; }
	.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: .20s; }
	.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: .25s; }
	.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: .30s; }
	.is-menu-open .wp-block-navigation-item:nth-child(n+6) { animation-delay: .35s; }
	.is-menu-open .textal-nav-social { animation-delay: .4s; }

	/* ---- Keyframes ----------------------------------------------------- */
	@keyframes textal-drawer-in {
		from { transform: translateX(100%); box-shadow: 0 0 0 100vmax rgba(1, 6, 9, 0); }
		to   { transform: none; box-shadow: 0 0 0 100vmax rgba(1, 6, 9, 0.72); }
	}
	@keyframes textal-drawer-item {
		from { opacity: 0; transform: translateX(28px); }
		to   { opacity: 1; transform: none; }
	}
	@keyframes textal-rise {
		from { opacity: 0; transform: translate3d(0, 40px, 0); filter: blur(6px); }
		to   { opacity: 1; transform: none; filter: none; }
	}
	@keyframes textal-slam {
		0%   { opacity: 0; letter-spacing: calc(var(--textal-tracking, 0.42em) + 0.5em); filter: blur(12px); }
		55%  { opacity: 1; filter: blur(0); }
		100% { opacity: 1; letter-spacing: var(--textal-tracking, 0.42em); }
	}
	@keyframes textal-breathe {
		from { opacity: 1; }
		to   { opacity: 0.82; }
	}
	@keyframes textal-glitch {
		0%, 91%, 100% { transform: none; clip-path: none; }
		92% { transform: translate(-3px, 1px) skewX(-4deg); clip-path: inset(10% 0 55% 0); }
		93% { transform: translate(4px, -2px); clip-path: inset(60% 0 8% 0); }
		94% { transform: translate(-2px, 0) skewX(3deg); clip-path: inset(30% 0 30% 0); }
		95% { transform: none; clip-path: none; }
		96% { transform: translate(2px, 1px); }
	}
	@keyframes textal-stroke-pulse {
		0%, 100% { -webkit-text-stroke-color: var(--wp--preset--color--contrast); }
		50%      { -webkit-text-stroke-color: var(--wp--preset--color--accent); }
	}
	@keyframes textal-grain {
		0%   { background-position: 0 0; }
		25%  { background-position: -40px 30px; }
		50%  { background-position: 30px -50px; }
		75%  { background-position: -60px -20px; }
		100% { background-position: 20px 40px; }
	}
	@keyframes textal-sweep {
		to { left: 120%; }
	}
}