/*
 * Homepage hero, right side: "The Gate of Two Seas" (approved by Fadi 2026-09-27). One Moorish
 * horseshoe arch (an SVG clip path) framing a slideshow of the destinations, each named on a
 * blue enamel Tangier street plate in Arabic and English; a gold frame that draws itself in; the
 * time in Tangier; the next cruise ship from data/tangier-cruise-calls.json; round thumbnails
 * with a progress ring. Markup template-parts/home-hero.php, script assets/js/home-hero.js.
 * Slide photos: portrait 1000 x 1280 (25:32), subject in the middle, nothing important in the
 * top corners (the arch) or the bottom fifth (the plate).
 */
.tgh-hero__star, .tgh-arch { display: none !important; }
.tgh-hero__art.tgx { height: auto; display: flex; flex-direction: column; align-items: center; }
.tgx { position: relative; }
.tgx-gate { position: relative; width: 100%; max-width: 440px; aspect-ratio: 112 / 140; margin: 6px auto 0; }
.tgx-glow { position: absolute; inset: 8% -14% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(224, 196, 117, .28), rgba(224, 196, 117, 0)); filter: blur(10px); animation: tgx-breathe 7s ease-in-out infinite; }
.tgx-window { position: absolute; left: 5.357%; top: 4.286%; width: 89.286%; height: 91.429%; clip-path: url(#tgx-arch); background: #1b2635; }
.tgx-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; margin: 0; padding: 0 12% 26px; opacity: 0; transition: opacity 1.2s ease; }
.tgx-slide.is-on { opacity: 1; z-index: 1; }
.tgx-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.tgx-slide.is-on img { animation: tgx-kenburns 7.5s ease-out forwards; }
.tgx-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 22, 32, 0) 55%, rgba(14, 22, 32, .78) 100%); }
/* The place, on a Tangier enamel street plate. */
.tgx-plate { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 150px; padding: 8px 18px 7px; border-radius: 6px; background: linear-gradient(180deg, #1f5f86, #164a6b); box-shadow: inset 0 0 0 2px #164a6b, inset 0 0 0 3.5px rgba(255, 255, 255, .85), 0 10px 22px rgba(0, 0, 0, .35); color: #fff; text-align: center; transform: translateY(8px); opacity: 0; transition: opacity .6s .5s ease, transform .6s .5s ease; }
.tgx-slide.is-on .tgx-plate { opacity: 1; transform: translateY(0); }
.tgx-plate__ar { font-family: 'Noto Naskh Arabic', 'Traditional Arabic', 'Segoe UI', serif; font-size: 18px; line-height: 1.25; }
.tgx-plate__la { font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.tgx-slide__cap { position: relative; z-index: 2; margin: 0; line-height: 1.3; text-wrap: balance; color: rgba(255, 255, 255, .9); font-family: Georgia, 'Times New Roman', serif; font-size: 15px; font-style: italic; text-align: center; opacity: 0; transition: opacity .6s .8s ease; }
.tgx-slide.is-on .tgx-slide__cap { opacity: 1; }
a.tgx-slide__cap { text-decoration: none; }
a.tgx-slide__cap:hover { color: #e0c475; }
a.tgx-slide__cap:focus-visible { outline: 2px solid #e0c475; outline-offset: 4px; }
.tgx-slide:not(.is-on) .tgx-slide__cap { pointer-events: none; }
/* The gold frame draws itself in. */
.tgx-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tgx-frame path { fill: none; stroke: #c8a44a; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tgx-draw 2.2s .2s cubic-bezier(.6, .1, .2, 1) forwards; }
.tgx-frame__outer { stroke-width: .5; opacity: .55; animation-delay: .6s !important; }
.tgx-frame__inner { stroke-width: .9; }
.tgx-rose { fill: #0e1620; stroke: #e0c475; stroke-width: .6; opacity: 0; animation: tgx-pop .6s 1.6s ease forwards; }
.tgx-rose circle { fill: #e0c475; stroke: none; }
/* Live cards. */
.tgx-clock { position: absolute; bottom: 25%; left: -9%; z-index: 3; display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 14px 9px 10px; border: 1px solid rgba(248, 245, 238, .18); border-radius: 14px; background: rgba(14, 22, 32, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #f8f5ee; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); animation: tgx-float 6s ease-in-out infinite; }
.tgx-clock .tgc-ico { flex: none; width: 26px; height: 26px; color: #e0c475; }
.tgx-clock > span { display: flex; flex-direction: column; line-height: 1.15; }
.tgx-clock__k { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(248, 245, 238, .7); }
.tgx-clock strong { font-family: Georgia, 'Times New Roman', serif; font-size: 22px; font-weight: 400; color: #fff; }
.tgx-ship { position: absolute; right: -9%; top: 11%; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; width: 250px; padding: 13px 16px 12px 13px; border-radius: 16px; background: #fff; color: #0e1620; text-decoration: none; box-shadow: 0 22px 44px rgba(0, 0, 0, .4); animation: tgx-float 6s 1.5s ease-in-out infinite; transition: transform .25s ease; }
.tgx-ship:hover { color: #0e1620; }
.tgx-ship__ico { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #eaf3f7; }
.tgx-ship__ico .tgc-ico { width: 22px; height: 22px; color: #1a6e8a; }
.tgx-ship__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.tgx-ship__k { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1a6e8a; }
.tgx-ship__txt strong { overflow: hidden; font-family: Georgia, 'Times New Roman', serif; font-size: 17px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.tgx-ship__txt > span:last-child { font-size: 12.5px; color: #6b6558; }
.tgx-ship__go { grid-column: 2; font-size: 12.5px; font-weight: 700; color: #a8862e; }
/* Thumbnails, with the time left on the current picture as a ring. */
.tgx-dots { display: flex; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.tgx-dot { position: relative; display: block; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; opacity: .55; transition: opacity .3s ease, transform .3s ease; }
.tgx-dot img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tgx-dot__ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(224, 196, 117, .25); }
.tgx-dot.is-on { opacity: 1; transform: scale(1.08); }
.tgx-dot.is-on .tgx-dot__ring { border-color: transparent; background: conic-gradient(#e0c475 var(--p, 0%), rgba(224, 196, 117, .2) 0); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); }
.tgx-dot:hover, .tgx-dot:focus-visible { opacity: 1; }
.tgx-dot:focus-visible { outline: 2px solid #e0c475; outline-offset: 5px; }
.tgx-coords { position: absolute; top: 44%; right: -30px; margin: 0; color: rgba(224, 196, 117, .55); font-size: 10.5px; font-weight: 700; letter-spacing: .3em; writing-mode: vertical-rl; transform: rotate(180deg); }
@keyframes tgx-draw { to { stroke-dashoffset: 0; } }
@keyframes tgx-pop { to { opacity: 1; } }
@keyframes tgx-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes tgx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes tgx-breathe { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@media (max-width: 1099px) {
	.tgh-hero__art.tgx { width: min(100%, 520px); height: auto; }
	.tgx-gate { max-width: 420px; }
	.tgx-clock { left: 0; }
	.tgx-ship { right: 0; }
}
@media (max-width: 759px) {
	.tgh-hero__art.tgx { width: 100%; }
	.tgx-gate { width: 76%; max-width: 300px; }
	.tgx-coords { display: none; }
	.tgx-clock { top: 15%; bottom: auto; left: -4%; padding: 7px 11px 7px 8px; }
	.tgx-clock strong { font-size: 18px; }
	.tgx-clock .tgc-ico { width: 21px; height: 21px; }
	.tgx-slide { gap: 8px; padding-bottom: 18px; }
	.tgx-plate { min-width: 128px; padding: 6px 14px 5px; }
	.tgx-plate__ar { font-size: 16px; }
	.tgx-plate__la { font-size: 10.5px; }
	.tgx-slide__cap { font-size: 13.5px; }
	.tgx-ship { position: relative; top: auto; right: auto; bottom: auto; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; width: 100%; max-width: 380px; margin: 14px auto 0; padding: 10px 12px; border-radius: 14px; animation: none; }
	.tgx-ship__ico { grid-row: auto; width: 34px; height: 34px; }
	.tgx-ship__k { font-size: 9.5px; }
	.tgx-ship__txt strong { font-size: 15px; }
	.tgx-ship__txt > span:last-child { font-size: 11.5px; }
	.tgx-ship__go { grid-column: auto; font-size: 0; }
	.tgx-ship__go span { font-size: 18px; }
	.tgx-gate + .tgx-dots { margin-top: 18px; }
	.tgx-dots { gap: 10px; }
	.tgx-dot { width: 40px; height: 40px; }
}
@media (max-width: 759px) {
	/* On a phone the ship card sits under the arch, in the flow. */
	.tgx-gate { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.tgx-slide, .tgx-plate, .tgx-slide__cap { transition: none; }
	.tgx-slide.is-on img, .tgx-clock, .tgx-ship, .tgx-glow { animation: none; }
	.tgx-frame path { animation: none; stroke-dashoffset: 0; }
	.tgx-rose { animation: none; opacity: 1; }
}