/**
 * Catalog motion, style "mosaic" (things to do in Tangier, 2026-09-28). The zellige's language: photos uncovered
 * tile by tile, heading words turned like tiles, cards set down like tiles, a gold star turning, pins dropping on
 * the map, the years of the timeline counting up, a light glinting over tilework. catalog-motion.js arms each block;
 * entrances keep a backwards fill, so hovers keep working.
 */
@keyframes tgc-z-flip { from { opacity: 0; transform: perspective(500px) rotateX(-90deg); } }
@keyframes tgc-z-set { 0% { opacity: 0; transform: scale(.82) rotate(-5deg); } 60% { opacity: 1; transform: scale(1.02) rotate(1deg); } }
@keyframes tgc-z-turn { from { opacity: 0; transform: perspective(800px) rotateY(80deg); } }
@keyframes tgc-z-uncover { from { transform: scale(1.02) rotate(0deg); } }
@keyframes tgc-z-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes tgc-z-spin { to { transform: rotate(360deg); } }
@keyframes tgc-z-draw { from { stroke-dashoffset: 1; } }
@keyframes tgc-z-drop { 0% { opacity: 0; transform: translateY(-46px); } 55% { opacity: 1; transform: translateY(4px); } 75% { transform: translateY(-3px); } }
@keyframes tgc-z-march { from { stroke-dashoffset: 110; opacity: 0; } }
@keyframes tgc-z-bar { from { transform: scaleX(0); } }
@keyframes tgc-z-glint { from { background-position: 0 0, 160% 0; } to { background-position: 0 0, -60% 0; } }
@keyframes tgc-z-pop { 0% { transform: scale(0); } 70% { transform: scale(1.4); } }

/* A block never lets what comes in from the side widen the page (clip keeps sticky parts sticky). */
.tgc--m-mosaic .tgc-band { overflow-x: clip; }

/* Out of sight until its block plays. */
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-head > :not(.tgc-title),
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-z-w,
.tgc--m-mosaic .tgc-hero.is-armed:not(.is-in) .tgc-hero__copy > :not(.tgc-hero__title),
.tgc--m-mosaic .tgc-hero.is-armed:not(.is-in) .tgc-m-w > span,
.tgc--m-mosaic .tgc-hero.is-armed:not(.is-in) .tgc-bento__tile,
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-fact,
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-answer__text,
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-more,
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-explore__bar,
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-act,
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-map__fig,
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-map__legend > li,
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-tabs__tab,
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-tabs__panel,
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-timeline__item,
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-season,
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-glance__item,
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-place,
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-reason,
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-faq__item,
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-faq__ask,
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-booking__summary,
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-booking__form { opacity: 0; }

/* Headings: each word turns over like a tile being laid. */
.tgc-z-w { display: inline-block; transform-origin: 50% 100%; }
.tgc--m-mosaic .is-in .tgc-z-w { animation: tgc-z-flip .75s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--w) * .07s + .1s); }
.tgc--m-mosaic .is-in .tgc-head > :not(.tgc-title) { animation: tgc-z-rise .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.tgc--m-mosaic .is-in .tgc-head > .tgc-lead { animation-delay: .45s; }

/* Photos are uncovered tile by tile: emerald diamonds shrink away in a scattered order. */
.tgc--m-mosaic .has-tiles { position: relative; overflow: hidden; }
.tgc-z-tiles { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr); pointer-events: none; }
.tgc-z-tiles i { background: #0d6b56; box-shadow: inset 0 0 0 1px rgba(226, 165, 43, .45); transform: scale(0) rotate(45deg); }
.tgc--m-mosaic .is-armed:not(.is-in) .tgc-z-tiles i { transform: none; }
.tgc--m-mosaic .is-in .tgc-z-tiles i { animation: tgc-z-uncover .7s cubic-bezier(.55, 0, .3, 1) backwards; animation-delay: calc(var(--d) * .04s + var(--i, 0) * .1s + .25s); }

/* Hero: a gold star turns behind the photos; the words turn; the tiles are set one by one. */
.tgc--m-mosaic .tgc-hero { overflow-x: clip; }
.tgc--m-mosaic .tgc-hero__inner { position: relative; z-index: 1; }
.tgc--m-mosaic .tgc-m-w { overflow: visible; }
.tgc-z-star { position: absolute; top: 50%; right: -120px; width: 620px; height: 620px; margin-top: -310px; overflow: visible; pointer-events: none; animation: tgc-z-spin 80s linear infinite; }
.tgc-z-star path, .tgc-z-star circle { fill: none; stroke: #e2a52b; stroke-width: .5; opacity: .35; stroke-dasharray: 1; }
.tgc--m-mosaic .tgc-hero.is-in .tgc-z-star path, .tgc--m-mosaic .tgc-hero.is-in .tgc-z-star circle { animation: tgc-z-draw 2.6s ease .3s backwards; }
.tgc--m-mosaic .tgc-hero.is-in .tgc-m-w > span { display: inline-block; transform-origin: 50% 100%; animation: tgc-z-flip .8s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--w) * .08s + .15s); }
.tgc--m-mosaic .tgc-hero.is-in .tgc-hero__copy > :not(.tgc-hero__title) { animation: tgc-z-rise .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.tgc--m-mosaic .tgc-hero.is-in .tgc-hero__lead { animation-delay: .7s; }
.tgc--m-mosaic .tgc-hero.is-in .tgc-hero__act { animation-delay: .85s; }
.tgc--m-mosaic .tgc-hero.is-in .tgc-hero__trust { animation-delay: 1s; }
.tgc--m-mosaic .tgc-hero.is-in .tgc-hero__moods { animation-delay: 1.15s; }
.tgc--m-mosaic .tgc-hero.is-in .tgc-finder__rating { animation-delay: 1.3s; }
.tgc--m-mosaic .tgc-hero.is-in .tgc-bento__tile { animation: tgc-z-set 1s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .14s + .2s); }

