:root{
      --accent:#8A2BE2;
      --text:#fff;
      --glass:rgba(255,255,255,0.06);
      --glass2:rgba(0,0,0,0.18);
      --stroke:rgba(168,100,255,0.4);
      --stroke-strong:rgba(168,100,255,0.55);
      --border:rgba(255,255,255,0.12);
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family:'Montserrat',sans-serif;
      background-image:url(../images/sea-background.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      color:var(--text);
      min-height:100vh;
      overflow:hidden;

    }

    /* ====== Layout Shell ====== */
    .scene{
      position:relative;
      width:100%;
      height:100vh;
      overflow:hidden;
    }
    .nav{
      position:fixed;
      top:22px;
      left:22px;
      display:none;
      gap:18px;
      font-weight:700;
      font-size:.8rem;
      z-index:20;
      text-transform:uppercase;
      letter-spacing:1px;
      direction:ltr;
      opacity:.92;
    }
    .nav span{cursor:default}

    /* ====== Index View ====== */
    #view-index{
      position:absolute;
      inset:0;
    }
    .bg-title{
      position:absolute;
      top:10%;
      left:50%;
      transform:translateX(-50%);
      font-family:'Syne',sans-serif;
      font-size:3vw;
      line-height:.9;
      white-space:nowrap;
      overflow:hidden;
      display:inline-block;
      color:rgba(255,255,255,0.9);
      text-shadow:0 5px 5px rgba(0,0,0,0.2);
      z-index:2;
      transition:opacity .6s ease, transform .6s ease;
      pointer-events:none;
      direction:ltr;
    
      display:inline-block;
      }
    .bg-title.exiting{opacity:0;transform:translate(-50%,-30px)}
    .bg-title.entering{opacity:0;transform:translate(-50%,30px)}

    .obj-container{
      position:absolute;
      top:45%;
      left:50%;
      transform:translate(-50%,-40%);
      width:min(820px,90vw);
      height:min(850px,90vh);
      z-index:3;
      display:flex;
      justify-content:center;
      align-items:center;
      pointer-events:none;
    }
    .obj-img{
      width:100%;
      height:auto;
      max-height:100%;
      object-fit:contain;
      position:absolute;
      opacity:0;
      transform:translateX(0);
      transition:transform 1.7s ease, opacity 1.7s ease;
      filter:drop-shadow(0 18px 40px rgba(0,0,0,0.35));
    }
    .obj-img.current{opacity:1;transform:translateX(0)}
    .obj-img.from-right{opacity:0;transform:translateX(100vw)}
    .obj-img.slide-in{opacity:1;transform:translateX(0)}
    .obj-img.slide-out{opacity:0;transform:translateX(-100vw)}

    /* CTA / Details Panel */
    .cta-box{
      position:absolute;
      font-family:'IBM Plex Sans Arabic', sans-serif;
      left:5%;
      top:60%;
      transform:translateY(-50%);
      z-index:10;
      color:#fff;
      direction:rtl;
      text-align:right;
      max-width:320px;
      text-shadow:0 5px 5px rgba(0,0,0,0.2);
      background: radial-gradient(1000px 520px at 85% 0%, rgba(138,43,226,0.18), transparent 55%),
    radial-gradient(1000px 520px at 10% 10%, rgba(0,190,255,0.14), transparent 60%),
    rgba(255,255,255,0.06); /* شفافية */
      backdrop-filter: blur(18px);
      padding: 15px;
      border-radius: 26px;
    }
    .cta-box h2{
      font-family:'Syne',sans-serif;
      font-size:clamp(25px,1.5vw,27px);
      line-height:1.1;
      margin-bottom:10px;
      font-weight:800;
      letter-spacing:.3px;
    }
    .btn{
      border:0;
      cursor:pointer;
      padding:10px 14px;
      border-radius:14px;
      font-weight:800;
      transition:transform 160ms ease, filter 160ms ease;
      font-family:inherit;
    }
    .btn.primary{
      background:var(--accent);
      color:#fff;
      box-shadow:0 0 18px rgba(138,43,226,0.35);
    }
    .btn.ghost{
      background:rgba(255,255,255,0.10);
      color:#fff;
      border:1px solid rgba(255,255,255,0.10);
      font-weight:700;
    }
    .btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
    .hint{
      opacity:.9;
      font-size:1rem;
      line-height:1.9;
      margin-top:10px;
      max-width:420px;
      font-family:'IBM Plex Sans Arabic', sans-serif;
    }

    /* Timeline Area */
    .timeline-area{
      position:absolute;
      bottom:42px;
      left:25%;
      width:50%;
      height:220px;
      z-index:9;
    }
    @media (max-width: 900px){
      .timeline-area{left:12%;width:76%}
      .cta-box{left:4%}
    }
    @media (max-width: 640px){
      body{overflow:auto}
      .scene{height:auto;min-height:100vh;overflow:visible}
      .obj-container{position:relative;top:5%;left:0;transform:none;height:320px;width: 100%;}
      .cta-box{position:relative;left:auto;transform:none;margin:0px 18px 0;top: 100%;}
      .timeline-area{position:relative;left:auto;width:calc(100% - 36px);margin:0px 18px 26px;height:5rem;}
      .bg-title{font-size:7vw; top: auto;}
      .point.active .p-text{margin-top: -4rem !important; opacity: 1;}
      .point .p-text{opacity: 0;}
     
    }

    .curve-svg{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      pointer-events:none;
      overflow:visible;
    }
    .path-line{
      fill:none;
      stroke:var(--stroke);
      stroke-width:3;
      filter:drop-shadow(0 0 5px rgba(138,43,226,0.5));
    }
    .moving-dot{display:none;}
    
    /* Active marker that moves along the SVG path (shows the star) */
    .active-marker{
      position:absolute;
      width:42px;
      height:42px;
      border-radius:50%;
      background:var(--accent);
      border:3px solid #fff;
      box-shadow:0 0 20px rgba(138,43,226,0.55);
      display:flex;
      align-items:center;
      justify-content:center;
      transform:translate(-50%,-50%);
      pointer-events:none;
      z-index:3;
    }
    .active-marker .star{
      color:#fff;
      font-size:1.1rem;
      line-height:1;
      font-weight:900;
      transform:translateY(-1px);
      user-select:none;
    }
