/* =====================================================================
   EXPERIENCE ITALY — ANIMATED FORM CONFIRMATION
   ---------------------------------------------------------------------
   Loaded on the two form templates. Styles the block that replaces the
   form after a successful WPForms submit, and runs its entrance and its
   continuous travel loop.

   Everything is scoped to .ei-confirmation or to .pyt — the two form
   templates' wrapper — so nothing here can reach the rest of the site.
   Every class and keyframe is prefixed ei-confirmation-.

   Three things to know before editing:

   1. The artwork is TRACED from the approved render, so the paths are
      filled outlines of the original stroke, not strokes. They take
      `fill` and must never be given a `stroke`. It also means the sun
      cannot be drawn on with stroke-dashoffset — it blooms out from the
      centre through a mask instead.

   2. The scooter's placement lives on an SVG attribute and is never
      animated. The bob and tilt groups inside own exactly one CSS
      transform each, so transforms cannot accumulate or drift.

   3. Anything that rotates sets transform-box:fill-box. Without it an
      SVG element's transform-origin resolves against the whole view-box
      and the wheels orbit the composition instead of spinning.
   ===================================================================== */

/* ---- the form panel becomes the confirmation --------------------------
   The form card is ~675px wide inside its two-column grid, which is too
   narrow for this composition. On success the whole panel is given over
   to it: the companion column goes, and the card's white fill and
   shadow come off so the page's ivory ground shows through. */
.pyt.ei-confirmation-active .pyt-body {
	grid-template-columns: minmax(0, 1fr);
}

.pyt.ei-confirmation-active .pyt-aside,
.pyt.ei-confirmation-active .pyt-card__note,
.pyt.ei-confirmation-active .pyt-footnote {
	display: none;
}

.pyt.ei-confirmation-active .pyt-card {
	background-color: transparent;
	box-shadow: none;
	padding: 0;
}

/* WPForms wraps the confirmation in its own container with a pale fill
   and border. Strip it — this replaces the block that used to live in
   plan-your-trip.css. */
