/* ===== Visual Experience Layer (additive HTML/CSS/JS only) =====
   - 8s cinematic splash with logo on first session entry.
   - 4s unique full-screen video transition for real in-site link clicks.
   - Browser back/forward is excluded and overlays are cleaned from bfcache.
   - Existing site CSS remains untouched; this file is an overlay layer.
*/
#mk-splash,
#mk-fx-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  background:#02040b;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  pointer-events:auto;
  isolation:isolate;
}

#mk-splash.mk-hide,
#mk-fx-overlay.mk-hide{
  opacity:0;
  transition:opacity .55s ease;
  pointer-events:none;
}

#mk-splash canvas,
#mk-fx-overlay canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:1;
}

#mk-splash .mk-video,
#mk-fx-overlay .mk-video,
.hero .mk-hero-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border:0;
  background:#02040b;
}

#mk-splash .mk-video,
#mk-fx-overlay .mk-video{
  z-index:0;
  opacity:.74;
  filter:saturate(1.25) contrast(1.08) brightness(.72);
}

#mk-splash::before,
#mk-fx-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,210,94,.24), transparent 24%),
    radial-gradient(circle at 18% 24%, rgba(85,180,255,.18), transparent 30%),
    linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.88));
  pointer-events:none;
}

#mk-splash::after,
#mk-fx-overlay::after{
  content:"";
  position:absolute;
  inset:-30%;
  z-index:3;
  background:conic-gradient(from 180deg, transparent 0 35%, rgba(255,212,98,.16), transparent 58% 100%);
  mix-blend-mode:screen;
  animation:mk-orbit 8s linear infinite;
  pointer-events:none;
}

#mk-splash .mk-logo-wrap{
  position:relative;
  z-index:4;
  width:min(58vw,320px);
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  filter:drop-shadow(0 0 30px rgba(255,210,94,.7)) drop-shadow(0 0 80px rgba(74,156,255,.36));
  animation:mk-logo-in 8s cubic-bezier(.18,.82,.2,1) forwards;
}

#mk-splash .mk-logo-wrap::before,
#mk-splash .mk-logo-wrap::after{
  content:"";
  position:absolute;
  inset:-14%;
  border-radius:50%;
  border:1px solid rgba(255,218,112,.56);
  box-shadow:0 0 38px rgba(255,218,112,.28), inset 0 0 34px rgba(89,179,255,.24);
  animation:mk-ring 3.2s ease-in-out infinite;
}

#mk-splash .mk-logo-wrap::after{
  inset:-28%;
  border-color:rgba(92,190,255,.34);
  animation-duration:4.8s;
  animation-direction:reverse;
}

#mk-splash .mk-logo-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:50%;
}

#mk-splash .mk-tagline,
#mk-splash .mk-progress,
#mk-fx-overlay .mk-fx-title,
#mk-fx-overlay .mk-fx-subtitle{
  position:absolute;
  z-index:5;
  font-family:'Tajawal', Arial, sans-serif;
  text-align:center;
  padding-inline:20px;
  text-shadow:0 0 26px rgba(80,160,255,.82), 0 0 9px #000;
}

#mk-splash .mk-tagline{
  bottom:14%;
  left:0;
  right:0;
  color:#f5df9a;
  font-weight:900;
  font-size:clamp(15px,3.4vw,24px);
  opacity:0;
  animation:mk-fade 1.1s ease 1.15s forwards;
}

#mk-splash .mk-progress{
  bottom:9%;
  left:50%;
  width:min(420px,72vw);
  height:2px;
  padding:0;
  transform:translateX(-50%);
  background:rgba(255,255,255,.16);
  overflow:hidden;
}

#mk-splash .mk-progress span{
  display:block;
  height:100%;
  width:100%;
  transform-origin:right center;
  background:linear-gradient(90deg, rgba(255,215,105,.1), rgba(255,215,105,.95), rgba(92,190,255,.86));
  animation:mk-progress 8s linear forwards;
}

#mk-fx-overlay .mk-fx-title{
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  color:#fff6d8;
  font-weight:900;
  font-size:clamp(24px,5vw,54px);
  letter-spacing:0;
  animation:mk-title 4s ease forwards;
}

#mk-fx-overlay .mk-fx-subtitle{
  left:0;
  right:0;
  top:calc(50% + 58px);
  color:rgba(255,255,255,.78);
  font-weight:700;
  font-size:clamp(13px,2.3vw,18px);
  animation:mk-subtitle 4s ease forwards;
}

#mk-fx-overlay .mk-skip{
  position:absolute;
  z-index:6;
  bottom:22px;
  left:22px;
  appearance:none;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(0,0,0,.34);
  color:#fff6d8;
  font-family:'Tajawal', Arial, sans-serif;
  font-weight:800;
  font-size:13px;
  padding:10px 16px;
  cursor:pointer;
  backdrop-filter:blur(10px);
}

#mk-fx-overlay .mk-skip:hover,
#mk-fx-overlay .mk-skip:focus-visible{
  background:rgba(255,215,105,.18);
  outline:2px solid rgba(255,215,105,.75);
  outline-offset:3px;
}

body.mk-locked{
  overflow:hidden;
}

