/* ─── Hesham Kholef — Flip-3D Deluxe Animation Engine (0.8x Speed, 380px, Relax Loop) ─── */
:root {
  --hk-swf-dur: 8.13s;
  --hk-swf-iter: infinite;
}

.nav__logo {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  z-index: calc(var(--z-nav, 1000) + 1) !important;
}

.hk-swf-wrap {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

.hk-swf-svg {
  height: 52px !important;
  width: auto !important;
  max-width: 380px !important;
  display: block !important;
  overflow: visible !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)) !important;
}

.nav--scrolled .hk-swf-svg {
  height: 44px !important;
}

/* No extra hover action requested */
.nav__logo:hover .hk-swf-svg,
.hk-swf-wrap:hover .hk-swf-svg {
  transform: none !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)) !important;
}

@media (max-width: 1024px) {
  .hk-swf-svg {
    height: 44px !important;
    max-width: 260px !important;
  }
}

@media (max-width: 480px) {
  .hk-swf-svg {
    height: 38px !important;
    max-width: 200px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hk-swf-layer, .hk-swf-swoosh-clip-rect, .hk-swf-sheen-bar, .hk-swf-flare {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .hk-swf-swoosh-clip-rect {
    width: 130px !important;
  }
  .hk-swf-sheen-bar, .hk-swf-flare {
    display: none !important;
  }
}


        .hk-swf-svg {
          width: 100%;
          max-width: 380px;
          height: auto;
          display: block;
          overflow: visible;
        }
        .hk-swf-layer {
          transform-box: fill-box;
          transform-origin: center center;
          animation-duration: var(--hk-swf-dur, 8.13s);
          animation-iteration-count: infinite;
          animation-fill-mode: both;
          animation-play-state: running;
          will-change: transform, opacity, filter;
        }
        .hk-swf-swoosh-clip-rect {
          animation: hk-swf-swoosh-wipe var(--hk-swf-dur, 8.13s) cubic-bezier(0.22, 1, 0.36, 1) infinite both;
          animation-play-state: running;
        }
        .hk-swf-sheen-bar {
          animation: hk-swf-sheen-sweep var(--hk-swf-dur, 8.13s) ease-in-out infinite both;
          animation-play-state: running;
        }
        .hk-swf-flare {
          animation: hk-swf-flare-move var(--hk-swf-dur, 8.13s) cubic-bezier(0.22, 1, 0.36, 1) infinite both;
          animation-play-state: running;
        }
      
          @keyframes hk-swf-pillar-left {
            0% { opacity: 0; transform: perspective(400px) rotateY(90deg); }
            18%, 88% { opacity: 1; transform: perspective(400px) rotateY(0deg); }
            96%, 100% { opacity: 0; }
          }
          @keyframes hk-swf-pillar-right {
            0%, 5% { opacity: 0; transform: perspective(400px) rotateY(-90deg); }
            22%, 88% { opacity: 1; transform: perspective(400px) rotateY(0deg); }
            96%, 100% { opacity: 0; }
          }
          @keyframes hk-swf-swoosh-wipe {
            0% { width: 130px; }
            100% { width: 130px; }
          }
          @keyframes hk-swf-swoosh-body {
            0%, 12% { opacity: 0; transform: perspective(400px) rotateX(85deg) scale(0.8); }
            28% { opacity: 1; transform: perspective(400px) rotateX(-10deg) scale(1.05); filter: drop-shadow(0 0 14px rgba(249,115,22,0.9)); }
            38%, 88% { opacity: 1; transform: perspective(400px) rotateX(0deg) scale(1); filter: drop-shadow(0 0 6px rgba(249,115,22,0.45)); }
            96%, 100% { opacity: 0; }
          }
          @keyframes hk-swf-flare-move {
            0%, 14% { opacity: 0; transform: translate(51px, 89px) scale(0.2); }
            24% { opacity: 1; transform: translate(110px, 46px) scale(1.4); }
            34%, 100% { opacity: 0; transform: translate(155px, 25px) scale(0); }
          }
        
              @keyframes hk-swf-char-e1 {
                0%, 16.0% { opacity: 0; transform: perspective(400px) rotateY(-90deg) scale(0.85); }
                28.0%, 88% { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1); }
                96%, 100% { opacity: 0; }
              }
            
              @keyframes hk-swf-char-s {
                0%, 18.0% { opacity: 0; transform: perspective(400px) rotateY(-90deg) scale(0.85); }
                30.0%, 88% { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1); }
                96%, 100% { opacity: 0; }
              }
            
              @keyframes hk-swf-char-h1 {
                0%, 20.0% { opacity: 0; transform: perspective(400px) rotateY(-90deg) scale(0.85); }
                32.0%, 88% { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1); }
                96%, 100% { opacity: 0; }
              }
            
              @keyframes hk-swf-char-a {
                0%, 22.0% { opacity: 0; transform: perspective(400px) rotateY(-90deg) scale(0.85); }
                34.0%, 88% { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1); }
                96%, 100% { opacity: 0; }
              }
            
              @keyframes hk-swf-char-m {
                0%, 24.0% { opacity: 0; transform: perspective(400px) rotateY(-90deg) scale(0.85); }
                36.0%, 88% { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1); }
                96%, 100% { opacity: 0; }
              }
            
              @keyframes hk-swf-char-K {
                0%, 28.0% { opacity: 0; transform: perspective(400px) rotateY(-90deg) scale(0.85); }
                40.0%, 88% { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1); }
                96%, 100% { opacity: 0; }
              }
            
              @keyframes hk-swf-char-h2 {
                0%, 30.0% { opacity: 0; transform: perspective(400px) rotateY(-90deg) scale(0.85); }
                42.0%, 88% { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1); }
                96%, 100% { opacity: 0; }
              }
            
              @keyframes hk-swf-char-o {
                0%, 32.0% { opacity: 0; transform: perspective(400px) rotateY(-90deg) scale(0.85); }
                44.0%, 88% { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1); }
                96%, 100% { opacity: 0; }
              }
            
              @keyframes hk-swf-char-l {
                0%, 34.0% { opacity: 0; transform: perspective(400px) rotateY(-90deg) scale(0.85); }
                46.0%, 88% { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1); }
                96%, 100% { opacity: 0; }
              }
            
              @keyframes hk-swf-char-e2 {
                0%, 36.0% { opacity: 0; transform: perspective(400px) rotateY(-90deg) scale(0.85); }
                48.0%, 88% { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1); }
                96%, 100% { opacity: 0; }
              }
            
              @keyframes hk-swf-char-f {
                0%, 38.0% { opacity: 0; transform: perspective(400px) rotateY(-90deg) scale(0.85); }
                50.0%, 88% { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1); }
                96%, 100% { opacity: 0; }
              }
            
          @keyframes hk-swf-sheen-sweep {
            0%, 42% { transform: translateX(-180px) skewX(-25deg); opacity: 0; }
            46% { opacity: 0.95; }
            68% { transform: translateX(580px) skewX(-25deg); opacity: 0.95; }
            72%, 100% { transform: translateX(620px) skewX(-25deg); opacity: 0; }
          }
        
        .hk-swf-layer-H_left { animation-name: hk-swf-pillar-left; }
        .hk-swf-layer-H_top_right, .hk-swf-layer-H_bottom_right { animation-name: hk-swf-pillar-right; }
        .hk-swf-layer-swoosh { animation-name: hk-swf-swoosh-body; }
      .hk-swf-layer-e1 { animation-name: hk-swf-char-e1; }
.hk-swf-layer-s { animation-name: hk-swf-char-s; }
.hk-swf-layer-h1 { animation-name: hk-swf-char-h1; }
.hk-swf-layer-a { animation-name: hk-swf-char-a; }
.hk-swf-layer-m { animation-name: hk-swf-char-m; }
.hk-swf-layer-K { animation-name: hk-swf-char-K; }
.hk-swf-layer-h2 { animation-name: hk-swf-char-h2; }
.hk-swf-layer-o { animation-name: hk-swf-char-o; }
.hk-swf-layer-l { animation-name: hk-swf-char-l; }
.hk-swf-layer-e2 { animation-name: hk-swf-char-e2; }
.hk-swf-layer-f { animation-name: hk-swf-char-f; }