.points-wrapper{
      position:absolute;
      inset:0;
      pointer-events:none;
    }
    .point{
      position:absolute;
      display:flex;
      flex-direction:column;
      align-items:center;
      transition:transform .25s ease;
      transform:translate(-50%, -12px);
      pointer-events:none; /* prevent the big box from stealing taps */
      user-select:none;
    }
    .point:hover{transform:translate(-50%, -14px) scale(1.04)}
    .point .dot,
    .point .p-text{
      pointer-events:auto; /* only dot + label are clickable */
      cursor:pointer;
      touch-action:manipulation;
    }
    .point .p-text{
      padding:6px 10px;
      border-radius:14px;
      background:rgba(0,0,0,0.22);
      border:1px solid rgba(255,255,255,0.12);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    
    
    .dot{
      width:16px;height:16px;
      background:#fff;
      border:4px solid var(--accent);
      border-radius:50%;
      margin-bottom:8px;
      transition:all .2s;
      position:relative;
      z-index:2;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    /* Active point style (applied only after the moving marker arrives) */
    .point.active .dot{
      width:35px;height:35px;
      background:var(--accent);
      border:3px solid #fff;
      box-shadow:0 0 20px var(--accent);
      margin-bottom: 5rem;
    }
    .active-icon{display:none;font-size:1.1rem;color:#fff}
    .point.active .active-icon{display:block}

    .p-text{text-align:center;opacity:.62;transition:opacity .25s;font-size:.75rem}
    .point.active .p-text{opacity:1}
    .p-date{display:block;font-size:.65rem;margin-bottom:3px;direction:ltr}
    .p-title{font-weight:800;font-size:.85rem;white-space:nowrap;direction:rtl}

    /* ====== Details View (Modern, Ocean Glass) ====== */
#view-details{
  position:absolute;
  inset:0;
  padding:96px 18px 28px;

  display:none;
  background:transparent;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(900px 520px at 70% 20%, rgba(138,43,226,0.22), transparent 60%),
    radial-gradient(900px 520px at 20% 30%, rgba(0,190,255,0.16), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));

  z-index: 1000;
}
#view-details > *{
  position: relative;
  z-index: 2;
}

