/* ==========================================================================
   Motion and interaction styles
   ========================================================================== */
/* ---------- header ---------- */
.sitehdr{transition:box-shadow .3s,background .3s}
.sitehdr .hwrap{transition:padding .3s}
.sitehdr.scrolled{box-shadow:0 10px 30px -18px rgba(15,34,51,.35)}
.sitehdr.scrolled .hwrap{padding-top:6px;padding-bottom:6px}
.sitehdr:after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--mint),var(--sky),var(--sand),var(--mint));background-size:300% 100%;animation:hdrline 9s linear infinite;opacity:.85}
@keyframes hdrline{to{background-position:300% 0}}
.sprog{position:absolute;top:0;inset-inline:0;height:3px;z-index:3;pointer-events:none}
.sprog i{display:block;height:100%;background:linear-gradient(90deg,var(--sand),var(--mint));transform-origin:left;transform:scaleX(0)}
[dir=rtl] .sprog i{transform-origin:right}
.sitehdr .bmark .ring{stroke-dasharray:90;stroke-dashoffset:90;animation:ringdraw 1.4s .1s ease-out forwards}
@keyframes ringdraw{to{stroke-dashoffset:0}}
.bmark .n1,.bmark .n2{transform-origin:16px 16px;transform-box:view-box;animation:needle 6s ease-in-out infinite}
@keyframes needle{0%,100%{transform:rotate(-10deg)}20%{transform:rotate(14deg)}40%{transform:rotate(-6deg)}55%{transform:rotate(4deg)}70%{transform:rotate(0)}}
.brand:hover .bmark .n1,.brand:hover .bmark .n2{animation:spin360 1.1s cubic-bezier(.3,1.4,.5,1)}
@keyframes spin360{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.bname{background:linear-gradient(90deg,var(--ink) 0,var(--ink) 40%,var(--mint) 50%,var(--ink) 60%,var(--ink) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:namesheen 7s ease-in-out infinite}
@keyframes namesheen{0%,60%{background-position:100% 0}100%{background-position:-150% 0}}
.sitenav{position:relative}
.sitenav a{position:relative;z-index:1;transition:color .2s}
.sitenav a.on{background:none;box-shadow:none;color:var(--mint);font-weight:600}
.navind{position:absolute;top:0;left:0;height:100%;border-radius:10px;background:rgba(var(--accrgb),.1);border-bottom:2px solid var(--mint);transition:transform .35s cubic-bezier(.4,1.3,.5,1),width .35s cubic-bezier(.4,1.3,.5,1),opacity .2s;z-index:0;pointer-events:none}
.sitenav a{opacity:0;animation:navin .5s ease-out forwards}
.sitenav a:nth-child(1){animation-delay:.05s}.sitenav a:nth-child(2){animation-delay:.1s}.sitenav a:nth-child(3){animation-delay:.15s}.sitenav a:nth-child(4){animation-delay:.2s}
.sitenav a:nth-child(5){animation-delay:.25s}.sitenav a:nth-child(6){animation-delay:.3s}.sitenav a:nth-child(7){animation-delay:.35s}
@keyframes navin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.btn.shine{position:relative;overflow:hidden}
.btn.shine:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}
[data-act=theme] .ic2{transition:transform .5s}[data-act=theme]:hover .ic2{transform:rotate(40deg) scale(1.1)}
.langbtn{transition:transform .2s,border-color .2s}.langbtn:hover{transform:translateY(-1px)}
.banner{display:flex;align-items:center;justify-content:center;gap:8px}
.bdot{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(var(--coralrgb),.6);animation:pulse 2s infinite;flex:none}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(var(--coralrgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--coralrgb),0)}}
.topbar{transition:box-shadow .3s}.topbar.scrolled{box-shadow:0 10px 30px -20px rgba(15,34,51,.35)}
.snav a{transition:background .2s,color .2s,transform .2s}.snav a:hover{transform:translateX(3px)}[dir=rtl] .snav a:hover{transform:translateX(-3px)}

