/* LHR redesign — motion (subtle animation layer)
 * ================================================================
 * Loads LAST in the redesign cascade (contract §4). Owns:
 *   1. scroll-reveal (gated on html.lhr-motion, added by
 *      js/redesign-motion.js at runtime — no-JS visitors never get
 *      hidden content)
 *   2. micro-interactions (buttons, card lift, arrow nudge, inputs)
 *   3. sticky-header shadow (.lhr-scrolled, toggled by the same JS)
 *   4. smooth in-page anchor scrolling
 *
 * Every rule sits inside prefers-reduced-motion: no-preference —
 * reduced-motion users get instant, ungated content.
 *
 * Heroes are excluded from all of this on purpose: nothing here may
 * ever repaint/dim a hero or its <img> (contract §5b paint gotcha).
 * ================================================================ */

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

	/* --------------------------------------------------------------
	 * 4. Smooth in-page anchor scrolling
	 * ------------------------------------------------------------ */

	html {
		scroll-behavior: smooth;
	}

	/* --------------------------------------------------------------
	 * 1. Scroll-reveal
	 * Hidden state only exists under html.lhr-motion (JS adds the
	 * class, then immediately marks everything already in the
	 * viewport .lhr-in in the same synchronous pass, so above-fold
	 * content is never painted hidden).
	 * Keep this selector list in sync with SELECTORS in
	 * js/redesign-motion.js. NEVER list the Blackbook band or the
	 * footer here: bottom-of-page chrome must not load hidden
	 * (QA round 1 — empty dark band / blank footer on tall pages).
	 * ------------------------------------------------------------ */

	html.lhr-motion .lhr-section-head,
	html.lhr-motion .lhr-hotel-card,
	html.lhr-motion .lhr-review-card,
	html.lhr-motion .lhr-cat-tile,
	html.lhr-motion .lhr-dest-tile,
	html.lhr-motion .lhr-about-split__intro,
	html.lhr-motion .lhr-about-split__finder,
	html.lhr-motion .lhr-dest-card,
	html.lhr-motion .lhr-collection-card,
	html.lhr-motion .lhr-brand-strip__cell,
	html.lhr-motion .lhr-newsband,
	html.lhr-motion .lhr-ed-card,
	html.lhr-motion .lhr-rev-cell,
	html.lhr-motion .lhr-rev-card,
	html.lhr-motion .lhr-rev-rail > *,
	html.lhr-motion .sym-hotel-card {
		opacity: 0;
		transform: translateY(14px);
		transition:
			opacity 0.6s ease,
			transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	/* Revealed state — placed after the hidden rule so it wins at
	   equal specificity. JS staggers grid siblings with an inline
	   transition-delay (60ms steps, capped at 300ms) and clears it
	   after the reveal so hovers are never delayed. */
	html.lhr-motion .lhr-in {
		opacity: 1;
		transform: none;
	}

	/* Safety net: the pre-footer band and footer are excluded from the
	   reveal system above — pin them visible so no stale rule or cached
	   sheet can ever paint them hidden at the bottom of the page. */
	html.lhr-motion .lhr-blackbook-band__inner,
	html.lhr-motion .lhr-footer-bar__inner {
		opacity: 1 !important;
		transform: none !important;
	}

	/* --------------------------------------------------------------
	 * 2. Micro-interactions
	 * ------------------------------------------------------------ */

	/* Card hover lift for linked cards. The image zoom (scale 1.04,
	   700ms) already exists in base/home/review/archive CSS — not
	   duplicated here. border-color stays in the transition list to
	   preserve the existing hairline→gold border hovers. */

	/* Base transition (works without JS too). */
	.lhr-redesign .lhr-hotel-card,
	.lhr-redesign .lhr-review-card,
	.lhr-redesign .lhr-ed-card--card,
	.lhr-redesign .lhr-dest-card,
	.lhr-redesign .lhr-rev-card,
	.lhr-redesign .sym-hotel-card {
		transition:
			transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
			box-shadow 0.35s ease,
			border-color 0.3s ease;
	}

	/* Same cards while the reveal layer is active: keep the 0.6s
	   opacity fade for the reveal, but transform/shadow at 0.35s so
	   the hover lift stays snappy. (Higher up the file, the generic
	   reveal rule set both to 0.6s — this later rule wins.) */
	html.lhr-motion .lhr-hotel-card,
	html.lhr-motion .lhr-review-card,
	html.lhr-motion .lhr-ed-card--card,
	html.lhr-motion .lhr-dest-card,
	html.lhr-motion .lhr-rev-card,
	html.lhr-motion .sym-hotel-card {
		transition:
			opacity 0.6s ease,
			transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
			box-shadow 0.35s ease,
			border-color 0.3s ease;
	}

	.lhr-redesign .lhr-hotel-card:hover,
	.lhr-redesign .lhr-hotel-card:focus-within,
	.lhr-redesign .lhr-review-card:hover,
	.lhr-redesign .lhr-review-card:focus-within,
	.lhr-redesign .lhr-ed-card--card:hover,
	.lhr-redesign .lhr-ed-card--card:focus-within,
	.lhr-redesign .lhr-dest-card:hover,
	.lhr-redesign .lhr-dest-card:focus-within,
	.lhr-redesign .lhr-rev-card:hover,
	.lhr-redesign .lhr-rev-card:focus-within,
	.lhr-redesign .sym-hotel-card:hover,
	.lhr-redesign .sym-hotel-card:focus-within {
		transform: translateY(-4px);
		box-shadow: 0 22px 44px rgba(34, 32, 28, 0.12);
	}

	/* Unified button hovers: background already swaps in base.css;
	   add a soft 0.25s ease + slight brightness on solid buttons. */
	.lhr-redesign .lhr-btn,
	.lhr-redesign .m-btn {
		transition:
			background-color 0.25s ease,
			color 0.25s ease,
			border-color 0.25s ease,
			filter 0.25s ease;
	}

	.lhr-redesign .lhr-btn--gold:hover,
	.lhr-redesign .lhr-btn--gold:focus-visible,
	.lhr-redesign .lhr-btn--dark:hover,
	.lhr-redesign .lhr-btn--dark:focus-visible,
	.lhr-redesign .m-btn--solid:hover,
	.lhr-redesign .m-btn--solid:focus-visible {
		filter: brightness(1.06);
	}

	/* Text-link arrow nudge (READ MORE →, VIEW ALL → …). */
	.lhr-redesign .lhr-btn__arrow,
	.lhr-redesign .lhr-review-card__arrow,
	.lhr-redesign .lhr-ed-card__arrow,
	.lhr-redesign .lhr-rev-cell__more-arrow {
		display: inline-block;
		transition: transform 0.25s ease;
	}

	.lhr-redesign .lhr-btn--text:hover .lhr-btn__arrow,
	.lhr-redesign .lhr-btn--text:focus-visible .lhr-btn__arrow,
	.lhr-redesign .lhr-review-card__more:hover .lhr-review-card__arrow,
	.lhr-redesign .lhr-review-card__more:focus-visible .lhr-review-card__arrow,
	.lhr-redesign .lhr-ed-card__more:hover .lhr-ed-card__arrow,
	.lhr-redesign .lhr-ed-card__more:focus-visible .lhr-ed-card__arrow,
	.lhr-redesign .lhr-rev-cell__more:hover .lhr-rev-cell__more-arrow,
	.lhr-redesign .lhr-rev-cell__more:focus-visible .lhr-rev-cell__more-arrow {
		transform: translateX(4px);
	}

	/* Input focus ease (base.css already covers .lhr-input/.lhr-select;
	   this unifies the rest — band field, legacy search, selects). */
	.lhr-redesign input[type="text"],
	.lhr-redesign input[type="search"],
	.lhr-redesign input[type="email"],
	.lhr-redesign input[type="date"],
	.lhr-redesign textarea,
	.lhr-redesign select {
		transition: border-color 0.2s ease;
	}

	/* --------------------------------------------------------------
	 * 3. Sticky-header polish
	 * Header height is fixed (--m-header-h) and the header is
	 * sticky-in-flow, so shrinking it would shift the page —
	 * shadow only (per spec fallback). .lhr-scrolled toggled by JS
	 * after 8px of scroll.
	 * ------------------------------------------------------------ */

	.lhr-redesign #m-header {
		transition: box-shadow 0.3s ease;
	}

	.lhr-redesign #m-header.lhr-scrolled {
		box-shadow: 0 10px 30px rgba(34, 32, 28, 0.07);
	}
}