.wrap{max-width:1040px;margin:0 auto}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:#fff;
  opacity:.92;
  font-weight:900;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  transition:transform 160ms ease, filter 160ms ease, opacity 160ms ease;
}
.back-link:hover{opacity:1;transform:translateY(-1px);filter:brightness(1.06)}
.details-title{
  font-family:'Syne',sans-serif;
  font-size:clamp(20px,2.1vw,38px);
  line-height:1.06;
  margin-top:10px;
  letter-spacing:.2px;
  text-shadow:0 10px 30px rgba(0,0,0,0.45);
}
.card{
  margin-top:16px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(1000px 520px at 85% 0%, rgba(138,43,226,0.18), transparent 55%),
    radial-gradient(1000px 520px at 10% 10%, rgba(0,190,255,0.14), transparent 60%),
    rgba(255,255,255,0.06);
  overflow:hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:0 26px 80px rgba(0,0,0,0.42);
  display: flex;
  flex-direction: row; /* الصورة يمين – النص شمال */
  align-items: stretch;
  gap: 30px;
}
.banner{
  width: 45%;
  height:clamp(240px,34vw,420px);
  object-fit:cover;
  display:block;
  border-bottom:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  filter:saturate(1.05) contrast(1.02);
}
.content{padding:18px 18px 20px;
  width: 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;}
.desc{
  margin-top:10px;
  opacity:.94;
  line-height:1.5;
  font-size:1.05rem;
  font-family:'IBM Plex Sans Arabic', sans-serif;
  text-shadow:0 6px 18px rgba(0,0,0,0.32);
}

/* Project Link Button */
.project-link-section{
  margin-top:20px;
  display:flex;
  justify-content:center;
  padding:10px 0;
}
.project-link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 28px;
  border-radius:18px;
  border:2px solid var(--accent);
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:900;
  font-size:1.05rem;
  font-family:'IBM Plex Sans Arabic', sans-serif;
  transition:transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
  box-shadow:0 0 18px rgba(138,43,226,0.35);
}
.project-link-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.1);
  box-shadow:0 4px 28px rgba(138,43,226,0.5);
}
.project-link-btn svg{
  width:20px;
  height:20px;
}

