/* ===== Learn More popup · Owner card · Video popup · animation effects =====
   Used by the website (learn.js) and by the admin preview (admin/pages/about.php). */

@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}

/* ---------- keyframes ---------- */
@keyframes lmFade{from{opacity:0}to{opacity:1}}
@keyframes lmUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes lmPop{from{opacity:0;transform:translateY(24px) scale(.92)}to{opacity:1;transform:none}}
@keyframes lmItem{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes lmLogo{0%{opacity:0;transform:scale(.4) rotate(-25deg)}70%{transform:scale(1.1) rotate(4deg)}100%{opacity:1;transform:none}}
@keyframes lmShine{0%,60%{left:-70%}100%{left:140%}}
@keyframes oaIn{0%{opacity:0;transform:scale(.55)}70%{transform:scale(1.07)}100%{opacity:1;transform:none}}
@keyframes oaSpin{to{transform:rotate(360deg)}}
@keyframes oaWave{from{transform:scale(1);opacity:.75}to{transform:scale(1.55);opacity:0}}
@keyframes oaFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes oaShadow{0%,100%{box-shadow:0 10px 18px rgba(11,42,91,.28)}50%{box-shadow:0 24px 26px rgba(11,42,91,.14)}}
@keyframes oaBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes oaSwing{0%,100%{transform:perspective(500px) rotateY(-16deg)}50%{transform:perspective(500px) rotateY(16deg)}}
@keyframes vaWave{from{transform:scale(1);opacity:.7}to{transform:scale(2);opacity:0}}
@keyframes vaBounce{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-9px) scale(.96,1.05)}55%{transform:translateY(0) scale(1.07,.93)}75%{transform:translateY(-3px)}}
@keyframes vaGlow{0%,100%{box-shadow:0 0 0 0 rgba(var(--rip),0),0 0 10px 1px rgba(var(--rip),.45)}50%{box-shadow:0 0 0 6px rgba(var(--rip),.15),0 0 28px 8px rgba(var(--rip),.85)}}
@keyframes vmIn{from{opacity:0;transform:scale(.82) translateY(30px)}to{opacity:1;transform:none}}
@keyframes vmSpin{to{--ang:360deg}}
@keyframes vmLoad{to{transform:rotate(360deg)}}

