/*
Theme Name: Snoodleverse Child
Theme URI: https://snoodleverse.local
Template: kadence
Description: Child theme of Kadence for the Snoodleverse project. All site-specific customizations (styles, scripts, template overrides) live here instead of the parent Kadence theme, so parent theme updates never overwrite custom work.
Author: Rocket Expansion
Version: 2.79.0
Text Domain: snoodleverse-child
*/

/**
 * Character banner idle animations.
 *
 * Pivoting from the bottom center matches how each character stands on the
 * path in the banner artwork, so rotation/scale reads as the character
 * moving in place rather than floating off its feet. will-change hints the
 * browser to promote these to their own compositor layer since GSAP animates
 * them continuously.
 */
.character-1,
.character-2,
.character-3,
.character-4,
.character-5,
.character-6,
.character-7 {
	transform-origin: bottom center;
	will-change: transform;
}

/**
 * Rocket ship / noodle airship fly-in animations.
 *
 * Both are flying objects rather than ground-standing figures, so they pivot
 * from their own center rather than bottom center — a bank/wobble should
 * rotate around the middle of the ship, not an implied "foot" at its base.
 *
 * "rocket-ship"/"noodle-airship" were added as a className on both the
 * Kadence column and the image inside it, so this is scoped to the column
 * only (matches the scoping in animations.js) to avoid styling/animating
 * both nested elements.
 */
.wp-block-kadence-column.rocket-ship,
.wp-block-kadence-column.noodle-airship {
	transform-origin: center center;
	will-change: transform;
}

/**
 * Rocket UFO ("The chaos starts here" section) — className landed on a
 * single element here (the Kadence image block), so no extra scoping is
 * needed beyond the class itself.
 */
.rocket-ufo {
	transform-origin: center center;
	will-change: transform;
}

/**
 * "Yes we're bragging!" speech bubble.
 */
.bragging-bubble {
	transform-origin: center center;
	will-change: transform;
}

/**
 * Octopus shark — pivots from the bottom since it's rising out of the
 * water rather than flying/floating freely.
 */
.octopus-shark figure {
	transform-origin: bottom center;
	will-change: transform;
}

/**
 * "Fun fact" cloud bubble.
 */
.fun-fact-bubble figure {
	transform-origin: center center;
	will-change: transform;
}

/**
 * Heroes/villains row portraits. Croodle the Grand spins and floats, so he
 * pivots from his center; the others stand, so they pivot from the bottom.
 */
.herbie-character figure,
.sour-crood-character figure,
.evil-kidoodle-character figure {
	transform-origin: bottom center;
	will-change: transform;
}

.croodle-the-grand-character figure {
	transform-origin: center center;
	will-change: transform;
}

/* Hover layer for those portraits: animations.js wraps each image in this
   stage so its hover can move on top of the figure's idle motion, and puts
   the hover props (steam, grumble-cloud) inside it. */
.portrait-hover-stage {
	position: relative;
	display: block;
	will-change: transform;
}

/**
 * Morning Matriciani newspaper — spins in around its center. Scoped to the
 * figure because the image is floated (the wrapper collapses to 0px tall).
 */
.morning-paper figure {
	transform-origin: center center;
	will-change: transform;
}

/**
 * Second noodle airship — flies across the whole screen, so it passes
 * beyond the viewport edges; overflow-x: clip on the page keeps that from
 * ever producing a horizontal scrollbar.
 */
.noodle-airship-2 {
	transform-origin: center center;
	will-change: transform;
}

html,
body {
	overflow-x: clip;
}

/**
 * Space alien — rises from the bottom edge of its section, so it pivots from
 * the bottom. Scoped to the figure because the image is floated (the wrapper
 * collapses to 0px tall, which would make a clip-path on it clip everything).
 */
.space-alien figure {
	transform-origin: bottom center;
	will-change: transform;
}

/**
 * Band of cats — bounces to a beat, so it squashes and stretches from the
 * bottom (their feet). Scoped to the figure because the image is floated.
 */
.band-of-cats figure {
	transform-origin: bottom center;
	will-change: transform;
}

/**
 * Intro rocket — flies in, hovers and surges around its own centre.
 */
