/* ============================================================
   AMWAJ ALTAQA — Enhanced Animations & 3D Effects
   ============================================================ */

/* ---- 3D Perspective Setup ---- */
.hero-inner{transform-style:preserve-3d; perspective:1000px;}
.hero h1, .hero p.lede, .hero-cta, .hero-stats{transform-style:preserve-3d;}

/* ---- Hero 3D Parallax Layers ---- */
.hero-glow{transition:transform .3s ease-out; will-change:transform;}
.hero-inner > *{transition:transform .4s ease-out; will-change:transform;}

/* ---- Floating Animation for Hero Elements ---- */
@keyframes float3D{
  0%,100%{transform:translateY(0) rotateX(0);}
  50%{transform:translateY(-10px) rotateX(2deg);}
}
.hero-glow{animation:float3D 6s ease-in-out infinite;}

/* ---- 3D Card Tilt ---- */
.card-3d{
  transform-style:preserve-3d;
  transition:transform .3s var(--ease), box-shadow .45s var(--ease);
  will-change:transform;
}
.card-3d:hover{
  box-shadow:var(--shadow-2);
}
.card-3d .card-inner{
  transform:translateZ(30px);
  transition:transform .3s var(--ease);
}

/* ---- Scroll Reveal 3D ---- */
.reveal{
  opacity:0;
  transform:translateY(28px) translateZ(0);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.in{
  opacity:1;
  transform:translateY(0) translateZ(0);
}

/* ---- 3D Flip Card for Service Cards ---- */
.svc-card{
  transform-style:preserve-3d;
  perspective:800px;
}
.svc-card:hover .ico{
  transform:translateZ(20px) scale(1.05);
}
.svc-card .ico{
  transition:transform .35s var(--ease);
  transform-style:preserve-3d;
}

/* ---- Stats Counter Glow ---- */
.stat-box .num, .hero-stats .num{
  text-shadow:0 0 30px rgba(242,185,12,.3);
  transition:text-shadow .4s;
}
.stat-box:hover .num, .hero-stats .stat:hover .num{
  text-shadow:0 0 40px rgba(242,185,12,.6);
}

/* ---- Project Card 3D Hover ---- */
.proj-card{
  transform-style:preserve-3d;
  perspective:1000px;
}
.proj-card:hover img{
  transform:scale(1.08) translateZ(20px);
}
.proj-overlay{
  transform:translateZ(40px);
  backdrop-filter:blur(4px);
}

/* ---- Flow Node 3D ---- */
.flow-node{
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  transform-style:preserve-3d;
}
.flow-node:hover{
  transform:translateY(-4px) translateZ(10px);
  box-shadow:var(--shadow-2);
}

/* ---- Button 3D Press ---- */
.btn{
  transform-style:preserve-3d;
  position:relative;
}
.btn-gold:hover{
  transform:translateY(-3px) translateZ(10px);
  box-shadow:0 16px 36px -12px rgba(242,185,12,.65), 0 0 0 1px rgba(242,185,12,.2);
}

/* ---- Badge Float 3D ---- */
.badge-float{
  transform-style:preserve-3d;
  animation:float3D 5s ease-in-out infinite;
  transition:transform .3s var(--ease);
}
.badge-float .ico{
  transform-style:preserve-3d;
  transform:translateZ(20px);
}

/* ---- Scroll Cue 3D ---- */
.scroll-cue{
  transform-style:preserve-3d;
  perspective:200px;
}
.scroll-cue .line{
  transform-origin:top center;
}

/* ---- Loader Sun 3D ---- */
.loader-sun{
  transform-style:preserve-3d;
  perspective:200px;
}
.loader-sun span{
  box-shadow:0 0 20px rgba(242,185,12,.4);
}

/* ---- Section Reveal with Stagger ---- */
.stagger > *{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
.stagger.in > *,
.stagger > .in{
  opacity:1;
  transform:translateY(0);
}

/* ---- Gradient Shimmer on Stats ---- */
@keyframes shimmerGold{
  0%,100%{filter:hue-rotate(0deg) brightness(1);}
  50%{filter:hue-rotate(-5deg) brightness(1.1);}
}
.stat-box .num, .hero-stats .num{
  animation:shimmerGold 4s ease-in-out infinite;
}

/* ---- Nav 3D Logo Hover ---- */
.brand img{
  filter:drop-shadow(0 4px 12px rgba(242,185,12,.2));
  transition:transform .35s var(--ease), filter .35s var(--ease);
}
.brand:hover img{
  transform:scale(1.05) rotate(-2deg) translateZ(10px);
  filter:drop-shadow(0 8px 20px rgba(242,185,12,.4));
}

/* ---- Testimonial 3D Slide ---- */
.testi-slide{
  transform-style:preserve-3d;
  perspective:800px;
}
.testi-slide.active{
  animation:fadeUp3D .6s var(--ease);
}
@keyframes fadeUp3D{
  from{opacity:0; transform:translateY(14px) rotateX(-5deg);}
  to{opacity:1; transform:translateY(0) rotateX(0);}
}

/* ---- FAQ Accordion 3D ---- */
.faq-item{
  transition:transform .3s var(--ease);
}
.faq-item.open{
  transform:translateZ(5px);
}

/* ---- Hero with Three.js canvas ---- */
.hero{position:relative;}
.hero-canvas-container{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
.three-hero-canvas{width:100% !important; height:100% !important; display:block;}
.hero-inner{z-index:3;}

/* ---- Glassmorphism cards ---- */
.card{
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(242,185,12,.3), transparent 40%, transparent 60%, rgba(30,136,199,.2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:0; transition:opacity .4s;
}
.card:hover::before{opacity:1;}

/* ---- Gradient text animation ---- */
@keyframes gradientShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
.hero h1 .accent{
  background:linear-gradient(100deg, var(--gold-400), var(--sky-300), var(--gold-400));
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradientShift 4s ease-in-out infinite;
}

/* ---- Glow pulse on stats ---- */
@keyframes glowPulse{
  0%,100%{filter:drop-shadow(0 0 8px rgba(242,185,12,.3));}
  50%{filter:drop-shadow(0 0 16px rgba(242,185,12,.5));}
}
.stat-box .num, .hero-stats .num{animation:glowPulse 3s ease-in-out infinite;}

/* ---- Section separator glow ---- */
.seam svg path{filter:drop-shadow(0 -2px 8px rgba(242,185,12,.1));}

/* ---- Nav glassmorphism ---- */
.nav{
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
}
.nav.scrolled{
  background:rgba(255,255,255,.85);
  box-shadow:0 4px 30px rgba(7,18,38,.08);
}
[data-theme="dark"] .nav.scrolled{background:rgba(8,19,38,.85);}

/* ---- Button shine effect ---- */
.btn-gold{position:relative; overflow:hidden;}
.btn-gold::after{
  content:""; position:absolute; top:0; inset-inline-start:-100%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-20deg); transition:none;
}
.btn-gold:hover::after{inset-inline-start:120%; transition:inset-inline-start .6s ease;}

/* ---- Image hover zoom with overlay ---- */
.proj-card{overflow:hidden;}
.proj-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(7,18,38,.9), transparent 50%);
  opacity:0; transition:opacity .4s;
}
.proj-card:hover::after{opacity:1;}
.proj-overlay{z-index:2;}

/* ---- Scroll progress bar ---- */
.gsap-scroll-progress{box-shadow:0 0 8px rgba(242,185,12,.5);}

/* ---- Form field focus glow ---- */
.field input:focus, .field select:focus, .field textarea:focus{
  box-shadow:0 0 0 3px rgba(242,185,12,.15);
}

/* ---- Page hero enhanced ---- */
.page-hero{
  background:radial-gradient(ellipse 120% 100% at 50% 0%, var(--navy-700), var(--navy-900) 70%);
  position:relative; overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; top:0; left:50%; translate:-50% -50%;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(242,185,12,.08), transparent 60%);
  pointer-events:none;
}
.page-hero .container{position:relative; z-index:1;}

