/* =============================================================================
 * Section — Amenities (Accueil)
 * Cream background, sage type. 3×2 grid of icon + name + description.
 * ========================================================================== */

.exspa-amenities {
	background: var(--exspa-cream, #F5F1E8);
	color: var(--exspa-sage-deep, #2A3325);
	padding: clamp(96px, 12vw, 180px) clamp(24px, 5vw, 80px);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.exspa-amenities__header {
	max-width: 760px;
	margin: 0 auto clamp(64px, 8vw, 112px);
	text-align: center;
}

.exspa-amenities__eyebrow {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	margin: 0 0 28px;
	color: var(--exspa-sage, #3F4D38);
	opacity: 0.85;
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
.exspa-amenities__eyebrow::before {
	content: '';
	display: inline-block;
	width: 28px;
	height: 1px;
	background: var(--exspa-gold, #8B6F3D);
	opacity: 0.85;
	transform: translateY(-1px);
}

.exspa-amenities__heading {
	font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	/* Heading is now a full statement sentence — keep it refined, not huge. */
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -0.005em;
	margin: 0 auto 24px;
	max-width: 26ch;
	color: var(--exspa-sage-deep, #2A3325);
}

.exspa-amenities__heading em {
	font-style: italic;
	color: var(--exspa-sage, #3F4D38);
}

.exspa-amenities__lede {
	font-size: 17.5px;
	line-height: 1.65;
	max-width: 56ch;
	margin: 0 auto;
	color: var(--exspa-sage-deep, #2A3325);
	opacity: 0.78;
}

.exspa-amenities__grid {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(40px, 5vw, 64px);
}

.exspa-amenities__item {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px 24px 28px;
	border-top: 1px solid rgba(42, 51, 37, 0.18);
	transition: border-color 350ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
}
.exspa-amenities__item::before {
	content: '';
	position: absolute;
	top: -1px; left: 0;
	height: 1px;
	width: 0;
	background: var(--exspa-gold, #8B6F3D);
	transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.exspa-amenities__item:hover {
	border-top-color: rgba(42, 51, 37, 0.08);
	transform: translateY(-3px);
}
.exspa-amenities__item:hover::before {
	width: 38%;
}

.exspa-amenities__icon {
	width: 46px;
	height: 46px;
	color: var(--exspa-sage, #394839);
	transition: transform 500ms cubic-bezier(0.34, 1.2, 0.64, 1), color 350ms ease;
	will-change: transform;
	overflow: visible;
}

/* -----------------------------------------------------------------------------
 * Stroke-draw entrance — driven by anime.js v4 `createDrawable` (see
 * amenities-anim.js). anime.js writes inline `stroke-dasharray` +
 * `stroke-dashoffset` on each shape as it animates.
 *
 * Before reveal: hide the strokes entirely so anime.js can write them in.
 * `is-pending-draw` is added the moment JS boots, before the IO triggers.
 * If JS or anime.js never loads, the `is-fallback-draw` class is added
 * instead (legacy CSS transition path).
 * -------------------------------------------------------------------------- */
.exspa-amenities__item.is-pending-draw .exspa-amenities__icon path,
.exspa-amenities__item.is-pending-draw .exspa-amenities__icon circle,
.exspa-amenities__item.is-pending-draw .exspa-amenities__icon ellipse,
.exspa-amenities__item.is-pending-draw .exspa-amenities__icon line,
.exspa-amenities__item.is-pending-draw .exspa-amenities__icon rect,
.exspa-amenities__item.is-pending-draw .exspa-amenities__icon polyline,
.exspa-amenities__item.is-pending-draw .exspa-amenities__icon polygon {
	stroke-dasharray: 0 9999;  /* invisible until anime.js writes draw values */
}

/* Fallback path (no anime.js) — old-school dashoffset transition */
.exspa-amenities__item.is-fallback-draw .exspa-amenities__icon path,
.exspa-amenities__item.is-fallback-draw .exspa-amenities__icon circle,
.exspa-amenities__item.is-fallback-draw .exspa-amenities__icon ellipse,
.exspa-amenities__item.is-fallback-draw .exspa-amenities__icon line,
.exspa-amenities__item.is-fallback-draw .exspa-amenities__icon rect,
.exspa-amenities__item.is-fallback-draw .exspa-amenities__icon polyline,
.exspa-amenities__item.is-fallback-draw .exspa-amenities__icon polygon {
	stroke-dasharray: 200;
	stroke-dashoffset: 0;
	animation: exspa-fallback-draw 1.3s cubic-bezier(0.65, 0, 0.35, 1) both;
}
@keyframes exspa-fallback-draw {
	from { stroke-dashoffset: 200; }
	to   { stroke-dashoffset: 0; }
}

/* Reduce-motion: skip the stroke-draw entrance, keep character loops */
.exspa-amenities__item.is-no-anim .exspa-amenities__icon path,
.exspa-amenities__item.is-no-anim .exspa-amenities__icon circle:not(.amenity-bubble):not(.amenity-seat):not(.amenity-drop),
.exspa-amenities__item.is-no-anim .exspa-amenities__icon ellipse,
.exspa-amenities__item.is-no-anim .exspa-amenities__icon line,
.exspa-amenities__item.is-no-anim .exspa-amenities__icon rect,
.exspa-amenities__item.is-no-anim .exspa-amenities__icon polyline,
.exspa-amenities__item.is-no-anim .exspa-amenities__icon polygon {
	stroke-dasharray: none !important;
	stroke-dashoffset: 0 !important;
	transition: none !important;
}

/* -----------------------------------------------------------------------------
 * Hover behavior — gold accent + slight rotation/scale
 * -------------------------------------------------------------------------- */
.exspa-amenities__item:hover .exspa-amenities__icon {
	color: var(--exspa-gold, #8B6F3D);
	transform: scale(1.1) rotate(-3deg);
}

/* Hover also subtly thickens the stroke for tactile feedback */
.exspa-amenities__item:hover .exspa-amenities__icon path,
.exspa-amenities__item:hover .exspa-amenities__icon circle,
.exspa-amenities__item:hover .exspa-amenities__icon line,
.exspa-amenities__item:hover .exspa-amenities__icon rect {
	stroke-width: 1.4;
}

/* =============================================================================
 * CHARACTER ANIMATIONS — per icon. Each animation starts paused, and only
 * plays once the item has been revealed (entered viewport).
 * ========================================================================== */

.exspa-amenities__item .amenity-bubble,
.exspa-amenities__item .amenity-seat,
.exspa-amenities__item .amenity-drop,
.exspa-amenities__item .amenity-drop-line,
.exspa-amenities__item .amenity-smoke-wisp,
.exspa-amenities__item .amenity-cushion,
.exspa-amenities__item .amenity-bed,
.exspa-amenities__item .amenity-pillow,
.exspa-amenities__item .amenity-recline,
.exspa-amenities__item .amenity-wrap,
.exspa-amenities__item .amenity-robe,
.exspa-amenities__item .amenity-knot {
	animation-play-state: paused;
	animation-delay: 1.5s; /* wait for the anime.js draw entrance to finish */
}

.exspa-amenities__item.is-revealed .amenity-bubble,
.exspa-amenities__item.is-revealed .amenity-seat,
.exspa-amenities__item.is-revealed .amenity-drop,
.exspa-amenities__item.is-revealed .amenity-drop-line,
.exspa-amenities__item.is-revealed .amenity-smoke-wisp,
.exspa-amenities__item.is-revealed .amenity-cushion,
.exspa-amenities__item.is-revealed .amenity-bed,
.exspa-amenities__item.is-revealed .amenity-pillow,
.exspa-amenities__item.is-revealed .amenity-recline,
.exspa-amenities__item.is-revealed .amenity-wrap,
.exspa-amenities__item.is-revealed .amenity-robe,
.exspa-amenities__item.is-revealed .amenity-knot {
	animation-play-state: running;
}

/* -----------------------------------------------------------------------------
 * 1. SPA 5 PLACES — top-down jacuzzi
 *    - seats: small "pop" reveal staggered around the rim
 *    - bubbles: rise + fade inside the basin
 * -------------------------------------------------------------------------- */
.amenity-seat {
	fill: currentColor;
	stroke: none;
	transform-box: fill-box;
	transform-origin: center;
	animation: exspa-seat-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes exspa-seat-pop {
	0%   { transform: scale(0);   opacity: 0; }
	60%  { transform: scale(1.25); opacity: 1; }
	100% { transform: scale(1);   opacity: 1; }
}
.amenity-seat--1 { animation-delay: calc(1.5s + 0.00s); }
.amenity-seat--2 { animation-delay: calc(1.5s + 0.08s); }
.amenity-seat--3 { animation-delay: calc(1.5s + 0.16s); }
.amenity-seat--4 { animation-delay: calc(1.5s + 0.24s); }
.amenity-seat--5 { animation-delay: calc(1.5s + 0.32s); }

.amenity-bubble {
	fill: currentColor;
	stroke: none;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: exspa-bubble-rise 2.8s ease-in-out infinite;
}
@keyframes exspa-bubble-rise {
	0%   { transform: translateY(2.5px) scale(0.6); opacity: 0; }
	20%  { opacity: 0.85; }
	70%  { opacity: 0.7; }
	100% { transform: translateY(-3.5px) scale(1.05); opacity: 0; }
}
.amenity-bubble--1 { animation-delay: calc(1.9s + 0.0s); }
.amenity-bubble--2 { animation-delay: calc(1.9s + 0.7s); animation-duration: 3.1s; }
.amenity-bubble--3 { animation-delay: calc(1.9s + 1.3s); animation-duration: 2.6s; }
.amenity-bubble--4 { animation-delay: calc(1.9s + 2.0s); animation-duration: 2.9s; }

/* -----------------------------------------------------------------------------
 * 2. SHOWER — drops fall like rain, staggered
 * -------------------------------------------------------------------------- */
@keyframes exspa-drop-fall {
	0%   { transform: translateY(0);    opacity: 0; }
	15%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { transform: translateY(11px); opacity: 0; }
}
.amenity-drop {
	fill: currentColor;
	stroke: none;
	animation: exspa-drop-fall 2.4s linear infinite;
	transform-origin: center;
}
.amenity-drop--1 { animation-delay: calc(1.6s + 0.0s); }
.amenity-drop--2 { animation-delay: calc(1.6s + 0.4s); }
.amenity-drop--3 { animation-delay: calc(1.6s + 0.8s); }
.amenity-drop--4 { animation-delay: calc(1.6s + 1.2s); animation-duration: 2.0s; }
.amenity-drop--5 { animation-delay: calc(1.6s + 1.6s); animation-duration: 2.0s; }
.amenity-drop--6 { animation-delay: calc(1.6s + 2.0s); animation-duration: 1.8s; }

/* -----------------------------------------------------------------------------
 * 3. SAUNA — smoke wisps rise, fade in then out
 * -------------------------------------------------------------------------- */
@keyframes exspa-smoke-rise {
	0%   { transform: translateY(0)    scale(1);   opacity: 0; }
	30%  { opacity: 0.9; }
	100% { transform: translateY(-3px) scale(1.3); opacity: 0; }
}
.amenity-smoke-wisp {
	transform-box: fill-box;
	transform-origin: center bottom;
	animation: exspa-smoke-rise 3.4s ease-out infinite;
}
.amenity-smoke-wisp--1 { animation-delay: calc(1.6s + 0.0s); }
.amenity-smoke-wisp--2 { animation-delay: calc(1.6s + 1.1s); }
.amenity-smoke-wisp--3 { animation-delay: calc(1.6s + 2.2s); }

/* -----------------------------------------------------------------------------
 * 4. CHAIR — cushion compresses subtly (massage feel)
 * -------------------------------------------------------------------------- */
@keyframes exspa-cushion-flex {
	0%, 100% { transform: scaleY(1)    translateY(0); }
	50%      { transform: scaleY(0.85) translateY(0.6px); }
}
.amenity-cushion {
	transform-box: fill-box;
	transform-origin: center;
	animation: exspa-cushion-flex 2.6s ease-in-out infinite;
}

/* -----------------------------------------------------------------------------
 * 5. SUITE — bed breathes (subtle scale)
 * -------------------------------------------------------------------------- */
@keyframes exspa-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.025); }
}
.amenity-bed {
	transform-box: fill-box;
	transform-origin: center;
	animation: exspa-breathe 4.4s ease-in-out infinite;
}

/* -----------------------------------------------------------------------------
 * 6. ROBE — gentle pendulum sway from the collar
 * -------------------------------------------------------------------------- */
@keyframes exspa-sway {
	0%, 100% { transform: rotate(-2deg); }
	50%      { transform: rotate(2deg); }
}
.amenity-robe {
	transform-box: fill-box;
	transform-origin: center 4px; /* pivot near the collar */
	animation: exspa-sway 3.8s ease-in-out infinite;
}

/* -----------------------------------------------------------------------------
 * SHOWER (v2) — slanted water drops fall along the head's angle, fade in/out
 * -------------------------------------------------------------------------- */
@keyframes exspa-drop-line-fall {
	0%   { transform: translate(0, 0); opacity: 0; }
	18%  { opacity: 1; }
	75%  { opacity: 1; }
	100% { transform: translate(2px, 5px); opacity: 0; }
}
.amenity-drop-line {
	stroke: currentColor;
	stroke-width: 1.1;
	stroke-linecap: round;
	transform-box: fill-box;
	transform-origin: top left;
	animation: exspa-drop-line-fall 2.1s ease-in infinite;
}
.amenity-drop-line--1 { animation-delay: calc(1.6s + 0.00s); }
.amenity-drop-line--2 { animation-delay: calc(1.6s + 0.35s); }
.amenity-drop-line--3 { animation-delay: calc(1.6s + 0.70s); }
.amenity-drop-line--4 { animation-delay: calc(1.6s + 1.05s); animation-duration: 2.4s; }
.amenity-drop-line--5 { animation-delay: calc(1.6s + 1.40s); animation-duration: 2.0s; }
.amenity-drop-line--6 { animation-delay: calc(1.6s + 1.75s); animation-duration: 2.3s; }

/* -----------------------------------------------------------------------------
 * SUITE (v2) — pillows breathe (alternating left/right) so the bed feels alive
 * -------------------------------------------------------------------------- */
@keyframes exspa-pillow-breathe {
	0%, 100% { transform: scale(1)    translateY(0); }
	50%      { transform: scale(1.04) translateY(-0.4px); }
}
.amenity-pillow {
	transform-box: fill-box;
	transform-origin: bottom center;
	animation: exspa-pillow-breathe 3.6s ease-in-out infinite;
}
.amenity-pillow--1 { animation-delay: calc(1.6s + 0.0s); }
.amenity-pillow--2 { animation-delay: calc(1.6s + 1.8s); }

/* -----------------------------------------------------------------------------
 * CHAIR (v2) — entire chair tilts back ever so slightly (recline rhythm)
 * -------------------------------------------------------------------------- */
@keyframes exspa-chair-recline {
	0%, 100% { transform: rotate(0deg);   }
	50%      { transform: rotate(-1.4deg); }
}
.amenity-recline {
	transform-box: fill-box;
	transform-origin: 18px 21px; /* pivot at the footrest tip — back lifts gently */
	animation: exspa-chair-recline 3.2s ease-in-out infinite;
}

/* -----------------------------------------------------------------------------
 * ROBE / WELLNESS (v2) — turban towel does a tiny "head tilt" bob
 * -------------------------------------------------------------------------- */
@keyframes exspa-wrap-bob {
	0%, 100% { transform: rotate(-1.5deg); }
	50%      { transform: rotate(1.5deg); }
}
.amenity-wrap {
	transform-box: fill-box;
	transform-origin: center 10px; /* pivot at the neck line */
	animation: exspa-wrap-bob 4s ease-in-out infinite;
}

/* -----------------------------------------------------------------------------
 * ROBE (v3 — bathrobe) — belt knot pendulum swing from where it's tied
 * -------------------------------------------------------------------------- */
@keyframes exspa-knot-swing {
	0%, 100% { transform: rotate(-4deg); }
	50%      { transform: rotate(4deg); }
}
.amenity-knot {
	transform-box: fill-box;
	transform-origin: 7.25px 14.5px; /* anchor at top center of the knot */
	animation: exspa-knot-swing 3.4s ease-in-out infinite;
}

/* Reduce-motion respected indirectly:
 * - JS skips the entrance stroke-draw and reveals icons instantly
 * - Character animations (drops, smoke, sway, breathe) are slow gentle loops
 *   that do not violate prefers-reduced-motion intent; we keep them running
 *   per the design direction. If needed, scope further later.
 */

.exspa-amenities__name {
	font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	font-size: 24px;
	font-weight: 400;
	letter-spacing: -0.005em;
	margin: 0;
	color: var(--exspa-sage-deep, #2A3325);
}

.exspa-amenities__desc {
	font-size: 16.5px;
	line-height: 1.65;
	margin: 0;
	color: var(--exspa-sage-deep, #2A3325);
	opacity: 0.75;
	max-width: 36ch;
}

@media (max-width: 900px) {
	.exspa-amenities__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}
}

@media (max-width: 540px) {
	.exspa-amenities {
		padding: 72px 20px 88px;
	}
	.exspa-amenities__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.exspa-amenities__item {
		padding: 28px 0;
	}
}