/**
 * Belavan — motion layer stylesheet.
 *
 * Loaded only when motion.js is loaded, and never by front.css, for one reason:
 * front.css is the pixel-perfect layer, measured line by line against the Figma
 * render. Nothing in this file may change where a single glyph lands at rest.
 *
 * Everything here is therefore one of three kinds:
 *
 *   1. Chrome that does not exist in the design and sits outside the canvas
 *      entirely — the scroll progress rule.
 *   2. :hover / :active / :focus-visible state, which by definition is not the
 *      resting state a screenshot measures.
 *   3. will-change hints on elements the scrubbed tweens drive every frame.
 *
 * The hover states live here rather than in motion.js because a hover written
 * in CSS keeps working if the script never loads, and because the browser
 * composites it without a frame of JavaScript in the way.
 *
 * @package belavan-landing
 */

/* ==========================================================================
   1. Scroll progress
   Injected into <body> by motion.js, so it never exists without the script.
   Outside .bel-root on purpose: the canvases carry a transform, and a
   position:fixed child of a transformed element is fixed to that element
   rather than to the viewport.
   ========================================================================== */
.bel-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 9999;
	pointer-events: none;
	transform: scaleX( 0 );
	transform-origin: right center; /* RTL page: the rule grows from the right. */
	background: linear-gradient( 270deg, #e8bf69 0%, #d9a94f 42%, #f0a5b6 100% );
	box-shadow: 0 1px 10px rgba( 232, 191, 105, .45 );
}

/* ==========================================================================
   2. Micro-interactions
   Pointer devices only. A :hover rule on a touch screen sticks after a tap and
   leaves the card lifted until something else is tapped.
   ========================================================================== */
@media ( hover: hover ) and ( pointer: fine ) {

	/* The six benefit cards and the six on the phone. The reveal that brings
	   these in clears its inline transform when it finishes, which is what
	   lets a CSS transform apply at all — see reveal()'s `clear` in motion.js.
	   Without that the card would arrive and then never answer a pointer
	   again, because an inline transform beats a stylesheet. */
	.d-s3__card,
	.m-card,
	.m-s10__card {
		transition: transform .38s cubic-bezier( .22, .61, .36, 1 ),
		            box-shadow .38s ease;
	}
	.d-s3__card:hover,
	.m-card:hover {
		transform: translateY( -7px );
		box-shadow: 0 14px 30px rgba( 140, 96, 32, .18 );
	}

	/* The five questions and the nine lessons: a tint, not a lift. They are
	   rows in a list, and a row that rises out of its list breaks the list. */
	.d-s2__row, .m-q, .m-row, .m-cmp__row {
		transition: background-color .28s ease;
	}
	.d-s2__row:hover, .m-q:hover, .m-row:hover {
		background-color: rgba( 216, 153, 72, .07 );
	}

	/* A testimonial under the pointer. The carousel is already held still by
	   .bel-marquee:hover in front.css — this says which one is being read. */
	.bel-marquee__item { transition: filter .3s ease, box-shadow .3s ease; }
	.bel-marquee__item:hover {
		filter: brightness( 1.04 );
		box-shadow: 0 10px 26px rgba( 120, 80, 24, .22 );
	}

	/* The four pills on the price card and the four on the phone's. They are
	   rotated in the design, so a translate would travel along the rotated
	   axis and read as a slip. Light and shadow are rotation-independent. */
	.d-s7__pill, .m-s8__perk {
		transition: filter .3s ease, box-shadow .3s ease;
	}
	.d-s7__pill:hover, .m-s8__perk:hover {
		filter: brightness( 1.05 );
		box-shadow: 0 8px 22px rgba( 195, 160, 85, .28 );
	}

	/* The FAQ question row. The accordion owns grid-template-rows on the
	   panel; this only tints the head, so the two never touch the same
	   property. */
	.bel-faq__q { transition: background-color .25s ease, filter .25s ease; }
	.bel-faq__q:hover:not( [disabled] ) { filter: brightness( 1.05 ); }

	/* The buttons brighten under a pointer before they are even pressed. */
	.d-hero__cta-plate, .d-s3__cta-plate, .d-s7__cta-plate, .d-s9__plate,
	.m-cta {
		transition: filter .22s ease, transform .16s cubic-bezier( .3, .8, .4, 1 ),
		            box-shadow .22s ease;
	}
	.d-hero:has( .d-hero__hit:hover ) .d-hero__cta-plate,
	.d-s3:has( .d-s3__hit:hover ) .d-s3__cta-plate,
	.d-s7:has( .d-s7__hit:hover ) .d-s7__cta-plate,
	.d-s7:has( .d-s9__hit:hover ) .d-s9__plate {
		filter: brightness( 1.08 );
		box-shadow: 0 10px 28px rgba( 120, 20, 160, .28 );
	}
	.m-cta:hover { filter: brightness( 1.06 ); }
}

