/**
 * Catalog motion, style "harbour" (the shore excursions hub, 2026-09-28). The sea's language: headings rise
 * like a tide behind a wavy edge, cards float in and settle like boats, icons send out sonar rings, photos open
 * through a porthole, reviews drift up like bubbles, the day's route is sailed by a ship, the ports blink with
 * harbour lights. catalog-motion.js arms each block; entrances keep a backwards fill, so hovers keep working;
 * an entrance on an element that also rocks on hover stops matching once the block is done (is-done).
 */
@keyframes tgc-h-tide { from { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes tgc-h-float { 0% { opacity: 0; transform: translateY(46px) rotate(-3deg); } 45% { opacity: 1; transform: translateY(-8px) rotate(1.6deg); } 70% { transform: translateY(3px) rotate(-.8deg); } }
@keyframes tgc-h-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(.8deg); } }
@keyframes tgc-h-sonar { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(2.3); } }
@keyframes tgc-h-pass { from { opacity: 0; transform: translateX(60px); } }
@keyframes tgc-h-moor { from { opacity: 0; transform: translateX(var(--from, -50px)) rotate(var(--tilt, -2deg)); } }
@keyframes tgc-h-port { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes tgc-h-bubble { 0% { opacity: 0; transform: translateY(70px) scale(.92) rotate(var(--sway, 1deg)); } 60% { opacity: 1; transform: translateY(-6px) scale(1) rotate(calc(var(--sway, 1deg) * -1)); } }
@keyframes tgc-h-swell { to { transform: translateX(-50%); } }
@keyframes tgc-h-fill { from { transform: scaleY(0); } }
@keyframes tgc-h-blink { 0%, 100% { opacity: .35; box-shadow: 0 0 0 0 transparent; } 50% { opacity: 1; box-shadow: 0 0 12px 3px currentColor; } }
@keyframes tgc-h-sweep { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes tgc-h-lit { 0% { transform: scale(.7); } 45% { background: #e6f4f9; box-shadow: 0 0 0 10px rgba(26, 110, 138, .18), 0 0 22px rgba(26, 110, 138, .45); transform: scale(1.16); } }
@keyframes tgc-h-rise { from { opacity: 0; transform: translateY(18px); } }

/* Things slide in from the sides: a block never lets them widen the page (clip keeps sticky parts sticky). */
.tgc--m-harbour .tgc-band, .tgc--m-harbour .tgc-catalog { overflow-x: clip; }

/* Out of sight until its block plays. */
.tgc--m-harbour .is-armed:not(.is-in) .tgc-head > :not(.tgc-title),
.tgc--m-harbour .tgc-hero.is-armed:not(.is-in) .tgc-hero__inner > :not(.tgc-hero__title),
.tgc--m-harbour .is-armed:not(.is-in) .tgc-strip__item,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-card,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-filter,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-choose__item,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-answer__text,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-answer__copy > :not(.tgc-head),
.tgc--m-harbour .is-armed:not(.is-in) .tgc-fact,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-table tbody tr,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-reason,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-stop,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-place,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-gallery img,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-pricing__col,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-review,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-names li,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-booking__summary,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-booking__form,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-faq__item,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-faq__ask,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-cta > *,
.tgc--m-harbour .is-armed:not(.is-in) .tgc-micro li { opacity: 0; }

/* Headings rise like a tide behind a wavy edge; the rest of the heading follows. */
.tgc--m-harbour .is-in .tgc-title,
.tgc--m-harbour .tgc-hero.is-in .tgc-hero__title { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 100 Q 25 86 50 100 T 100 100 T 150 100 T 200 100 V200 H0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 100 Q 25 86 50 100 T 100 100 T 150 100 T 200 100 V200 H0z'/%3E%3C/svg%3E"); -webkit-mask-size: 260px 200%; mask-size: 260px 200%; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-position: -260px 100%; mask-position: -260px 100%; animation: tgc-h-tide 1.3s cubic-bezier(.45, 0, .2, 1) backwards; }
.tgc--m-harbour .tgc-hero.is-in .tgc-hero__title { animation-duration: 1.6s; animation-delay: .15s; }
.tgc--m-harbour .is-in .tgc-head > :not(.tgc-title) { animation: tgc-h-rise .8s cubic-bezier(.2, .7, .2, 1) .45s backwards; }
.tgc--m-harbour .is-in .tgc-head > .tgc-kicker { animation-delay: 0s; }
.tgc--m-harbour .tgc-hero.is-in .tgc-hero__inner > :not(.tgc-hero__title) { animation: tgc-h-rise .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.tgc--m-harbour .tgc-hero.is-in .tgc-hero__lead { animation-delay: .9s; }
.tgc--m-harbour .tgc-hero.is-in .tgc-finder__rating { animation-delay: 1.05s; }
.tgc--m-harbour .tgc-hero.is-in .tgc-finder { animation: tgc-h-float 1.2s cubic-bezier(.2, .7, .2, 1) 1.15s backwards; }

/* The sea: two layers of waves moving at their own pace under the hero, the navy band and the last call. */
.tgc--m-harbour .tgc-hero, .tgc--m-harbour .tgc-band--navy, .tgc--m-harbour .tgc-band--cta { position: relative; overflow-x: clip; }
.tgc--m-harbour .tgc-band--navy > .tgc-wrap, .tgc--m-harbour .tgc-band--cta > .tgc-wrap { position: relative; z-index: 1; }
.tgc-h-sea { position: absolute; right: 0; bottom: 0; left: 0; z-index: -1; height: 64px; pointer-events: none; }
.tgc-band--navy .tgc-h-sea, .tgc-band--cta .tgc-h-sea { z-index: 0; }
.tgc-h-sea > span { position: absolute; bottom: 0; left: 0; display: flex; width: 200%; height: 100%; animation: tgc-h-swell 18s linear infinite; }
.tgc-h-sea > span + span { height: 70%; opacity: .7; animation-duration: 12s; animation-direction: reverse; }
.tgc-h-sea svg { flex: 1; height: 100%; }
.tgc-hero .tgc-h-sea path { fill: rgba(159, 212, 230, .14); }
.tgc-band--navy .tgc-h-sea path { fill: rgba(159, 212, 230, .08); }
.tgc-band--cta .tgc-h-sea path { fill: rgba(26, 110, 138, .08); }

/* The promise strip passes like a ship, left to right; each icon sends a sonar ring. */
.tgc--m-harbour .tgc-strip__icon, .tgc--m-harbour .tgc-reason__icon, .tgc--m-harbour .tgc-booking__list .tgc-ico { position: relative; }
.tgc--m-harbour .tgc-strip__icon::after, .tgc--m-harbour .tgc-reason__icon::after { content: ''; position: absolute; inset: -1px; border: 1px solid #9fd4e6; border-radius: 50%; opacity: 0; pointer-events: none; }
.tgc--m-harbour .is-in .tgc-strip__item { animation: tgc-h-pass .8s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .12s); }
.tgc--m-harbour .is-in .tgc-strip__icon::after { animation: tgc-h-sonar 1.6s ease-out 2 backwards; animation-delay: calc(var(--i) * .12s + .5s); }

/* Excursions float in and settle like boats; a hovered card rocks on the water. */
.tgc--m-harbour .is-in .tgc-filter { animation: tgc-h-rise .7s ease backwards; }
.tgc--m-harbour .is-in:not(.is-done) .tgc-card { animation: tgc-h-float 1.2s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .1s + .15s); }
.tgc--m-harbour .tgc-card:hover { animation: tgc-h-bob 2.4s ease-in-out infinite; }
.tgc--m-harbour .tgc-card__media img { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.tgc--m-harbour .tgc-card:hover .tgc-card__media img { transform: scale(1.07); }

/* Time in port: each card is a tide gauge, filled to its hours on a 12-hour scale. */
.tgc--m-harbour .tgc-choose__item.has-gauge { position: relative; overflow: hidden; isolation: isolate; }
.tgc-h-gauge { position: absolute; right: 0; bottom: 0; left: 0; z-index: -1; height: calc(var(--lvl) * 100%); transform-origin: bottom; pointer-events: none; }
.tgc-h-gauge i { position: absolute; inset: 14px 0 0; background: linear-gradient(180deg, rgba(159, 212, 230, .32), rgba(159, 212, 230, .14)); }
.tgc-h-gauge b { position: absolute; top: 0; left: 0; width: 200%; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 15'%3E%3Cpath d='M0 8 Q 15 0 30 8 T 60 8 T 90 8 T 120 8 V15 H0z' fill='%239fd4e6' fill-opacity='.32'/%3E%3C/svg%3E") repeat-x 0 0 / 120px 15px; animation: tgc-h-swell 7s linear infinite; }
.tgc--m-harbour .is-in .tgc-choose__item { animation: tgc-h-float 1.1s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .12s + .1s); }
.tgc--m-harbour .is-in .tgc-h-gauge { animation: tgc-h-fill 1.8s cubic-bezier(.45, 0, .2, 1) backwards; animation-delay: calc(var(--i) * .12s + .6s); }

/* Answers, facts, reasons: rise; the navy band's icons ping in turn. */
.tgc--m-harbour .is-in .tgc-answer__text, .tgc--m-harbour .is-in .tgc-answer__copy > :not(.tgc-head) { animation: tgc-h-rise .8s cubic-bezier(.2, .7, .2, 1) .35s backwards; }
.tgc--m-harbour .is-in .tgc-fact { animation: tgc-h-float 1.1s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .1s + .2s); }
.tgc--m-harbour .is-in .tgc-reason { animation: tgc-h-rise .8s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .1s + .15s); }
.tgc--m-harbour .is-in:not(.is-done) .tgc-reason__icon::after { animation: tgc-h-sonar 1.6s ease-out backwards; animation-delay: calc(var(--i) * .1s + .45s); }
.tgc--m-harbour .tgc-reason:hover .tgc-reason__icon::after { animation: tgc-h-sonar 1.4s ease-out infinite; }

/* The comparison: rows come in on the tide, a light passes along our column. */
.tgc--m-harbour .is-in .tgc-table tbody tr { animation: tgc-h-pass .6s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .08s + .1s); }
.tgc--m-harbour .tgc-h-us { background-image: linear-gradient(90deg, rgba(159, 212, 230, 0), rgba(159, 212, 230, .35), rgba(159, 212, 230, 0)); background-repeat: no-repeat; background-size: 60% 100%; background-position: 150% 0; }
.tgc--m-harbour .is-in .tgc-h-us { animation: tgc-h-sweep 1.4s ease-in-out backwards; animation-delay: calc(var(--i, 0) * .08s + .5s); }
.tgc--m-harbour .is-in tbody .tgc-h-us { animation-delay: calc(var(--i) * .1s + .6s); }

/* The day's route, sailed: a ship goes down the line and lights each stop as it arrives. */
.tgc--m-harbour .tgc-route { position: relative; }
.tgc-h-ship { position: absolute; top: 28px; left: 27px; z-index: 2; width: 38px; margin: -10px 0 0 -19px; opacity: 0; pointer-events: none; }
.tgc-h-ship svg { display: block; width: 38px; height: 19px; animation: tgc-h-bob 2.4s ease-in-out infinite; }
.tgc--m-harbour .is-in .tgc-h-ship { opacity: 1; transition: opacity .4s ease .2s; }
.tgc--m-harbour .is-in .tgc-stop { animation: tgc-h-rise .7s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: var(--t, calc(var(--i) * 1.1s + .3s)); }
.tgc--m-harbour .is-in .tgc-stop__no { animation: tgc-h-lit .9s ease backwards; animation-delay: var(--t, calc(var(--i) * 1.1s + .3s)); }

/* Ports moor from both sides; each carries a harbour light. Photos open through a porthole. */
.tgc--m-harbour .tgc-band--places .tgc-place { position: relative; }
.tgc--m-harbour .is-in .tgc-place { animation: tgc-h-moor 1s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .12s + .1s); }
.tgc--m-harbour .is-in .tgc-place:nth-child(even) { --from: 50px; --tilt: 2deg; }
.tgc-h-light { position: absolute; top: 18px; right: 18px; width: 9px; height: 9px; border-radius: 50%; background: currentColor; animation: tgc-h-blink 3.2s ease-in-out infinite; }
.tgc-h-light--red { color: #e0584a; }
.tgc-h-light--green { color: #3fbf7f; animation-delay: -1.6s; }
.tgc--m-harbour .is-in .tgc-gallery img { animation: tgc-h-port 1.2s cubic-bezier(.55, 0, .25, 1) backwards; animation-delay: calc(var(--i) * .14s + .1s); }
.tgc--m-harbour .tgc-gallery .tgt-car__slide { overflow: hidden; border-radius: 16px; }
.tgc--m-harbour .tgc-gallery img { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.tgc--m-harbour .tgc-gallery .tgt-car__slide:hover img { transform: scale(1.06); }

/* Included and not: the columns float in, each line comes on the tide. */
.tgc--m-harbour .is-in .tgc-pricing__col { animation: tgc-h-float 1.1s cubic-bezier(.2, .7, .2, 1) backwards; }
.tgc--m-harbour .is-in .tgc-pricing__col--excluded { animation-delay: .15s; }
.tgc--m-harbour .is-in .tgc-pricing__col li { animation: tgc-h-pass .5s ease backwards; animation-delay: calc(var(--i) * .08s + .4s); }

/* Reviews drift up like bubbles, each with its own sway. */
.tgc--m-harbour .is-in .tgc-review { animation: tgc-h-bubble 1.3s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .18s + .1s); }
.tgc--m-harbour .tgc-review { transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease; }
.tgc--m-harbour .tgc-review:hover { box-shadow: 0 20px 40px rgba(11, 51, 69, .12); transform: translateY(-5px); }

/* Cruise lines light up one by one, like harbour lights at dusk. */
.tgc--m-harbour .is-in .tgc-names li { animation: tgc-h-dusk .9s ease backwards; animation-delay: calc(var(--i) * .09s + .2s); }
@keyframes tgc-h-dusk { 0% { opacity: 0; } 50% { opacity: 1; box-shadow: 0 0 0 4px rgba(159, 212, 230, .35), 0 8px 20px rgba(26, 110, 138, .18); } }
.tgc--m-harbour .tgc-names li:hover .tgc-ico { animation: tgc-h-bob 1.6s ease-in-out infinite; }

/* Booking: the summary docks from the left, the form from the right; the list's icons ping. */
.tgc--m-harbour .is-in .tgc-booking__summary { animation: tgc-h-moor 1s cubic-bezier(.2, .7, .2, 1) .15s backwards; }
.tgc--m-harbour .is-in .tgc-booking__form { animation: tgc-h-moor 1s cubic-bezier(.2, .7, .2, 1) .3s backwards; --from: 50px; --tilt: 1deg; }
.tgc--m-harbour .is-in .tgc-booking__list li { animation: tgc-h-pass .5s ease backwards; animation-delay: calc(var(--i) * .1s + .6s); }

/* Questions, the last call. The WhatsApp buttons sound like a ship's horn: two rings. */
.tgc--m-harbour .is-in .tgc-faq__item { animation: tgc-h-pass .55s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .08s + .1s); }
.tgc--m-harbour .is-in .tgc-faq__ask { animation: tgc-h-float 1s cubic-bezier(.2, .7, .2, 1) .2s backwards; }
.tgc--m-harbour .is-in .tgc-cta > * { animation: tgc-h-float 1s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .12s + .35s); }
.tgc--m-harbour .is-in .tgc-micro li { animation: tgc-h-rise .5s ease backwards; animation-delay: calc(var(--i) * .14s + .8s); }
.tgc--m-harbour .tgc-cta .tgc-btn--wa, .tgc--m-harbour .tgc-booking__wa, .tgc--m-harbour .tgc-faq__ask > svg { position: relative; }
.tgc--m-harbour .tgc-cta .tgc-btn--wa::before, .tgc--m-harbour .tgc-cta .tgc-btn--wa::after, .tgc--m-harbour .tgc-booking__wa::after { content: ''; position: absolute; inset: 0; border: 2px solid rgba(37, 211, 102, .55); border-radius: inherit; opacity: 0; animation: tgc-h-horn 3.2s ease-out infinite; pointer-events: none; }
.tgc--m-harbour .tgc-cta .tgc-btn--wa::after { animation-delay: .35s; }
@keyframes tgc-h-horn { 0% { opacity: .9; transform: scale(1); } 45%, 100% { opacity: 0; transform: scale(1.35, 1.8); } }

@media (max-width: 760px) {
	.tgc-h-sea { height: 40px; }
	.tgc-h-light { top: 14px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.tgc-h-sea > span, .tgc-h-gauge b, .tgc-h-ship svg, .tgc-h-light, .tgc--m-harbour .tgc-card:hover, .tgc--m-harbour .tgc-cta .tgc-btn--wa::before, .tgc--m-harbour .tgc-cta .tgc-btn--wa::after, .tgc--m-harbour .tgc-booking__wa::after { animation: none; }
}