/* ---- Loader fade ---- */
#loader{transition:opacity .8s var(--ease), visibility .8s;}

/* ---- Responsive Enhancements ---- */

/* Tablet */
@media (max-width:980px){
  .hero{min-height:85svh;}
  .hero-stats{gap:10px;}
  .hero-stats .stat{min-width:120px;}
  .nav-row{height:72px; gap:12px;}
  .brand img{width:56px; height:56px;}
  .nav-actions{gap:6px;}
  .btn-gold{padding:10px 18px; font-size:.85rem;}
  .nav-actions .btn-gold{display:none;}
  .mobile-panel .btn-gold{display:flex !important; margin-top:16px;}
}

/* Mobile */
@media (max-width:640px){
  .hero{min-height:80svh; padding-top:90px;}
  .hero h1{font-size:clamp(1.8rem, 8vw, 2.5rem);}
  .hero p.lede{font-size:1rem;}
  .hero-cta{gap:10px;}
  .hero-cta .btn{flex:1; min-width:140px; padding:12px 16px; font-size:.85rem;}
  .hero-stats{flex-direction:column; gap:20px; padding-top:24px;}
  .hero-stats .stat{border-inline-start:none !important; border-top:none !important; padding:10px 0;}
  .hero-stats .stat:not(:first-child){border-top:1px solid rgba(255,255,255,.14);}
  
  .section-head{margin-bottom:32px;}
  section{padding-block:48px;}
  
  .split{gap:32px;}
  .about-media{aspect-ratio:4/3;}
  .badge-float{position:relative; bottom:auto; inset-inline-start:auto; margin-top:16px; max-width:100%;}
  
  .contact-wrap{gap:24px;}
  .contact-info-card, .form-card{padding:24px;}
  .form-grid{gap:12px;}
  
  .footer-grid{gap:28px;}
  .footer-bottom{flex-direction:column; text-align:center; gap:8px;}
  
  .detail-banner{min-height:40vh; padding-top:110px; padding-bottom:40px;}
  .detail-layout{gap:32px;}
  .detail-gallery{grid-template-columns:1fr 1fr; gap:10px;}
  
  .tab-panel.active{gap:30px;}
  .solution-diagram{padding:20px;}
  .flow-node{min-width:90px; padding:12px;}
  
  .value-grid{gap:12px;}
  .value-item{padding:16px;}
  
  .wa-float{width:50px; height:50px; bottom:18px; inset-inline-end:18px;}
  .to-top{bottom:18px; inset-inline-start:18px; width:40px; height:40px;}
  
  .nav-row{height:64px;}
  .brand img{width:48px; height:48px;}
  .icon-btn{width:38px; height:38px;}
  .burger{width:38px; height:38px;}
  
  .mobile-panel{inset:64px 0 0 0; padding:20px 0;}
  .mobile-panel a{font-size:1.1rem; padding:14px 0;}
  
  .testi-slide p{font-size:1.05rem;}
  .faq-q{font-size:.95rem; padding:18px 0;}
  
  .stats-band .grid-4{grid-template-columns:repeat(2,1fr); gap:24px;}
  .stat-box .num{font-size:1.8rem;}
  
  .scroll-cue{display:none;}
}