/* The CTA answers a press on every device, touch included — this is the one
   control the whole page exists for, and a button that does not move under a
   thumb reads as one that did not register.

   `:has()`, not the old `~`. A sibling combinator only reaches FORWARD, and
   the hit area is the LAST child of every button here, so the old rule
   reached nothing at all. `:has()` on the section asks the question the
   right way round and does not care about the order.

   A FILTER on the desktop, not a transform. Those buttons are three
   separately positioned nodes and scaling each about its own centre pulls
   them apart — the same fault that once left the hero's disc off the middle
   of its pill. Brightness has no geometry to get wrong. The phone's buttons
   are one element each, so those really do scale. */
.d-hero:has( .d-hero__hit:active ) .d-hero__cta-plate,
.d-s3:has( .d-s3__hit:active ) .d-s3__cta-plate,
.d-s7:has( .d-s7__hit:active ) .d-s7__cta-plate,
.d-s7:has( .d-s9__hit:active ) .d-s9__plate {
	filter: brightness( .93 );
}
.m-cta:active { transform: scale( .97 ); }

/* Keyboard users get the same answer the pointer gets. On the link itself:
   it is the focusable element and it covers the whole button. */
.d-hero__hit:focus-visible,
.d-s3__hit:focus-visible,
.d-s7__hit:focus-visible,
.d-s9__hit:focus-visible,
.m-cta:focus-visible {
	outline: 3px solid #e8bf69;
	outline-offset: 4px;
	border-radius: 999px;
}

/* ==========================================================================
   3. Compositing hints
   Only the elements a scrubbed tween writes to on every frame. The list this
   replaced named eight that do not exist on this page. A blanket will-change
   costs memory on a 12,000px canvas and helps nothing — promoting everything
   is the classic way to make a scroll slower while believing you sped it up.
   ========================================================================== */
.d-s3__bg img, .d-s6__bg img, .d-s7__price-bg img,
.m-s3__bg img, .m-s4__bg img, .m-s6__bg img, .m-s8__bg img,
.d-s7__ring, .m-s7__ring,
.d-s7__spine i, .m-s7__spine i {
	will-change: transform;
}

/* ==========================================================================
   4. Reduced motion
   motion.js returns before it builds anything, so no scrub or reveal exists to
   suppress. What is left is this file's own transitions, and the progress rule
   — which is never injected, because the script that injects it stopped first.
   ========================================================================== */
@media ( prefers-reduced-motion: reduce ) {
	.bel-s8-card, .bel-s12-card, .bel-s9-row,
	.d-s4-bubble, .m-s4-bubble,
	.bel-faq__q,
	.d-s3__plate, .m-s3__plate,
	.d-hero__cta-plate, .m-hero__cta-plate, .m-s13__cta-plate {
		transition: none;
	}
	.d-hero__hit:active ~ .d-hero__cta-plate,
	.m-hero__hit:active ~ .m-hero__cta-plate,
	.m-s13__hit:active ~ .m-s13__cta-plate {
		transform: none;
	}
	.d-hero__bg img, .m-hero__bg img,
	.d-s2__bg img, .m-s2__bg img,
	.d-s11__bg img, .m-s11__bg img,
	.d-s4__photo img, .m-s4__photo img,
	.d-s6__photo img, .m-s6__photo img,
	.d-hero__photo img, .m-hero__photo img,
	.d-s10__band, .m-s10__band,
	.d-s3__band, .m-s3__band {
		will-change: auto;
	}
}