/* ---------- owner photo (effect classes: oa-ring / oa-pulse / oa-float / oa-zoom / oa-tilt / oa-none) ---------- */
.o-photo{position:relative;width:128px;height:128px;flex:none;border-radius:50%;animation:oaIn .8s cubic-bezier(.2,.9,.25,1) both}
.o-photo::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--red,#e11d2e),var(--navy,#0b2a5b),#f59e0b,var(--red,#e11d2e))}
.o-clip{position:absolute;inset:6px;border-radius:50%;overflow:hidden;background:var(--soft,#f6f8fc);display:flex;align-items:center;justify-content:center}
.o-clip img{width:100%;height:100%;object-fit:cover;display:block}
.o-clip b{font-size:46px;font-weight:800;color:var(--navy,#0b2a5b)}
@media (prefers-color-scheme:dark){.o-clip b{color:#fff}}

.oa-ring::before{animation:oaSpin 3.5s linear infinite}
.oa-pulse::before{background:var(--red,#e11d2e);inset:-2px;opacity:.55;animation:oaWave 2.2s ease-out infinite}
.oa-pulse::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:var(--navy,#0b2a5b);opacity:.45;animation:oaWave 2.2s ease-out 1.1s infinite}
.oa-pulse .o-clip{inset:0;border:5px solid #fff;box-shadow:0 0 0 2px var(--red,#e11d2e)}
.oa-float{animation:oaIn .8s both,oaFloat 3.2s ease-in-out .8s infinite}
.oa-float::before{box-shadow:0 12px 20px rgba(11,42,91,.3);animation:oaShadow 3.2s ease-in-out .8s infinite}
.oa-zoom .o-clip img{animation:oaBreath 5s ease-in-out infinite}
.oa-tilt{animation:oaIn .8s both,oaSwing 4.5s ease-in-out .8s infinite}
.oa-none::before{background:var(--line,#e8ecf3)}

/* ---------- video play button (effect classes: va-pulse / va-bounce / va-glow / va-none) ---------- */
.pbtn{--s:68px;--rip:255,255,255;position:relative;isolation:isolate;display:grid;place-items:center;width:var(--s);height:var(--s);border-radius:50%;border:0;padding:0;background:#fff;color:var(--red,#e11d2e);cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.28);transition:transform .2s}
.pbtn svg{width:42%;height:42%;margin-inline-start:6%;fill:currentColor;display:block}
.pbtn:hover{transform:scale(1.1)}
.pbtn:focus-visible{outline:3px solid #f59e0b;outline-offset:3px}
.va-pulse::before,.va-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(var(--rip),.55);z-index:-1;animation:vaWave 2s ease-out infinite}
.va-pulse::after{animation-delay:1s}
.va-bounce{animation:vaBounce 1.6s ease-in-out infinite}
.va-glow{animation:vaGlow 2s ease-in-out infinite}

/* hero round video button (next to "Learn More") */
.vbtn{--s:50px;--rip:225,29,46;background:var(--red,#e11d2e);color:#fff;align-self:center;box-shadow:0 8px 20px rgba(225,29,46,.38);flex:none}
.vbtn[hidden]{display:none}

/* ---------- Learn More popup ---------- */
.lm-bg{position:fixed;inset:0;z-index:10010;display:none;align-items:flex-end;justify-content:center;background:rgba(7,16,38,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lm-bg.show{display:flex;animation:lmFade .3s ease both}
.lm-box{position:relative;width:100%;max-width:720px;max-height:92vh;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--card);color:var(--text);border-radius:24px 24px 0 0;padding:24px 20px calc(26px + env(safe-area-inset-bottom,0px));box-shadow:0 -20px 60px rgba(0,0,0,.35);animation:lmUp .45s cubic-bezier(.2,.9,.25,1) both}
.lm-box::before{content:"";display:block;width:44px;height:4px;border-radius:4px;background:var(--line);margin:-10px auto 14px}
@media(min-width:700px){.lm-bg{align-items:center;padding:24px}.lm-box{border-radius:26px;padding:34px;animation-name:lmPop}.lm-box::before{display:none}}
.lm-in{opacity:0;animation:lmItem .6s ease forwards;animation-delay:calc(var(--i,0) * .13s + .12s)}
.lm-x{position:sticky;top:0;float:inline-end;z-index:5;width:40px;height:40px;margin:-6px 0 0 8px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:transform .25s,background .2s}
.lm-x:hover{transform:rotate(90deg);background:var(--soft)}
html[dir=rtl] .lm-x{margin:-6px 8px 0 0}

.lm-head{display:flex;align-items:center;gap:16px;padding-inline-end:48px}
.lm-logo{position:relative;flex:none;width:64px;height:64px;border-radius:16px;overflow:hidden;background:var(--card);box-shadow:0 8px 22px rgba(11,42,91,.22);animation:lmLogo .9s cubic-bezier(.2,.9,.25,1) .2s both}
.lm-logo>*{width:100%;height:100%;object-fit:contain;display:block}
.lm-logo::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:lmShine 3.6s ease-in-out 1.2s infinite}
.lm-head h3{font-size:22px;line-height:1.2;color:var(--navy);margin:4px 0 0}
@media (prefers-color-scheme:dark){.lm-head h3{color:#fff}}
.lm-co{margin-top:18px;color:var(--muted);font-size:14.5px;line-height:1.7}
.lm-co p{margin:0 0 12px}

.lm-vid{position:relative;display:block;width:100%;margin-top:18px;border:0;padding:0;border-radius:18px;overflow:hidden;cursor:pointer;aspect-ratio:16/9;color:#fff;background:linear-gradient(135deg,#1e3a6e,var(--navy) 55%,var(--red));box-shadow:0 14px 34px rgba(11,42,91,.28)}
.lm-vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.lm-vid:hover img{transform:scale(1.07)}
.lm-vid::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(7,16,38,.78))}
.lm-vid .pbtn{position:absolute;inset:0;margin:auto;z-index:2;pointer-events:none}
.lm-vid:hover .pbtn{transform:scale(1.12)}
.lm-vid .cap{position:absolute;inset-inline:16px;bottom:12px;z-index:2;font-weight:700;font-size:14px;text-align:start;text-shadow:0 2px 8px rgba(0,0,0,.5)}

.lm-owner{display:grid;grid-template-columns:128px 1fr;gap:22px;align-items:center;margin-top:20px;padding:20px;border-radius:20px;background:linear-gradient(135deg,var(--soft),var(--card));border:1px solid var(--line)}
.lm-owner .eyebrow{margin-bottom:2px}
.lm-owner h4{margin:0;font-size:20px;color:var(--navy)}
@media (prefers-color-scheme:dark){.lm-owner h4{color:#fff}}
.lm-owner em{display:block;font-style:normal;font-weight:700;font-size:13px;color:var(--red);margin:2px 0 8px}
.lm-owner p{margin:0 0 8px;font-size:14px;line-height:1.7;color:var(--muted)}
@media(max-width:520px){.lm-owner{grid-template-columns:1fr;justify-items:center;text-align:center;padding:22px 18px}}

.lm-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.lm-cta .btn{flex:1 1 200px;text-align:center}

/* ---------- video popup ---------- */
.vm-bg{position:fixed;inset:0;z-index:10020;display:none;align-items:center;justify-content:center;padding:16px;background:radial-gradient(circle at 50% 38%,rgba(30,58,110,.92),rgba(3,8,20,.97));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.vm-bg.show{display:flex;animation:lmFade .3s ease both}
.vm-box{width:min(960px,100%);animation:vmIn .5s cubic-bezier(.2,.9,.25,1) both}
.vm-box.vert{width:min(380px,100%,calc(80vh * .5625));width:min(380px,100%,calc(80dvh * .5625))}
.vm-glow{padding:3px;border-radius:22px;background:conic-gradient(from var(--ang),var(--red,#e11d2e),#f59e0b,var(--navy,#0b2a5b),#38bdf8,var(--red,#e11d2e));animation:vmSpin 6s linear infinite;box-shadow:0 0 40px rgba(225,29,46,.35),0 30px 80px rgba(0,0,0,.6)}
.vm-frame{position:relative;aspect-ratio:16/9;border-radius:19px;overflow:hidden;background:#000}
.vm-box.vert .vm-frame{aspect-ratio:9/16}
.vm-frame iframe,.vm-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;background:#000}
.vm-load{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;border:4px solid rgba(255,255,255,.2);border-top-color:#fff;animation:vmLoad .8s linear infinite}
.vm-x{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#111;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.4);transition:transform .25s}
.vm-x:hover{transform:rotate(90deg) scale(1.08)}
.vm-cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;color:rgba(255,255,255,.85);font-size:13px;font-weight:600}
.vm-cap a{color:#fff;text-decoration:underline}

@media (prefers-reduced-motion:reduce){
 .o-photo,.o-photo::before,.o-photo::after,.o-clip img,.pbtn,.pbtn::before,.pbtn::after,.lm-logo::after,.vm-glow{animation:none!important}
 .lm-in{opacity:1;animation:none}
}

html.lm-lock,html.lm-lock body{overflow:hidden}

/* ===== Our Presence – flag slider ===== */
@keyframes fwave{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
@keyframes fshade{from{background-position:0 0}to{background-position:-192px 0}}
@keyframes ccur{0%,100%{box-shadow:0 14px 34px rgba(22,163,74,.22)}50%{box-shadow:0 20px 46px rgba(22,163,74,.38)}}
.cslider{position:relative;margin-top:30px}
.ctrack{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:14px 12px 16px;overscroll-behavior-x:contain}
.ctrack::-webkit-scrollbar{display:none}
.ctrack .ccard{flex:0 0 min(44%,148px);scroll-snap-align:center;transform:scale(.9);opacity:.6;transition:transform .55s cubic-bezier(.2,.9,.25,1),opacity .55s,box-shadow .55s;padding:14px 10px 14px}
.ctrack .ccard.cur{transform:scale(1.03);opacity:1}
.ctrack .ccard.on.cur{animation:ccur 2.6s ease-in-out infinite}
.ctrack .ccard.lk{background:linear-gradient(160deg,var(--card),rgba(255,190,0,.12) 55%,rgba(141,21,59,.12))}
.cflag{width:96px;height:64px;margin:0 auto 4px;animation:none!important;filter:none}
.ccard.pend .cflag{filter:grayscale(1);opacity:.6}
.cflag:after{display:none!important}
.cflag .fw,.cflag .fsh{position:absolute;left:0;top:0;width:96px;height:64px}
.cflag .fw{filter:drop-shadow(0 5px 6px rgba(0,0,0,.28))}
.cflag .fw i{position:absolute;top:0;height:100%;animation:fwave 1.9s ease-in-out infinite}
.cflag .fw i:first-child{border-radius:6px 0 0 6px}.cflag .fw i:last-child{border-radius:0 6px 6px 0}
.cflag .fsh{background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(0,0,0,.2) 25%,rgba(255,255,255,.28) 50%,rgba(0,0,0,.2) 75%,rgba(255,255,255,.28));background-size:192px 100%;animation:fshade 3.4s linear infinite;mix-blend-mode:soft-light;pointer-events:none;border-radius:6px}
.ccard.pend .cflag .fw i{animation-duration:3.4s}
.cflag .cemo{font-size:46px;line-height:64px;display:block;text-align:center;animation:flagfloat 3s ease-in-out infinite}
.ccard.lk .cflag:before{content:"";position:absolute;inset:-14px -20px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,190,0,.35),transparent);animation:cring 2.6s ease-out infinite;pointer-events:none}
.cnav{position:absolute;top:50%;margin-top:-20px;z-index:3;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--navy);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.14);display:none;transition:transform .2s,background .2s}
.cnav:hover{transform:scale(1.1);background:var(--soft)}
.cnav.prev{left:2px}.cnav.next{right:2px}
html[dir=rtl] .cnav.prev{left:auto;right:2px;transform:scaleX(-1)}html[dir=rtl] .cnav.next{right:auto;left:2px;transform:scaleX(-1)}
@media(min-width:700px){.cnav{display:block}.ctrack .ccard{flex-basis:148px}.ctrack{padding-inline:calc(50% - 74px)}}
.cdots{display:flex;gap:8px;justify-content:center;margin-top:2px}
.cdot{width:9px;height:9px;border-radius:9px;border:0;padding:0;background:var(--line);cursor:pointer;transition:width .3s,background .3s}
.cdot.on{width:26px;background:var(--red)}
@media (prefers-reduced-motion:reduce){.cflag .fw i,.cflag .fsh,.ctrack .ccard.on.cur{animation:none!important}}

.ctrack .ccard h3{font-size:14.5px;margin:8px 0 6px}.ctrack .ccard .cbadge{font-size:10.5px;padding:3px 10px}.ctrack .ccard .cco{font-size:13px;margin-top:8px}.ctrack .ccard .cbr span{font-size:11px;padding:3px 9px}

.ctrack .ccard{min-width:0}.ctrack .ccard h3{overflow-wrap:anywhere}
@media(max-width:360px){.ctrack .ccard{flex-basis:46%}}
@media(min-width:1000px){.ctrack{padding-inline:calc(50% - 74px)}}

/* ===== floating video button (under the WhatsApp button) ===== */
.vfloat{--s:40px;position:fixed;z-index:9998;left:calc(14px + env(safe-area-inset-left,0px));right:auto;top:min(calc(50% + 72px),calc(100% - 90px));margin:0}
.vfloat.right{left:auto;right:calc(14px + env(safe-area-inset-right,0px))}
body.lp .vfloat{display:none}
html.lm-lock .vfloat{display:none}