/* Small mobile */
@media (max-width:380px){
  .hero h1{font-size:1.6rem;}
  .hero-cta{flex-direction:column;}
  .hero-cta .btn{width:100%;}
  .stats-band .grid-4{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
}

/* ---- Admin Responsive Enhancements ---- */
@media (max-width:980px){
  .admin .grid-4{grid-template-columns:repeat(2,1fr);}
  .admin .page{padding:16px 14px 50px;}
  .admin .topbar{padding:0 14px; gap:10px;}
  .admin .search-trigger{min-width:0; flex:1 1 auto;}
  .admin .table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .admin .data-table{min-width:600px;}
  .admin .grid[style*="grid-template-columns:2fr 1fr"]{grid-template-columns:1fr !important;}
  .admin .grid[style*="grid-template-columns:2fr 1fr"] > .card:first-child{order:2;}
}

@media (max-width:640px){
  .admin .grid-4, .admin .grid-3, .admin .grid-2{grid-template-columns:1fr;}
  .admin .user-chip .u-meta{display:none;}
  .admin .topbar{padding:0 12px; gap:8px;}
  .admin .page-head{flex-direction:column; align-items:flex-start;}
  .admin .page-head h1{font-size:18px;}
  .admin .stat-card{padding:16px;}
  .admin .stat-value{font-size:22px;}
  .admin .quick-actions{flex-direction:column;}
  .admin .qa-btn{min-width:0; width:100%;}
  .admin .data-table{min-width:500px; font-size:12px;}
  .admin .data-table thead th, .admin .data-table tbody td{padding:10px 8px;}
  .admin .modal{width:95vw; max-height:90vh;}
  .admin .form-grid{grid-template-columns:1fr;}
  .admin .toolbar{flex-direction:column; align-items:stretch;}
  .admin .toolbar-search{min-width:0;}
  .admin .section-card{padding:16px;}
  .admin .pop{width:280px; position:fixed; inset-inline-end:10px; top:auto; bottom:10px;}
  .admin .search-modal{top:8vh; width:94vw;}
  .admin .chart-legend{flex-wrap:wrap; gap:8px;}
}

@media (max-width:400px){
  .admin .stat-card{padding:12px;}
  .admin .stat-value{font-size:18px;}
  .admin .nav-item{font-size:12px;}
  .admin .data-table{min-width:400px;}
}

/* ---- Admin Dashboard Quick Actions Grid ---- */
.quick-actions-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
}
@media (max-width:640px){
  .quick-actions-grid{grid-template-columns:1fr;}
}
.qa-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:18px 12px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface-2);
  font-size:12.5px; font-weight:700; text-align:center;
  transition:border-color .15s, background .15s, transform .15s;
  cursor:pointer; min-height:80px;
}
.qa-card:hover{border-color:var(--accent); background:rgba(212,165,55,.08); transform:translateY(-2px);}
.qa-card svg{width:22px; height:22px; color:var(--accent);}
.qa-card:active{transform:scale(.97);}