/* ---------- hero ---------- */
.shero.photo,[dir=rtl] .shero.photo{background:#EAF3FA}
html:not([data-theme=light]) .shero.photo{background:#0B171A}
.herobg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center;z-index:0;animation:kenburns 26s ease-in-out infinite alternate;will-change:transform}
[dir=rtl] .herobg{object-position:28% center}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.shero.photo:before{z-index:1}
.shero.photo .htext,.shero.photo .cred,.fchips{z-index:2}
.shero.photo .htext>*{opacity:0;animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards}
.shero.photo .htext>*:nth-child(1){animation-delay:.05s}.shero.photo .htext>*:nth-child(2){animation-delay:.15s}.shero.photo .htext>*:nth-child(3){animation-delay:.28s}
.shero.photo .htext>*:nth-child(4){animation-delay:.4s}.shero.photo .htext>*:nth-child(5){animation-delay:.5s}.shero.photo .htext>*:nth-child(6){animation-delay:.6s}.shero.photo .htext>*:nth-child(7){animation-delay:.7s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.tagline em{position:relative}
.tagline em:after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:3px;border-radius:2px;background:var(--sand);transform:scaleX(0);transform-origin:left;animation:underline .8s 1.1s ease-out forwards}
[dir=rtl] .tagline em:after{transform-origin:right}
@keyframes underline{to{transform:scaleX(1)}}
.rotline{font-size:17px;color:var(--muted);margin:-6px 0 12px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.rot{position:relative;display:inline-grid;min-width:150px;height:1.5em;overflow:hidden;vertical-align:bottom}
.rot b{grid-area:1/1;color:var(--mint);font-weight:700;opacity:0;transform:translateY(100%);transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1);white-space:nowrap}
.rot b.on{opacity:1;transform:none}.rot b.out{opacity:0;transform:translateY(-100%)}
.fchips{position:absolute;inset:0;pointer-events:none}
.fchip{position:absolute;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.9);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:600;box-shadow:0 14px 30px -16px rgba(15,34,51,.45);backdrop-filter:blur(6px);opacity:0;animation:rise .8s forwards,float 6s ease-in-out infinite}
html:not([data-theme=light]) .fchip{background:rgba(15,30,34,.88)}
.fchip b{font-family:'Space Grotesk',sans-serif;font-size:17px;color:var(--mint)}.fchip .ic2{color:var(--mint)}
.fchip.c1{inset-inline-end:6%;top:12%;animation-delay:.9s,.9s}.fchip.c2{inset-inline-end:30%;bottom:16%;animation-delay:1.1s,2s}.fchip.c3{inset-inline-end:4%;bottom:30%;animation-delay:1.3s,3.1s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (max-width:1060px){
  .herobg{bottom:auto;height:56.25vw;object-position:center top}
  [dir=rtl] .herobg{object-position:center top}
  .fchips{display:none}
}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:-14px 0 44px}
.stat{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:18px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 30px -24px rgba(15,34,51,.4)}
.stat .sic{width:36px;height:36px;border-radius:11px;background:rgba(var(--accrgb),.1);display:flex;align-items:center;justify-content:center;color:var(--mint);margin-bottom:6px}
.stat b{font-family:'Space Grotesk',sans-serif;font-size:34px;line-height:1.05;color:var(--ink)}.stat span{color:var(--muted);font-size:13.5px}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:last-child{grid-column:span 2}}

/* ---------- find your stage ---------- */
.finder{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;align-items:start;padding:26px;border-radius:26px;background:linear-gradient(135deg,rgba(var(--accrgb),.08),rgba(var(--sandrgb),.1));border:1px solid var(--line)}
.fyform label{display:flex;flex-direction:column;gap:6px;font-size:14px;margin:12px 0}
.fyform select{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;min-height:44px}
.fyform input[type=range]{accent-color:var(--mint);width:100%}
.fyform .rng span b{font-family:'Space Grotesk',sans-serif;font-size:18px;color:var(--mint)}
#fysout{margin:0}#fysout.pop{animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(.97);opacity:.6}100%{transform:none;opacity:1}}
#fysout h3{font-family:'Space Grotesk','IBM Plex Sans Arabic',sans-serif;font-size:24px;margin:2px 0}
.fysring{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.fysring i{font-style:normal;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border:1.5px solid var(--line2);color:var(--muted);transition:all .3s}
.fysring i.on{background:var(--mint);border-color:var(--mint);color:var(--mintink);transform:scale(1.18);box-shadow:0 0 0 5px rgba(var(--accrgb),.18)}
.fyslinks{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px}.fyslinks .chip{font-size:13px;min-height:34px;padding:6px 12px;text-decoration:none}
@media (max-width:900px){.finder{grid-template-columns:1fr;padding:18px}}

/* ---------- myth or fact ---------- */
.mfsec{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:26px;align-items:center}
.mfsc{font-size:15px}.mfsc b{font-family:'Space Grotesk',sans-serif;font-size:22px;color:var(--mint)}
.mfdots{display:flex;gap:6px;margin-bottom:10px}.mfdots i{flex:1;height:5px;border-radius:3px;background:var(--line)}.mfdots i.done{background:var(--mint)}.mfdots i.on{background:var(--sand)}
.mfcard{perspective:1200px;min-height:250px}
.mfin{position:relative;min-height:250px;transition:transform .7s cubic-bezier(.3,1.2,.4,1);transform-style:preserve-3d}
.mfcard.flip .mfin{transform:rotateY(180deg)}
.mfface{position:absolute;inset:0;border-radius:22px;padding:24px;background:var(--card);border:1px solid var(--line);box-shadow:0 18px 40px -26px rgba(15,34,51,.45);backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;gap:10px}
.mfcard.done .mfface{position:relative}
.mfface.back{transform:rotateY(180deg)}.mfface.back.ok{border-color:rgba(var(--greenrgb),.6)}.mfface.back.no{border-color:rgba(var(--coralrgb),.6)}
.mfq{font-family:'Space Grotesk','IBM Plex Sans Arabic',sans-serif;font-size:21px;line-height:1.35;margin:0;flex:1}
.mfverdict{font-weight:700;font-size:17px}.back.ok .mfverdict{color:var(--green)}.back.no .mfverdict{color:var(--coral)}
.mfbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.mfscore{font-family:'Space Grotesk',sans-serif;font-size:56px;color:var(--mint);line-height:1}
.spark{position:fixed;width:8px;height:8px;border-radius:2px;z-index:90;pointer-events:none;animation:spark .85s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) rotate(260deg);opacity:0}}
@media (max-width:900px){.mfsec{grid-template-columns:1fr}.mfcard,.mfin{min-height:300px}}

