/* =============================================================================
   AdriaGo — Motion CSS (owned by Phase 2D)
   Animation helper states for the JS in assets/js/app/*. Cooperates with
   design-system.css (which already ships `.js [data-reveal]{opacity:0}`, the
   line-reveal overflow clip, and a reduced-motion block forcing reveals visible).

   Rules here are transform/opacity only, token-based, and never hide content in
   a way that survives with JS off — initial-hidden states are gated under
   `html.js` (set by inc/enqueue.php). Motion is wrapped in
   @media (prefers-reduced-motion: no-preference) wherever it could disorient.
   ========================================================================== */

/* =============================================================================
   1. Reveal — headline line splitting
   design-system.css already sets `.js [data-reveal-lines] .line{overflow:hidden}`.
   The JS wraps each visual line as <span class="line"><span class="line__inner">.
   Until the JS splits (adds .is-split) the text is plain and fully visible.
   ========================================================================== */
.js [data-reveal-lines] .line {
	display: block;
	overflow: hidden;
}
.js [data-reveal-lines] .line__inner {
	display: block;
	will-change: transform;
}
/* Only translate the lines out of view once JS has split + will animate them. */
@media (prefers-reduced-motion: no-preference) {
	.js [data-reveal-lines].is-split .line__inner {
		transform: translateY(110%);
	}
}
.js [data-reveal-lines] .word {
	display: inline-block;
	white-space: pre;
}

/* =============================================================================
   2. Parallax
   GSAP drives the transform; we just hint the compositor. No initial-hidden
   state, so content is unaffected with JS off (design-system also forces
   [data-parallax]{transform:none} under reduced motion).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.js [data-parallax] {
		will-change: transform;
	}
}

/* =============================================================================
   3. Image clip reveal (optional [data-clip])
   GSAP animates clip-path inset → 0. Gate the initial clip under html.js so
   no-JS users see the full image.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.js [data-clip] {
		will-change: clip-path;
	}
}

/* =============================================================================
   4. Counter — no layout shift while the number ticks
   ========================================================================== */
[data-counter] {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* =============================================================================
   5. Accordion panel — animated height (JS sets inline height 0 ⇄ scrollHeight,
   then 'auto'). The transition variable lives here so JS only touches height.
   ========================================================================== */
.accordion__panel {
	overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
	.accordion__panel {
		transition: height var(--dur-med, .45s) var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1));
	}
}

/* =============================================================================
   6. Mobile nav — companion to header.css
   header.css already drives the enter/exit transition off `:not([hidden])`.
   The JS also adds `.is-open` while the overlay is shown; mirror the open state
   here so the visual is correct even if a build reorders the cascade. We never
   force-hide here (that is the [hidden] attribute's job).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.mobile-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* =============================================================================
   7. Calculator combobox — listbox open/close + filtered options.
   The listbox uses the [hidden] attribute (JS toggles it). A light fade-in when
   it opens; instant under reduced motion. Component layout belongs to a later
   phase — this only animates the open transition and respects [hidden].
   ========================================================================== */
/* The listbox open/close is driven by the [hidden] attribute (JS toggles it),
   not by DOM adjacency — the contract places a hidden from/to input between the
   combobox and its listbox, so a sibling combinator would be unreliable. We fade
   the listbox in on open; closing is instant via [hidden] → display:none. */
[role="listbox"][hidden] {
	display: none;
}
@media (prefers-reduced-motion: no-preference) {
	[role="listbox"] {
		animation: adriago-listbox-in var(--dur-fast, .25s) var(--ease-out-soft, cubic-bezier(.22, .61, .36, 1)) both;
	}
}
@keyframes adriago-listbox-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}
/* Active descendant highlight (keyboard + pointer) — token-based, no layout shift. */
[role="option"].is-active {
	background: var(--orange-tint, #FCEBDD);
	color: var(--adria-orange, #F68B3C);
}

/* =============================================================================
   8. Calculator loading state — submit button busy affordance.
   ========================================================================== */
.calc.is-loading .calc__submit,
[data-calculator].is-loading [type="submit"] {
	pointer-events: none;
}
[type="submit"][aria-busy="true"] {
	opacity: .7;
	cursor: progress;
}
@media (prefers-reduced-motion: no-preference) {
	.calc.is-loading .calc__submit::after,
	[data-calculator].is-loading [type="submit"]::after {
		content: "";
		width: 1em;
		height: 1em;
		margin-inline-start: var(--sp-2, .5rem);
		border: 2px solid currentColor;
		border-top-color: transparent;
		border-radius: var(--r-pill, 999px);
		display: inline-block;
		vertical-align: -0.15em;
		animation: adriago-spin .6s linear infinite;
	}
}
@keyframes adriago-spin {
	to { transform: rotate(360deg); }
}

/* =============================================================================
   9. Quote result — entrance when the JS injects content.
   The mount ([data-quote-result]) is aria-live; we animate the freshly inserted
   inner block, never hiding the live region itself when empty.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	[data-quote-result] > .quote-result__found,
	[data-quote-result] > .quote-result__noroute,
	[data-quote-result] > .quote-result__error {
		animation: adriago-quote-in var(--dur-med, .45s) var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1)) both;
	}
	[data-quote-result] .quote-card {
		animation: adriago-quote-in var(--dur-med, .45s) var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1)) both;
	}
	[data-quote-result] .quote-card:nth-child(1) { animation-delay: .04s; }
	[data-quote-result] .quote-card:nth-child(2) { animation-delay: .10s; }
	[data-quote-result] .quote-card:nth-child(3) { animation-delay: .16s; }
	[data-quote-result] .quote-card:nth-child(4) { animation-delay: .22s; }
}
@keyframes adriago-quote-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* =============================================================================
   10. Booking form — submit busy + status region + success panel entrance.
   ========================================================================== */
.form-success {
	text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
	[data-booking-form] .form-success {
		animation: adriago-quote-in var(--dur-med, .45s) var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1)) both;
	}
	[data-booking-form].is-submitting [type="submit"] {
		cursor: progress;
	}
}
[data-form-status][hidden] {
	display: none;
}
[data-form-status].is-error {
	color: #B3361B;
}

/* =============================================================================
   11. Reduced-motion belt-and-braces
   design-system.css already neutralizes [data-reveal]/[data-parallax]. Here we
   also ensure split lines and clip reveals rest at their visible state, and any
   helper transition collapses.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.js [data-reveal-lines] .line__inner { transform: none !important; }
	.js [data-clip] { clip-path: none !important; }
	.accordion__panel { transition: none !important; }
}