.Rocket-ship-intro,
.rocket-ship-intro {
	transform-origin: center center;
	will-change: transform;
}

/**
 * Explore cards (.Block-1) — the picture zooms on hover, so it's clipped to
 * the card's rounded top corners (matching the image's own 20px radius) to
 * stop the zoom spilling outside the card.
 */
.Block-1 > .kt-inside-inner-col,
.block-1 > .kt-inside-inner-col {
	will-change: transform;
}

.Block-1 figure,
.block-1 figure {
	overflow: hidden;
	border-radius: 20px 20px 0 0;
}

/**
 * Author portrait (Contact page) — pops out of, and squashes around, the
 * speech bubble's tail (bottom-left of the image).
 */
.author-image figure {
	transform-origin: 14% 65%;
	will-change: transform;
}

/**
 * Book covers — swing in, float, and tilt in 3D on hover, around their own
 * centre.
 */
.Book-1,
.Book-2,
.Book-3,
.Book-4,
.book-1,
.book-2,
.book-3,
.book-4 {
	transform-origin: center center;
	will-change: transform;
}

/**
 * Book award medals — stamp in, bob, and coin-flip around their own centre.
 */
.book-awards figure {
	transform-origin: center center;
	will-change: transform;
}

/**
 * Comic headings — animations.js splits each .comic-heading into one span per
 * letter to animate them. Words stay unbreakable (so wrapping is unchanged)
 * and letters are inline-block so they can be transformed.
 */
.ch-word {
	display: inline-block;
	white-space: nowrap;
}

.ch-char {
	display: inline-block;
	will-change: transform;
}

/**
 * Music record — animations.js wraps the image in a "stage" and stacks the
 * separated notes on top of it (positions are percentages of the stage, so
 * the stage must be exactly the size of the image: it shrink-wraps it).
 */
.music-record-stage {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
}

.music-record-stage > img {
	display: block;
}

.music-record-note {
	position: absolute;
	height: auto;
	max-width: none;
	margin: 0;
	transform-origin: center center;
	will-change: transform;
	pointer-events: none;
}

/**
 * Pink poodle — prances and trots, so it pivots from its paws.
 */
.pink-poodle {
	transform-origin: bottom center;
	will-change: transform;
}

/* Phones: smaller, and in front of the book section. Her row overlaps the
   next row (Kadence's negative bottom margin), and that row painted over
   her, so the book art covered her legs. Raising her row puts her on top;
   at this size she stands on the starry sky above the cover. Her shorter
   row needs a smaller overlap (-33px instead of -120px) to keep the book
   section starting at the same spot under the divider line. */
@media (max-width: 767px) {
	body figure.pink-poodle {
		max-width: 120px;
	}

	body .kb-row-layout-wrap.wp-block-kadence-rowlayout:has(.pink-poodle) {
		margin-bottom: -33px;
		position: relative;
		z-index: 2;
	}
}

/**
 * Space car (About banner) — zooms across the whole screen, banking and
 * stretching around its own centre. overflow-x: clip on html/body (above)
 * stops it ever causing a horizontal scrollbar while it's off-screen.
 */
.space-car {
	transform-origin: center center;
	will-change: transform;
}

/* Phones: tighten the gap between the space car and the author portrait. */
@media (max-width: 767px) {
	body .wp-block-kadence-image.space-car {
		margin-bottom: -20px;
	}
}

/**
 * Character rigs (Characters page) — animations.js wraps a character's image
 * in a stage and stacks clipped copies of the same image on top of it, one
 * per moving body part (see "Characters page" there). The stage shrink-wraps
 * the image so the copies line up with it exactly; it pivots from the
 * character's feet (the artwork has empty space below them).
 */
.character-rig {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
	transform-origin: 50% 90%;
	will-change: transform;
	isolation: isolate; /* keeps parts tucked "behind" the image inside the stage */
}

.character-rig > img {
	display: block;
}

.character-rig .character-rig-part {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	will-change: transform;
	pointer-events: none;
}

/**
 * Sparks — small four-point stars that animations.js adds to a character's
 * stage (e.g. on the point of Voodoo Kidoodle's spear). Sized relative to
 * the image so they scale with it.
 */
