/*
 * Igiwer Core — motion.
 *
 * One orchestrated moment on arrival (the Tifinagh name writes itself, the
 * headline is slapped on like the logo's sticker, the newest episode slides
 * in), then cards rise in as they reach the screen. Everything below is scoped
 * to html.igiwer-motion, which is never set for reduced-motion visitors or in
 * the Elementor editor.
 */

:root {
	--igiwer-ease: cubic-bezier(0.2, 0.75, 0.15, 1);
}

/* ------------------------------------------------------------- hero entry */

.igiwer-motion .igiwer-hero-write .elementor-heading-title {
	animation: igiwer-write 1s ease-out 0.1s both;
}

.igiwer-motion .igiwer-sticker {
	animation: igiwer-slap 0.7s ease-out 0.45s both;
}

.igiwer-motion .igiwer-hero-in {
	animation: igiwer-rise 0.7s var(--igiwer-ease) 0.9s both;
}

.igiwer-motion .igiwer-hero-in--late {
	animation-delay: 1.05s;
}

.igiwer-motion .igiwer-hero-video {
	animation: igiwer-slide 0.9s var(--igiwer-ease) 0.55s both;
}

@keyframes igiwer-write {
	from {
		clip-path: inset(-20% 100% -20% 0);
	}
	to {
		clip-path: inset(-20% -2% -20% 0);
	}
}

/* Ends on the sticker's resting tilt (-2deg, set in the theme). */
@keyframes igiwer-slap {
	0% {
		opacity: 0;
		transform: rotate(-9deg) scale(1.35);
	}
	55% {
		opacity: 1;
		transform: rotate(-0.5deg) scale(0.96);
	}
	78% {
		transform: rotate(-2.6deg) scale(1.015);
	}
	100% {
		opacity: 1;
		transform: rotate(-2deg) scale(1);
	}
}