.hero .mk-hero-bg-video{
  z-index:0;
  opacity:.26;
  filter:saturate(1.28) contrast(1.12) brightness(.8);
  pointer-events:none;
}

.hero .mk-hero-visual-layer{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.22) 48%, rgba(0,0,0,.78)),
    repeating-linear-gradient(100deg, transparent 0 42px, rgba(255,214,90,.035) 43px 44px);
  mix-blend-mode:screen;
  opacity:.62;
}

@keyframes mk-logo-in{
  0%{transform:scale(.18) rotate(-120deg);opacity:0;filter:blur(28px) drop-shadow(0 0 80px rgba(84,178,255,.9));}
  18%{transform:scale(1.18) rotate(0deg);opacity:1;filter:blur(0) drop-shadow(0 0 80px rgba(255,215,105,.72));}
  72%{transform:scale(1) rotate(0deg);opacity:1;}
  100%{transform:scale(1.08) rotate(0deg);opacity:0;filter:blur(10px) drop-shadow(0 0 110px rgba(255,215,105,.9));}
}

@keyframes mk-ring{
  0%,100%{transform:scale(.94) rotate(0deg);opacity:.55;}
  50%{transform:scale(1.08) rotate(28deg);opacity:1;}
}

@keyframes mk-fade{to{opacity:1;}}
@keyframes mk-orbit{to{transform:rotate(360deg);}}
@keyframes mk-progress{from{transform:scaleX(0);}to{transform:scaleX(1);}}

@keyframes mk-title{
  0%{opacity:0;transform:translateY(-34%) scale(.9);filter:blur(10px);}
  22%{opacity:1;transform:translateY(-50%) scale(1);filter:blur(0);}
  78%{opacity:1;transform:translateY(-50%) scale(1);}
  100%{opacity:0;transform:translateY(-66%) scale(1.04);filter:blur(8px);}
}

@keyframes mk-subtitle{
  0%,18%{opacity:0;transform:translateY(18px);}
  32%,78%{opacity:1;transform:translateY(0);}
  100%{opacity:0;transform:translateY(-14px);}
}

@media (max-width:700px){
  #mk-splash .mk-logo-wrap{width:min(68vw,260px);}
  #mk-splash .mk-tagline{bottom:16%;}
  #mk-splash .mk-progress{bottom:10%;}
  #mk-fx-overlay .mk-fx-subtitle{top:calc(50% + 44px);}
  #mk-fx-overlay .mk-skip{left:14px;bottom:14px;font-size:12px;padding:9px 13px;}
  .hero .mk-hero-bg-video{opacity:.2;}
}

@media (prefers-reduced-motion:reduce){
  #mk-splash::after,
  #mk-fx-overlay::after,
  #mk-splash .mk-logo-wrap,
  #mk-splash .mk-logo-wrap::before,
  #mk-splash .mk-logo-wrap::after,
  #mk-splash .mk-progress span,
  #mk-fx-overlay .mk-fx-title,
  #mk-fx-overlay .mk-fx-subtitle{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}

/* ===== Section background videos (5 cinematic loops) ===== */
.mk-vid-section{position:relative;overflow:hidden;isolation:isolate;}
.mk-vid-section > .mk-section-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0;
  opacity:.32;filter:saturate(1.25) contrast(1.1) brightness(.78);
  pointer-events:none;
}
.mk-vid-section::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,.45) 50%,rgba(0,0,0,.85));
}
.mk-vid-section > .container{position:relative;z-index:2;}

/* ===== Tabby banner ===== */
.tabby-banner{
  position:relative;overflow:hidden;
  background:linear-gradient(90deg,#3bea96 0%,#7ef3a6 50%,#3bea96 100%);
  color:#062a1d;font-weight:800;text-align:center;
  padding:11px 16px;font-size:14.5px;letter-spacing:.2px;
  border-bottom:1px solid rgba(0,0,0,.15);
  z-index:10;
}
.tabby-banner b{color:#04130c;font-weight:900;}
.tabby-banner .tabby-pill{
  display:inline-block;background:#04130c;color:#7ef3a6;
  padding:2px 10px;border-radius:999px;margin:0 6px;
  font-weight:900;letter-spacing:1px;
}
.tabby-banner::after{
  content:"";position:absolute;top:0;bottom:0;width:38%;
  left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-20deg);animation:tabby-shine 3.6s linear infinite;
  pointer-events:none;
}
@keyframes tabby-shine{
  0%{left:-40%;}60%{left:120%;}100%{left:120%;}
}
@media (max-width:600px){
  .tabby-banner{font-size:12.5px;padding:9px 10px;}
}

/* ===== Floating icons enhancements (modern, sticky, mobile-friendly) ===== */
.float{
  position:fixed!important;
  z-index:9000;
}
.float a{position:relative;overflow:visible;}
.float a::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid currentColor;opacity:.0;
  animation:mk-float-pulse 2.2s ease-out infinite;
  pointer-events:none;
}
.float a.wa{color:#25D366;}
.float a.ph{color:#ffd76a;}
@keyframes mk-float-pulse{
  0%{transform:scale(.85);opacity:.55;}
  100%{transform:scale(1.5);opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .float a::after,.tabby-banner::after{animation:none;}
}