/**
 * Svetlana — 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 svetlana-landing
 */

/* ==========================================================================
   1. Scroll progress
   Injected into <body> by motion.js, so it never exists without the script.
   Outside .svl-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.
   ========================================================================== */
.svl-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 three track cards (section 8). 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` option in motion.js. */
	.svl-s8-card,
	.svl-s12-card,
	.svl-s9-row {
		transition: transform .38s cubic-bezier( .22, .61, .36, 1 ),
					filter .38s ease;
	}
	.svl-s8-card:hover,
	.svl-s12-card:hover {
		transform: translateY( -8px );
		filter: saturate( 1.06 ) brightness( 1.02 );
	}
	.svl-s9-row:hover {
		transform: translateY( -4px );
	}

	/* The belief pills in section 4 are rotated in the design, so a translate
	   here would travel along the rotated axis and read as a slip. They grow
	   from their own centre instead, which is rotation-independent. */
	.d-s4-bubble,
	.m-s4-bubble {
		transition: filter .3s ease, box-shadow .3s ease;
	}
	.d-s4-bubble:hover,
	.m-s4-bubble: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. */
	.svl-faq__q { transition: background-color .25s ease; }
	.svl-faq__q:hover { background-color: rgba( 232, 191, 105, .10 ); }

	/* The video plate already scales its play button on hover (front.css). This
	   adds the plate's own answer to the same pointer. */
	.d-s3__plate, .m-s3__plate { transition: filter .35s ease; }
	.d-s3__plate:hover, .m-s3__plate:hover { filter: brightness( 1.04 ); }
}

/* The CTA answers a press on every device, touch included — this is the one
   control on the page the whole thing exists for, and a button that does not
   move under a thumb reads as one that did not register. `:active` on the hit
   area, because the plate, the label and the arrow are three siblings the link
   sits on top of. */
.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: scale( .965 );
}
.d-hero__cta-plate, .m-hero__cta-plate, .m-s13__cta-plate {
	transition: transform .16s cubic-bezier( .3, .8, .4, 1 );
}

/* Keyboard users get the same answer the pointer gets. */
.d-hero__hit:focus-visible ~ .d-hero__cta-plate,
.m-hero__hit:focus-visible ~ .m-hero__cta-plate,
.m-s13__hit:focus-visible ~ .m-s13__cta-plate {
	outline: 3px solid #e8bf69;
	outline-offset: 4px;
	border-radius: 999px;
}

/* ==========================================================================
   3. Compositing hints
   Only on the handful of elements a scrubbed tween writes to on every frame.
   A blanket will-change costs memory on a 15,000px page and helps nothing.
   ========================================================================== */
.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: 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 ) {
	.svl-s8-card, .svl-s12-card, .svl-s9-row,
	.d-s4-bubble, .m-s4-bubble,
	.svl-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;
	}
}