@keyframes igiwer-rise {
	from {
		opacity: 0;
		transform: translate3d(0, 18px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes igiwer-slide {
	from {
		opacity: 0;
		transform: translate3d(48px, 0, 0) rotate(1deg);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* The featured episode's play button breathes now and then, until hovered. */
.igiwer-motion .igiwer-vgrid--large .igiwer-vcard__play::before {
	content: "";
	position: absolute;
	inset: -8px;
	border: 2px solid var(--e-global-color-accent, #F8BE00);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	animation: igiwer-ping 3.6s ease-out 2s infinite;
}

.igiwer-motion .igiwer-vgrid--large .igiwer-vcard:hover .igiwer-vcard__play::before {
	animation: none;
}

@keyframes igiwer-ping {
	0% {
		opacity: 0.9;
		transform: scale(1);
	}
	40%,
	100% {
		opacity: 0;
		transform: scale(1.55);
	}
}

/* ------------------------------------------------------ reveal on scroll */

.igiwer-motion [data-igiwer-reveal] > *,
.igiwer-motion .igiwer-reveal-kids > * {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
}

/* Books settle onto the shelf; videos grow slightly into place. */
.igiwer-motion .igiwer-bgrid[data-igiwer-reveal] > * {
	transform: translate3d(0, 36px, 0) rotate(2deg);
	transform-origin: 50% 100%;
}

.igiwer-motion .igiwer-vgrid[data-igiwer-reveal] > * {
	transform: translate3d(0, 22px, 0) scale(0.97);
}

.igiwer-motion [data-igiwer-reveal].is-in > *,
.igiwer-motion .igiwer-reveal-kids.is-in > * {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s ease, transform 0.8s var(--igiwer-ease);
	transition-delay: calc(var(--igiwer-i, 0) * 85ms);
}

/* --------------------------------------------------------- reading bar */

.igiwer-progress {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	left: 0;
	z-index: 1001;
	height: 3px;
	background: var(--e-global-color-accent, #F8BE00);
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
}

/* ================================================== inner pages (v2) */
/*
 * Every effect below is opt-in through a CSS class (Elementor > Advanced >
 * CSS Classes). Without html.igiwer-motion each element simply shows in its
 * finished state: rules drawn, stickers placed, numerals filled.
 */

/* ---------------------------------------------- a rule that draws itself */
/* On a container: a yellow rule along the top edge (.igiwer-draw--y: left edge). */

.igiwer-draw {
	position: relative;
}

/* Elementor already uses a container's ::before for its background overlay,
   so every geometry property here is forced. */
.igiwer-draw::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	inset: -1px 24px auto 24px !important;
	width: auto !important;
	height: 3px !important;
	border-radius: 3px !important;
	background: var(--e-global-color-accent, #F8BE00) !important;
	opacity: 1 !important;
	mix-blend-mode: normal !important;
	transform-origin: 0 50%;
	pointer-events: none;
	z-index: 1;
}

.igiwer-draw--line::before {
	inset: 0 0 auto 0 !important;
}

.igiwer-motion .igiwer-draw::before {
	transform: scaleX(0);
}

.igiwer-motion .igiwer-draw.is-in::before {
	transform: scaleX(1);
	transition: transform 0.9s var(--igiwer-ease) 0.15s;
}

/* ---------------------------------------- small sticker that slaps on */

.igiwer-motion .igiwer-sticker--tag {
	opacity: 0;
}

.igiwer-motion .igiwer-sticker--tag.is-in {
	animation: igiwer-slap-tag 0.6s ease-out calc(var(--igiwer-i, 0) * 90ms) both;
}

@keyframes igiwer-slap-tag {
	0% {
		opacity: 0;
		transform: rotate(-10deg) scale(1.4);
	}
	60% {
		opacity: 1;
		transform: rotate(-1deg) scale(0.95);
	}
	100% {
		opacity: 1;
		transform: rotate(-3deg) scale(1);
	}
}

/* ------------------------------------------ marker sweep behind a phrase */
/* Wrap the phrase in <mark> inside a heading or text widget with .igiwer-mark. */

.igiwer-mark mark {
	color: #000;
	background: linear-gradient(var(--e-global-color-accent, #F8BE00), var(--e-global-color-accent, #F8BE00)) 0 88% / 100% 100% no-repeat;
	padding: 0 0.12em;
	margin: 0 -0.04em;
	border-radius: 0.12em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.igiwer-motion .igiwer-mark mark {
	color: inherit;
	background-size: 0% 100%;
}

.igiwer-motion .igiwer-mark.is-in mark {
	color: #000;
	background-size: 100% 100%;
	transition: background-size 0.8s var(--igiwer-ease) 0.2s, color 0.3s ease 0.5s;
}

/* --------------------------------------- outlined numeral that fills up */

.igiwer-fill .elementor-heading-title,
.igiwer-fill.igiwer-fill--raw {
	color: var(--e-global-color-accent, #F8BE00);
}

.igiwer-motion .igiwer-fill .elementor-heading-title {
	color: transparent;
	color: transparent !important;
	-webkit-text-stroke: 1.5px var(--e-global-color-accent, #F8BE00);
	background: linear-gradient(var(--e-global-color-accent, #F8BE00), var(--e-global-color-accent, #F8BE00)) 0 100% / 100% 0% no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
}

.igiwer-motion .igiwer-fill.is-in .elementor-heading-title {
	background-size: 100% 100%;
	transition: background-size 1.1s var(--igiwer-ease) 0.25s;
}

/* ------------------------------------------------ lean toward the pointer */

.igiwer-tilt {
	--igiwer-rx: 0deg;
	--igiwer-ry: 0deg;
}

.igiwer-motion .igiwer-tilt > * {
	transform: perspective(900px) rotateX(var(--igiwer-rx)) rotateY(var(--igiwer-ry));
	transition: transform 0.35s var(--igiwer-ease);
	will-change: transform;
}

/* ------------------------------------------ "now playing" equaliser bars */

.igiwer-eq {
	display: inline-flex;
	align-items: flex-end;
	gap: 3px;
	height: 18px;
}

.igiwer-eq i {
	display: block;
	width: 4px;
	height: 100%;
	border-radius: 2px;
	background: var(--e-global-color-accent, #F8BE00);
	transform-origin: 50% 100%;
	transform: scaleY(0.45);
}

.igiwer-motion .igiwer-eq i {
	animation: igiwer-eq 1.1s ease-in-out infinite alternate;
}

.igiwer-motion .igiwer-eq i:nth-child(2) { animation-delay: -0.4s; animation-duration: 0.9s; }
.igiwer-motion .igiwer-eq i:nth-child(3) { animation-delay: -0.8s; animation-duration: 1.3s; }
.igiwer-motion .igiwer-eq i:nth-child(4) { animation-delay: -0.2s; animation-duration: 0.8s; }
.igiwer-motion .igiwer-eq i:nth-child(5) { animation-delay: -0.6s; animation-duration: 1.2s; }

@keyframes igiwer-eq {
	from { transform: scaleY(0.25); }
	to { transform: scaleY(1); }
}

/* ------------------------------------------------------ timeline entries */

.igiwer-motion .igiwer-timeline::after {
	transform: scaleY(var(--igiwer-progress, 0));
}

.igiwer-motion .igiwer-timeline__item {
	opacity: 0;
	transform: translate3d(24px, 0, 0);
}

.igiwer-motion .igiwer-timeline__item.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease, transform 0.7s var(--igiwer-ease);
}

.igiwer-motion .igiwer-timeline__item .igiwer-timeline__date {
	transform: rotate(-9deg) scale(1.3);
	opacity: 0;
}

.igiwer-motion .igiwer-timeline__item.is-in .igiwer-timeline__date {
	transform: rotate(-3deg);
	opacity: 1;
	transition: transform 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) 0.15s, opacity 0.3s ease 0.15s;
}

/* ------------------------------------- books fan out in the page hero */

.igiwer-motion .igiwer-fan .igiwer-bcard {
	animation: igiwer-fan-in 1s var(--igiwer-ease) both;
	animation-delay: calc(0.55s + var(--igiwer-i, 0) * 0.12s);
}

@keyframes igiwer-fan-in {
	from {
		opacity: 0;
		transform: translate3d(0, 40px, 0) rotate(0deg);
	}
}

/* ------------------------------------------------ page transitions */
/* Same-origin navigations cross-fade while the header stays put. Browsers
   without the View Transitions API navigate exactly as before. */

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation: igiwer-vt-out 0.22s ease both;
	}

	::view-transition-new(root) {
		animation: igiwer-vt-in 0.42s var(--igiwer-ease, ease) both;
	}
}

.elementor-location-header .ign-header {
	view-transition-name: igiwer-header;
}

@keyframes igiwer-vt-out {
	to {
		opacity: 0;
	}
}

@keyframes igiwer-vt-in {
	from {
		opacity: 0;
		transform: translate3d(0, 14px, 0);
	}
}

/* ================================================= hero variants (v2.1) */

/* About (poster): the giant word writes itself slowly, then each line of the
   headline is slapped on in turn, each ending on its own tilt. */

.igiwer-motion .igiwer-ghost .elementor-heading-title {
	animation-duration: 1.4s;
}

.igiwer-motion .igiwer-sticker.igiwer-sticker--stack {
	animation: none;
}

.igiwer-motion .igiwer-sticker--stack .elementor-heading-title > span {
	animation: igiwer-slap-a 0.7s ease-out 0.45s both;
}

.igiwer-motion .igiwer-sticker--stack .elementor-heading-title > span:nth-child(2) {
	animation-name: igiwer-slap-b;
	animation-delay: 0.6s;
}

@keyframes igiwer-slap-a {
	0% {
		opacity: 0;
		transform: rotate(-12deg) scale(1.35);
	}
	55% {
		opacity: 1;
		transform: rotate(-1deg) scale(0.96);
	}
	100% {
		opacity: 1;
		transform: rotate(-3deg);
	}
}

@keyframes igiwer-slap-b {
	0% {
		opacity: 0;
		transform: translateX(var(--igiwer-nudge, 0.5em)) rotate(10deg) scale(1.35);
	}
	55% {
		opacity: 1;
		transform: translateX(var(--igiwer-nudge, 0.5em)) rotate(1deg) scale(0.96);
	}
	100% {
		opacity: 1;
		transform: translateX(var(--igiwer-nudge, 0.5em)) rotate(2deg);
	}
}

/* Podcast (stage): the player opens like a curtain, "Up next" slides in. */

.igiwer-motion .igiwer-stage-player .igiwer-vcard__thumb {
	animation: igiwer-curtain 0.9s var(--igiwer-ease) 0.6s both;
}

.igiwer-motion .igiwer-stage-player .igiwer-now,
.igiwer-motion .igiwer-stage-player .igiwer-vcard__body {
	animation: igiwer-rise 0.7s var(--igiwer-ease) 1.1s both;
}

.igiwer-motion .igiwer-stage-next {
	animation: igiwer-rise 0.7s var(--igiwer-ease) 0.8s both;
}

.igiwer-motion .igiwer-upnext .igiwer-vcard {
	animation: igiwer-next-in 0.6s var(--igiwer-ease) 1.05s both;
}

.igiwer-motion .igiwer-upnext .igiwer-vcard:nth-child(2) { animation-delay: 1.17s; }
.igiwer-motion .igiwer-upnext .igiwer-vcard:nth-child(3) { animation-delay: 1.29s; }

@keyframes igiwer-curtain {
	from {
		clip-path: inset(0 50% 0 50% round 18px);
	}
	to {
		clip-path: inset(0 0 0 0 round 18px);
	}
}

@keyframes igiwer-next-in {
	from {
		opacity: 0;
		transform: translate3d(28px, 0, 0);
	}
}

/* Shop (counter): the shelf runs in, the book drops onto it, the price slaps on.
   Fill mode "backwards" hands the cover back to the pointer tilt afterwards. */

.igiwer-motion .igiwer-hero--mirror .igiwer-hero-video {
	animation: none;
}

.igiwer-motion .igiwer-shop-counter .igiwer-bcard__body::before {
	animation: igiwer-shelf-in 1s var(--igiwer-ease) 0.2s both;
}

.igiwer-motion .igiwer-shop-counter .igiwer-bcard__cover {
	animation: igiwer-drop 0.8s cubic-bezier(0.3, 1.4, 0.5, 1) 0.75s backwards;
}

.igiwer-motion .igiwer-shop-counter .igiwer-bcard__price {
	animation: igiwer-price-in 0.5s ease-out 1.35s backwards;
}

.igiwer-motion .igiwer-shop-counter .igiwer-bcard__buy {
	animation: igiwer-rise 0.6s var(--igiwer-ease) 1.45s backwards;
}

@keyframes igiwer-shelf-in {
	from {
		transform: scaleX(0);
	}
}

@keyframes igiwer-drop {
	from {
		opacity: 0;
		transform: translate3d(0, -70px, 0) rotate(-5deg);
	}
}

@keyframes igiwer-price-in {
	from {
		opacity: 0;
		transform: rotate(-14deg) scale(1.5);
	}
}