/**
 * Catalog motion, style "airmail" (the contact page, 2026-09-28). The post's language, kept simple: the postcard
 * drops onto the desk and settles, its stamp lands and the postmark is struck, the address lines are written one
 * after another, the ways to reach us arrive like letters with their airmail stripe drawn, the form rises out of
 * its envelope, the envelope's own stamp and "par avion" mark land in turn, and a paper plane crosses the top of
 * the page once. catalog-motion.js arms each block; entrances keep a backwards fill, so hovers keep working.
 */
@keyframes tgc-a-drop { 0% { opacity: 0; transform: translateY(54px) rotate(-4deg); } 60% { opacity: 1; transform: translateY(-6px) rotate(0deg); } 100% { transform: rotate(var(--rest, 0deg)); } }
@keyframes tgc-a-land { 0% { opacity: 0; transform: translate(26px, -34px) rotate(22deg) scale(1.35); } 70% { opacity: 1; transform: translate(0, 2px) rotate(calc(var(--rest, 0deg) - 2deg)) scale(.97); } 100% { transform: rotate(var(--rest, 0deg)); } }
@keyframes tgc-a-strike { 0% { opacity: 0; transform: rotate(calc(var(--rest, 0deg) - 30deg)) scale(1.7); } 55% { opacity: 1; transform: rotate(var(--rest, 0deg)) scale(.92); } 100% { transform: rotate(var(--rest, 0deg)); } }
@keyframes tgc-a-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tgc-a-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes tgc-a-word { from { transform: translateY(108%); } }
@keyframes tgc-a-letter { from { opacity: 0; transform: translateY(46px) rotate(var(--tilt, -2deg)); } }
@keyframes tgc-a-stripe { from { transform: scaleX(0); } }
@keyframes tgc-a-pop { from { opacity: 0; transform: scale(.86); } }
@keyframes tgc-a-slide { from { opacity: 0; transform: translateX(-40px); } }
@keyframes tgc-a-unfold { from { opacity: 0; clip-path: inset(100% 0 0 0 round 20px); transform: translateY(40px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 20px); transform: none; } }
@keyframes tgc-a-fly {
	0% { left: -6%; opacity: 0; transform: translateY(34px) rotate(12deg); }
	12% { opacity: 1; }
	50% { transform: translateY(-18px) rotate(-5deg); }
	88% { opacity: 1; }
	100% { left: 104%; opacity: 0; transform: translateY(14px) rotate(6deg); }
}

/* What slides in from the side never widens the page (clip keeps sticky parts sticky). */
.tgc--m-airmail .tgc-hero, .tgc--m-airmail .tgc-band { overflow-x: clip; }

/* Where each piece rests once it has landed. */
.tgc--m-airmail .tgc-hero--postcard .tgc-hero__grid { --rest: -.6deg; }
.tgc--m-airmail .tgc-postcard__stamp { --rest: 3deg; }
.tgc--m-airmail .tgc-postmark { --rest: -12deg; }
.tgc--m-airmail .tgc-envelope__stamp { --rest: 4deg; }
.tgc--m-airmail .tgc-envelope__mark { --rest: -3deg; }

/* Out of sight until its block plays. */
.tgc--m-airmail .tgc-hero.is-armed:not(.is-in) .tgc-hero__grid,
.tgc--m-airmail .tgc-hero.is-armed:not(.is-in) .tgc-postcard__stamp,
.tgc--m-airmail .tgc-hero.is-armed:not(.is-in) .tgc-postmark,
.tgc--m-airmail .tgc-hero.is-armed:not(.is-in) .tgc-postcard__clock,
.tgc--m-airmail .tgc-hero.is-armed:not(.is-in) .tgc-hero__copy > :not(.tgc-hero__title),
.tgc--m-airmail .is-armed:not(.is-in) .tgc-head > *,
.tgc--m-airmail .is-armed:not(.is-in) .tgc-channel,
.tgc--m-airmail .is-armed:not(.is-in) .tgc-compose__topic,
.tgc--m-airmail .is-armed:not(.is-in) .tgc-booking__summary,
.tgc--m-airmail .is-armed:not(.is-in) .tgc-booking__form,
.tgc--m-airmail .is-armed:not(.is-in) .tgc-glance__item,
.tgc--m-airmail .is-armed:not(.is-in) .tgc-envelope__notes li,
.tgc--m-airmail .is-armed:not(.is-in) .tgc-envelope__front,
.tgc--m-airmail .is-armed:not(.is-in) .tgc-faq__item,
.tgc--m-airmail .is-armed:not(.is-in) .tgc-faq__ask,
.tgc--m-airmail .is-armed:not(.is-in) .tgc-links > li { opacity: 0; }

