/* ===== Hikmat site motion layer (shared on all pages) ===== */
@keyframes hcFadeIn{from{opacity:0}to{opacity:1}}
@keyframes hcSlideLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:none}}
@keyframes hcSlideRight{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:none}}
@keyframes hcDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}
@keyframes hcPop{0%{opacity:0;transform:scale(.6) rotate(-8deg)}70%{transform:scale(1.06) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes hcFloatT{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes hcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hcPulse{0%{box-shadow:0 0 0 0 rgba(231,76,60,.45)}70%{box-shadow:0 0 0 16px rgba(231,76,60,0)}100%{box-shadow:0 0 0 0 rgba(231,76,60,0)}}
@keyframes hcShine{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes hcGrad{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

body{animation:hcFadeIn .6s ease both;overflow-x:clip}

/* header entrance */
.header .logo-section img{animation:hcPop .9s cubic-bezier(.2,.8,.2,1) .1s both, hcFloat 5s ease-in-out 1.2s infinite}
.header .brand-text{animation:hcSlideLeft .8s ease .25s both}
.header .contact-info{animation:hcSlideRight .8s ease .35s both}
.header .brand-text .product-name{background:linear-gradient(90deg,#e74c3c 20%,#ff9a8b 45%,#e74c3c 70%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:hcShine 4s linear infinite}
.header .phone i{animation:hcPulse 2.2s infinite;border-radius:50%}

/* nav */
nav{animation:hcDown .6s ease .4s both}
nav ul li>a{position:relative;transition:color .3s ease,background .3s ease}
@media (min-width:769px){
nav ul li>a::after{content:"";position:absolute;left:50%;bottom:6px;width:0;height:2px;background:currentColor;transition:width .3s ease,left .3s ease}
nav ul li>a:hover::after,nav ul li>a.active::after{width:60%;left:20%}
}
.dropdown{transform-origin:top center}
.dropdown a{transition:padding-left .25s ease,background .25s ease}
.dropdown a:hover{padding-left:26px}

/* scroll reveal (class added by JS, so no-JS stays visible) */
.hc-rv{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);will-change:opacity,transform}
.hc-rv.hc-from-left{transform:translateX(-60px)}
.hc-rv.hc-from-right{transform:translateX(60px)}
.hc-rv.hc-zoom{transform:scale(.88)}
.hc-rv.hc-in{opacity:1;transform:none;will-change:auto}

/* cards: lift + glow */
.product-card,.feature-card,.type-card,.recognition-card,.stat-item,.innovation-item,.contact-item,.specifications{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.product-card:hover,.feature-card:hover,.type-card:hover,.recognition-card:hover,.stat-item:hover,.innovation-item:hover,.contact-item:hover{transform:translateY(-8px);box-shadow:0 18px 38px rgba(26,58,107,.18)}
.hc-rv.hc-in.product-card:hover,.hc-rv.hc-in.feature-card:hover,.hc-rv.hc-in.type-card:hover,.hc-rv.hc-in.recognition-card:hover,.hc-rv.hc-in.stat-item:hover,.hc-rv.hc-in.innovation-item:hover,.hc-rv.hc-in.contact-item:hover{transform:translateY(-8px)}

/* images: zoom inside frame */
.product-image,.type-image-container,.spiral-images-wrapper>*{overflow:hidden}
.product-image img,.type-image,.type-image-container img{transition:transform .6s ease,filter .4s ease}
.product-image:hover img,.type-image:hover,.type-image-container:hover img{transform:scale(1.1);filter:brightness(1.05)}

/* icons */
.feature-card i,.contact-icon,.recognition-icon,.trophy-icon{transition:transform .5s ease}
.feature-card:hover i,.contact-item:hover .contact-icon,.recognition-card:hover .recognition-icon{transform:rotateY(360deg) scale(1.15)}
.trophy-icon{animation:hcFloat 3s ease-in-out infinite}

/* list items */
.features-list li,.spec-list li{transition:transform .3s ease,color .3s ease}
.features-list li:hover,.spec-list li:hover{transform:translateX(8px)}

/* buttons */
.submit-btn,button[type=submit],.btn{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.submit-btn:hover,button[type=submit]:hover,.btn:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.2)}
.submit-btn::before,button[type=submit]::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s ease}
.submit-btn:hover::before,button[type=submit]:hover::before{left:140%}

/* form fields */
.form-group input,.form-group textarea,.form-group select{transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{transform:translateY(-2px);box-shadow:0 6px 16px rgba(52,152,219,.25)}

/* scroll progress bar + back-to-top */
#hc-progress{position:fixed;top:0;left:0;height:4px;width:0;z-index:2147483000;background:linear-gradient(90deg,#e74c3c,#f39c12,#3498db);background-size:200% 100%;animation:hcGrad 4s linear infinite;pointer-events:none}
#hc-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border:0;border-radius:50%;background:#1a3a6b;color:#fff;font-size:18px;cursor:pointer;z-index:2147482000;opacity:0;transform:translateY(30px) scale(.8);pointer-events:none;transition:opacity .35s ease,transform .35s ease,background .3s ease;box-shadow:0 6px 18px rgba(0,0,0,.3)}
#hc-top.hc-show{opacity:1;transform:none;pointer-events:auto}
#hc-top:hover{background:#e74c3c;transform:translateY(-4px)}

/* subtle parallax-like moving background on body */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 15% 20%,rgba(52,152,219,.07),transparent 40%),radial-gradient(circle at 85% 75%,rgba(231,76,60,.06),transparent 40%);background-size:140% 140%;animation:hcGrad 18s ease-in-out infinite}


/* ===== Extra soft motion (v3) ===== */
@keyframes hcKen{from{scale:1}to{scale:1.07}}
@keyframes hcRing{0%{box-shadow:0 0 0 0 rgba(52,152,219,.40)}70%{box-shadow:0 0 0 14px rgba(52,152,219,0)}100%{box-shadow:0 0 0 0 rgba(52,152,219,0)}}
@keyframes hcRingRed{0%{box-shadow:0 0 0 0 rgba(231,76,60,.35)}70%{box-shadow:0 0 0 14px rgba(231,76,60,0)}100%{box-shadow:0 0 0 0 rgba(231,76,60,0)}}
@keyframes hcGlow{0%,100%{box-shadow:0 4px 15px rgba(0,0,0,.1),0 0 0 0 rgba(231,76,60,0)}50%{box-shadow:0 6px 22px rgba(0,0,0,.14),0 0 22px 4px rgba(231,76,60,.25)}}
@keyframes hcTrack{from{opacity:0;letter-spacing:8px}to{opacity:1}}
@keyframes hcRow{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes hcDrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(3vw,-4vh) scale(1.08)}100%{transform:translate(0,0) scale(1)}}

html{scroll-behavior:smooth}
::selection{background:rgba(52,152,219,.28)}

/* logo: soft glow breathing (added to existing pop + float) */
.header .logo-section img{animation:hcPop .9s cubic-bezier(.2,.8,.2,1) .1s both,hcFloat 5s ease-in-out 1.2s infinite,hcGlow 4s ease-in-out 1.2s infinite}

/* images: slow ken-burns (uses 'scale' so hover zoom still works) */
.product-image img,.type-image,.type-image-container img{animation:hcKen 9s ease-in-out infinite alternate}

/* icon rings */
.contact-icon{animation:hcRing 2.6s ease-out infinite}
.recognition-icon,.feature-card i{animation:hcFloatT 4.5s ease-in-out infinite}
.submit-btn,button[type=submit]{animation:hcRingRed 2.8s ease-out infinite}

/* headings glide in on load */
.page-title,.page-subtitle,.form-title,.details-title,.hours-title,.recognition-title,.innovation-title,.coiling-title,.type-title{animation:hcTrack 1.1s ease .2s both}

/* supertips table: rows slide in, header shimmer, visuals zoom */
.faults-table tbody tr{animation:hcRow .6s ease backwards}
.faults-table tbody tr:nth-child(1){animation-delay:.10s}.faults-table tbody tr:nth-child(2){animation-delay:.18s}
.faults-table tbody tr:nth-child(3){animation-delay:.26s}.faults-table tbody tr:nth-child(4){animation-delay:.34s}
.faults-table tbody tr:nth-child(5){animation-delay:.42s}.faults-table tbody tr:nth-child(6){animation-delay:.50s}
.faults-table tbody tr:nth-child(7){animation-delay:.58s}.faults-table tbody tr:nth-child(8){animation-delay:.66s}
.faults-table tbody tr:nth-child(n+9){animation-delay:.74s}
.faults-table thead th{background-image:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.10) 50%,transparent 60%);background-size:250% 100%;animation:hcShine 6s linear infinite}
.faults-table tbody td img{transition:transform .35s ease}
.faults-table tbody tr:hover td img{transform:scale(1.15)}

/* dropdown items stagger in (desktop hover) */
@media (min-width:769px){
nav li:hover .dropdown a{animation:hcDown .35s ease both}
nav li:hover .dropdown a:nth-child(2){animation-delay:.05s}
nav li:hover .dropdown a:nth-child(3){animation-delay:.10s}
nav li:hover .dropdown a:nth-child(4){animation-delay:.15s}
}

/* extra soft drifting colour blobs */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 80% 15%,rgba(52,152,219,.10),transparent 35%),radial-gradient(circle at 20% 85%,rgba(243,156,18,.08),transparent 35%);animation:hcDrift 22s ease-in-out infinite}


/* ===== Mobile menu bar: slightly bigger (v5) ===== */
@media (max-width:768px){
  nav .nav-container{min-height:56px;padding-top:0;padding-bottom:0}
  nav .nav-toggle{font-size:1.65rem;padding:8px 8px;min-width:46px;min-height:46px;line-height:1;transition:transform .25s ease,color .25s ease}
  nav .nav-toggle:active{transform:translateY(-50%) scale(.92)}
  nav ul a{padding:14px 20px;font-size:1rem}
  nav ul .dropdown a{padding:12px 30px;font-size:.95rem}
}


/* ===== Mobile: product names centered (types page) ===== */
@media (max-width:768px){
  .type-title,.spiral-wire-content .type-title{text-align:center !important;margin-left:0 !important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hc-rv{opacity:1!important;transform:none!important}
}
@media (max-width:768px){
  .hc-rv.hc-from-left,.hc-rv.hc-from-right{transform:translateY(30px)}
  .hc-rv.hc-from-left.hc-in,.hc-rv.hc-from-right.hc-in{transform:none}
  .header .logo-section img{animation:hcPop .9s ease .1s both}
}