.pyt div.wpforms-container-full .wpforms-confirmation-container-full {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

/* ---- layout ---------------------------------------------------------- */
.ei-confirmation {
	--ei-confirmation-ink: #221F1D;
	--ei-confirmation-envelope: #BCA083;

	font-family: var(--ei-sans);
	color: var(--ei-taupe, #6B6158);
	padding: clamp(8px, 2vw, 28px) 0 0;
	overflow: hidden; /* guards the page against the mobile scene overhang */

	/* Layout below is keyed to THIS box, not the viewport. The
	   confirmation sits inside a form card whose width has nothing to do
	   with the screen, so a viewport media query gets it wrong: on a
	   phone the two-column head survived, the copy column collapsed
	   below its own min-content, and the headline overflowed across the
	   sun. */
	container-type: inline-size;
	container-name: ei-confirmation;
}

.ei-confirmation__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(20px, 4vw, 60px);
	align-items: center;
}

.ei-confirmation__headline {
	margin: 0;
	max-width: 12ch;
	font-family: var(--ei-serif);
	font-weight: 400;
	font-size: clamp(30px, 6vw, 78px);
	line-height: 1.04;
	letter-spacing: -0.01em;
	color: var(--ei-ink, #2B2420);
	/* Last-resort guard: break a word rather than let it push the sun
	   out of the container and get clipped. */
	overflow-wrap: break-word;
}

/* The heading takes focus after submit; it must not draw a focus ring
   for a target the visitor never chose to move to. Keyboard focus on
   real controls is untouched. */
.ei-confirmation__headline:focus {
	outline: none;
}

.ei-confirmation .ei-confirmation__sub {
	margin: clamp(24px, 3.2vw, 44px) 0 0;
	max-width: 46ch;
	font-size: clamp(16px, 1.4vw, 19px);
	font-weight: 300;
	line-height: 1.55;
	color: var(--ei-taupe, #6B6158);
}

.ei-confirmation .ei-confirmation__link {
	display: inline-block;
	margin-top: clamp(20px, 2.2vw, 34px);
	font-size: 15px;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--ei-terracotta, #A15C38);
	border-bottom: 1px solid rgba(161, 92, 56, 0.4);
	padding-bottom: 2px;
}

.ei-confirmation .ei-confirmation__link:hover,
.ei-confirmation .ei-confirmation__link:focus {
	color: var(--ei-terracotta-deep, #8A4B2D);
	border-bottom-color: rgba(138, 75, 45, 0.7);
}

/* Type is sized against THIS box, not the viewport, and this block sits
   after the base rules so it wins on order.

   Keyed to vw, the type grows with the SCREEN while the card stays
   narrow. On a phone that produced a huge headline inside a small card;
   the head grid overflowed and overflow:hidden ate the sun entirely.
   cqw tracks the box the text is actually in, so the type and the box
   can never disagree. */
@supports (container-type: inline-size) {
	.ei-confirmation .ei-confirmation__headline {
		font-size: clamp(30px, 7.2cqw, 78px);
	}

	.ei-confirmation .ei-confirmation__sub {
		font-size: clamp(15px, 1.7cqw, 19px);
		margin-top: clamp(24px, 3.6cqw, 44px);
	}

	.ei-confirmation .ei-confirmation__link {
		margin-top: clamp(20px, 2.6cqw, 34px);
	}
}

/* ---- artwork --------------------------------------------------------- */
.ei-confirmation-sun {
	display: block;
	width: clamp(104px, 15vw, 215px);
	height: auto;
}

.ei-confirmation-sun-art {
	fill: var(--ei-confirmation-ink);
}

.ei-confirmation__scene-wrap {
	margin-top: clamp(4px, 1vw, 14px);
	/* The route line fades out at both ends here rather than in the SVG's
	   own gradient. On a phone the scene deliberately overhangs this
	   wrapper, so a fade tied to the viewBox would be cropped part-way
	   and the line would stop dead at the screen edge. The scooter sits
	   between 40% and 82% at every width, so it is never touched. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.ei-confirmation-scene {
	display: block;
	width: 100%;
	height: auto;
	fill: var(--ei-confirmation-ink);
	stroke: none;
}

.ei-confirmation-envelope-art {
	fill: var(--ei-confirmation-envelope);
}

.ei-confirmation-wax-seal {
	fill: var(--ei-terracotta, #A15C38);
}

/* =====================================================================
   PHASE 1 — ENTRANCE
   Paced deliberately, not overlapped:

     0.0 - 1.5s   everything except the envelope fades up
     1.5 - 2.4s   the envelope fades in and drops into the basket
     2.25s        the wax seal presses on
     2.35s        the machine settles under the weight
     2.55s        wheels and road begin, and the loop takes over

   The envelope sits inside the scene, which is itself fading up over
   the first second — but its own animation holds it at opacity 0 until
   2s, and opacity multiplies, so it stays hidden through the fade.
   ===================================================================== */

@keyframes ei-confirmation-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@keyframes ei-confirmation-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes ei-confirmation-deliver {
	from { opacity: 0; transform: translateY(-52px); }
	45%  { opacity: 1; }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ei-confirmation-press {
	from { transform: scale(0.2); opacity: 0; }
	70%  { transform: scale(1.12); opacity: 1; }
	to   { transform: scale(1); opacity: 1; }
}

/* The envelope's weight arriving in the basket. Ends at 0 so the loop's
   bob can pick up from the same place without a jump. */
@keyframes ei-confirmation-settle {
	from { transform: translateY(0); }
	45%  { transform: translateY(2.6px); }
	to   { transform: translateY(0); }
}

.ei-confirmation__headline {
	animation: ei-confirmation-rise 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.ei-confirmation__sub {
	animation: ei-confirmation-fade 1.25s ease-out 0.25s both;
}

.ei-confirmation__link {
	animation: ei-confirmation-fade 1.15s ease-out 0.35s both;
}

.ei-confirmation-sun,
.ei-confirmation-scene {
	animation: ei-confirmation-fade 1.5s ease-out both;
}

.ei-confirmation-envelope {
	animation: ei-confirmation-deliver 0.9s cubic-bezier(0.34, 0.72, 0.3, 1) 1.5s both;
}

.ei-confirmation-wax-seal {
	transform-box: fill-box;
	transform-origin: center;
	animation: ei-confirmation-press 0.3s cubic-bezier(0.3, 1.3, 0.5, 1) 2.25s both;
}

.ei-confirmation-scooter-bob {
	animation: ei-confirmation-settle 0.35s ease-in-out 2.35s both;
}

/* =====================================================================
   PHASE 2 — CONTINUOUS TRAVEL LOOP
   The wheels and road carry their loop from the start with a delay, so
   there is no handoff for them to stumble over. Only the scooter's own
   bob has to change animation, and the settle ends exactly where the
   bob begins.
   ===================================================================== */

@keyframes ei-confirmation-roll {
	to { transform: rotate(360deg); }
}

/* Exactly one wavelength. Landing on an identical pattern is what makes
   the loop seamless — do not change this without changing the tile. */
@keyframes ei-confirmation-travel {
	from { transform: translateX(0); }
	to   { transform: translateX(-1600px); }
}

@keyframes ei-confirmation-bob {
	from, to { transform: translateY(0); }
	50%      { transform: translateY(-1.6px); }
}

@keyframes ei-confirmation-wobble {
	from, to { transform: rotate(-0.22deg); }
	50%      { transform: rotate(0.22deg); }
}

.ei-confirmation-rear-wheel,
.ei-confirmation-front-wheel {
	transform-box: fill-box;
	transform-origin: center;
	animation: ei-confirmation-roll 0.72s linear 2.55s infinite;
}

.ei-confirmation-road {
	animation: ei-confirmation-travel 4.6s linear 2.55s infinite;
}

.ei-confirmation-is-looping .ei-confirmation-scooter-bob {
	animation: ei-confirmation-bob 0.82s ease-in-out infinite;
}

.ei-confirmation-is-looping .ei-confirmation-scooter-tilt {
	transform-box: fill-box;
	transform-origin: 50% 92%;
	animation: ei-confirmation-wobble 1.7s ease-in-out infinite;
}

/* Page Visibility: freeze everything while the tab is hidden rather
   than letting it run against a screen nobody is looking at. The class
   sits on .ei-confirmation itself, so this reaches every animated
   descendant without naming them. */
.ei-confirmation-is-paused * {
	animation-play-state: paused !important;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* The scene's 1200x400 viewBox is a wide band; fitted to a phone it
   leaves the scooter tiny. Let it overhang instead — the wrapper's
   overflow:hidden keeps the page from scrolling sideways, and the
   offsets keep the scooter and its basket fully inside the window. */
@container ei-confirmation (max-width: 760px) {
	/* The sun stays BESIDE the headline rather than stacking above it,
	   so the render's relationship survives on a phone. The copy column
	   keeps its min-content floor, which is what stops a long word
	   spilling sideways across the sun in this two-column state. */
	.ei-confirmation__head {
		grid-template-columns: minmax(min-content, 1fr) auto;
		gap: 16px;
	}

	.ei-confirmation-sun {
		width: clamp(58px, 20cqw, 92px);
		align-self: start;
		margin-top: 4px;
	}

	/* The scene's wide band leaves the scooter tiny when fitted to a
	   narrow card, so let it overhang — .ei-confirmation's overflow:hidden
	   keeps the page from scrolling sideways, and the offsets keep the
	   scooter and its basket fully inside the window. */
	.ei-confirmation-scene {
		width: 150%;
		margin-left: -30%;
	}
}

@container ei-confirmation (max-width: 400px) {
	.ei-confirmation__headline { max-width: none; }
}

/* Fallback for engines without container queries. Same rules, keyed to
   the viewport — imperfect for the reason above, but better than a
   desktop-width head on a phone. */
@supports not (container-type: inline-size) {
	@media (max-width: 760px) {
		.ei-confirmation__head {
			grid-template-columns: minmax(min-content, 1fr) auto;
			gap: 16px;
		}
		.ei-confirmation-sun {
			width: clamp(58px, 20vw, 92px);
			align-self: start;
			margin-top: 4px;
		}
		.ei-confirmation-scene { width: 150%; margin-left: -30%; }
	}
	@media (max-width: 400px) {
		.ei-confirmation__headline { max-width: none; }
	}
}

/* =====================================================================
   REDUCED MOTION
   The complete final composition, immediately and permanently still.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ei-confirmation *,
	.ei-confirmation {
		animation: none !important;
		transition: none !important;
	}

	.ei-confirmation__headline,
	.ei-confirmation__sub,
	.ei-confirmation__link {
		opacity: 1;
		transform: none;
	}

	.ei-confirmation-envelope,
	.ei-confirmation-scooter-bob,
	.ei-confirmation-scooter-tilt,
	.ei-confirmation-rear-wheel,
	.ei-confirmation-front-wheel,
	.ei-confirmation-road,
	.ei-confirmation-wax-seal {
		opacity: 1;
		transform: none;
	}
}