/* ---------- countdown ---------- */
.cdown{display:inline-flex;align-items:center;gap:6px;margin-inline-start:12px;font-family:'IBM Plex Sans','IBM Plex Sans Arabic',sans-serif;font-size:13px;font-weight:500;color:var(--muted);background:rgba(var(--sandrgb),.12);border:1px solid rgba(var(--sandrgb),.35);padding:4px 10px;border-radius:999px;vertical-align:middle}
.cdown b{font-family:'IBM Plex Mono',monospace;color:var(--ink);font-weight:600}

/* ---------- cards: hover, tilt, image zoom ---------- */
.audc,.acard,.stc,.pro,.lpi,.dacc,.evc{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .2s}
.audc:hover,.acard:hover,.evc:hover,.pro:hover{box-shadow:0 22px 40px -24px rgba(15,34,51,.45)}
.tilting{transition:transform .08s linear,box-shadow .25s}
.tilting:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.35),transparent 55%)}
.audc,.acard,.stc,.pro,.dacc{position:relative}
.ph img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.audc:hover .ph img,.pro:hover .ph img,.split:hover .ph img,.evhead:hover .ph img{transform:scale(1.07)}
.acard .aic{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}.acard:hover .aic{transform:translateY(-4px) rotate(-6deg)}
.acard em{transition:letter-spacing .25s}.acard:hover em{letter-spacing:.04em}
.stc .rn{transition:transform .3s,background .3s,color .3s}.stc:hover .rn{transform:scale(1.15);background:var(--mint);color:var(--mintink)}
.stgrid{position:relative}
.band3d .b3dart .ic2{animation:spinY 10s linear infinite}
@keyframes spinY{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.ctaband{position:relative;overflow:hidden}
.ctaband:before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accrgb),.18),transparent 70%);inset-inline-end:-80px;top:-120px;animation:blob 9s ease-in-out infinite alternate}
@keyframes blob{to{transform:translate(-60px,60px) scale(1.2)}}
.ctaband>*{position:relative}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.tilting.rv.in{transition:transform .08s linear,box-shadow .25s,opacity .7s}

/* ---------- ripple, back to top ---------- */
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.18;transform:scale(0);animation:ripple .6s ease-out;pointer-events:none}
@keyframes ripple{to{transform:scale(1);opacity:0}}
#totop{position:fixed;bottom:22px;inset-inline-end:22px;z-index:70;width:46px;height:46px;border-radius:50%;background:var(--mint);color:var(--mintink);border:none;box-shadow:0 12px 26px -10px rgba(var(--accrgb),.7);opacity:0;transform:translateY(16px);pointer-events:none;transition:all .3s}
#totop.show{opacity:1;transform:none;pointer-events:auto}#totop:hover{transform:translateY(-3px)}

/* ---------- app motion ---------- */
.pg .kpi strong{font-variant-numeric:tabular-nums}
.av{transition:transform .3s}.acct:hover .av{transform:rotate(-8deg) scale(1.06)}
.bell .ic2{transform-origin:50% 10%}.bell:hover .ic2{animation:ring .8s ease-in-out}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(16deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
.badge{animation:pulse2 2.4s infinite}
@keyframes pulse2{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.hello.pic .hbg{animation:kenburns 30s ease-in-out infinite alternate}
.lpi:hover>span{animation:pop .4s}
.chart .ln{stroke-dasharray:2000;stroke-dashoffset:2000;animation:draw 1.6s .2s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.chart .area{opacity:0;animation:fadein .8s .9s forwards}@keyframes fadein{to{opacity:1}}
.hbt i,.fnb,.track i{animation:grow 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleX(0)}}
.hbt i,.track i{transform-origin:left}[dir=rtl] .hbt i,[dir=rtl] .track i{transform-origin:right}.fnb{transform-origin:left}[dir=rtl] .fnb{transform-origin:right}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}.sitenav a,.shero.photo .htext>*,.fchip{opacity:1}
  .herobg,.hello.pic .hbg{animation:none}
}