/* The postcard drops onto the desk and settles; its title is written word by word. */
.tgc--m-airmail .tgc-hero.is-in .tgc-hero__grid { animation: tgc-a-drop 1.1s cubic-bezier(.2, .7, .2, 1) .1s backwards; }
.tgc--m-airmail .tgc-m-w { display: inline-block; overflow: hidden; margin: 0 -.08em -.1em 0; padding: 0 .08em .1em 0; vertical-align: top; }
.tgc--m-airmail .tgc-m-w > span { display: inline-block; }
.tgc--m-airmail .tgc-hero.is-armed:not(.is-in) .tgc-m-w > span { transform: translateY(108%); }
.tgc--m-airmail .tgc-hero.is-in .tgc-m-w > span { animation: tgc-a-word .8s cubic-bezier(.2, .7, .2, 1) calc(var(--w, 0) * .07s + .55s) backwards; }
.tgc--m-airmail .tgc-hero.is-in .tgc-hero__copy > :not(.tgc-hero__title) { animation: tgc-a-rise .8s cubic-bezier(.2, .7, .2, 1) .5s backwards; }
.tgc--m-airmail .tgc-hero.is-in .tgc-hero__copy > .tgc-hero__lead { animation-delay: 1s; }
.tgc--m-airmail .tgc-hero.is-in .tgc-hero__copy > .tgc-hero__act { animation-delay: 1.15s; }
.tgc--m-airmail .tgc-hero.is-in .tgc-hero__copy > .tgc-hero__trust { animation-delay: 1.3s; }

/* The stamp lands, the postmark is struck over it, the clock appears, the address is written line by line. */
.tgc--m-airmail .tgc-hero.is-in .tgc-postcard__stamp { animation: tgc-a-land .9s cubic-bezier(.2, .7, .2, 1) .85s backwards; }
.tgc--m-airmail .tgc-hero.is-in .tgc-postmark { animation: tgc-a-strike .55s cubic-bezier(.3, 1.4, .5, 1) 1.45s backwards; }
.tgc--m-airmail .tgc-hero.is-in .tgc-postcard__clock { animation: tgc-a-rise .7s ease 1.6s backwards; }
.tgc--m-airmail .tgc-hero.is-in .tgc-postcard__lines > div { animation: tgc-a-write .7s cubic-bezier(.4, 0, .2, 1) calc(var(--i, 0) * .22s + 1.75s) backwards; }

/* A paper plane crosses the top of the page once. */
.tgc-a-plane { position: absolute; top: 12%; left: -6%; z-index: 3; width: 34px; height: 34px; opacity: 0; pointer-events: none; }
.tgc-a-plane path { fill: #fff; stroke: #1f3f8f; stroke-width: 1.4; stroke-linejoin: round; }
.tgc-a-plane path + path { fill: #c8352b; stroke: none; }
.tgc--m-airmail .tgc-hero.is-in .tgc-a-plane { animation: tgc-a-fly 5.5s cubic-bezier(.45, 0, .55, 1) 2.2s both; }

/* Headings: the kicker, then the title, then the lead. */
.tgc--m-airmail .is-in .tgc-head > * { animation: tgc-a-rise .8s cubic-bezier(.2, .7, .2, 1) .1s backwards; }
.tgc--m-airmail .is-in .tgc-head > .tgc-title { animation-delay: .2s; }
.tgc--m-airmail .is-in .tgc-head > :nth-child(n + 3) { animation-delay: .35s; }

/* The ways to reach us arrive like letters, each with its airmail stripe drawn along the top. */
.tgc--m-airmail .tgc-channel:nth-child(odd) { --tilt: -3deg; }
.tgc--m-airmail .tgc-channel:nth-child(even) { --tilt: 2.5deg; }
.tgc--m-airmail .is-in .tgc-channel { animation: tgc-a-letter .9s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * .13s + .25s) backwards; }
.tgc--m-airmail .tgc-channel__link::before { transform-origin: left center; }
.tgc--m-airmail .is-in .tgc-channel__link::before { animation: tgc-a-stripe 1s cubic-bezier(.4, 0, .2, 1) calc(var(--i, 0) * .13s + .75s) backwards; }

/* The message builder's topics, one after another. */
.tgc--m-airmail .is-in .tgc-compose__topic { animation: tgc-a-pop .5s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * .07s + .3s) backwards; }

/* The form rises out of its envelope; the summary slides in beside it. */
.tgc--m-airmail .is-in .tgc-booking__summary { animation: tgc-a-slide .9s cubic-bezier(.2, .7, .2, 1) .15s backwards; }
.tgc--m-airmail .is-in .tgc-booking__form { animation: tgc-a-unfold 1.1s cubic-bezier(.2, .7, .2, 1) .35s backwards; }

/* The guide comes to you, the notes, the questions, the tours. */
.tgc--m-airmail .is-in .tgc-glance__item,
.tgc--m-airmail .is-in .tgc-envelope__notes li,
.tgc--m-airmail .is-in .tgc-faq__item,
.tgc--m-airmail .is-in .tgc-links > li { animation: tgc-a-rise .7s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * .1s + .25s) backwards; }
.tgc--m-airmail .is-in .tgc-faq__ask { animation: tgc-a-rise .7s ease 1s backwards; }

/* The envelope: it lands, its stamp lands, "par avion" is struck, the address is written. */
.tgc--m-airmail .is-in .tgc-envelope__front { animation: tgc-a-letter 1s cubic-bezier(.2, .7, .2, 1) .3s backwards; --tilt: 3deg; }
.tgc--m-airmail .is-in .tgc-envelope__stamp { animation: tgc-a-land .9s cubic-bezier(.2, .7, .2, 1) 1s backwards; }
.tgc--m-airmail .is-in .tgc-envelope__mark { animation: tgc-a-strike .55s cubic-bezier(.3, 1.4, .5, 1) 1.5s backwards; }
.tgc--m-airmail .is-in .tgc-envelope__to > span { animation: tgc-a-write .7s cubic-bezier(.4, 0, .2, 1) calc(var(--i, 0) * .2s + 1.3s) backwards; }

@media (prefers-reduced-motion: reduce) {
	.tgc-a-plane { display: none; }
}