.notfound{
  margin-top:18px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  line-height:1.9;
  opacity:.95;
  backdrop-filter: blur(14px);
}
@media (max-width: 768px){
  #dCard.card{
    flex-direction: column !important;
  }
  #dCard.card > .banner{
    width: 100% !important;
    flex: 0 0 auto !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.10) !important;
  }
  #dCard.card > .content{
  width:100%;
  padding-top: 0;
  }

}
  
    /* ====== Entrance (safe, no flash) ====== */
    @media (prefers-reduced-motion: no-preference){
      .scene::before{
        content:"";
        position:absolute;
        inset:0;
        background:rgba(0,0,0,0.18);
        pointer-events:none;
        opacity:0;
      }
      html.is-enter .scene::before{
        animation: overlayFade 900ms ease-out both;
      }

      html.is-enter .bg-title{
        animation: enterTitle 950ms cubic-bezier(0.22,1,0.36,1) both;
      }
      html.is-enter .obj-container{ animation: enterObj 1000ms cubic-bezier(0.22,1,0.36,1) both;
        animation-delay: 80ms;
      }
      html.is-enter .cta-box{
        animation: enterCta 1000ms cubic-bezier(0.22,1,0.36,1) both;
        animation-delay: 140ms;
      }
      html.is-enter .timeline-area{
        animation: enterUp 1000ms cubic-bezier(0.22,1,0.36,1) both;
        animation-delay: 220ms;
      }

      @keyframes overlayFade{
        from{opacity:1}
        to{opacity:0}
      }
      @keyframes enterUp{
        from{transform:translateY(18px); filter:blur(2px); opacity:0}
        to{transform:translateY(0); filter:blur(0); opacity:1}
      }
      @keyframes enterTitle{
        from{transform:translate(-50%,0) translateY(18px); filter:blur(2px); opacity:0}
        to{transform:translate(-50%,0); filter:blur(0); opacity:1}
      }
      @keyframes enterCta{
        from{transform:translateY(-50%) translateY(18px); filter:blur(2px); opacity:0}
        to{transform:translateY(-50%); filter:blur(0); opacity:1}
      }
    }

  
    /* ===== Title letter animation ===== */
    .title-letters{
      display:inline-block;
      white-space:nowrap;
    }
    .title-letters span{
      display:inline-block;
      transform:translateY(24px);
      opacity:0;
      animation: letterUp 600ms cubic-bezier(0.22,1,0.36,1) forwards;
    }
    @keyframes letterUp{
      to{
        transform:translateY(0);
        opacity:1;
      }
    }

  
    /* ===== Whole word progressive reveal (connected word) ===== */
    .bg-title .title-word{
      display:inline-block;
      will-change: clip-path, transform, opacity, filter;
    }
    .bg-title.word-animate .title-word{
      animation: wordReveal 1400ms cubic-bezier(0.22,1,0.36,1) both;
    }
    @keyframes wordReveal{
      from{
        /* reveal from right -> left (better for Arabic) */
        -webkit-clip-path: inset(0 0 0 100%);
        clip-path: inset(0 0 0 100%);
        transform:translateY(28px);
        opacity:0;
        filter:blur(2px);
      }
      to{
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        transform:translateY(0);
        opacity:1;
        filter:blur(0);
      }
    }
      to{
        transform:translate(-50%, 0);
        opacity:1;
        filter:blur(0);
      }
  

    /* ====== Header (Glass, logo right, menu left) ====== */
    .site-header{
      position:fixed;
      left:18px;
      right:18px;
      z-index:50;
      pointer-events:none;
    }
    .header-inner{
      pointer-events:auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      position:relative;
    }
    .header-inner::before{
   
      pointer-events:none;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      text-decoration:none;
      color:#fff;
      font-weight:900;
      letter-spacing:.3px;
      user-select:none;
    }
    .brand-logo{
      height:100px;
      width:100px;
      display:block;
      filter:drop-shadow(0 10px 22px rgba(0,0,0,0.35));
    }
    .brand-text{
      font-family:'Syne',sans-serif;
      font-size:1.05rem;
      text-transform:uppercase;
      opacity:.95;
    }

    .menu-btn{
      width:46px;
      height:40px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,0.14);
      background:rgba(0,0,0,0.22);
      color:#fff;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      transition:transform 160ms ease, filter 160ms ease, background 160ms ease;
      box-shadow:0 0 18px rgba(138,43,226,0.18);
    }
    .menu-btn:hover{ transform:translateY(-1px); filter:brightness(1.07); background:rgba(0,0,0,0.28); }
    .menu-btn:active{ transform:translateY(0); filter:brightness(0.98); }

    .menu-icon{
      width:18px;
      height:12px;
      position:relative;
      display:block;
    }
    .menu-icon::before,
    .menu-icon::after,
    .menu-icon > span{
      content:"";
      position:absolute;
      left:0; right:0;
      height:2px;
      border-radius:99px;
      background:rgba(255,255,255,0.92);
      box-shadow:0 0 10px rgba(138,43,226,0.18);
    }
    .menu-icon::before{ top:0; }
    .menu-icon::after{ bottom:0; }
    .menu-icon > span{ top:50%; transform:translateY(-50%); }

    /* ====== Offcanvas ====== */
    .offcanvas-overlay{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,0.45);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      z-index:60;
      opacity:0;
      transition:opacity 260ms ease;
    }
    .offcanvas{
      position:fixed;
      top:0;
      left:0;
      height:100vh;
      width:min(360px, 88vw);
      z-index:70;
      transform:translateX(-110%);
      transition:transform 320ms cubic-bezier(0.22,1,0.36,1);
      border-right:1px solid rgba(255,255,255,0.12);
      background:
        radial-gradient(1000px 520px at 0% 0%, rgba(138,43,226,0.25), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,0.09), rgba(0,0,0,0.55));
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 18px 0 60px rgba(0,0,0,0.45);
      padding:18px 16px;
      display:flex;
      flex-direction:column;
      gap:14px;
    }
    .offcanvas.open{ transform:translateX(0); }
    .offcanvas-overlay.open{ opacity:1; }

    .offcanvas-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:10px 10px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,0.12);
      background:rgba(255,255,255,0.06);
    }
    .offcanvas-title{
      font-weight:900;
      letter-spacing:.2px;
      font-family:'IBM Plex Sans Arabic', sans-serif;
    }
    .offcanvas-close{
      width:40px;
      height:36px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,0.14);
      background:rgba(0,0,0,0.22);
      color:#fff;
      cursor:pointer;
      transition:transform 160ms ease, filter 160ms ease;
    }
    .offcanvas-close:hover{ transform:translateY(-1px); filter:brightness(1.07); }

    .offcanvas-nav{
      display:flex;
      flex-direction:column;
      gap:10px;
      padding:6px 2px;
      direction:rtl;
      text-align:right;
      font-family:'IBM Plex Sans Arabic', sans-serif;
    }
    .offcanvas-nav a{
      text-decoration:none;
      color:#fff;
      padding:12px 12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,0.10);
      background:rgba(0,0,0,0.18);
      transition:transform 160ms ease, filter 160ms ease, background 160ms ease;
      font-weight:800;
    }
    .offcanvas-nav a:hover{
      transform:translateY(-1px);
      filter:brightness(1.06);
      background:rgba(0,0,0,0.24);
    }
    .offcanvas-footer{
      margin-top:auto;
      padding-top:8px;
    }

    @media (max-width: 640px){
      .site-header{ left:12px; right:12px; margin: 0;}
      .menu-btn{ width:44px; height:38px; border-radius:14px; }
      /* .brand-logo{filter: none;} */
    }


/* ====== Page Transition (Index <-> Details) ====== */
.page-transition{
  position:fixed;
  inset:0;
  z-index:85;
  pointer-events:none;
  opacity:0;
  transition:opacity 520ms cubic-bezier(.22,1,.36,1);
  background:
    radial-gradient(1200px 680px at 70% 20%, rgba(138,43,226,0.26), transparent 60%),
    radial-gradient(900px 520px at 15% 35%, rgba(0,190,255,0.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55));
}
.page-transition.on{ opacity:1; }

.view{
  will-change:opacity, transform, filter;
  transition:
    opacity 520ms cubic-bezier(.22,1,.36,1),
    transform 520ms cubic-bezier(.22,1,.36,1),
    filter 520ms cubic-bezier(.22,1,.36,1);
}
.view.is-entering{
  opacity:0;
  transform:translateY(26px) scale(.985);
  filter:blur(10px);
}
.view.is-active{
  opacity:1;
  transform:none;
  filter:none;
}
.view.is-leaving{
  opacity:0;
  transform:translateY(-18px) scale(.985);
  filter:blur(8px);
}
html.is-transitioning body{ cursor:progress; }
html, body{
  overflow-x: hidden;
  max-width: 100%;
}