/* Qticket governorate landmarks — one flat colour, real cut-outs (even-odd holes),
   built from the ground up, then one quiet signature loop per landmark.
   --lm = landmark colour, --k = time scale (1 / speed). */

.lm{direction:rtl}
.lm-stage{display:block;width:240px;height:300px;padding:0;margin:0;border:0;background:transparent;cursor:pointer;border-radius:20px;flex-shrink:0}
.lm-stage:focus-visible{outline:2px solid var(--lm);outline-offset:4px}
.lm-svg{display:block;width:240px;height:300px;color:var(--lm);overflow:hidden}
.lm-name{font-weight:800;font-size:22px;line-height:28px;margin-top:4px}
.lm-sub{font-weight:500;font-size:13px;line-height:18px}
.lm-svg .ev{fill-rule:evenodd}
.lm-svg .ln{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

/* ── entrance: once, staggered by --d (seconds) ── */
.lm-svg .p{transform-box:fill-box;animation-duration:calc(.8s*var(--k));animation-timing-function:cubic-bezier(.32,.72,0,1);animation-delay:calc(var(--d,0)*1s*var(--k));animation-fill-mode:both}
.lm-svg .rise{animation-name:lmRise;transform-origin:50% 100%}
.lm-svg .grow{animation-name:lmGrow;transform-origin:50% 100%;animation-timing-function:cubic-bezier(.34,1.3,.64,1)}
.lm-svg .growx{animation-name:lmGrowX;transform-origin:0% 50%}
.lm-svg .growc{animation-name:lmGrowX;transform-origin:50% 50%}
.lm-svg .pop{animation-name:lmPop;transform-origin:50% 100%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
.lm-svg .drop{animation-name:lmGrow;transform-origin:50% 0%}
.lm-svg .fade{animation-name:lmFade}
.lm-svg .draw{stroke-dasharray:1 1;animation-name:lmDraw;animation-duration:calc(1.1s*var(--k));animation-timing-function:cubic-bezier(.65,0,.35,1)}
.lm-svg .halo{animation-name:lmHalo;transform-origin:50% 50%}
.lm-svg .shadow{animation-name:lmGrowX;transform-origin:50% 50%}
.lm-svg .roll{animation-name:lmRoll;transform-origin:50% 50%;animation-duration:calc(1.3s*var(--k))}
@keyframes lmRise{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}
@keyframes lmGrow{from{transform:scaleY(0)}to{transform:none}}
@keyframes lmGrowX{from{transform:scaleX(0)}to{transform:none}}
@keyframes lmPop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes lmFade{from{opacity:0}to{opacity:1}}
@keyframes lmDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lmHalo{from{transform:scale(0)}to{transform:none}}
@keyframes lmRoll{from{transform:rotate(-140deg) scale(.4);opacity:0}to{transform:none;opacity:1}}

/* ── signature loops: start after the build (--d), run forever ── */
.lm-svg .a{transform-box:fill-box;animation-delay:calc(var(--d,0)*1s*var(--k));animation-iteration-count:infinite;animation-fill-mode:both}
.lm-svg .breathe{animation-name:lmBreathe;animation-duration:calc(4s*var(--k));animation-timing-function:ease-in-out;animation-direction:alternate;transform-origin:50% 50%}
.lm-svg .spin{animation-name:lmSpin;animation-duration:calc(16s*var(--k));animation-timing-function:linear;transform-origin:50% 50%}
.lm-svg .spin.fast{animation-duration:calc(10s*var(--k))}
.lm-svg .flow{stroke-dasharray:3 3;animation-name:lmFlow;animation-duration:calc(.9s*var(--k));animation-timing-function:linear}
@keyframes lmFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-6}}
.lm-svg .sway{animation-name:lmSway;animation-duration:calc(3.6s*var(--k));animation-timing-function:ease-in-out;animation-direction:alternate;transform-origin:50% 100%}
.lm-svg .sway.at{transform-box:view-box}
.lm-svg .wave{animation-name:lmWave;animation-duration:calc(3.2s*var(--k));animation-timing-function:linear}
.lm-svg .wave.slow{animation-duration:calc(5s*var(--k))}
.lm-svg .wave.p24{animation-name:lmWave24;animation-duration:calc(2.6s*var(--k))}
.lm-svg .drift{animation-name:lmDrift;animation-duration:calc(9s*var(--k));animation-timing-function:ease-in-out;animation-direction:alternate}
.lm-svg .flag{animation-name:lmFlag;animation-duration:calc(1.6s*var(--k));animation-timing-function:ease-in-out;transform-origin:0% 50%}
.lm-svg .bob{animation-name:lmBob;animation-duration:calc(2.4s*var(--k));animation-timing-function:ease-in-out;animation-direction:alternate;transform-origin:50% 100%}
.lm-svg .sail{animation-name:lmSail;animation-duration:calc(10s*var(--k));animation-timing-function:ease-in-out;animation-direction:alternate}
.lm-svg .glide{animation-name:lmGlide;animation-duration:calc(7s*var(--k));animation-timing-function:ease-in-out;animation-direction:alternate}
.lm-svg .flap{animation-name:lmFlap;animation-duration:calc(.5s*var(--k));animation-timing-function:ease-in-out;animation-direction:alternate;transform-origin:50% 100%}
.lm-svg .glint{animation-name:lmGlint;animation-duration:calc(3s*var(--k));animation-timing-function:ease-in-out;transform-origin:50% 50%}
.lm-svg .ripple{animation-name:lmRipple;animation-duration:calc(3.2s*var(--k));animation-timing-function:ease-in-out}
.lm-svg .drip{animation-name:lmDrip;animation-duration:calc(1.8s*var(--k));animation-timing-function:cubic-bezier(.55,0,1,.45)}
.lm-svg .hand{transform-box:view-box;animation-name:lmHand;animation-timing-function:linear;animation-iteration-count:infinite}
.lm-svg .hand.m{animation-duration:calc(9s*var(--k))}
.lm-svg .hand.h{animation-duration:calc(108s*var(--k))}
@keyframes lmBreathe{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes lmSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes lmSway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes lmWave{from{transform:translateX(0)}to{transform:translateX(-40px)}}
@keyframes lmWave24{from{transform:translateX(0)}to{transform:translateX(-24px)}}
@keyframes lmDrift{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
@keyframes lmFlag{0%,100%{transform:none}50%{transform:skewY(-6deg) scaleX(.9)}}
@keyframes lmBob{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-2px) rotate(3deg)}}
@keyframes lmSail{from{transform:translateX(-22px)}to{transform:translateX(22px)}}
@keyframes lmGlide{from{transform:translate(-10px,3px)}to{transform:translate(10px,-3px)}}
@keyframes lmFlap{from{transform:scaleY(1)}to{transform:scaleY(-.6)}}
@keyframes lmGlint{0%,70%,100%{transform:none}80%{transform:scale(1.25) rotate(-12deg)}}
@keyframes lmRipple{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes lmDrip{0%{transform:translateY(0);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translateY(126px);opacity:0}}
@keyframes lmHand{from{transform:rotate(var(--a,0deg))}to{transform:rotate(calc(var(--a,0deg) + 360deg))}}

/* collection tiles (Main) */
.lm-tile{position:relative;width:180px;height:240px;border-radius:17px;overflow:hidden;box-shadow:0 1px 2px rgba(12,16,19,.06),0 10px 28px rgba(12,16,19,.07)}
.lm-tile-in{position:absolute;top:0;right:0;width:300px;height:400px;transform:scale(.6);transform-origin:top right}

@media (prefers-reduced-motion: reduce){.lm-svg *{animation:none !important}}