/* Facts and glance: tiles turned over in turn. */
.tgc--m-mosaic .is-in .tgc-fact, .tgc--m-mosaic .is-in .tgc-glance__item { animation: tgc-z-turn .9s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .09s + .15s); }
.tgc--m-mosaic .is-in .tgc-answer__text, .tgc--m-mosaic .is-in .tgc-more { animation: tgc-z-rise .8s cubic-bezier(.2, .7, .2, 1) .35s backwards; }

/* The explorer: each card set down like a tile; a filtered card is laid again. */
.tgc--m-mosaic .is-in .tgc-explore__bar { animation: tgc-z-rise .7s ease .1s backwards; }
.tgc--m-mosaic .is-in .tgc-act { animation: tgc-z-set 1s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .06s + .15s); }
.tgc--m-mosaic .is-in .tgc-act .tgc-z-tiles i { animation-delay: calc(var(--d) * .035s + var(--i, 0) * .06s + .3s); }

/* The map: the roads march in, the pins drop one after another; the legend follows. */
.tgc--m-mosaic .is-in .tgc-map__fig { animation: tgc-z-rise .8s ease .1s backwards; }
.tgc--m-mosaic .is-in .tgc-map__road { animation: tgc-z-march 2.4s ease .4s backwards; }
.tgc--m-mosaic .is-in .tgc-map__pin circle, .tgc--m-mosaic .is-in .tgc-map__pin text { animation: tgc-z-drop .8s cubic-bezier(.3, 1.3, .5, 1) backwards; animation-delay: calc(var(--i) * .15s + .8s); }
.tgc--m-mosaic .is-in .tgc-map__legend > li { animation: tgc-z-rise .6s ease backwards; animation-delay: calc(var(--i) * .1s + .6s); }

/* Sample days, the timeline, the seasons. */
.tgc--m-mosaic .is-in .tgc-tabs__tab { animation: tgc-z-flip .6s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .1s + .15s); }
.tgc--m-mosaic .is-in .tgc-tabs__panel { animation: tgc-z-rise .8s cubic-bezier(.2, .7, .2, 1) .5s backwards; }
.tgc--m-mosaic .is-in .tgc-timeline__item { animation: tgc-z-rise .8s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .14s + .15s); }
.tgc--m-mosaic .is-in .tgc-timeline__item::before { animation: tgc-z-pop .5s cubic-bezier(.3, 1.5, .5, 1) backwards; animation-delay: calc(var(--i) * .14s + .35s); }
.tgc--m-mosaic .tgc-timeline__year { font-variant-numeric: tabular-nums; }
.tgc--m-mosaic .is-in .tgc-season { animation: tgc-z-set 1s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .12s + .1s); }
.tgc--m-mosaic .tgc-season__bar span { transform-origin: left; }
.tgc--m-mosaic .is-in .tgc-season__bar span { animation: tgc-z-bar 1.2s cubic-bezier(.45, 0, .2, 1) backwards; animation-delay: calc(var(--i) * .12s + .6s); }

/* Tilework glinting in the navy bands. */
.tgc--m-mosaic .tgc-band--navy { position: relative; }
.tgc--m-mosaic .tgc-band--navy > .tgc-wrap { position: relative; z-index: 1; }
.tgc-z-glint { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23E2A52B' stroke-opacity='.09'%3E%3Crect x='26' y='26' width='36' height='36'/%3E%3Crect x='26' y='26' width='36' height='36' transform='rotate(45 44 44)'/%3E%3Ccircle cx='44' cy='44' r='8'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(115deg, rgba(226, 165, 43, 0) 42%, rgba(226, 165, 43, .1) 50%, rgba(226, 165, 43, 0) 58%); background-size: 88px 88px, 260% 100%; background-repeat: repeat, no-repeat; animation: tgc-z-glint 9s ease-in-out infinite; pointer-events: none; }
.tgc--m-mosaic .is-in .tgc-reason { animation: tgc-z-turn .9s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .12s + .15s); }

/* Tours, questions, the plan. */
.tgc--m-mosaic .is-in .tgc-place { animation: tgc-z-set 1s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .12s + .1s); }
.tgc--m-mosaic .is-in .tgc-faq__item { animation: tgc-z-flip .6s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .08s + .1s); transform-origin: 50% 0; }
.tgc--m-mosaic .is-in .tgc-faq__ask { animation: tgc-z-set .9s ease .2s backwards; }
.tgc--m-mosaic .is-in .tgc-booking__summary { animation: tgc-z-turn 1s cubic-bezier(.2, .7, .2, 1) .15s backwards; }
.tgc--m-mosaic .is-in .tgc-booking__form { animation: tgc-z-rise .9s cubic-bezier(.2, .7, .2, 1) .3s backwards; }

@media (max-width: 1024px) {
	.tgc-z-star { top: 38%; right: -200px; width: 480px; height: 480px; margin-top: -240px; }
}
@media (prefers-reduced-motion: reduce) {
	.tgc-z-star, .tgc-z-glint { animation: none; }
}