.character-rig-spark {
	position: absolute;
	width: 4.5%;
	aspect-ratio: 1;
	margin: -2.25% 0 0 -2.25%;
	background: radial-gradient( circle, #fff 0%, #f3e3ff 35%, #c48cff 100% );
	clip-path: polygon( 50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38% );
	will-change: transform;
	pointer-events: none;
}

/**
 * Sweets — small inline SVG drawings (peppermint, lollipop, toffee, gumdrop,
 * chocolate) that animations.js adds to the candy king's stage (Chunky
 * Chocadoodle) and floats out of his open hand. Sized relative to the image
 * so they scale with it. Andy Dandy Doodle's music notes (.character-rig-note)
 * are the same kind of thing, floating up off his guitar (Swifty Swoodle's
 * lightning bolts reuse that class).
 */
.character-rig-candy,
.character-rig-note {
	position: absolute;
	width: 7.5%;
	aspect-ratio: 1;
	margin: -3.75% 0 0 -3.75%;
	will-change: transform;
	pointer-events: none;
}

.character-rig-candy svg,
.character-rig-note svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.character-rig-note {
	width: 11%;
	margin: -5.5% 0 0 -5.5%;
}

/**
 * Speed lines — soft streaks that animations.js adds behind Swifty Swoodle.
 * Solid at the end nearest her, fading out behind.
 */
.character-rig-streak {
	position: absolute;
	height: 1.7%;
	border-radius: 999px;
	background: linear-gradient( to left, #f2a33a, rgba( 242, 163, 58, 0 ) );
	will-change: transform;
	pointer-events: none;
}

/**
 * "LIVE" badge — a small inline SVG that animations.js adds beside Cheese
 * Chedderman, the reporter. Sized relative to the image so it scales with it.
 * (Sour Croodleman's grumble-cloud reuses this class with its own width.)
 */
.character-rig-badge {
	position: absolute;
	width: 21%;
	will-change: transform;
	pointer-events: none;
}

.character-rig-badge svg {
	display: block;
	width: 100%;
	height: auto;
}

/**
 * About page portraits — speech-bubble photos of the author and illustrator.
 * animations.js sets each one's pivot (the tip of its bubble's tail).
 */
.about-author-image figure {
	will-change: transform;
}

/**
 * Books page covers (.hover-Book) — tilt toward the pointer on hover.
 */
.hover-Book,
.hover-book {
	transform-origin: center center;
	will-change: transform;
}

/**
 * Testimonial cards — drop in on scroll and lift on hover (animations.js).
 */
.kt-testimonial-grid-item .kt-testimonial-item-wrap .kt-svg-testimonial-rating-icon,
.testimonial .kt-svg-testimonial-rating-icon {
	transform-origin: center center;
}

/**
 * Books page — each book's column has Kadence's "link the whole section"
 * option on, which lays an invisible link (.kb-section-link-overlay) over
 * the entire column. Being on top, it swallows the mouse, so nothing
 * underneath could react to hover: not the book, the title or the button.
 * The book image and title already link to the same place themselves, so
 * the overlay is switched off for the mouse in those columns and
 * everything underneath hovers (and clicks) normally again.
 */
.kb-section-has-link:has( .hover-Book ) > .kb-section-link-overlay,
.kb-section-has-link:has( .hover-book ) > .kb-section-link-overlay {
	pointer-events: none;
}

/**
 * Single book page cover — swings open on arrival and tilts on hover.
 */
.book-single img {
	will-change: transform;
}

/* Characters that peek out from behind the cover (added by animations.js):
   the cover sits on top, the peekers underneath it. */
.book-single-stage {
	position: relative;
	isolation: isolate;
}

.book-single-stage > img:not( .book-single-peeker ) {
	position: relative;
	z-index: 2;
}

.book-single .book-single-peeker {
	position: absolute;
	z-index: 1;
	width: 40%;
	transform-origin: 50% 100%;
	height: auto;
	max-width: none;
	margin: 0;
	pointer-events: none;
}

/* On tablets the peekers pop up over the cover's top edge instead of out
   the sides (see animations.js), so give them headroom below the header. */
@media (min-width: 768px) and (max-width: 1024px) {
	.book-single figure.book-single-stage {
		margin-top: 40px;
	}
}

/**
 * Space backgrounds (.sign-up-background) — animations.js adds a layer of
 * twinkling stars and a shooting star over the row's background painting,
 * underneath the row's content.
 */
.space-bg {
	position: relative;
}

.space-bg > .kt-row-column-wrap {
	position: relative;
	z-index: 2;
}

.space-bg-fx {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.space-bg-star {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 10px 3px rgba( 190, 220, 255, 0.95 );
	opacity: 0;
}

/* a few bigger, four-point sparkles */
.space-bg-star-big {
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border-radius: 0;
	box-shadow: none;
	background: radial-gradient( circle, #fff 0%, #cfe6ff 60%, rgba( 207, 230, 255, 0 ) 100% );
	clip-path: polygon( 50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40% );
}

.space-bg-comet {
	position: absolute;
	width: 220px;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), #fff );
	box-shadow: 0 0 14px 3px rgba( 190, 220, 255, 0.9 );
	transform-origin: 100% 50%;
}

/**
 * Rocket UFO on the About page — flies in and out of the page.
 */
.rocket-ufo-about {
	transform-origin: center center;
	will-change: transform;
}

/**
 * Character banner on tablets and phones.
 *
 * The banner column is a nowrap flex row with a 100px gap built for desktop.
 * Below desktop width the seven images can't fit, so flexbox shrinks every
 * one of them toward 0px wide and they become tiny or vanish. Under 1025px
 * (Kadence's tablet breakpoint) the images stop shrinking and get an explicit
 * size instead: all seven on tablets, three on phones (767px and below,
 * Kadence's mobile breakpoint).
 */
@media (max-width: 1024px) {
	/* Zero-height row with the characters hanging upward from its bottom
	   edge: every figure's feet share one floor line, and the row's height
	   no longer depends on how tall the artwork renders at a given width,
	   so the offset below holds at any width. */
	body .wp-block-kadence-column:has(> .kt-inside-inner-col > .character-1) > .kt-inside-inner-col {
		justify-content: center;
		align-items: flex-end;
		padding-top: 0;
		height: 0;
		overflow: visible;
	}

	/* Puts that floor line on the bottom edge of the hero, where the yellow
	   section begins. The leading `body` outranks Kadence's own per-row
	   margin rule, which otherwise ties on specificity and prints later. */
	body .kb-row-layout-wrap.wp-block-kadence-rowlayout:has(.character-1) {
		margin-top: -2px;
	}
}

/* Tablets: like desktop, every character is the same height (the artwork
   is drawn to a shared scale) with its natural width, spread evenly. */
@media (min-width: 768px) and (max-width: 1024px) {
	.character-1,
	.character-2,
	.character-3,
	.character-4,
	.character-5,
	.character-6,
	.character-7 {
		flex: 0 0 auto;
	}

	.character-1 img,
	.character-2 img,
	.character-3 img,
	.character-4 img,
	.character-5 img,
	.character-6 img,
	.character-7 img {
		height: 17vw;
		width: auto;
	}

	body .wp-block-kadence-column:has(> .kt-inside-inner-col > .character-1) > .kt-inside-inner-col {
		column-gap: 0;
		justify-content: space-evenly;
	}
}

@media (max-width: 767px) {
	/* Phones show the conductor, the cat and the pastel poodle. The flash
	   hero (3) is left out because her idle zips sideways off the edge of a
	   narrow screen; the poodle's idle only hops in place. */
	.character-3,
	.character-5,
	.character-6,
	.character-7 {
		display: none;
	}

	.character-1,
	.character-2,
	.character-4 {
		flex: 0 0 28%;
		max-width: 28%;
	}

	.character-1 img,
	.character-2 img,
	.character-4 img {
		width: 100%;
		height: auto;
	}

	body .wp-block-kadence-column:has(> .kt-inside-inner-col > .character-1) > .kt-inside-inner-col {
		column-gap: 4%;
	}
}